@myst-theme/site 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,21 +16,21 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.14",
-    "@myst-theme/diagrams": "^0.2.8",
-    "@myst-theme/frontmatter": "^0.2.8",
-    "@myst-theme/jupyter": "^0.2.8",
-    "@myst-theme/providers": "^0.2.8",
+    "@myst-theme/diagrams": "^0.2.10",
+    "@myst-theme/frontmatter": "^0.2.10",
+    "@myst-theme/jupyter": "^0.2.10",
+    "@myst-theme/providers": "^0.2.10",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^0.0.16",
-    "myst-config": "^0.0.14",
-    "myst-demo": "^0.2.8",
-    "myst-to-react": "^0.2.8",
+    "myst-common": "^0.0.17",
+    "myst-config": "^0.0.16",
+    "myst-demo": "^0.2.10",
+    "myst-to-react": "^0.2.10",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.7",
-    "unist-util-select": "^4.0.1",
-    "thebe-react": "^0.0.7"
+    "thebe-react": "^0.0.7",
+    "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
     "@remix-run/node": "^1.12.0",

package/src/components/ContentBlocks.tsx

@@ -28,7 +28,7 @@ function Block({
 }) {
   const renderers = useNodeRenderers() ?? DEFAULT_RENDERERS;
   const children = useParse(node, renderers);
-  const subGrid = 'article-grid article-subgrid-gap col-screen mb-10';
+  const subGrid = 'article-grid article-subgrid-gap col-screen';
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =

package/src/components/DocumentOutline.tsx

@@ -1,9 +1,9 @@
 import { useNavigation } from '@remix-run/react';
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-const SELECTOR = [1, 2, 3, 4, 5, 6].map((n) => `main h${n}`).join(', ');
+const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 const HIGHLIGHT_CLASS = 'highlight';
 
 const onClient = typeof document !== 'undefined';
@@ -14,8 +14,10 @@ type Heading = {
   titleHTML: string;
   level: number;
 };
+
 type Props = {
   headings: Heading[];
+  selector: string;
   activeId?: string;
   highlight?: () => void;
 };
@@ -23,7 +25,7 @@ type Props = {
  * This renders an item in the table of contents list.
  * scrollIntoView is used to ensure that when a user clicks on an item, it will smoothly scroll.
  */
-const Headings = ({ headings, activeId, highlight }: Props) => (
+const Headings = ({ headings, activeId, highlight, selector }: Props) => (
   <ul className="text-slate-400 text-sm leading-6">
     {headings.map((heading) => (
       <li
@@ -36,11 +38,11 @@ const Headings = ({ headings, activeId, highlight }: Props) => (
         })}
       >
         <a
-          className={classNames('block p-1 pl-2', {
+          className={classNames('block p-1', {
             'text-slate-900 dark:text-slate-50': heading.level < 3 && heading.id !== activeId,
             'text-slate-500 dark:text-slate-300': heading.level >= 3 && heading.id !== activeId,
             'text-blue-600 dark:text-white font-bold': heading.id === activeId,
-            'pr-2': heading.id !== activeId,
+            'pr-2': heading.id !== activeId, // Allows for bold to change length
             'pl-2': heading.level === 2,
             'pl-4': heading.level === 3,
             'pl-8 text-xs': heading.level === 4,
@@ -52,7 +54,7 @@ const Headings = ({ headings, activeId, highlight }: Props) => (
             e.preventDefault();
             const el = document.querySelector(`#${heading.id}`);
             if (!el) return;
-            getHeaders().forEach((h) => {
+            getHeaders(selector).forEach((h) => {
               h.classList.remove(HIGHLIGHT_CLASS);
             });
             el.classList.add(HIGHLIGHT_CLASS);
@@ -68,15 +70,15 @@ const Headings = ({ headings, activeId, highlight }: Props) => (
   </ul>
 );
 
-function getHeaders(): HTMLHeadingElement[] {
-  const headers = Array.from(document.querySelectorAll(SELECTOR)).filter((e) => {
+function getHeaders(selector: string): HTMLHeadingElement[] {
+  const headers = Array.from(document.querySelectorAll(selector)).filter((e) => {
     const parent = e.closest('.exclude-from-outline');
     return !(e.classList.contains('title') || parent);
   });
   return headers as HTMLHeadingElement[];
 }
 
-function useHeaders() {
+function useHeaders(selector: string) {
   if (!onClient) return { activeId: '', headings: [] };
   const onScreen = useRef<Set<HTMLHeadingElement>>(new Set());
   const [activeId, setActiveId] = useState<string>();
@@ -96,7 +98,7 @@ function useHeaders() {
   const { observer } = useIntersectionObserver(highlight, onScreen.current);
   const [elements, setElements] = useState<HTMLHeadingElement[]>([]);
 
-  const render = throttle(() => setElements(getHeaders()), 500);
+  const render = throttle(() => setElements(getHeaders(selector)), 500);
   useEffect(() => {
     // We have to look at the document changes for reloads/mutations
     const main = document.querySelector('main');
@@ -185,13 +187,15 @@ export const DocumentOutline = ({
   outlineRef,
   top,
   className = DOC_OUTLINE_CLASS,
+  selector = SELECTOR,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
   top?: number;
   height?: number;
   className?: string;
+  selector?: string;
 }) => {
-  const { activeId, headings, highlight } = useHeaders();
+  const { activeId, headings, highlight } = useHeaders(selector);
   if (headings.length <= 1 || !onClient) {
     return <nav suppressHydrationWarning style={{ display: 'none' }} />;
   }
@@ -212,7 +216,7 @@ export const DocumentOutline = ({
       <div className="text-slate-900 mb-4 text-sm leading-6 dark:text-slate-100 uppercase">
         In this article
       </div>
-      <Headings headings={headings} activeId={activeId} highlight={highlight} />
+      <Headings headings={headings} activeId={activeId} highlight={highlight} selector={selector} />
     </nav>
   );
 };

package/src/components/FooterLinksBlock.tsx

@@ -4,7 +4,13 @@ import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
 import type { FooterLinks, NavigationLink } from '../types';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 
-const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boolean }) => {
+const FooterLink = ({
+  title,
+  short_title,
+  url,
+  group,
+  right,
+}: NavigationLink & { right?: boolean }) => {
   const baseurl = useBaseurl();
   const Link = useLinkProvider();
   return (
@@ -15,14 +21,14 @@ const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boo
     >
       <div className="flex align-middle h-full">
         {right && (
-          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1" />
+          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1 shrink-0" />
         )}
         <div className={classNames('flex-grow', { 'text-right': right })}>
           <div className="text-xs text-gray-500 dark:text-gray-400">{group || ' '}</div>
-          {title}
+          {short_title || title}
         </div>
         {!right && (
-          <ArrowRightIcon className="w-6 h-6 self-center transition-transform group-hover:translate-x-1" />
+          <ArrowRightIcon className="w-6 h-6 self-center transition-transform group-hover:translate-x-1 shrink-0" />
         )}
       </div>
     </Link>
@@ -32,7 +38,7 @@ const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boo
 export function FooterLinksBlock({ links }: { links?: FooterLinks }) {
   if (!links) return null;
   return (
-    <div className="flex space-x-4 my-10">
+    <div className="flex space-x-4 pt-10 mb-10">
       {links.navigation?.prev && <FooterLink {...links.navigation?.prev} right />}
       {links.navigation?.next && <FooterLink {...links.navigation?.next} />}
     </div>

package/src/loaders/utils.ts

@@ -32,6 +32,7 @@ export function getProjectHeadings(
   const headings: Heading[] = [
     {
       title: project.title,
+      short_title: project.short_title,
       slug: project.index,
       path: project.slug ? `/${project.slug}` : '/',
       level: 'index',
@@ -42,10 +43,10 @@ export function getProjectHeadings(
     }),
   ];
   if (opts.addGroups) {
-    let lastTitle = project.title;
+    let lastTitle = project.short_title || project.title;
     return headings.map((heading) => {
       if (!heading.slug || heading.level === 'index') {
-        lastTitle = heading.title;
+        lastTitle = heading.short_title || heading.title;
       }
       return { ...heading, group: lastTitle };
     });
@@ -60,6 +61,7 @@ function getHeadingLink(currentSlug: string, headings?: Heading[]): NavigationLi
   if (!link?.path) return undefined;
   return {
     title: link.title,
+    short_title: link.short_title,
     url: link.path,
     group: link.group,
   };

package/src/types.ts

@@ -25,6 +25,7 @@ export type NavigationLink = {
   group?: string;
   title: string;
   url: string;
+  short_title?: string;
 };
 
 export type FooterLinks = {