chore(*): Add favicon and manifest

package-lock.json

@@ -23,6 +23,7 @@
         "eslint": "^8.17.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
+        "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.0",
         "react-dev-utils": "^12.0.1",
         "sass": "^1.52.3",
@@ -31,7 +32,8 @@
         "typescript": "^4.7.3",
         "webpack": "^5.73.0",
         "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "^4.9.2"
+        "webpack-dev-server": "^4.9.2",
+        "webpack-webmanifest-loader": "^2.0.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -5209,6 +5211,26 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -9307,6 +9329,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack-webmanifest-loader": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-webmanifest-loader/-/webpack-webmanifest-loader-2.0.2.tgz",
+      "integrity": "sha512-E+OefPW2D0EzwDzGlgRAFj4nUoZRp17dHzGng081hReWannJGZ8dxZErbEnFmaR+Z2A6hWYAv7yEKFk+bTuLNA==",
+      "dev": true
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -13353,6 +13381,16 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      }
+    },
     "filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -16304,6 +16342,12 @@
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true
     },
+    "webpack-webmanifest-loader": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-webmanifest-loader/-/webpack-webmanifest-loader-2.0.2.tgz",
+      "integrity": "sha512-E+OefPW2D0EzwDzGlgRAFj4nUoZRp17dHzGng081hReWannJGZ8dxZErbEnFmaR+Z2A6hWYAv7yEKFk+bTuLNA==",
+      "dev": true
+    },
     "websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",

package.json

@@ -26,6 +26,7 @@
     "eslint": "^8.17.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "react-dev-utils": "^12.0.1",
     "sass": "^1.52.3",
@@ -34,7 +35,8 @@
     "typescript": "^4.7.3",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.2"
+    "webpack-dev-server": "^4.9.2",
+    "webpack-webmanifest-loader": "^2.0.2"
   },
   "dependencies": {
     "@types/d3": "^7.4.0",

src/assets/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "SelectionWheel",
+  "short_name": "SW",
+  "description": "A fun and simple selection wheel.",
+  "icons": [
+    {
+      "src": "./android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#F80",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "start_url": "/"
+}

src/index.ts

@@ -1,5 +1,9 @@
 import * as d3 from 'd3';
 
+require('./assets/favicon.ico');
+require('./assets/android-chrome-192x192.png');
+require('./assets/android-chrome-512x512.png');
+
 const padding = {
   top: 20,
   right: 40,

src/template.html

@@ -6,6 +6,8 @@
         <meta name="robots" content="noindex"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title><%= htmlWebpackPlugin.options.title %></title>
+        <link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" />
+        <link rel="shortcut icon" href="favicon.ico">
     </head>
     <body>
         <div id="spinner-container">

webpack.config.js

@@ -58,6 +58,24 @@ module.exports = {
         test: /\.(png|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
+      {
+        // Add support for favicon
+        test: /\.ico$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]', // <-- retain original file name
+            },
+          },
+        ],
+      },
+      {
+        // Add support for manifest
+        test: /\.webmanifest$/i,
+        use: 'webpack-webmanifest-loader',
+        type: 'asset/resource',
+      },
       {
         // Add inlining of SVG
         test: /\.svg$/i,