Generate dynamic manifest file and icons

This update also moves the main icon images from the public folder to the src folder and remove the ones that are going to be generated and optimized by Astro.

README.md

@@ -193,12 +193,7 @@ Static files served directly to the browser are within the `public` directory at
 public/
 ├── apple-touch-icon.png
 ├── favicon.ico
-├── icon-192.png
-├── icon-512.png
 ├── icon.svg
-├── manifest.webmanifest
-├── maskable_icon.png
-├── maskable_icon_x512.png
 ├── scripts/
 │   └── vendor/
 │       ├── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)

public/manifest.webmanifest

@@ -1,35 +0,0 @@
-{
-    "short_name": "ScrewFast",
-    "name": "ScrewFast",
-    "icons": [
-      {
-        "src": "/icon-192.png",
-        "sizes": "192x192",
-        "type": "image/png",
-        "purpose": "any"
-      },
-      {
-        "src": "/icon-512.png",
-        "sizes": "512x512",
-        "type": "image/png",
-        "purpose": "any"
-      },
-      {
-        "src": "/maskable_icon_x512.png",
-        "sizes": "512x512",
-        "type": "image/png",
-        "purpose": "maskable"
-      },
-      {
-         "src": "/maskable_icon.png",
-         "sizes": "1000x1000",
-         "type": "image/png",
-         "purpose": "maskable"
-      }
-    ],
-    "display": "minimal-ui",
-    "id": "/",
-    "start_url": "/",
-    "theme_color": "#FFEDD5",
-    "background_color": "#262626"
-  }

src/components/Meta.astro

@@ -73,7 +73,7 @@ const socialImage: string = `${Astro.site}/social.png`; // Set the path for the
 <meta name="twitter:image" content={socialImage} />
 
 <!-- Links to the webmanifest and sitemap -->
-<link rel="manifest" href="/manifest.webmanifest" />
+<link rel="manifest" href="/manifest.json" />
 <!-- https://docs.astro.build/en/guides/integrations-guide/sitemap/ -->
 <link rel="sitemap" href="/sitemap-index.xml" />
 

src/pages/manifest.json.ts

@@ -0,0 +1,64 @@
+import type { APIRoute, ImageMetadata } from "astro";
+import { getImage } from "astro:assets";
+import icon from "@/images/icon.png";
+import maskableIcon from "@/images/icon-maskable.png";
+
+interface Favicon {
+  purpose: 'any' | 'maskable' | 'monochrome';
+  src: ImageMetadata;
+  sizes: number[];
+}
+
+const sizes = [192, 512];
+const favicons: Favicon[] = [
+  {
+    purpose: 'any',
+    src: icon,
+    sizes,
+  },
+  {
+    purpose: 'maskable',
+    src: maskableIcon,
+    sizes,
+   },
+];
+
+console.log(favicons);
+
+export const GET: APIRoute = async () => {
+  const icons = await Promise.all(
+    favicons.flatMap((favicon) =>
+      favicon.sizes.map(async (size) => {
+        const image = await getImage({
+          src: favicon.src,
+          width: size,
+          height: size,
+          format: "png",
+        });
+        return {
+          src: image.src,
+          sizes: `${image.options.width}x${image.options.height}`,
+          type: `image/${image.options.format}`,
+          purpose: favicon.purpose,
+        };
+      }),
+    ),
+  );
+
+  const manifest = {
+    short_name: "ScrewFast",
+    name: "ScrewFast",
+    icons,
+    display: "minimal-ui",
+    id: "some-unique-id",
+    start_url: "/",
+    theme_color: "#FFEDD5",
+    background_color: "#262626",
+  };
+
+  console.log(
+    JSON.stringify(manifest, null, 2),
+  );
+
+  return new Response(JSON.stringify(manifest));
+};