@myst-theme/site 0.5.6 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,18 +16,18 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.5.6",
-    "@myst-theme/frontmatter": "^0.5.6",
-    "@myst-theme/jupyter": "^0.5.6",
-    "@myst-theme/common": "^0.5.6",
-    "@myst-theme/providers": "^0.5.6",
+    "@myst-theme/diagrams": "^0.5.7",
+    "@myst-theme/frontmatter": "^0.5.7",
+    "@myst-theme/jupyter": "^0.5.7",
+    "@myst-theme/common": "^0.5.7",
+    "@myst-theme/providers": "^0.5.7",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.1.4",
-    "myst-spec-ext": "^1.1.4",
-    "myst-config": "^1.1.4",
-    "myst-demo": "^0.5.6",
-    "myst-to-react": "^0.5.6",
+    "myst-common": "^1.1.8",
+    "myst-spec-ext": "^1.1.8",
+    "myst-config": "^1.1.8",
+    "myst-demo": "^0.5.7",
+    "myst-to-react": "^0.5.7",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Abstract.tsx

@@ -1,12 +1,16 @@
 import type { GenericParent } from 'myst-common';
 import { ContentBlocks } from './ContentBlocks';
 import classNames from 'classnames';
+import { HashLink } from 'myst-to-react';
 
 export function Abstract({ content }: { content: GenericParent }) {
-  if (!content) return null;
+  if (!content) return <div className="hidden" aria-label="this article has no abstract" />;
   return (
     <>
-      <span className="mb-3 font-semibold">Abstract</span>
+      <h2 id="abstract" className="mb-3 text-base font-semibold group">
+        Abstract
+        <HashLink id="abstract" title="Link to Abstract" hover className="ml-2" />
+      </h2>
       <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
         <ContentBlocks mdast={content} className="col-body" />
       </div>
@@ -21,9 +25,10 @@ export function Keywords({
   keywords?: string[];
   hideKeywords?: boolean;
 }) {
-  if (hideKeywords || !keywords || keywords.length === 0) return null;
+  if (hideKeywords || !keywords || keywords.length === 0)
+    return <div className="hidden" aria-label="this article has no keywords" />;
   return (
-    <div className="mb-10">
+    <div className="mb-10 group">
       <span className="mr-2 font-semibold">Keywords:</span>
       {keywords.map((k, i) => (
         <span
@@ -35,6 +40,7 @@ export function Keywords({
           {k}
         </span>
       ))}
+      <HashLink id="keywords" title="Link to Keywords" hover className="ml-2" />
     </div>
   );
 }

package/src/components/Navigation/Navigation.tsx

@@ -16,10 +16,13 @@ export function Navigation({
 }) {
   const [open, setOpen] = useNavOpen();
   const top = useThemeTop();
-  if (hide_toc) return <>{children}</>;
+  if (children)
+    console.warn(
+      `Including children in Navigation can break keyboard accessbility and is deprecated. Please move children to the page component.`,
+    );
+  if (hide_toc) return children ? null : <>{children}</>;
   return (
     <>
-      {children}
       {open && (
         <div
           className="fixed inset-0 z-30 bg-black opacity-50"
@@ -28,6 +31,7 @@ export function Navigation({
         ></div>
       )}
       <TableOfContents tocRef={tocRef} projectSlug={projectSlug} footer={footer} />
+      {children}
     </>
   );
 }

package/src/components/Navigation/TableOfContents.tsx

@@ -168,8 +168,7 @@ export const TableOfContents = ({
         'fixed',
         `xl:${grid}`, // for example, xl:article-grid
         'grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
-        { hidden: !open },
-        { 'z-30': open },
+        { hidden: !open, 'z-30': open, 'z-10': !open },
       )}
       style={{ top }}
     >

package/src/components/SkipToArticle.tsx

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+
+function makeSkipClickHander(hash: string) {
+  return (e: React.UIEvent<HTMLElement, Event>) => {
+    e.preventDefault();
+    const el = document.querySelector(`#${hash}`);
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth' });
+    history.replaceState(undefined, '', `#${hash}`);
+    (el.nextSibling as HTMLElement).focus({ preventScroll: true });
+    (e.target as HTMLElement).blur();
+  };
+}
+
+export function SkipToArticle({
+  frontmatter = true,
+  article = true,
+}: {
+  frontmatter?: boolean;
+  article?: boolean;
+}) {
+  const fm = 'skip-to-frontmatter';
+  const art = 'skip-to-article';
+
+  const frontmatterHander = useCallback(() => makeSkipClickHander(fm), [frontmatter]);
+  const articleHandler = useCallback(() => makeSkipClickHander(art), [article]);
+  return (
+    <div
+      className="fixed top-1 left-1 h-[0px] w-[0px] focus-within:z-40 focus-within:h-auto focus-within:w-auto bg-white overflow-hidden focus-within:p-2 focus-within:ring-1"
+      aria-label="skip to content options"
+    >
+      {frontmatter && (
+        <a
+          href={`#${fm}`}
+          className="block px-2 py-1 text-black underline"
+          onClick={frontmatterHander}
+        >
+          Skip to article frontmatter
+        </a>
+      )}
+      {article && (
+        <a
+          href={`#${art}`}
+          className="block px-2 py-1 text-black underline"
+          onClick={articleHandler}
+        >
+          Skip to article content
+        </a>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -8,3 +8,4 @@ export { Abstract, Keywords } from './Abstract';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink';
 export * from './Navigation';
 export { renderers } from './renderers';
+export * from './SkipToArticle';

package/src/pages/Article.tsx

@@ -60,6 +60,7 @@ export const ArticlePage = React.memo(function ({
           )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
+          <div id="skip-to-article" />
           <Abstract content={abstract as GenericParent} />
           {abstract && <Keywords keywords={keywords} hideKeywords={hideKeywords} />}
           <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />