metadata

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"Chalk UI","short_name":"Chalk","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/app/docs/[[...slug]]/page.tsx

@@ -4,13 +4,14 @@ import { ButtonAnatomy } from "@/workshop/button"
 import { cn } from "@/workshop/core/styling"
 import { ScrollArea } from "@/workshop/scroll-area"
 import { allDocs } from "contentlayer/generated"
-
 import "@/styles/mdx.css"
 import { ExternalLinkIcon } from "lucide-react"
+import { Metadata } from "next"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import Balancer from "react-wrap-balancer"
 import { getTableOfContents } from "../../../../lib/toc"
+import { absoluteUrl } from "../../../../lib/utils"
 
 
 interface DocPageProps {
@@ -30,34 +31,26 @@ async function getDocFromParams({ params }: DocPageProps) {
     return doc
 }
 
-// export async function generateMetadata({
-//   params,
-// }: DocPageProps): Promise<Metadata> {
-//   const doc = await getDocFromParams({ params })
-//
-//   if (!doc) {
-//     return {}
-//   }
-//
-//   return {
-//     title: doc.title,
-//     description: doc.description,
-//     openGraph: {
-//       title: doc.title,
-//       description: doc.description,
-//       type: "article",
-//       url: absoluteUrl(doc.slug),
-//       images: [
-//         {
-//           url: siteConfig.ogImage,
-//           width: 1200,
-//           height: 630,
-//           alt: siteConfig.name,
-//         },
-//       ],
-//     },
-//   }
-// }
+export async function generateMetadata({
+    params,
+}: DocPageProps): Promise<Metadata> {
+    const doc = await getDocFromParams({ params })
+
+    if (!doc) {
+        return {}
+    }
+
+    return {
+        title: doc.title,
+        description: doc.description,
+        openGraph: {
+            title: doc.title,
+            description: doc.description,
+            type: "article",
+            url: absoluteUrl(doc.slug),
+        },
+    }
+}
 
 export async function generateStaticParams(): Promise<
     DocPageProps["params"][]

src/app/layout.tsx

@@ -7,8 +7,36 @@ import React from "react"
 const inter = Inter({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
+    title: {
+        default: "Chalk UI",
+        template: "%s - Chalk UI",
+    },
+    metadataBase: new URL("https://chalk.rahim.app"),
+    description: "Opinionated and flexible React components, styled with TailwindCSS, built for Next.js SaaS applications.",
+    keywords: [
+        "React",
+        "Next.js",
+        "Next.js UI",
+        "UI Library",
+        "SaaS",
+        "React Components",
+        "Tailwind CSS",
+        "Server Components",
+        "Radix UI",
+    ],
+    authors: [
+        {
+            name: "5rahim",
+            url: "https://rahim.app",
+        },
+    ],
+    creator: "5rahim",
+    icons: {
+        icon: "/favicon.ico",
+        shortcut: "/favicon-16x16.png",
+        apple: "/apple-touch-icon.png",
+    },
+    manifest: "https://chalk.rahim.app/site.webmanifest",
 }
 
 export default function RootLayout({

src/components/component-anatomy.tsx

@@ -42,7 +42,7 @@ export function ComponentAnatomy({
                 triggerClass="bg-[--subtle] hover:bg-[--subtle-highlight] rounded-[--radius]"
                 itemClass="border-none"
                 contentClass="px-0 py-0"
-                defaultValue={["types"]}
+                defaultValue={["types", "anatomy"]}
             >
                 <AccordionItem value="types">
                     <AccordionTrigger>Types</AccordionTrigger>

vercel.json

@@ -2,7 +2,7 @@
   "git": {
     "deploymentEnabled": {
       "update": false,
-      "main": false
+      "main": true
     }
   }
 }