refactor: updated all slug folder & metadata

mickasmt · Jun 6, 2024 · c3ac1c7 · c3ac1c7
1 parent db932c9
commit c3ac1c7
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 283 deletions.
diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -1,18 +1,17 @@
-import { notFound } from "next/navigation";
 import { allDocs } from "contentlayer/generated";
+import { notFound } from "next/navigation";
 
-import { getTableOfContents } from "@/lib/toc";
 import { Mdx } from "@/components/content/mdx-components";
 import { DocsPageHeader } from "@/components/docs/page-header";
 import { DocsPager } from "@/components/docs/pager";
 import { DashboardTableOfContents } from "@/components/shared/toc";
+import { getTableOfContents } from "@/lib/toc";
 
 import "@/styles/mdx.css";
 
 import { Metadata } from "next";
 
-import { env } from "@/env.mjs";
-import { absoluteUrl } from "@/lib/utils";
+import { constructMetadata } from "@/lib/utils";
 
 interface DocPageProps {
   params: {
@@ -24,9 +23,7 @@ async function getDocFromParams(params) {
   const slug = params.slug?.join("/") || "";
   const doc = allDocs.find((doc) => doc.slugAsParams === slug);
 
-  if (!doc) {
-    null;
-  }
+  if (!doc) return null;
 
   return doc;
 }
@@ -36,41 +33,14 @@ export async function generateMetadata({
 }: DocPageProps): Promise<Metadata> {
   const doc = await getDocFromParams(params);
 
-  if (!doc) {
-    return {};
-  }
+  if (!doc) return {};
 
-  const url = env.NEXT_PUBLIC_APP_URL;
-
-  const ogUrl = new URL(`${url}/api/og`);
-  ogUrl.searchParams.set("heading", doc.description ?? doc.title);
-  ogUrl.searchParams.set("type", "Documentation");
-  ogUrl.searchParams.set("mode", "dark");
-
-  return {
-    title: doc.title,
-    description: doc.description,
-    openGraph: {
-      title: doc.title,
-      description: doc.description,
-      type: "article",
-      url: absoluteUrl(doc.slug),
-      images: [
-        {
-          url: ogUrl.toString(),
-          width: 1200,
-          height: 630,
-          alt: doc.title,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title: doc.title,
-      description: doc.description,
-      images: [ogUrl.toString()],
-    },
-  };
+  const { title, description } = doc;
+
+  return constructMetadata({
+    title: `${title} – SaaS Starter`,
+    description: description,
+  });
 }
 
 export async function generateStaticParams(): Promise<

diff --git a/app/(docs)/guides/[...slug]/page.tsx → app/(docs)/guides/[slug]/page.tsx b/app/(docs)/guides/[...slug]/page.tsx → app/(docs)/guides/[slug]/page.tsx
@@ -1,91 +1,53 @@
+import { allGuides } from "contentlayer/generated";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { allGuides } from "contentlayer/generated";
 
-import { getTableOfContents } from "@/lib/toc";
 import { Mdx } from "@/components/content/mdx-components";
 import { DocsPageHeader } from "@/components/docs/page-header";
 import { Icons } from "@/components/shared/icons";
 import { DashboardTableOfContents } from "@/components/shared/toc";
+import { getTableOfContents } from "@/lib/toc";
 
 import "@/styles/mdx.css";
 
 import { Metadata } from "next";
 
-import { env } from "@/env.mjs";
-import { absoluteUrl, cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
+import { buttonVariants } from "@/components/ui/button";
+import { cn, constructMetadata } from "@/lib/utils";
 
-interface GuidePageProps {
-  params: {
-    slug: string[];
-  };
-}
-
-async function getGuideFromParams(params) {
-  const slug = params?.slug?.join("/");
-  const guide = allGuides.find((guide) => guide.slugAsParams === slug);
-
-  if (!guide) {
-    null;
-  }
-
-  return guide;
+export async function generateStaticParams() {
+  return allGuides.map((guide) => ({
+    slug: guide.slugAsParams,
+  }));
 }
 
 export async function generateMetadata({
   params,
-}: GuidePageProps): Promise<Metadata> {
-  const guide = await getGuideFromParams(params);
-
+}: {
+  params: { slug: string };
+}): Promise<Metadata | undefined> {
+  const guide = allGuides.find((guide) => guide.slugAsParams === params.slug);
   if (!guide) {
-    return {};
+    return;
   }
 
-  const url = env.NEXT_PUBLIC_APP_URL;
+  const { title, description } = guide;
 
-  const ogUrl = new URL(`${url}/api/og`);
-  ogUrl.searchParams.set("heading", guide.title);
-  ogUrl.searchParams.set("type", "Guide");
-  ogUrl.searchParams.set("mode", "dark");
-
-  return {
-    title: guide.title,
-    description: guide.description,
-    openGraph: {
-      title: guide.title,
-      description: guide.description,
-      type: "article",
-      url: absoluteUrl(guide.slug),
-      images: [
-        {
-          url: ogUrl.toString(),
-          width: 1200,
-          height: 630,
-          alt: guide.title,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title: guide.title,
-      description: guide.description,
-      images: [ogUrl.toString()],
-    },
-  };
+  return constructMetadata({
+    title: `${title} – SaaS Starter`,
+    description: description,
+  });
 }
 
-export async function generateStaticParams(): Promise<
-  GuidePageProps["params"][]
-> {
-  return allGuides.map((guide) => ({
-    slug: guide.slugAsParams.split("/"),
-  }));
-}
-
-export default async function GuidePage({ params }: GuidePageProps) {
-  const guide = await getGuideFromParams(params);
+export default async function GuidePage({
+  params,
+}: {
+  params: {
+    slug: string;
+  };
+}) {
+  const guide = allGuides.find((guide) => guide.slugAsParams === params.slug);
 
   if (!guide) {
     notFound();

diff --git a/app/(marketing)/[...slug]/page.tsx b/app/(marketing)/[...slug]/page.tsx
diff --git a/app/(marketing)/[slug]/page.tsx b/app/(marketing)/[slug]/page.tsx
@@ -0,0 +1,63 @@
+import { allPages } from "contentlayer/generated";
+import { notFound } from "next/navigation";
+
+import { Mdx } from "@/components/content/mdx-components";
+
+import "@/styles/mdx.css";
+
+import { Metadata } from "next";
+
+import { constructMetadata } from "@/lib/utils";
+
+export async function generateStaticParams() {
+  return allPages.map((page) => ({
+    slug: page.slugAsParams,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata | undefined> {
+  const page = allPages.find((page) => page.slugAsParams === params.slug);
+  if (!page) {
+    return;
+  }
+
+  const { title, description } = page;
+
+  return constructMetadata({
+    title: `${title} – SaaS Starter`,
+    description: description,
+  });
+}
+
+export default async function PagePage({
+  params,
+}: {
+  params: {
+    slug: string;
+  };
+}) {
+  const page = allPages.find((page) => page.slugAsParams === params.slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  return (
+    <article className="container max-w-3xl py-6 lg:py-12">
+      <div className="space-y-4">
+        <h1 className="inline-block font-heading text-4xl lg:text-5xl">
+          {page.title}
+        </h1>
+        {page.description && (
+          <p className="text-xl text-muted-foreground">{page.description}</p>
+        )}
+      </div>
+      <hr className="my-4" />
+      <Mdx code={page.body.code} />
+    </article>
+  );
+}