og用の画像追加など

Author: na-trium-144

app/layout.tsx

@@ -20,6 +20,16 @@ export const metadata: Metadata = {
     template: "%s - my.code();",
     default: "my.code();",
   },
+  openGraph: {
+    type: "website",
+    siteName: "my.code();",
+    images: "/icon_title.png",
+  },
+  twitter: {
+    card: "summary",
+    site: "@utokyo_code",
+    images: "/icon_pad.png",
+  },
 };
 
 export default async function RootLayout({

app/manifest.ts

@@ -8,10 +8,15 @@ export default function manifest(): MetadataRoute.Manifest {
     description: pageMetadata.description as string,
     start_url: "/",
     display: "standalone",
-    // TODO:
-    // background_color: "#fff",
-    // theme_color: "#fff",
+    background_color: "#fef7f2", // base-100
+    theme_color: "#ba6900", // primary
     icons: [
+      {
+        src: "/icon_pad.png", // これだけ背景色もついている
+        sizes: "512x512",
+        purpose: "maskable",
+        type: "image/png",
+      },
       {
         src: "/favicon.ico",
         sizes: "any",

app/page.tsx

@@ -22,6 +22,14 @@ export default async function Home() {
   const pagesList = await getPagesList();
   return (
     <div className="w-full p-4 pb-16 md:pb-20 lg:pb-24">
+      <figure className="border w-[1200px] h-[630px]">
+        <div className="flex gap-1 items-center justify-center w-[240px] h-[126px] scale-500 origin-top-left">
+        <img src="/icon.svg" alt="my.code(); Logo" className="size-[48px]" />
+        <span className="text-[32px] font-bold font-mono drop-shadow-sm text-primary">
+          my.code();
+        </span>
+      </div>
+      </figure>
       <div className="max-w-docs mx-auto">
         <div
           className={clsx(