Merge pull request #326 from yamadashy/feat/website-pwa

chore(deps): Add configuration to make website PWA-ready
yamadashy · Jan 28, 2025 · b4fe4f8 · b4fe4f8
2 parents 3eff6ea + a5523b3
commit b4fe4f8
Show file tree

Hide file tree

Showing 7 changed files with 5,696 additions and 1,224 deletions.
diff --git a/website/client/.vitepress/config/configShard.ts b/website/client/.vitepress/config/configShard.ts
@@ -1,4 +1,5 @@
 import { visualizer } from 'rollup-plugin-visualizer';
+import { type ManifestOptions, VitePWA } from 'vite-plugin-pwa';
 import { defineConfig } from 'vitepress';
 import { configEsSearch } from './configEs';
 import { configJaSearch } from './configJa';
@@ -8,6 +9,34 @@ import { configZhCnSearch } from './configZhCn';
 
 const googleAnalyticsTag = 'G-7PTT4PLC69';
 
+// PWA Manifest Configuration
+const manifest: Partial<ManifestOptions> = {
+  name: 'Repomix',
+  short_name: 'Repomix',
+  description: 'Pack your codebase into AI-friendly formats',
+  theme_color: '#f97316',
+  background_color: '#ffffff',
+  display: 'standalone',
+  icons: [
+    {
+      src: '/images/pwa/repomix-192x192.png',
+      sizes: '192x192',
+      type: 'image/png',
+    },
+    {
+      src: '/images/pwa/repomix-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+    },
+    {
+      src: '/images/pwa/repomix-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+      purpose: 'any maskable',
+    },
+  ],
+};
+
 export const configShard = defineConfig({
   title: 'Repomix',
 
@@ -75,6 +104,11 @@ export const configShard = defineConfig({
 
     // PWA
     ['meta', { name: 'theme-color', content: '#f97316' }],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+    ['meta', { name: 'apple-mobile-web-app-title', content: 'Repomix' }],
+    ['link', { rel: 'apple-touch-icon', href: '/images/pwa/repomix-192x192.png' }],
+    ['link', { rel: 'mask-icon', href: '/images/repomix-logo.svg', color: '#f97316' }],
 
     // Google Analytics
     [
@@ -100,5 +134,44 @@ export const configShard = defineConfig({
         plugins: [visualizer()],
       },
     },
+    plugins: [
+      VitePWA({
+        registerType: 'autoUpdate',
+        manifest,
+        workbox: {
+          globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}'],
+          runtimeCaching: [
+            {
+              urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'google-fonts-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+            {
+              urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'gstatic-fonts-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+          ],
+        },
+      }),
+    ],
   },
 });