@myst-theme/site 1.1.4 → 1.2.2

package/package.json

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

package/src/components/FooterLinksBlock.tsx

@@ -12,6 +12,7 @@ export const FooterLink = ({
 }: NavigationLink & { right?: boolean }) => {
   const baseurl = useBaseurl();
   const Link = useLinkProvider();
+  const linkText = short_title || title;
   return (
     <Link
       prefetch="intent"
@@ -20,6 +21,7 @@ export const FooterLink = ({
         { 'myst-footer-link-prev': right, 'myst-footer-link-next': !right },
       )}
       to={withBaseurl(url, baseurl)}
+      aria-label={`${right ? 'Previous: ' : 'Next: '}${linkText}`}
     >
       <div className="flex h-full align-middle">
         {right && (
@@ -33,7 +35,7 @@ export const FooterLink = ({
           <div className="myst-footer-link-group text-xs text-gray-500 dark:text-gray-400">
             {group || ' '}
           </div>
-          {short_title || title}
+          {linkText}
         </div>
         {!right && (
           <ArrowRightIcon

package/src/components/Navigation/Navigation.tsx

@@ -3,6 +3,7 @@ import { PrimarySidebar } from './PrimarySidebar.js';
 import type { Heading } from '@myst-theme/common';
 import { getProjectHeadings } from '@myst-theme/common';
 import type { SiteManifest } from 'myst-config';
+import type { GenericParent } from 'myst-common';
 
 /**
  * PrimaryNavigation will load nav links and headers from the site manifest and display
@@ -15,6 +16,7 @@ export const PrimaryNavigation = ({
   hide_toc,
   mobileOnly,
   footer,
+  navbarEnd,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
@@ -22,6 +24,7 @@ export const PrimaryNavigation = ({
   hide_toc?: boolean;
   mobileOnly?: boolean;
   footer?: React.ReactNode;
+  navbarEnd?: GenericParent;
 }) => {
   const config = useSiteManifest();
   if (!config) return null;
@@ -41,6 +44,7 @@ export const PrimaryNavigation = ({
       nav={nav}
       headings={headings}
       footer={footer}
+      navbarEnd={navbarEnd}
     />
   );
 };
@@ -63,6 +67,7 @@ export const ConfigurablePrimaryNavigation = ({
   nav,
   headings,
   footer,
+  navbarEnd,
 }: {
   children?: React.ReactNode;
   sidebarRef?: React.RefObject<HTMLDivElement>;
@@ -71,6 +76,7 @@ export const ConfigurablePrimaryNavigation = ({
   nav?: SiteManifest['nav'];
   headings?: Heading[];
   footer?: React.ReactNode;
+  navbarEnd?: GenericParent;
 }) => {
   const [open, setOpen] = useNavOpen();
   const top = useThemeTop();
@@ -107,6 +113,7 @@ export const ConfigurablePrimaryNavigation = ({
         nav={nav}
         headings={headings}
         footer={footer}
+        navbarEnd={navbarEnd}
         hide_toc={hide_toc}
         mobileOnly={mobileOnly}
       />

package/src/components/Navigation/PrimarySidebar.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { useNavigation } from '@remix-run/react';
+import type { GenericParent } from 'myst-common';
+import { MyST } from 'myst-to-react';
 import {
   useNavOpen,
   useSiteManifest,
@@ -149,6 +151,7 @@ export const PrimarySidebar = ({
   sidebarRef,
   nav,
   footer,
+  navbarEnd,
   headings,
   hide_toc,
   mobileOnly,
@@ -157,6 +160,7 @@ export const PrimarySidebar = ({
   nav?: SiteManifest['nav'];
   headings?: Heading[];
   footer?: React.ReactNode;
+  navbarEnd?: GenericParent;
   hide_toc?: boolean;
   mobileOnly?: boolean;
 }) => {
@@ -222,6 +226,16 @@ export const PrimarySidebar = ({
               <SidebarNav nav={nav} />
             </nav>
           )}
+          {navbarEnd && (
+            <div
+              className={classNames(
+                'article myst-primary-sidebar-navbar-end xl:hidden p-2 my-1 flex flex-wrap gap-2 [&_p]:contents',
+                sidebarSectionInsetClass,
+              )}
+            >
+              <MyST ast={navbarEnd} />
+            </div>
+          )}
           {nav && headings && <div className="my-3 border-b-2 lg:hidden" />}
           {headings && (
             <nav

package/src/components/Navigation/Search.tsx

@@ -245,13 +245,13 @@ function SearchResultItem({
     />
   );
 
-  // Render the subtitle i.e. file name
-  let subtitleRenderer;
+  // Render the context i.e. file name
+  let contextRenderer;
   if (result.type === 'lvl1') {
-    subtitleRenderer = undefined;
+    contextRenderer = undefined;
   } else {
-    const subtitle = result.hierarchy.lvl1!;
-    subtitleRenderer = <MarkedText text={subtitle} matches={matches} className="text-xs" />;
+    const contextName = result.hierarchy.lvl1!;
+    contextRenderer = <MarkedText text={contextName} matches={matches} className="text-xs" />;
   }
 
   const enterIconRenderer = (
@@ -268,8 +268,8 @@ function SearchResultItem({
       <div className="flex flex-row h-11">
         {iconRenderer}
         <div className="flex flex-col justify-center truncate grow">
+          {contextRenderer}
           {titleRenderer}
-          {subtitleRenderer}
         </div>
         {enterIconRenderer}
       </div>
@@ -527,6 +527,7 @@ function SearchForm({
             id={searchInputID}
             aria-labelledby={searchLabelID}
             aria-controls={searchListID}
+            aria-expanded={!!searchResults}
             placeholder="Search"
             type="search"
             required
@@ -557,9 +558,15 @@ const SearchPlaceholderButton = forwardRef<
   HTMLButtonElement,
   SearchPlaceholderButtonProps & Dialog.DialogTriggerProps
 >(({ className, disabled, ...props }, ref) => {
+  // Here we remove aria-controls from props so we can *decide* whether to insert it later
+  // This is because radix has a bug where it'll try pointing to a non-existent element
+  // if the dialog isn't open, so that's the logic we test below.
+  // ref: https://github.com/radix-ui/primitives/issues/3560
+  const { 'aria-controls': ariaControls, ...restProps } = props;
   return (
     <button
-      {...props}
+      {...restProps}
+      aria-controls={restProps['aria-expanded'] ? ariaControls : undefined}
       className={classNames(
         'myst-search-bar',
         className,

package/src/components/Navigation/TopNav.tsx

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon, Bars3Icon as MenuIcon } from '@heroicons/react/24/solid';
 import type { SiteManifest, SiteNavItem } from 'myst-config';
+import type { GenericParent } from 'myst-common';
+import { MyST } from 'myst-to-react';
 import { ThemeButton } from './ThemeButton.js';
 import { Search } from './Search.js';
 import {
@@ -113,7 +115,15 @@ export function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   );
 }
 
-export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?: boolean }) {
+export function TopNav({
+  hideToc,
+  hideSearch,
+  navbarEnd,
+}: {
+  hideToc?: boolean;
+  hideSearch?: boolean;
+  navbarEnd?: GenericParent;
+}) {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
@@ -152,8 +162,17 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
         <div className="flex items-center flex-grow w-auto">
           <NavItems nav={nav} />
           <div className="flex-grow block"></div>
+          {/* Search bar */}
           {!hideSearch && <Search />}
-          <ThemeButton />
+          {/* Light/Dark theme button */}
+          <ThemeButton className="w-10 h-10 ml-3" />
+          {/* Custom part at end of navbar. It is `hidden` up until xl size since it will be in the sidebar drawer up to that point */}
+          {navbarEnd && (
+            <div className="article myst-navbar-end hidden xl:flex items-center ml-3 [&>*]:m-0">
+              <MyST ast={navbarEnd} />
+            </div>
+          )}
+          {/* Mobile pop-up for page actions */}
           <div className="block sm:hidden">
             <ActionMenu actions={actions} />
           </div>