diff --git a/package-lock.json b/package-lock.json
index 168cc77..0b3d162 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 87ddce4..4297c52 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/android-chrome-192x192.png b/src/assets/android-chrome-192x192.png
new file mode 100644
index 0000000..95813a3
Binary files /dev/null and b/src/assets/android-chrome-192x192.png differ
diff --git a/src/assets/android-chrome-512x512.png b/src/assets/android-chrome-512x512.png
new file mode 100644
index 0000000..0e6fc5a
Binary files /dev/null and b/src/assets/android-chrome-512x512.png differ
diff --git a/src/assets/apple-touch-icon.png b/src/assets/apple-touch-icon.png
new file mode 100644
index 0000000..fd2cd8a
Binary files /dev/null and b/src/assets/apple-touch-icon.png differ
diff --git a/src/assets/favicon-16x16.png b/src/assets/favicon-16x16.png
new file mode 100644
index 0000000..61ac4ee
Binary files /dev/null and b/src/assets/favicon-16x16.png differ
diff --git a/src/assets/favicon-32x32.png b/src/assets/favicon-32x32.png
new file mode 100644
index 0000000..3d8043f
Binary files /dev/null and b/src/assets/favicon-32x32.png differ
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
new file mode 100644
index 0000000..6ebfe34
Binary files /dev/null and b/src/assets/favicon.ico differ
diff --git a/src/assets/manifest.webmanifest b/src/assets/manifest.webmanifest
new file mode 100644
index 0000000..f81c207
--- /dev/null
+++ b/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": "/"
+}
diff --git a/src/index.ts b/src/index.ts
index 2833c97..fd41cc5 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/template.html b/src/template.html
index 4584b0b..e06f0e3 100644
--- a/src/template.html
+++ b/src/template.html
@@ -6,6 +6,8 @@
<%= htmlWebpackPlugin.options.title %>
+
+
diff --git a/webpack.config.js b/webpack.config.js
index 67dbbd2..702dcbf 100644
--- a/webpack.config.js
+++ b/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,