Add homescreen icons for ios

drakeapps · Jan 12, 2021 · 0d630e6 · 0d630e6
1 parent ffbf387
commit 0d630e6
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 0 deletions.
diff --git a/web-ui/package-lock.json b/web-ui/package-lock.json
diff --git a/web-ui/package.json b/web-ui/package.json
@@ -39,6 +39,7 @@
 				"clean-webpack-plugin": "^2",
 				"core-js": "^2.6.9",
 				"css-loader": "^3",
+				"file-loader": "^6.2.0",
 				"fontsource-roboto": "^3.0.3",
 				"html-webpack-plugin": "^3.2.0",
 				"humanize-duration": "3.18.0",

diff --git a/web-ui/src/images/apple-touch-icon-114x114.png b/web-ui/src/images/apple-touch-icon-114x114.png
diff --git a/web-ui/src/images/apple-touch-icon-120x120.png b/web-ui/src/images/apple-touch-icon-120x120.png
diff --git a/web-ui/src/images/apple-touch-icon-144x144.png b/web-ui/src/images/apple-touch-icon-144x144.png
diff --git a/web-ui/src/images/apple-touch-icon-152x152.png b/web-ui/src/images/apple-touch-icon-152x152.png
diff --git a/web-ui/src/images/apple-touch-icon-180x180.png b/web-ui/src/images/apple-touch-icon-180x180.png
diff --git a/web-ui/src/images/apple-touch-icon-57x57.png b/web-ui/src/images/apple-touch-icon-57x57.png
diff --git a/web-ui/src/images/apple-touch-icon-72x72.png b/web-ui/src/images/apple-touch-icon-72x72.png
diff --git a/web-ui/src/images/apple-touch-icon-76x76.png b/web-ui/src/images/apple-touch-icon-76x76.png
diff --git a/web-ui/src/images/apple-touch-icon.png b/web-ui/src/images/apple-touch-icon.png
diff --git a/web-ui/src/index.html b/web-ui/src/index.html
@@ -1,6 +1,17 @@
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png" />
+<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png" />
+<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76.png" />
+<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png" />
+<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120.png" />
+<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png" />
+<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180x180.png" />
+<meta name="apple-mobile-web-app-title" content="CloudLED">
+<meta name="apple-mobile-web-app-capable" content="yes">
 <meta charset="UTF-8">
 <title>Cloud LED Controller</title>
 </head>

diff --git a/web-ui/src/index.js b/web-ui/src/index.js
@@ -31,6 +31,17 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 
 import './index.scss';
 
+// pull in all icons
+import icon0 from './images/apple-touch-icon.png';
+import icon57 from './images/apple-touch-icon-57x57.png';
+import icon72 from './images/apple-touch-icon-72x72.png';
+import icon76 from './images/apple-touch-icon-76x76.png';
+import icon114 from './images/apple-touch-icon-114x114.png';
+import icon120 from './images/apple-touch-icon-120x120.png';
+import icon144 from './images/apple-touch-icon-144x144.png';
+import icon152 from './images/apple-touch-icon-152x152.png';
+import icon180 from './images/apple-touch-icon-180x180.png';
+
 const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
 	const hex = x.toString(16)
 	return hex.length === 1 ? '0' + hex : hex

diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js
@@ -33,6 +33,15 @@ module.exports = {
       {
         test: /\.(s*)css$/,
         use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[path][name].[ext]'
+          }
+        }
       }
     ]
   },