Merge pull request #102 from mediamonks/feature/favicon-and-brand-logo

Add favicon & brand logo
mediamonks · Oct 3, 2024 · 084c477 · 084c477
2 parents bd71226 + 7120d13
commit 084c477
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 10 deletions.
diff --git a/src/preview/dist/Favicon_black_32X32.png b/src/preview/dist/Favicon_black_32X32.png
diff --git a/src/preview/dist/Monks-Logo_Small_White.png b/src/preview/dist/Monks-Logo_Small_White.png
diff --git a/src/preview/dist/index.html b/src/preview/dist/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <link rel="icon" href="Favicon_black_32X32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->

diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js
diff --git a/src/preview/public/Favicon_black_32X32.png b/src/preview/public/Favicon_black_32X32.png
diff --git a/src/preview/public/Monks-Logo_Small_White.png b/src/preview/public/Monks-Logo_Small_White.png
diff --git a/src/preview/public/index.html b/src/preview/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <link rel="icon" href="Favicon_black_32X32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->

diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js
@@ -192,17 +192,27 @@ export default function Previews({ data }) {
     <>
       <AppBar position="sticky">
         <Toolbar className={styles.toolbar}>
-          <Box sx={{ display: 'flex', gap: '10px' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
             {
               data.isGoogleSpreadsheetBanner
-              ? <Tooltip title="Reload dynamic data">
-                  <Button onClick={handleReloadDynamicData} color="inherit">
+              ? <Tooltip title="Reload dynamic data" sx={{marginRight: "10px"}}>
+                  <Button className="dynamic-reload" onClick={handleReloadDynamicData} color="inherit">
                     <CachedIcon />
                   </Button>
                 </Tooltip>
               : <></>
             }
-            <Tooltip title={(new Date(data.timestamp)).toLocaleString()}>
+            <Box className="logos" display="flex" gap="0px" alignItems="center">
+              <img src="Monks-Logo_Small_White.png" />
+              {
+                data.client &&
+                <Box display="flex" gap="10px" alignItems="center" sx={{marginRight: "10px"}}>
+                  <span>&times;</span>
+                  <img src={data.client} />
+                </Box>
+              }
+            </Box>
+            <Tooltip title={(new Date(data.timestamp)).toLocaleString()} sx={{marginLeft: "10px"}}>
               <Typography align="left" variant="h5" component="div">
                 Preview
               </Typography>

diff --git a/src/preview/src/index.css b/src/preview/src/index.css
@@ -29,3 +29,18 @@ code {
     }
   }
 }
+
+.logos img {
+  height: 30px;
+}
+
+.logos span {
+  height: 36px;
+  line-height: 36px;
+}
+
+.dynamic-reload {
+  height: 36px !important;
+  min-width: auto !important;
+  aspect-ratio: 1 / 1 !important;
+}
diff --git a/src/webpack/buildPreview.js b/src/webpack/buildPreview.js
@@ -115,14 +115,22 @@ module.exports = async function buildPreview(result, qualities, outputDir) {
         },
         info: (result && result[bundleName])
           ? result[bundleName].settings.data.settings.info
+          : undefined,
+        client: (result && result[bundleName])
+          ? result[bundleName].settings.data.settings.client
           : undefined
       }
     })
   ))
   .filter(ad => ad != undefined)
 
+  const client = result[Object.keys(result)[0]]?.settings.data.settings.client
+
   const adsList = {
     timestamp: Date.now(),
+    client: client
+      ? `client.${client.split('.').at(-1)}`
+      : undefined,
     ads: allAds
   };
 
@@ -133,6 +141,14 @@ module.exports = async function buildPreview(result, qualities, outputDir) {
   await fs.copy(path.join(__dirname, `../preview/dist`), outputDir, {
     overwrite: true,
   });
+
+  // copy client logo
+  if (client) {
+    console.log("copying client logo...");
+    await fs.copy(client, path.join(outputDir, `client.${client.split('.').at(-1)}`), {
+      overwrite: true,
+    });
+  }
 
   // write the result to ads.json in the preview dir
   console.log(`creating ${outputDir}/data/ads.json`)

diff --git a/src/webpack/devServer.js b/src/webpack/devServer.js
@@ -84,9 +84,17 @@ ${chalk.grey.bold('-------------------------------------------------------')}
 
   openLocation && open(`${httpLocation}?gsdevtools=true`);
 
+  const client = configs[0].settings.data.settings.client
+  if (client) {
+    app.get(`/client.${client.split('.').at(-1)}`, (req, res) => {
+      res.sendFile(configs[0].settings.data.settings.client)
+    })
+  }
+
   app.get('/data/ads.json', (req, res) => {
     res.json({
       isGoogleSpreadsheetBanner: typeof configs[0].settings.data.settings.contentSource !== 'undefined',
+      client: client ? `client.${client.split('.').at(-1)}` : undefined,
       ads: settingsList.map(e => {
         const assetName = getNameFromLocation(e.location)
         const bundleName = e.data.settings.bundleName || getNameFromLocation(e.location)
@@ -100,7 +108,7 @@ ${chalk.grey.bold('-------------------------------------------------------')}
               url,
             },
           },
-          info: e.data.settings.info
+          info: e.data.settings.info,
         }
       })
     })

diff --git a/src/webpack/devServerParallel.js b/src/webpack/devServerParallel.js
@@ -98,9 +98,17 @@ ${chalk.grey.bold('-------------------------------------------------------')}
 
   openLocation && open(httpLocation);
 
+  const client = configs[0].settings.data.settings.client
+  if (client) {
+    app.get(`/client.${client.split('.').at(-1)}`, (req, res) => {
+      res.sendFile(configs[0].settings.data.settings.client)
+    })
+  }
+
   app.get('/data/ads.json', (req, res) => {
     res.json({
       isGoogleSpreadsheetBanner: typeof configs[0].settings.data.settings.contentSource !== 'undefined',
+      client: client ? `client.${client.split('.').at(-1)}` : undefined,
       ads: settingsList.map(e => {
         const assetName = getNameFromLocation(e.location)
         const bundleName = e.data.settings.bundleName || getNameFromLocation(e.location)
@@ -114,7 +122,7 @@ ${chalk.grey.bold('-------------------------------------------------------')}
               url,
             },
           },
-          info: e.data.settings.info
+          info: e.data.settings.info,
         }
       })
     })