@myst-theme/site 0.15.1 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "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.15.1",
-    "@myst-theme/diagrams": "^0.15.1",
-    "@myst-theme/frontmatter": "^0.15.1",
-    "@myst-theme/providers": "^0.15.1",
-    "@myst-theme/search": "^0.15.1",
+    "@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",
     "@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.7.9",
     "myst-config": "^1.7.9",
-    "myst-demo": "^0.15.1",
+    "myst-demo": "^0.16.0",
     "myst-spec-ext": "^1.7.9",
-    "myst-to-react": "^0.15.1",
+    "myst-to-react": "^0.16.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Navigation/Navigation.tsx

@@ -82,7 +82,11 @@ export const ConfigurablePrimaryNavigation = ({
 
   // the logic on the following line looks wrong, this will return `null` or `<></>`
   // we should just return `null` if `hide_toc` is true?
-  if (hide_toc) return children ? null : <>{children}</>;
+  if (!nav && hide_toc) return children ? null : <>{children}</>;
+  if (nav && hide_toc) {
+    headings = undefined;
+    footer = null;
+  }
 
   return (
     <>
@@ -98,6 +102,7 @@ export const ConfigurablePrimaryNavigation = ({
         nav={nav}
         headings={headings}
         footer={footer}
+        hide_toc={hide_toc}
         mobileOnly={mobileOnly}
       />
       {children}

package/src/components/Navigation/PrimarySidebar.tsx

@@ -84,7 +84,7 @@ export function SidebarNavItem({ item }: { item: SiteNavItem }) {
 export function SidebarNav({ nav }: { nav?: SiteManifest['nav'] }) {
   if (!nav) return null;
   return (
-    <div className="w-full px-1 dark:text-white">
+    <div className="w-full px-1 dark:text-white font-medium">
       {nav.map((item) => {
         return <SidebarNavItem key={'url' in item ? item.url : item.title} item={item} />;
       })}
@@ -126,12 +126,14 @@ export const PrimarySidebar = ({
   nav,
   footer,
   headings,
+  hide_toc,
   mobileOnly,
 }: {
   sidebarRef?: React.RefObject<HTMLElement>;
   nav?: SiteManifest['nav'];
   headings?: Heading[];
   footer?: React.ReactNode;
+  hide_toc?: boolean;
   mobileOnly?: boolean;
 }) => {
   const top = useThemeTop();
@@ -156,6 +158,7 @@ export const PrimarySidebar = ({
         'fixed',
         `xl:${grid}`, // for example, xl:article-grid
         'grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
+        { 'lg:hidden': nav && hide_toc },
         { hidden: !open, 'z-30': open, 'z-10': !open },
       )}
       style={{ top }}

package/src/components/Navigation/TableOfContentsItems.tsx

@@ -2,9 +2,15 @@ import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import type { Heading } from '@myst-theme/common';
-import { useBaseurl, useNavLinkProvider, useNavOpen, withBaseurl } from '@myst-theme/providers';
+import {
+  useBaseurl,
+  useLinkProvider,
+  useNavLinkProvider,
+  useNavOpen,
+  withBaseurl,
+} from '@myst-theme/providers';
 import { useLocation, useNavigation } from '@remix-run/react';
-import { ChevronRightIcon } from '@heroicons/react/24/solid';
+import { ChevronRightIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';
 
 type NestedHeading = Heading & { id: string; children: NestedHeading[] };
 
@@ -72,9 +78,34 @@ function LinkItem({
   heading: NestedHeading;
   onClick?: () => void;
 }) {
+  const Link = useLinkProvider();
   const NavLink = useNavLinkProvider();
   const baseurl = useBaseurl();
   const [, setOpen] = useNavOpen();
+  // Render external URL
+  if (heading.url) {
+    const target = heading.open_in_same_tab ? '_self' : '_blank';
+    return (
+      <Link
+        title={`${heading.enumerator ? `${heading.enumerator} ` : ''}${heading.title}`}
+        className={classNames(
+          'block break-words focus:outline outline-blue-200 outline-2 rounded',
+          className,
+        )}
+        to={heading.url}
+        onClick={() => {
+          onClick?.();
+          setOpen(false);
+        }}
+        target={target}
+      >
+        <span className="inline align-middle">
+          {`${heading.enumerator ? `${heading.enumerator} ` : ''}${heading.title}`}
+        </span>
+        <ArrowTopRightOnSquareIcon className="inline h-4 w-4 align-middle ml-[0.2rem]" />
+      </Link>
+    );
+  }
   if (!heading.path) {
     return (
       <div
@@ -84,7 +115,9 @@ function LinkItem({
           onClick?.();
         }}
       >
-        {`${heading.enumerator ? `${heading.enumerator} ` : ''}${heading.short_title || heading.title}`}
+        {`${heading.enumerator ? `${heading.enumerator} ` : ''}${
+          heading.short_title || heading.title
+        }`}
       </div>
     );
   }
@@ -102,7 +135,9 @@ function LinkItem({
         setOpen(false);
       }}
     >
-      {`${heading.enumerator ? `${heading.enumerator} ` : ''}${heading.short_title || heading.title}`}
+      {`${heading.enumerator ? `${heading.enumerator} ` : ''}${
+        heading.short_title || heading.title
+      }`}
     </NavLink>
   );
 }

package/src/components/Navigation/ThemeButton.tsx

@@ -11,8 +11,8 @@ export function ThemeButton({ className = 'w-8 h-8 mx-3' }: { className?: string
         'theme rounded-full aspect-square border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800',
         className,
       )}
-      title={`Toggle theme between light and dark mode.`}
-      aria-label={`Toggle theme between light and dark mode.`}
+      title={`Toggle theme between light and dark mode`}
+      aria-label={`Toggle theme between light and dark mode`}
       onClick={nextTheme}
     >
       <MoonIcon className="h-full w-full p-0.5 hidden dark:block" />

package/src/components/Navigation/TopNav.tsx

@@ -112,8 +112,13 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
     <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">
         <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center shrink-0">
-          {!hideToc && (
-            <div className="block xl:hidden">
+          {
+            <div
+              className={classNames('block', {
+                'lg:hidden': nav && hideToc,
+                'xl:hidden': !(nav && hideToc),
+              })}
+            >
               <button
                 className="flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
                 onClick={() => {
@@ -124,7 +129,7 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
                 <span className="sr-only">Open Menu</span>
               </button>
             </div>
-          )}
+          }
           <HomeLink name={title} logo={logo} logoDark={logo_dark} logoText={logo_text} />
         </div>
         <div className="flex items-center flex-grow w-auto">