📖 In this Article --> Contents (#519)

This also makes it a property of the component, allowing for customization in the future. Based on feedback from @dellaert and conforming to JupyterBook.
jupyter-book · Jan 10, 2025 · 5311b9d · 5311b9d
1 parent 7dedad3
commit 5311b9d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/fifty-bikes-poke.md b/.changeset/fifty-bikes-poke.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+In this article --> Contents
diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx
@@ -352,6 +352,7 @@ function useMarginOccluder() {
 
 export const DocumentOutline = ({
   outlineRef,
+  title = 'Contents',
   top = 0,
   className,
   selector = SELECTOR,
@@ -360,6 +361,7 @@ export const DocumentOutline = ({
   isMargin,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
+  title?: React.ReactNode;
   top?: number;
   height?: number;
   className?: string;
@@ -406,7 +408,7 @@ export const DocumentOutline = ({
         }}
       >
         <div className="flex flex-row gap-2 mb-4 text-sm leading-6 uppercase rounded-lg text-slate-900 dark:text-slate-100">
-          In this article
+          {title}
           <Collapsible.Trigger asChild>
             <button className="self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2">
               <ChevronRightIcon