Add table of contents to the website for articles

rstudio · Nov 2, 2023 · d2b28a7 · d2b28a7
1 parent 23ba1af
commit d2b28a7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/inst/website/src/components/TOC.astro b/inst/website/src/components/TOC.astro
@@ -0,0 +1,38 @@
+---
+import { cn } from "@/lib/utils";
+import type { MarkdownHeading } from "astro";
+
+interface Props {
+  headings: MarkdownHeading[];
+}
+
+const { headings } = Astro.props;
+
+const lowestDepth = headings.reduce(
+  (acc, { depth }) => Math.min(acc, depth),
+  Infinity
+);
+---
+
+<div class="w-fit max-w-full p-2 mb-10">
+  <span class="font-medium mb-2 mt-0 text-xl block">On this page</span>
+
+  {
+    headings.map(({ slug, text, depth }) => (
+      <div
+        class={cn(
+          "text-base leading-8",
+          "no-underline border-l-2  hover:underline hover:border-rstudio-blue "
+        )}
+        style={{ paddingInlineStart: `${depth - lowestDepth + 1}rem` }}
+      >
+        <a
+          href={`#${slug}`}
+          class="no-underline font-normal text-[--tw-prose-body]"
+        >
+          {text}
+        </a>
+      </div>
+    ))
+  }
+</div>
diff --git a/inst/website/src/layouts/ArticleLayout.astro b/inst/website/src/layouts/ArticleLayout.astro
@@ -12,30 +12,32 @@ type Props = MarkdownLayoutProps<{
 
 // Now, `frontmatter`, `url`, and other Markdown layout properties
 // are accessible with type safety
-const { frontmatter, url } = Astro.props;
+const { frontmatter, url, headings } = Astro.props;
 
 import "@/styles/globals.css";
 import { internalLink } from "@/lib/utils";
+import TOC from "@/components/TOC.astro";
 ---
 
 <html>
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content="ShinyUiEditor Article" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href={internalLink("favicon.svg")}  />
+    <link rel="icon" type="image/svg+xml" href={internalLink("favicon.svg")} />
     <meta name="generator" content={Astro.generator} />
     <title>{`SUE | ${frontmatter.title}`}</title>
   </head>
   <body>
-    <Header  />
+    <Header />
+
     <MarkdownContainer>
       <h1>{frontmatter.title}</h1>
+      <TOC headings={headings} />
       <slot />
       <p class="text-right italic py-6">
         Written on: {frontmatter.date} by {frontmatter.author}
       </p>
     </MarkdownContainer>
-
   </body>
 </html>