fix(491): remove favicon package + use favicon.svg by default (#537)

* fix(491): remove favicon package + use favicon.svg by default Signed-off-by: Nastya Rusina <[email protected]> * chore: resolve yarn.lock merge conflict Signed-off-by: Nastya Rusina <[email protected]>
flyteorg · Jul 1, 2022 · 59d5d2a · 59d5d2a
1 parent 506b953
commit 59d5d2a
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 936 deletions.
diff --git a/packages/zapp/console/package.json b/packages/zapp/console/package.json
@@ -104,6 +104,7 @@
         "compression-webpack-plugin": "^9.2.0",
         "contrast": "^1.0.1",
         "copy-to-clipboard": "^3.0.8",
+        "copy-webpack-plugin": "^11.0.0",
         "cronstrue": "^1.31.0",
         "d3-dag": "^0.3.4",
         "d3-shape": "^1.2.2",
@@ -116,8 +117,6 @@
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-react": "^7.29.4",
         "eslint-plugin-react-hooks": "^4.3.0",
-        "favicons": "^6.2.0",
-        "favicons-webpack-plugin": "^5.0.2",
         "fork-ts-checker-webpack-plugin": "^7.2.1",
         "html-webpack-plugin": "^5.5.0",
         "husky": "^4.2.5",

diff --git a/packages/zapp/console/src/assets/favicon.ico b/packages/zapp/console/src/assets/favicon.ico
diff --git a/packages/zapp/console/src/assets/favicon.png b/packages/zapp/console/src/assets/favicon.png
diff --git a/packages/zapp/console/src/assets/favicon.svg b/packages/zapp/console/src/assets/favicon.svg
diff --git a/packages/zapp/console/src/assets/index.html b/packages/zapp/console/src/assets/index.html
@@ -8,6 +8,27 @@
             href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,700"
             rel="stylesheet"
         />
+        <!-- Minimal set of favicons, aligned with https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
+        <link
+            rel="manifest"
+            href="<%= htmlWebpackPlugin.options.publicPath %>/manifest.webmanifest"
+        />
+        <!-- 16x16, 32x32 -->
+        <link
+            rel="icon"
+            href="<%= htmlWebpackPlugin.options.publicPath %>/favicon.ico"
+            sizes="any"
+        />
+        <link
+            rel="icon"
+            href="<%= htmlWebpackPlugin.options.publicPath %>/favicon.svg"
+            type="image/svg+xml"
+        />
+        <!-- 180x180 -->
+        <link
+            rel="apple-touch-icon"
+            href="<%= htmlWebpackPlugin.options.publicPath %>/apple-touch-icon.png"
+        />
     </head>
     <body>
         <div id="react-app"></div>

diff --git a/packages/zapp/console/src/assets/public/apple-touch-icon.png b/packages/zapp/console/src/assets/public/apple-touch-icon.png
diff --git a/packages/zapp/console/src/assets/public/icon-192.png b/packages/zapp/console/src/assets/public/icon-192.png
diff --git a/packages/zapp/console/src/assets/public/icon-512.png b/packages/zapp/console/src/assets/public/icon-512.png
diff --git a/packages/zapp/console/src/assets/public/manifest.webmanifest b/packages/zapp/console/src/assets/public/manifest.webmanifest
@@ -0,0 +1,7 @@
+{
+    "name": "My website",
+    "icons": [
+        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
+    ]
+}
diff --git a/packages/zapp/console/webpack.common.config.ts b/packages/zapp/console/webpack.common.config.ts
@@ -6,8 +6,8 @@ import * as webpack from 'webpack';
 import { processEnv as env, ASSETS_PATH as publicPath } from './env';
 
 const { StatsWriterPlugin } = require('webpack-stats-plugin');
-const FavIconWebpackPlugin = require('favicons-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 
 /** Current service name */
@@ -39,13 +39,6 @@ export const imageAndFontsRule: webpack.RuleSetRule = {
   type: 'asset/resource',
 };
 
-export const favIconPlugin = new FavIconWebpackPlugin({
-  logo: path.resolve(__dirname, 'src/assets/favicon.png'),
-  // we can add '[fullhash:8]/' to the end of the file in future
-  // if this one will be changed - ensure that OneClick will still be working
-  prefix: './',
-});
-
 /** Write client stats to a JSON file for production */
 export const statsWriterPlugin = new StatsWriterPlugin({
   filename: 'client-stats.json',
@@ -133,9 +126,16 @@ export const clientConfig: webpack.Configuration = {
   },
   plugins: [
     new ForkTsCheckerWebpackPlugin({ typescript: { configFile, build: true } }),
-    favIconPlugin,
     statsWriterPlugin,
     getDefinePlugin(false),
+    new CopyPlugin({
+      patterns: [
+        // copy all to root, to ensure FlyteOneClick support
+        { from: './src/assets/public', to: '' },
+        { from: './src/assets/favicon.ico', to: '' },
+        { from: './src/assets/favicon.svg', to: '' },
+      ],
+    }),
   ],
 };
 

diff --git a/packages/zapp/console/webpack.dev.config.ts b/packages/zapp/console/webpack.dev.config.ts
@@ -2,7 +2,12 @@ import * as webpack from 'webpack';
 import * as HTMLWebpackPlugin from 'html-webpack-plugin';
 import * as path from 'path';
 import chalk from 'chalk';
-import { LOCAL_DEV_HOST, CERTIFICATE_PATH, ADMIN_API_USE_SSL } from './env';
+import {
+  LOCAL_DEV_HOST,
+  CERTIFICATE_PATH,
+  ADMIN_API_USE_SSL,
+  ASSETS_PATH as publicPath,
+} from './env';
 
 const { merge } = require('webpack-merge');
 const fs = require('fs');
@@ -64,6 +69,7 @@ export const clientConfig: webpack.Configuration = merge(common.default.clientCo
   plugins: [
     new HTMLWebpackPlugin({
       template: './src/assets/index.html',
+      publicPath,
       inject: 'body',
       minify: false,
       hash: false,

diff --git a/packages/zapp/console/webpack.prod.config.ts b/packages/zapp/console/webpack.prod.config.ts
@@ -1,6 +1,7 @@
 import * as webpack from 'webpack';
 import * as CompressionWebpackPlugin from 'compression-webpack-plugin';
 import * as HTMLWebpackPlugin from 'html-webpack-plugin';
+import { ASSETS_PATH as publicPath } from './env';
 
 const { merge } = require('webpack-merge');
 
@@ -48,6 +49,7 @@ export const clientConfig: webpack.Configuration = merge(common.default.clientCo
     }),
     new HTMLWebpackPlugin({
       template: './src/assets/index.html',
+      publicPath,
       inject: 'body',
       minify: {
         minifyCSS: true,