refactor: code improvements

Author: tiamo

.env

@@ -0,0 +1,10 @@
+VITE_APP_NAME=Jpool
+#VITE_APP_SHORT_NAME
+#VITE_APP_DESCRIPTION=
+#VITE_APP_KEYWORDS=
+
+# sitemap hostname
+#VITE_APP_URL=
+
+# sentry
+#VITE_SENTRY_DSN=

public/favicon.svg

@@ -4,10 +4,10 @@ const primaryColor = '#28414c'
 const baseURL = import.meta.env.BASE_URL || '/'
 
 useHead({
-  title: 'Starter Webapp',
+  title: import.meta.env.VITE_APP_NAME || 'Starter',
   meta: [
-    { name: 'description', content: '' },
-    { name: 'keywords', content: '' },
+    { name: 'description', content: import.meta.env.VITE_APP_DESCRIPTION },
+    { name: 'keywords', content: import.meta.env.VITE_APP_KEYWORDS },
     {
       name: 'theme-color',
       content: () => isDark.value ? primaryColor : '#ffffff',

src/App.vue

@@ -4,6 +4,10 @@ type ImportMetaEnv = {
   readonly MODE: 'production' | 'development' | 'staging'
   readonly VERSION: string
 
-  readonly VITE_SENTRY_DSN?: string
   readonly VITE_APP_URL?: string
+  readonly VITE_APP_NAME?: string
+  readonly VITE_APP_SHORT_NAME?: string
+  readonly VITE_APP_DESCRIPTION?: string
+  readonly VITE_APP_KEYWORDS?: string
+  readonly VITE_SENTRY_DSN?: string
 }

types/env.d.ts

@@ -120,29 +120,30 @@ export default defineConfig(({ mode, isSsrBuild }) => {
       VitePWA({
         registerType: 'autoUpdate',
         workbox: {
-          navigateFallback: '404.html',
-          offlineGoogleAnalytics: true,
+          navigateFallback: '/404.html',
+          globPatterns: ['**/*.{js,css,webp,png,svg,gif,mp4,ico,woff2}'],
         },
-        includeAssets: ['/*.{ico,svg,png}'],
-        // includeAssets: ['favicon.ico', 'favicon.svg', 'favicon-dark.svg', 'safari-pinned-tab.svg'],
+        includeAssets: ['**/*.{webp,png,jpg,svg,gif,ico,txt,woff2}'],
         manifest: {
-          name: 'Jpool',
-          short_name: 'Jpool',
+          name: env.VITE_APP_NAME ?? 'Starter',
+          short_name: env.VITE_APP_SHORT_NAME ?? env.VITE_APP_NAME ?? 'Starter',
+          description: env.VITE_APP_DESCRIPTION,
           theme_color: '#ffffff',
+          display: 'minimal-ui',
           icons: [
             {
-              src: `pwa-192x192.png`,
+              src: '/pwa-192x192.png',
               sizes: '192x192',
               type: 'image/png',
             },
             {
-              src: `pwa-512x512.png`,
+              src: '/pwa-512x512.png',
               sizes: '512x512',
               type: 'image/png',
             },
             {
-              src: `favicon.svg`,
-              sizes: '165x165',
+              src: '/favicon.svg',
+              sizes: '50x50',
               type: 'image/svg',
               purpose: 'any maskable',
             },
@@ -183,8 +184,6 @@ export default defineConfig(({ mode, isSsrBuild }) => {
         preload: 'swap',
         pruneSource: true,
         reduceInlineStyles: false,
-        inlineFonts: false,
-        preloadFonts: false,
       },
       includedRoutes(paths) {
         const staticPaths = paths.filter(path => !path.includes(':'))