docs: add custom title per page

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

Hide file tree

Showing 8 changed files with 34 additions and 8 deletions.
diff --git a/website/app/blog/page.tsx b/website/app/blog/page.tsx
@@ -2,7 +2,6 @@
 import { Text } from '@welcome-ui/text'
 import { Button } from '@welcome-ui/button'
 import { Box } from '@welcome-ui/box'
-import styled, { th } from '@xstyled/styled-components'
 import { Link } from '@welcome-ui/link'
 import { Card } from '@welcome-ui/card'
 import { Stack } from '@welcome-ui/stack'
@@ -62,10 +61,10 @@ const posts = [
   },
 ]
 
-const Title = styled(Link)`
-  ${th('texts.h5')};
-  display: inline !important;
-`
+// const Title = styled(Link)`
+//   ${th('texts.h5')};
+//   display: inline !important;
+// `
 
 const Home = () => {
   return (
@@ -90,9 +89,9 @@ const Home = () => {
                       </Tag>
                     ))}
                   </Stack>
-                  <Title href={link} rel="noopener nofollow" target="_blank">
+                  <Link href={link} rel="noopener nofollow" target="_blank">
                     {title}
-                  </Title>
+                  </Link>
                   <Box alignItems={{ md: 'flex-end' }} display={{ md: 'flex' }}>
                     <Flex direction="column" gap="md">
                       <Text mt="md">{description}</Text>

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