@myst-theme/site 0.13.0 → 0.13.2

package/package.json

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

package/src/components/DocumentOutline.tsx

@@ -60,11 +60,14 @@ const Headings = ({ headings, activeId }: Props) => (
           href={`#${heading.id}`}
           onClick={(e) => {
             e.preventDefault();
-            const el = document.querySelector(`#${heading.id}`);
+            const el = document.querySelector(`#${heading.id}`) as HTMLElement | undefined;
             if (!el) return;
 
             el.scrollIntoView({ behavior: 'smooth' });
             history.replaceState(undefined, '', `#${heading.id}`);
+            // Changes keyboard tab-index location
+            if (el.tabIndex === -1) el.tabIndex = -1;
+            el.focus({ preventScroll: true });
           }}
           // Note that the title can have math in it!
           dangerouslySetInnerHTML={{ __html: heading.titleHTML }}

package/src/components/Headers.tsx

@@ -7,7 +7,7 @@ import {
 } from '@myst-theme/frontmatter';
 import { useGridSystemProvider } from '@myst-theme/providers';
 import classNames from 'classnames';
-import type { PageFrontmatter } from 'myst-frontmatter';
+import type { PageFrontmatterWithDownloads } from '@myst-theme/common';
 import { ThemeButton } from './Navigation/index.js';
 
 export function ArticleHeader({
@@ -16,13 +16,13 @@ export function ArticleHeader({
   toggleTheme,
   className,
 }: {
-  frontmatter: PageFrontmatter;
+  frontmatter: PageFrontmatterWithDownloads;
   children?: React.ReactNode;
   toggleTheme?: boolean;
   className?: string;
 }) {
   const grid = useGridSystemProvider();
-  const { subject, venue, biblio, ...rest } = frontmatter ?? {};
+  const { subject, venue, volume, issue, ...rest } = frontmatter ?? {};
   const positionBackground = {
     'col-page-right': grid === 'article-left-grid',
     'col-page': grid === 'article-grid',
@@ -71,7 +71,12 @@ export function ArticleHeader({
             })}
           >
             {subject && <div className={classNames('flex-none pr-2 smallcaps')}>{subject}</div>}
-            <Journal venue={venue} biblio={biblio} className="hidden pl-2 border-l md:block" />
+            <Journal
+              venue={venue}
+              volume={volume}
+              issue={issue}
+              className="hidden pl-2 border-l md:block"
+            />
             <div className="flex-grow"></div>
             <div className="hidden sm:block">
               <LicenseBadges license={frontmatter?.license} />

package/src/components/Navigation/Search.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo, useCallback, useRef, forwardRef } from 'react';
 import type { KeyboardEventHandler, Dispatch, SetStateAction, FormEvent, MouseEvent } from 'react';
-import { useNavigate, useFetcher } from '@remix-run/react';
+import { useFetcher } from '@remix-run/react';
 import {
   ArrowTurnDownLeftIcon,
   MagnifyingGlassIcon,
@@ -20,6 +20,7 @@ import {
   useLinkProvider,
   withBaseurl,
   useBaseurl,
+  useNavigateProvider,
 } from '@myst-theme/providers';
 
 /**
@@ -182,6 +183,7 @@ function SearchResultItem({
   closeSearch?: () => void;
 }) {
   const { hierarchy, type, url, queries } = result;
+  const baseurl = useBaseurl();
   const Link = useLinkProvider();
 
   // Render the icon
@@ -219,7 +221,7 @@ function SearchResultItem({
   return (
     <Link
       className="block px-1 py-2 text-gray-700 rounded shadow-md dark:text-white group-aria-selected:bg-blue-600 group-aria-selected:text-white dark:shadow-none dark:bg-stone-800"
-      to={url}
+      to={withBaseurl(url, baseurl)}
       // Close the main search on click
       onClick={closeSearch}
     >
@@ -415,7 +417,8 @@ function SearchForm({
     setQuery(event.target.value);
   }, []);
   // Handle item selection
-  const navigate = useNavigate();
+  const navigate = useNavigateProvider();
+  const baseurl = useBaseurl();
 
   // Handle item selection and navigation
   const handleSearchKeyPress = useCallback<KeyboardEventHandler<HTMLInputElement>>(
@@ -434,7 +437,7 @@ function SearchForm({
 
         const url = searchResults[selectedIndex]?.url;
         if (url) {
-          navigate(url);
+          navigate(withBaseurl(url, baseurl));
           closeSearch?.();
         }
       }

package/src/components/SkipToArticle.tsx

@@ -3,10 +3,13 @@ import React, { useCallback } from 'react';
 function makeSkipClickHandler(hash: string) {
   return (e: React.UIEvent<HTMLElement, Event>) => {
     e.preventDefault();
-    const el = document.querySelector(`#${hash}`);
+    const el = document.querySelector(`#${hash}`) as HTMLElement;
     if (!el) return;
     (el.nextSibling as HTMLElement).focus();
     history.replaceState(undefined, '', `#${hash}`);
+    // Changes keyboard tab-index location
+    if (el.tabIndex === -1) el.tabIndex = -1;
+    el.focus({ preventScroll: true });
   };
 }
 

package/src/pages/Article.tsx

@@ -42,7 +42,7 @@ export const ArticlePage = React.memo(function ({
   const downloads = combineDownloads(manifest?.downloads, article.frontmatter);
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
-  const parts = extractKnownParts(tree);
+  const parts = extractKnownParts(tree, article.frontmatter?.parts);
 
   return (
     <ReferencesProvider

package/src/pages/ErrorUnhandled.tsx

@@ -8,7 +8,7 @@ export function ErrorUnhandled({ error }: { error: ErrorResponse }) {
     <>
       <h1>Unexpected Error Occurred</h1>
       <p>Status: {error.status}</p>
-      <p>{error.data.message}</p>
+      <p>{error.data?.message ?? ''}</p>
     </>
   );
 }

package/src/pages/Root.tsx

@@ -20,6 +20,7 @@ import {
   NavLink,
   useRouteError,
   isRouteErrorResponse,
+  useNavigate,
 } from '@remix-run/react';
 import {
   DEFAULT_NAV_HEIGHT,
@@ -53,6 +54,7 @@ export function Document({
   top?: number;
   renderers?: NodeRenderers;
 }) {
+  const navigate = useNavigate();
   const links = staticBuild
     ? {
         Link: (props: any) => <Link {...{ ...props, reloadDocument: true }} />,
@@ -61,6 +63,7 @@ export function Document({
     : {
         Link: Link as any,
         NavLink: NavLink as any,
+        navigate,
       };
 
   // (Local) theme state driven by SSR and cookie/localStorage

package/src/utils.ts

@@ -18,13 +18,21 @@ export type KnownParts = {
   acknowledgments?: GenericParent;
 };
 
-export function extractKnownParts(tree: GenericParent): KnownParts {
+export function extractKnownParts(
+  tree: GenericParent,
+  parts?: Record<string, { mdast?: GenericParent }>,
+): KnownParts {
   const abstract = extractPart(tree, 'abstract');
   const summary = extractPart(tree, 'summary', { requireExplicitPart: true });
   const keypoints = extractPart(tree, ['keypoints'], { requireExplicitPart: true });
   const data_availability = extractPart(tree, ['data_availability', 'data availability']);
   const acknowledgments = extractPart(tree, ['acknowledgments', 'acknowledgements']);
-  return { abstract, summary, keypoints, data_availability, acknowledgments };
+  const otherParts = Object.fromEntries(
+    Object.entries(parts ?? {}).map(([k, v]) => {
+      return [k, v.mdast];
+    }),
+  );
+  return { abstract, summary, keypoints, data_availability, acknowledgments, ...otherParts };
 }
 
 /**