@myst-theme/site 0.13.2 → 0.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,12 +21,12 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.13.2",
-    "@myst-theme/diagrams": "^0.13.2",
-    "@myst-theme/frontmatter": "^0.13.2",
-    "@myst-theme/jupyter": "^0.13.2",
-    "@myst-theme/providers": "^0.13.2",
-    "@myst-theme/search": "^0.13.2",
+    "@myst-theme/common": "^0.13.4",
+    "@myst-theme/diagrams": "^0.13.4",
+    "@myst-theme/frontmatter": "^0.13.4",
+    "@myst-theme/jupyter": "^0.13.4",
+    "@myst-theme/providers": "^0.13.4",
+    "@myst-theme/search": "^0.13.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.2.0",
@@ -35,11 +35,11 @@
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.7.2",
-    "myst-config": "^1.7.2",
-    "myst-demo": "^0.13.2",
-    "myst-spec-ext": "^1.7.2",
-    "myst-to-react": "^0.13.2",
+    "myst-common": "^1.7.3",
+    "myst-config": "^1.7.3",
+    "myst-demo": "^0.13.4",
+    "myst-spec-ext": "^1.7.3",
+    "myst-to-react": "^0.13.4",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/DocumentOutline.tsx

@@ -12,6 +12,7 @@ import type { RefObject } from 'react';
 import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { slugToUrl } from 'myst-common';
 
 const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 
@@ -365,7 +366,7 @@ export const DocumentOutline = ({
   selector?: string;
   children?: React.ReactNode;
   maxdepth?: number;
-  isMargin: boolean;
+  isMargin?: boolean;
 }) => {
   const { activeId, headings } = useHeaders(selector, maxdepth);
   const [open, setOpen] = useState(false);
@@ -443,7 +444,7 @@ export function SupportingDocuments() {
             return (
               <li key={p.slug}>
                 <NavLink
-                  to={withBaseurl(`/${p.slug}#main`, baseurl)}
+                  to={withBaseurl(`/${slugToUrl(p.slug)}#main`, baseurl)}
                   prefetch="intent"
                   className={({ isActive }) =>
                     classNames('no-underline flex self-center hover:text-blue-700', {

package/src/components/Navigation/Navigation.tsx

@@ -77,7 +77,7 @@ export const ConfigurablePrimaryNavigation = ({
 
   if (children)
     console.warn(
-      `Including children in Navigation can break keyboard accessbility and is deprecated. Please move children to the page component.`,
+      `Including children in Navigation can break keyboard accessibility and is deprecated. Please move children to the page component.`,
     );
 
   // the logic on the following line looks wrong, this will return `null` or `<></>`

package/src/components/Navigation/TableOfContentsItems.tsx

@@ -35,10 +35,16 @@ function nestToc(toc: Heading[]): NestedHeading[] {
   return items;
 }
 
+function pathnameMatchesHeading(pathname: string, heading: Heading, baseurl?: string) {
+  const headingPath = withBaseurl(heading.path, baseurl);
+  if (pathname && headingPath === `${pathname}/index`) return true;
+  return headingPath === pathname;
+}
+
 function childrenOpen(headings: NestedHeading[], pathname: string, baseurl?: string): string[] {
   return headings
     .map((heading) => {
-      if (withBaseurl(heading.path, baseurl) === pathname) return [heading.id];
+      if (pathnameMatchesHeading(pathname, heading, baseurl)) return [heading.id];
       const open = childrenOpen(heading.children, pathname, baseurl);
       if (open.length === 0) return [];
       return [heading.id, ...open];
@@ -110,7 +116,7 @@ const NestedToc = ({ heading }: { heading: NestedHeading }) => {
   useEffect(() => {
     if (nav.state === 'idle') setOpen(startOpen);
   }, [nav.state]);
-  const exact = pathname === withBaseurl(heading.path, baseurl);
+  const exact = pathnameMatchesHeading(pathname, heading, baseurl);
   if (!heading.children || heading.children.length === 0) {
     return (
       <LinkItem

package/src/seo/sitemap.ts

@@ -1,3 +1,4 @@
+import { slugToUrl } from 'myst-common';
 import type { SiteManifest } from 'myst-config';
 
 type ManifestProjectItem = Required<SiteManifest>['projects'][0]['pages'][0];
@@ -148,7 +149,7 @@ export function getSiteSlugs(
         const projectSlug = project.slug ? `/${project.slug}` : '';
         const pages = project.pages
           .filter((page): page is ManifestProjectItem => 'slug' in page)
-          .map((page) => `${baseurl}${projectSlug}/${page.slug}`);
+          .map((page) => `${baseurl}${projectSlug}/${slugToUrl(page.slug)}`);
         if (opts?.excludeIndex) return [...pages];
         return [
           opts?.explicitIndex