Fix route canonical metadata

docs/app/(home)/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import styles from "./page.module.css";
 import { CloudBanner } from "./sections/CloudBanner/CloudBanner";
 import { CloudSection } from "./sections/CloudSection/CloudSection";
@@ -10,6 +11,12 @@ import { StepsSection } from "./sections/StepsSection/StepsSection";
 import { TweetWallSection } from "./sections/TweetWallSection/TweetWallSection";
 import { UseCasesSection } from "./sections/UseCasesSection/UseCasesSection";
 
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "/",
+  },
+};
+
 export default function HomePage() {
   return (
     <div className={styles.page}>

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

@@ -71,6 +71,9 @@ export async function generateMetadata(props: {
   return {
     title: page.data.title,
     description: page.data.description,
+    alternates: {
+      canonical: page.url,
+    },
   };
 }
 

docs/app/blog/layout.tsx

@@ -1,7 +1,14 @@
 import "../(home)/globals.css";
 import { WebsiteThemeProvider } from "@/components/website-theme-provider";
+import type { Metadata } from "next";
 import { BlogNavbar } from "./components/BlogNavbar";
 
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "/blog",
+  },
+};
+
 export default function BlogLayout({ children }: { children: React.ReactNode }) {
   return (
     <WebsiteThemeProvider>

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

@@ -49,6 +49,9 @@ export async function generateMetadata(props: PageProps<"/docs/[[...slug]]">): P
   return {
     title: page.data.title,
     description: page.data.description,
+    alternates: {
+      canonical: page.url,
+    },
     openGraph: {
       images: getPageImage(page).url,
     },

docs/app/layout.tsx

@@ -43,9 +43,6 @@ export const metadata: Metadata = {
   creator: "OpenUI",
   publisher: "OpenUI",
   category: "technology",
-  alternates: {
-    canonical: "/",
-  },
   icons: {
     icon: "/shiro-logo.svg",
     shortcut: "/shiro-logo.svg",

docs/app/playground/layout.tsx

@@ -1,7 +1,14 @@
 import { WebsiteThemeProvider } from "@/components/website-theme-provider";
+import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import "./layout.css";
 
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "/playground",
+  },
+};
+
 export default function PlaygroundLayout({ children }: { children: ReactNode }) {
   return <WebsiteThemeProvider>{children}</WebsiteThemeProvider>;
 }