refactor: enhance DocPageHeading to conditionally include documentation description and update page redirection logic

Author: cklei-carly

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

@@ -38,6 +38,8 @@ export default async function Page(props: Props) {
     notFound();
   }
 
+  const lastSlug = slugs[slugs.length - 1];
+
   let content = await page.data.load();
 
   if (content.source) {
@@ -53,8 +55,15 @@ export default async function Page(props: Props) {
   const MdxContent = content.body;
 
   return (
-    <DocsPage toc={content.toc} full={content.full}>
-      <DocPageHeading repository={repository} />
+    <DocsPage 
+      toc={content.toc} 
+      tableOfContent={{
+        style: 'clerk',
+      }}
+      full={content.full} 
+      breadcrumb={{ enabled: true, full: true, includeRoot: false, includePage: true }}
+    >
+      <DocPageHeading repository={repository} includeDocsDescription={lastSlug !== "index" && lastSlug !== "overview"} />
       <DocsBody>
         <MdxContent
           components={createMdxComponents({

app/docs/[plugin]/[version]/page.tsx

@@ -6,7 +6,7 @@ import {
   repositories,
   getVersionBySlug,
 } from "@/lib/repo-config";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { DocPageHeading } from "../../components";
 import { source } from "@/lib/source";
 import { createMdxComponents, createRelativeLink } from "@/components/mdx";
@@ -38,54 +38,56 @@ export default async function Page(props: Props) {
       <DocsPage>
         <DocPageHeading repository={repository} />
         <DocsBody>
-        <Cards>
-          {version.limited_files?.map((file) => (
-            <Card
-              key={file.slug}
-              href={`/docs/${repoSlug}/${versionSlug}/${file.slug}`}
-              title={file.title}
-              className="flex items-center gap-2"
-            />
-          ))}
-        </Cards>
+          <Cards>
+            {version.limited_files?.map((file) => (
+              <Card
+                key={file.slug}
+                href={`/docs/${repoSlug}/${versionSlug}/${file.slug}`}
+                title={file.title}
+                className="flex items-center gap-2"
+              />
+            ))}
+          </Cards>
         </DocsBody>
       </DocsPage>
     );
   }
-
-  let content = await page.data.load();
-
-  if (content.source) {
-    const sourcePage = source.getPage(content.source.split("/"));
-
-    if (!sourcePage)
-      throw new Error(
-        `unresolved source in frontmatter of ${page.file.path}: ${content.source}`,
-      );
-    content = await sourcePage.data.load();
-  }
-
-  const MdxContent = content.body;
-
-  return (
-    <DocsPage toc={content.toc} full={content.full}>
-      <DocPageHeading repository={repository} />
-      <DocsBody>
-        <MdxContent
-          components={createMdxComponents({
-            a: ({ href, ...props }: { href: string }) => {
-              return (
-                <a
-                  href={createRelativeLink(repository, version, href)}
-                  {...props}
-                />
-              );
-            },
-          })}
-        />
-      </DocsBody>
-    </DocsPage>
-  );
+  
+  redirect(`/docs/${repoSlug}/${versionSlug}/overview`);
+
+  // let content = await page.data.load();
+
+  // if (content.source) {
+  //   const sourcePage = source.getPage(content.source.split("/"));
+
+  //   if (!sourcePage)
+  //     throw new Error(
+  //       `unresolved source in frontmatter of ${page.file.path}: ${content.source}`,
+  //     );
+  //   content = await sourcePage.data.load();
+  // }
+
+  // const MdxContent = content.body;
+
+  // return (
+  //   <DocsPage toc={content.toc} full={content.full}>
+  //     <DocPageHeading repository={repository} includeDocsDescription={false} />
+  //     <DocsBody>
+  //       <MdxContent
+  //         components={createMdxComponents({
+  //           a: ({ href, ...props }: { href: string }) => {
+  //             return (
+  //               <a
+  //                 href={createRelativeLink(repository, version, href)}
+  //                 {...props}
+  //               />
+  //             );
+  //           },
+  //         })}
+  //       />
+  //     </DocsBody>
+  //   </DocsPage>
+  // );
 }
 
 export async function generateMetadata({ params }: Props) {

app/docs/components.tsx

@@ -8,15 +8,19 @@ import { Github } from "lucide-react";
 
 export function DocPageHeading({
   repository,
+  includeDocsDescription = true,
 }: {
   repository: RepositoryConfig;
+  includeDocsDescription?: boolean;
 }) {
   return (
     <>
       <DocsTitle>
         <div className="flex items-center gap-4">
-          <span>{getRepositoryDisplayName(repository)}</span>
-          <div className="flex gap-2">
+          {includeDocsDescription && (
+            <span>{getRepositoryDisplayName(repository)}</span>
+          )}
+          <div className="ml-auto flex gap-2">
             {!repository.is_private && repository.repository_url && (
               <Link
                 href={repository.repository_url}
@@ -30,9 +34,9 @@ export function DocPageHeading({
           </div>
         </div>
       </DocsTitle>
-      {repository.description && (
+      {repository.description && includeDocsDescription && (
         <DocsDescription>{repository.description}</DocsDescription>
       )}
     </>
   );
-}
+}