refactor: use dynamifest

app/layout.tsx

@@ -3,39 +3,36 @@ import { GeistSans } from "geist/font/sans";
 import { ThemeProvider } from "next-themes";
 import { Header } from "@/components/header";
 import { SocketProvider } from "@/components/socket-provider";
+import { app } from "@/utils/const";
 import "@/globals.css";
 
-const title = "mmmines!";
-const description = "an endless, massive multiplayer minesweeper game";
-
 export const metadata: Metadata = {
-  title,
-  description,
+  title: app.NAME,
+  description: app.DESCRIPTION,
   icons: {
     icon: [
       { url: "/icon-light.svg" },
       { url: "/icon-dark.svg", media: "(prefers-color-scheme: dark)" },
     ],
   },
-  manifest: "/manifest.json",
   appleWebApp: {
     capable: true,
+    title: app.NAME,
     statusBarStyle: "default",
-    title,
   },
   metadataBase: new URL(process.env["BASE_URL"]!),
   openGraph: {
-    title,
-    description,
-    siteName: title,
-    url: "https://mmmines.fly.dev",
+    title: app.NAME,
+    description: app.DESCRIPTION,
+    siteName: app.NAME,
+    url: app.URL,
     locale: "en_US",
     type: "website",
   },
 };
 
 export const viewport: Viewport = {
-  themeColor: "#020617",
+  themeColor: app.THEME_COLOR,
 };
 
 export default function RootLayout(props: Readonly<React.PropsWithChildren>) {

app/manifest.ts

@@ -0,0 +1,29 @@
+import type { MetadataRoute } from "next";
+import { app } from "./utils/const";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: app.NAME,
+    short_name: app.NAME,
+    theme_color: app.THEME_COLOR,
+    background_color: app.THEME_COLOR,
+    display: "standalone",
+    orientation: "any",
+    scope: "/",
+    start_url: "/",
+    icons: [
+      {
+        src: "icon-maskable.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+        purpose: "any maskable" as "maskable",
+      },
+      {
+        src: "icon-monochrome.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+        purpose: "monochrome",
+      },
+    ],
+  };
+}

app/utils/const.ts

@@ -0,0 +1,6 @@
+export const app = {
+  NAME: "mmmines!",
+  DESCRIPTION: "an endless, massive multiplayer minesweeper game",
+  URL: "https://mmmines.fly.dev",
+  THEME_COLOR: "#020617",
+};