@myst-theme/site 0.17.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,11 +21,11 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.17.0",
-    "@myst-theme/diagrams": "^0.17.0",
-    "@myst-theme/frontmatter": "^0.17.0",
-    "@myst-theme/providers": "^0.17.0",
-    "@myst-theme/search": "^0.17.0",
+    "@myst-theme/common": "^0.17.1",
+    "@myst-theme/diagrams": "^0.17.1",
+    "@myst-theme/frontmatter": "^0.17.1",
+    "@myst-theme/providers": "^0.17.1",
+    "@myst-theme/search": "^0.17.1",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
@@ -33,9 +33,9 @@
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.8.1",
     "myst-config": "^1.7.9",
-    "myst-demo": "^0.17.0",
+    "myst-demo": "^0.17.1",
     "myst-spec-ext": "^1.8.1",
-    "myst-to-react": "^0.17.0",
+    "myst-to-react": "^0.17.1",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/DocumentOutline.tsx

@@ -410,7 +410,10 @@ 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">
           {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">
+            <button
+              className="self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2"
+              aria-label="Open Contents"
+            >
               <ChevronRightIcon
                 className="transition-transform duration-300 group-data-[state=open]:rotate-90 text-text-slate-700 dark:text-slate-100"
                 height="1.5rem"

package/src/components/Navigation/TableOfContentsItems.tsx

@@ -43,8 +43,12 @@ function nestToc(toc: Heading[]): NestedHeading[] {
 
 function pathnameMatchesHeading(pathname: string, heading: Heading, baseurl?: string) {
   const headingPath = withBaseurl(heading.path, baseurl);
-  if (pathname && headingPath === `${pathname}/index`) return true;
-  return headingPath === pathname;
+  // In static html builds, pathname ends up with an unwanted trailing slash
+  // and then won't match the heading's slashless path. So first normalize the
+  // given path by removing any trailing slash.
+  const normedPath = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+  if (normedPath && headingPath === `${normedPath}/index`) return true;
+  return headingPath === normedPath;
 }
 
 function childrenOpen(headings: NestedHeading[], pathname: string, baseurl?: string): string[] {

package/src/components/Navigation/TopNav.tsx

@@ -5,7 +5,13 @@ import { ChevronDownIcon, Bars3Icon as MenuIcon } from '@heroicons/react/24/soli
 import type { SiteManifest, SiteNavItem } from 'myst-config';
 import { ThemeButton } from './ThemeButton.js';
 import { Search } from './Search.js';
-import { useNavLinkProvider, useNavOpen, useSiteManifest } from '@myst-theme/providers';
+import {
+  useBaseurl,
+  useNavLinkProvider,
+  useNavOpen,
+  useSiteManifest,
+  withBaseurl,
+} from '@myst-theme/providers';
 import { LoadingBar } from './Loading.js';
 import { HomeLink } from './HomeLink.js';
 import { ActionMenu } from './ActionMenu.js';
@@ -15,12 +21,13 @@ export const DEFAULT_NAV_HEIGHT = 60;
 
 export function NavItem({ item }: { item: SiteNavItem }) {
   const NavLink = useNavLinkProvider();
+  const baseurl = useBaseurl();
   if (!('children' in item)) {
     return (
       <div className="relative inline-block mx-2 grow-0">
         <ExternalOrInternalLink
           nav
-          to={item.url ?? ''}
+          to={withBaseurl(item.url, baseurl) ?? ''}
           className={({ isActive }) =>
             classNames(
               'inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',

package/src/pages/Root.tsx

@@ -168,11 +168,11 @@ export function AppErrorBoundary() {
   const error = useRouteError();
   return (
     <Document theme={Theme.light}>
-      <article className="article">
-        <main className="article-grid subgrid-gap col-screen">
+      <main className="article-grid subgrid-gap col-screen">
+        <article className="article">
           {isRouteErrorResponse(error) ? <Error404 /> : <ErrorUnhandled error={error as any} />}
-        </main>
-      </article>
+        </article>
+      </main>
     </Document>
   );
 }