Show table of contents on pages with toc: true

app/about-us/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "about-us.md")
@@ -19,7 +19,7 @@ export default async function AboutUsPage() {
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/achievements/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "achievements.md")
@@ -18,8 +18,8 @@ export default async function AchievementsPage() {
       <PageHero title={title} description="What OpenPrinting has accomplished" />
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
-        <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+        <div className="max-w-6xl mx-auto px-4 about-us-content">
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/codeofconduct/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "codeofconduct.md")
@@ -22,7 +22,7 @@ export default async function CodeOfConductPage() {
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/contact/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(
@@ -27,7 +27,7 @@ export default async function ContactPage() {
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/contribute-website/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "contribute-website.md")
@@ -18,7 +18,7 @@ export default async function ContributeWebsitePage() {
       <PageHero title={title} />
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/contribute/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(
@@ -27,7 +27,7 @@ export default async function ContributePage() {
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/current/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "current.md")
@@ -18,8 +18,8 @@ export default async function CurrentPage() {
       <PageHero title={title} description="What we are working on right now" />
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
-        <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+        <div className="max-w-6xl mx-auto px-4 about-us-content">
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/databaseintro/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "databaseintro.md")
@@ -18,7 +18,7 @@ export default async function DatabaseIntroPage() {
       <PageHero title={title} />
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/documentation/[doc]/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 
 export const dynamic = "force-static"
 export const dynamicParams = false
@@ -35,14 +35,12 @@ export default async function DocumentationDetail({
 
   return (
     <main className="min-h-screen bg-background text-foreground pt-24 pb-10">
-      <div className="max-w-4xl mx-auto px-4">
+      <div className="max-w-6xl mx-auto px-4">
         <h1 className="text-3xl md:text-4xl font-bold mb-8">
           {title}
         </h1>
 
-        <div className="prose max-w-none">
-          <MarkdownRenderer content={content} />
-        </div>
+        <ContentWithToc content={content} data={data} />
       </div>
     </main>
   )

app/documentation/page.tsx

@@ -2,7 +2,7 @@ import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
 import Link from "next/link"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 
 const PAGE_MD = path.join(process.cwd(), "contents", "pages", "documentation.md")
 const DOCS_DIR = path.join(process.cwd(), "contents", "documentation")
@@ -41,7 +41,7 @@ export default async function DocumentationPage() {
 
         {hasContent && (
           <div className="prose max-w-none mb-10">
-            <MarkdownRenderer content={content} showMeta={false} />
+            <ContentWithToc content={content} data={data} showMeta={false} noCard={false} />
           </div>
         )}
 

app/donations/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(
@@ -13,7 +13,7 @@ const FILE_PATH = path.join(
 
 export default async function DonationsPage() {
   const raw = await fs.readFile(FILE_PATH, "utf8")
-  const { data } = matter(raw)
+  const { data, content } = matter(raw)
 
   const title =
     typeof data.title === "string" ? data.title : "Donations"
@@ -24,7 +24,7 @@ export default async function DonationsPage() {
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4">
-          <MarkdownRenderer content={raw} showMeta={false} noCard={true} />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/driverless/page.tsx

@@ -2,7 +2,7 @@ import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
 import Image from "next/image"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { getAssetPath } from "@/lib/utils";
 
 const FILE_PATH = path.join(
@@ -65,7 +65,7 @@ export default async function DriverlessPage() {
             </h1>
 
             <div className="prose prose-invert max-w-none">
-              <MarkdownRenderer content={content} showMeta={false} noCard={true} />
+              <ContentWithToc content={content} data={data} />
             </div>
           </div>
         </div>

app/gsod2020/[slug]/page.tsx

@@ -4,7 +4,7 @@ import matter from "gray-matter"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { ArrowLeft } from "lucide-react"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { GsodHero } from "@/components/gsod-hero"
 
 const IDEAS_DIR = path.join(process.cwd(), "contents", "gsod", "gsod2020")
@@ -18,7 +18,7 @@ async function getIdeaBySlug(slug: string) {
     const title =
       typeof data.title === "string" ? data.title : slug.replace(/-/g, " ")
 
-    return { title, content }
+    return { title, content, data }
   } catch {
     return null
   }
@@ -66,7 +66,7 @@ export default async function GSoD2020IdeaPage({
       <section className="py-10">
         <div className="mx-auto max-w-4xl px-6">
           <div className="rounded-xl border border-border bg-card p-6 md:p-8">
-            <MarkdownRenderer content={idea.content} showMeta={false} noCard={true} />
+            <ContentWithToc content={idea.content} data={idea.data} />
           </div>
         </div>
       </section>

app/gsod2020/page.tsx

@@ -3,7 +3,7 @@ import path from "path"
 import matter from "gray-matter"
 import Link from "next/link"
 import { ArrowRight, Lightbulb } from "lucide-react"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { GsodHero } from "@/components/gsod-hero"
 
 const MAIN_FILE = path.join(process.cwd(), "contents", "pages", "gsod2020.md")
@@ -58,7 +58,7 @@ export default async function GSoD2020Page() {
       <section className="py-16">
         <div className="mx-auto max-w-4xl px-6">
           <div className="rounded-xl border border-border bg-card p-6 md:p-8">
-            <MarkdownRenderer content={cleanedContent} showMeta={false} noCard={true} />
+            <ContentWithToc content={cleanedContent} data={data} />
           </div>
         </div>
       </section>

app/history/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "history.md")
@@ -18,8 +18,8 @@ export default async function HistoryPage() {
       <PageHero title={title} description="The story of OpenPrinting" />
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
-        <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+        <div className="max-w-6xl mx-auto px-4 about-us-content">
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/lfmp/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "lfmp.md")
@@ -18,7 +18,7 @@ export default async function LfmpPage() {
       <PageHero title={title} />
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/lfmp2020/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(process.cwd(), "contents", "pages", "lfmp2020.md")
@@ -18,7 +18,7 @@ export default async function Lfmp2020Page() {
       <PageHero title={title} />
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/opportunity-open-source/page.tsx

@@ -2,7 +2,7 @@ import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
 import type { Metadata } from "next"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 import { getSiteUrl } from "@/lib/site"
 
@@ -29,7 +29,7 @@ export const metadata: Metadata = {
 
 export default async function OpportunityOpenSourcePage() {
   const raw = await fs.readFile(FILE_PATH, "utf8")
-  const { data } = matter(raw)
+  const { data, content } = matter(raw)
 
   const title =
     typeof data.title === "string" ? data.title : "Opportunity Open Source"
@@ -46,7 +46,7 @@ export default async function OpportunityOpenSourcePage() {
 
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4">
-          <MarkdownRenderer content={raw} showMeta={false} noCard={true} />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>

app/pappl-system-utilities/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import matter from "gray-matter"
-import { MarkdownRenderer } from "@/components/markdown-renderer"
+import { ContentWithToc } from "@/components/content-with-toc"
 import { PageHero } from "@/components/page-hero"
 
 const FILE_PATH = path.join(
@@ -23,7 +23,7 @@ export default async function PapplSystemUtilitiesPage() {
       <PageHero title={title} />
       <main className="min-h-screen bg-background text-foreground pt-24 pb-16">
         <div className="max-w-4xl mx-auto px-4 about-us-content">
-          <MarkdownRenderer content={content} showMeta={false} noCard />
+          <ContentWithToc content={content} data={data} />
         </div>
       </main>
     </>