feat: Update webmanifest

riceball-tw · Feb 14, 2024 · 191aeb4 · 191aeb4
1 parent 8b044fc
commit 191aeb4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/public/images/brand/favicon/maskable-icon-512.png b/public/images/brand/favicon/maskable-icon-512.png
diff --git a/src/globalConfig.ts b/src/globalConfig.ts
@@ -10,6 +10,7 @@ export default {
     slogan: '把網頁開發知識一桿進洞',
     description:
       '是什麼原因導致網頁建構上遭遇瓶頸？以及如何突破？網頁東東用最親切簡單的方式描述如何設計與架構網頁，著重於圖像化以及實例操作，累積教學上的經驗降低每次學習新事物的成本',
+    themeColor: '#534af7',
     thumbnail: {
       width: 1200,
       height: 630,

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -84,6 +84,10 @@ const GOOGLE_ANALYTIC_ID = import.meta.env.PUBLIC_GOOGLEANALYTIC_ID
             name: 'viewport',
             content: 'width=device-width, initial-scale=1',
           },
+          {
+            name: 'theme-color',
+            content: brand.themeColor,
+          },
         ],
       }}
     />

diff --git a/src/pages/manifest.webmanifest.ts b/src/pages/manifest.webmanifest.ts
@@ -1,13 +1,19 @@
 import type { APIRoute } from 'astro';
 import globalConfig from '@/globalConfig';
 
+// https://web.dev/articles/add-manifest
 export const GET: APIRoute = () =>
   new Response(
     JSON.stringify({
       name: `${globalConfig.brand.nameTC}`,
       icons: [
-        { src: '/icon-192.png', type: 'image/png', sizes: '192x192' },
-        { src: '/icon-512.png', type: 'image/png', sizes: '512x512' },
+        { src: 'images/brand/favicon/icon-192.png', type: 'image/png', sizes: '192x192' },
+        { src: 'images/brand/favicon/icon-512.png', type: 'image/png', sizes: '512x512' },
+        { src: 'images/brand/favicon/maskable-icon-512.png', type: 'image/png', sizes: '512x512', purpose: 'maskable' },
       ],
+      start_url: '/posts',
+      display: 'fullscreen',
+      theme_color: globalConfig.brand.themeColor,
+      background_color: globalConfig.brand.themeColor,
     }),
   );