📣 SEO stuff: metadata, sitemap and robots

Author: ariflogs

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

@@ -4,8 +4,14 @@ import { notFound } from "next/navigation";
 import { format } from "date-fns";
 import MDX from "@/components/MDX";
 import { H2 } from "@/packages/ui";
+import { Metadata } from "next";
 
-function getDocParams(slug: string) {
+interface IProps {
+  params: { slug: string[] };
+}
+
+function getDocParams({ params }: IProps) {
+  const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`;
   const doc = allDocs.find((doc) => doc.url === slug);
 
   if (!doc) {
@@ -15,9 +21,23 @@ function getDocParams(slug: string) {
   return doc;
 }
 
-export default function page({ params }: { params: { slug: string[] } }) {
-  const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`;
-  const doc = getDocParams(slug);
+export async function generateMetadata({ params }: IProps): Promise<Metadata> {
+  const doc = getDocParams({ params });
+
+  if (!doc) {
+    return {
+      title: "Not Found | Retro UI",
+    };
+  }
+
+  return {
+    title: `${doc.title} | Retro UI`,
+    description: doc.description
+  };
+}
+
+export default function page({ params }: IProps) {
+  const doc = getDocParams({ params });
 
   if (!doc) {
     return notFound();

app/(marketing)/page.tsx

@@ -1,4 +1,3 @@
-import { JoinNewsletter } from "@/components";
 import {
   Accordion,
   Avatar,

app/favicon.ico

@@ -1,6 +1,7 @@
 import TopNav from "@/components/TopNav";
 import "./global.css";
 import { Archivo_Black, Share_Tech, Share_Tech_Mono } from "next/font/google";
+import { Metadata } from "next";
 
 const archivoBlack = Archivo_Black({
   subsets: ["latin"],
@@ -20,6 +21,14 @@ const shareTechMono = Share_Tech_Mono({
   variable: "--font-mono",
 });
 
+export const metadata: Metadata = {
+  title: "Retro Styled Tailwind UI Library | Retro UI",
+  description: "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
+  openGraph: {
+    images: ['/banner.png']
+  }
+};
+
 export default function RootLayout({
   children,
 }: {

app/layout.tsx

@@ -0,0 +1,11 @@
+import type { MetadataRoute } from 'next'
+ 
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://retroui.dev/sitemap.xml',
+  }
+}   

app/robots.ts

@@ -0,0 +1,17 @@
+import { allDocs } from "@/.contentlayer/generated";
+import type { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: "https://retroui.dev",
+      lastModified: new Date(),
+      changeFrequency: "yearly",
+      priority: 1,
+    },
+    ...allDocs.map((doc) => ({
+      url: `https://retroui.dev${doc.url}`,
+      lastModified: doc.lastUpdated,
+    })),
+  ];
+}