Remove favicons-webpack-plugin (#811)

* Remove favicons-webpack-plugin * Copy android/* icons to dist * Add favicon ico
cinnyapp · Sep 4, 2022 · e6661d3 · e6661d3
1 parent 678e0dc
commit e6661d3
Show file tree

Hide file tree

Showing 26 changed files with 223 additions and 3,535 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,8 +65,6 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "favicons": "^6.2.2",
-    "favicons-webpack-plugin": "^5.0.2",
     "html-loader": "^4.1.0",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^2.6.1",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,28 @@
     <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
     <meta property="og:description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
     <meta name="theme-color" content="#000000">
+
+
+    <link id="favicon" rel="shortcut icon" href="./favicon.ico" />
+
+    <link rel="manifest" href="./manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="application-name" content="Cinny" />
+    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+    <link rel="apple-touch-icon" sizes="57x57" href="./res/apple/apple-touch-icon-57x57.png"/>
+    <link rel="apple-touch-icon" sizes="60x60" href="./res/apple/apple-touch-icon-60x60.png"/>
+    <link rel="apple-touch-icon" sizes="72x72" href="./res/apple/apple-touch-icon-72x72.png"/>
+    <link rel="apple-touch-icon" sizes="76x76" href="./res/apple/apple-touch-icon-76x76.png"/>
+    <link rel="apple-touch-icon" sizes="114x114" href="./res/apple/apple-touch-icon-114x114.png"/>
+    <link rel="apple-touch-icon" sizes="120x120" href="./res/apple/apple-touch-icon-120x120.png"/>
+    <link rel="apple-touch-icon" sizes="144x144" href="./res/apple/apple-touch-icon-144x144.png"/>
+    <link rel="apple-touch-icon" sizes="152x152" href="./res/apple/apple-touch-icon-152x152.png"/>
+    <link rel="apple-touch-icon" sizes="167x167" href="./res/apple/apple-touch-icon-167x167.png"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="./res/apple/apple-touch-icon-180x180.png"/>
+
 </head>
 <body id="appBody">
     <div id="root"></div>

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,59 @@
+{
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "Yet another matrix client",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "portrait",
+  "start_url": "/",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/res/android/android-chrome-144x144.png b/public/res/android/android-chrome-144x144.png
diff --git a/public/res/android/android-chrome-192x192.png b/public/res/android/android-chrome-192x192.png
diff --git a/public/res/android/android-chrome-256x256.png b/public/res/android/android-chrome-256x256.png
diff --git a/public/res/android/android-chrome-36x36.png b/public/res/android/android-chrome-36x36.png
diff --git a/public/res/android/android-chrome-384x384.png b/public/res/android/android-chrome-384x384.png
diff --git a/public/res/android/android-chrome-48x48.png b/public/res/android/android-chrome-48x48.png
diff --git a/public/res/android/android-chrome-512x512.png b/public/res/android/android-chrome-512x512.png
diff --git a/public/res/android/android-chrome-72x72.png b/public/res/android/android-chrome-72x72.png
diff --git a/public/res/android/android-chrome-96x96.png b/public/res/android/android-chrome-96x96.png
diff --git a/public/res/apple/apple-touch-icon-114x114.png b/public/res/apple/apple-touch-icon-114x114.png
diff --git a/public/res/apple/apple-touch-icon-120x120.png b/public/res/apple/apple-touch-icon-120x120.png
diff --git a/public/res/apple/apple-touch-icon-144x144.png b/public/res/apple/apple-touch-icon-144x144.png
diff --git a/public/res/apple/apple-touch-icon-152x152.png b/public/res/apple/apple-touch-icon-152x152.png
diff --git a/public/res/apple/apple-touch-icon-167x167.png b/public/res/apple/apple-touch-icon-167x167.png
diff --git a/public/res/apple/apple-touch-icon-180x180.png b/public/res/apple/apple-touch-icon-180x180.png
diff --git a/public/res/apple/apple-touch-icon-57x57.png b/public/res/apple/apple-touch-icon-57x57.png
diff --git a/public/res/apple/apple-touch-icon-60x60.png b/public/res/apple/apple-touch-icon-60x60.png
diff --git a/public/res/apple/apple-touch-icon-72x72.png b/public/res/apple/apple-touch-icon-72x72.png
diff --git a/public/res/apple/apple-touch-icon-76x76.png b/public/res/apple/apple-touch-icon-76x76.png
diff --git a/src/util/common.js b/src/util/common.js
@@ -120,7 +120,9 @@ export function cssVar(name) {
 }
 
 export function setFavicon(url) {
-  document.querySelector('[rel=icon]').href = url;
+  const favicon = document.querySelector('#favicon');
+  if (!favicon) return;
+  favicon.setAttribute('href', url);
 }
 
 export function copyToClipboard(text) {

diff --git a/webpack.common.js b/webpack.common.js
@@ -1,5 +1,4 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
 const webpack = require('webpack');
 
@@ -52,27 +51,12 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({ template: './public/index.html' }),
-    new FaviconsWebpackPlugin({
-      logo: './public/res/svg/cinny.svg',
-      mode: 'webapp',
-      devMode: 'light',
-      favicons: {
-        appName: 'Cinny',
-        appDescription: 'Yet another matrix client',
-        developerName: 'Ajay Bura',
-        developerURL: 'https://github.com/ajbura',
-        icons: {
-          coast: false,
-          yandex: false,
-          appleStartup: false,
-        }
-      }
-    }),
     new CopyPlugin({
       patterns: [
         { from: 'olm.wasm' },
         { from: '_redirects' },
         { from: 'config.json' },
+        { from: 'public/res/android'}
       ],
     }),
     new webpack.ProvidePlugin({