add metadata to page (#1396)

* feat: add manifest * fix: address type errors * fix: add missing types * chore: adjust metadata colors
guildxyz · Jul 29, 2024 · b961068 · b961068
1 parent 7872179
commit b961068
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -19,7 +19,8 @@ import { ActiveSection } from "./types"
 
 export const metadata = {
   icons: {
-    other: [{ rel: "preload", url: "/banner.svg" }],
+    // @ts-ignore: "as" prop not typed out.
+    other: [{ rel: "preload", url: "/banner.svg", as: "image" }],
   },
 }
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,10 @@
 import { Providers } from "@/components/Providers"
 import { PostHogPageViews } from "@/components/Providers/PostHogPageViews"
 import { dystopian, inter } from "fonts"
-import type { Metadata } from "next"
 import { type ReactNode, Suspense } from "react"
 import "./globals.css"
 import { cn } from "@/lib/utils"
+import type { Metadata, Viewport } from "next"
 import NextTopLoader from "nextjs-toploader"
 
 interface RootLayoutProps {
@@ -13,8 +13,20 @@ interface RootLayoutProps {
 
 export const metadata: Metadata = {
   title: "Guildhall",
+  applicationName: "Guildhall",
   description:
     "Automated membership management for the platforms your community already uses.",
+  icons: {
+    icon: "guild-icon.png",
+  },
+}
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: dark)", color: "#27272a" },
+    { media: "(prefers-color-scheme: light)", color: "#f4f4f5" },
+  ],
+  colorScheme: "dark light",
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {

diff --git a/src/app/manifest.ts b/src/app/manifest.ts
@@ -7,8 +7,17 @@ export default function manifest(): MetadataRoute.Manifest {
     description:
       "Automated membership management for the platforms your community already uses.",
     theme_color: "#fff",
-    background_color: "#000",
+    background_color: "#6062eb",
     display: "standalone",
     start_url: "/",
+    icons: [
+      {
+        src: `guild-icon.png`,
+        sizes: `64x64`,
+        type: "image/png",
+        // @ts-ignore: "maskable any" is not typed out as an option
+        purpose: "maskable any",
+      },
+    ],
   }
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -20,6 +20,7 @@ class MyDocument extends Document {
           )}
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:site" content="@guildxyz" />
+          <link rel="manifest" href="/manifest.webmanifest" />
         </Head>
         <body>
           <Main />