@myst-theme/site 0.16.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,21 +21,21 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.16.0",
-    "@myst-theme/diagrams": "^0.16.0",
-    "@myst-theme/frontmatter": "^0.16.0",
-    "@myst-theme/providers": "^0.16.0",
-    "@myst-theme/search": "^0.16.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",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.7.9",
+    "myst-common": "^1.8.1",
     "myst-config": "^1.7.9",
-    "myst-demo": "^0.16.0",
-    "myst-spec-ext": "^1.7.9",
-    "myst-to-react": "^0.16.0",
+    "myst-demo": "^0.17.1",
+    "myst-spec-ext": "^1.8.1",
+    "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/HomeLink.tsx

@@ -6,11 +6,13 @@ export function HomeLink({
   logoDark,
   logoText,
   name,
+  url,
 }: {
   logo?: string;
   logoDark?: string;
   logoText?: string;
   name?: string;
+  url?: string;
 }) {
   const Link = useLinkProvider();
   const baseurl = useBaseurl();
@@ -18,7 +20,7 @@ export function HomeLink({
   return (
     <Link
       className="flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
-      to={withBaseurl('/', baseurl)}
+      to={url ? url : withBaseurl('/', baseurl)}
       prefetch="intent"
     >
       {logo && (

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',
@@ -107,7 +114,7 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
-  const { logo, logo_dark, logo_text } = config?.options ?? {};
+  const { logo, logo_dark, logo_text, logo_url } = config?.options ?? {};
   return (
     <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-screen top-0 z-30 h-[60px]">
       <nav className="flex items-center justify-between flex-nowrap max-w-[1440px] mx-auto">
@@ -130,7 +137,13 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
               </button>
             </div>
           }
-          <HomeLink name={title} logo={logo} logoDark={logo_dark} logoText={logo_text} />
+          <HomeLink
+            name={title}
+            logo={logo}
+            logoDark={logo_dark}
+            logoText={logo_text}
+            url={logo_url}
+          />
         </div>
         <div className="flex items-center flex-grow w-auto">
           <NavItems nav={nav} />

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>
   );
 }