docs: add custom title per page

WTTJ · Nov 21, 2024 · 6622d4f · 6622d4f
1 parent fe9d5fb
commit 6622d4f
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 1 deletion.
diff --git a/website/app/components/[id]/layout.tsx b/website/app/components/[id]/layout.tsx
@@ -19,6 +19,18 @@ type LayoutProps = {
   }
 }
 
+export async function generateMetadata({ params }: { params: { [key: string]: string } }) {
+  const { id } = params
+  const { data } = getPageContent(`${getRepository(id)}/docs/index.mdx`, true)
+  const title = data?.title
+  const description = data?.description
+
+  return {
+    title: `Welcome UI - ${title}`,
+    description: description,
+  }
+}
+
 const Layout = ({ children, params }: LayoutProps) => {
   const pages = getPages()
   const { id } = params

diff --git a/website/app/components/page.tsx b/website/app/components/page.tsx
@@ -4,11 +4,16 @@ import { Flex } from '@welcome-ui/flex'
 import { Grid } from '@welcome-ui/grid'
 import { Text } from '@welcome-ui/text'
 import { Box } from '@welcome-ui/box'
+import { Metadata } from 'next'
 
 import { getPages } from '@/build-app/utils/pages-components'
 import { getName, getRepository } from '@/build-app/utils/transform-name'
 import { getPageContent } from '@/build-app/utils/page-content'
 
+export const metadata: Metadata = {
+  title: 'Welcome UI - Components',
+}
+
 const Page = () => {
   const pages = getPages()
 

diff --git a/website/app/foundations/[id]/page.tsx b/website/app/foundations/[id]/page.tsx
@@ -5,13 +5,23 @@ import { TableOfContent } from '@/build-app/components/TableOfContent'
 import { getPageContent } from '@/build-app/utils/page-content'
 import { getPages, getStaticParams } from '@/build-app/utils/pages-exports'
 import { PrevNextPage } from '@/build-app/components/PrevNextPage'
+import { getName } from '@/build-app/utils/transform-name'
 
 type PageProps = {
   params: {
     id: string
   }
 }
 
+export async function generateMetadata({ params }: { params: { [key: string]: string } }) {
+  const { id } = params
+  const title = getName(id)
+
+  return {
+    title: `Welcome UI - ${title}`,
+  }
+}
+
 export async function generateStaticParams() {
   const pages = getPages('foundations')
 

diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -29,7 +29,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">
       <head>
-        <link href="/favicon.ico" rel="icon" type="image/x-icon" />
+        <link href="/favicon.png" rel="icon" type="image/png" />
       </head>
       <body>
         <StyledComponentsRegistry>

diff --git a/website/public/favicon.ico b/website/public/favicon.ico
diff --git a/website/public/favicon.png b/website/public/favicon.png
diff --git a/website/public/og-image.png b/website/public/og-image.png