chore(project): dynamic manifest.json

Co-authored-by: Mike van Veenhuijzen <[email protected]>
Videodock · Jan 29, 2024 · 6a10ea5 · 6a10ea5
1 parent 06af46f
commit 6a10ea5
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 24 deletions.
diff --git a/platforms/web/index.html b/platforms/web/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>JW OTT Webapp</title>
+  <title><% name %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <meta name="description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true" />
+  <meta name="description" content="<% description %>" data-react-helmet="true" />
   <meta name="twitter:card" content="summary" data-react-helmet="true"  />
-  <meta property="og:title" content="JW OTT Webapp" data-react-helmet="true" >
-  <meta property="og:description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true">
+  <meta property="og:title" content="<% name %>" data-react-helmet="true" >
+  <meta property="og:description" content="<% description %>" data-react-helmet="true">
   <meta property="og:image" content="/images/icons/app-icon.png" data-react-helmet="true">
 
   <link rel="icon" href="/images/icons/favicon.ico" type="image/x-icon" sizes="any">

diff --git a/platforms/web/package.json b/platforms/web/package.json
@@ -92,6 +92,7 @@
   },
   "optionalDependencies": {
     "gh-pages": "^3.2.3",
-    "lighthouse": "^9.6.7"
+    "lighthouse": "^9.6.7",
+    "sharp": "^0.33.2"
   }
 }
diff --git a/platforms/web/public/images/icons/android-chrome-144x144.png b/platforms/web/public/images/icons/android-chrome-144x144.png
diff --git a/platforms/web/public/manifest.json b/platforms/web/public/manifest.json
diff --git a/platforms/web/types/global.d.ts b/platforms/web/types/global.d.ts
@@ -7,3 +7,9 @@ interface Window {
 interface HTMLDivElement {
   inert: boolean;
 }
+
+type OTTConfig = {
+  name: string;
+  shortname: string;
+  description: string;
+};
diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
@@ -20,6 +20,12 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
 
   const localFile = initSettings(mode);
 
+  const app: OTTConfig = {
+    name: process.env.APP_NAME || 'JW OTT Webapp',
+    shortname: process.env.APP_SHORT_NAME || 'JW OTT',
+    description: process.env.APP_DESCRIPTION || 'JW OTT Webapp is an open-source, dynamically generated video website.',
+  };
+
   // Make sure to builds are always production type,
   // otherwise modes other than 'production' get built in dev
   if (command === 'build') {
@@ -93,11 +99,38 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       eslintPlugin({ emitError: mode === 'production' || mode === 'demo' || mode === 'preview' }), // Move linting to pre-build to match dashboard
       StylelintPlugin(),
       svgr(),
-      VitePWA(),
+      VitePWA({
+        manifestFilename: 'manifest.json',
+        manifest: {
+          name: app.name,
+          description: app.description,
+          short_name: app.shortname,
+          display: 'standalone',
+          start_url: '/',
+          theme_color: '#DD0000',
+          orientation: 'any',
+          background_color: '#000',
+          related_applications: [],
+          prefer_related_applications: false,
+          icons: [
+            {
+              src: 'images/icons/pwa-192x192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: 'images/icons/pwa-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+            },
+          ],
+        },
+      }),
       createHtmlPlugin({
         minify: true,
         inject: {
           tags: getGoogleScripts(),
+          data: app,
         },
       }),
       viteStaticCopy({