@myst-theme/site 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.6",
+  "version": "0.5.8",
+  "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,22 +17,22 @@
   "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.8",
+    "@myst-theme/frontmatter": "^0.5.8",
+    "@myst-theme/jupyter": "^0.5.8",
+    "@myst-theme/common": "^0.5.8",
+    "@myst-theme/providers": "^0.5.8",
     "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.8",
+    "myst-to-react": "^0.5.8",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.3.2",
+    "thebe-react": "^0.3.5",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {

package/src/components/Abstract.tsx

@@ -1,12 +1,16 @@
 import type { GenericParent } from 'myst-common';
-import { ContentBlocks } from './ContentBlocks';
+import { ContentBlocks } from './ContentBlocks.js';
 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/DocumentOutline.tsx

@@ -8,7 +8,7 @@ import { useNavigation } from '@remix-run/react';
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import DocumentChartBarIcon from '@heroicons/react/24/outline/DocumentChartBarIcon';
+import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
 
 const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 const HIGHLIGHT_CLASS = 'highlight';

package/src/components/FooterLinksBlock.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
-import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
-import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import type { FooterLinks, NavigationLink } from '@myst-theme/common';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 

package/src/components/Headers.tsx

@@ -8,7 +8,7 @@ import {
 import { useGridSystemProvider } from '@myst-theme/providers';
 import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
-import { ThemeButton } from './Navigation';
+import { ThemeButton } from './Navigation/index.js';
 
 export function ArticleHeader({
   frontmatter,

package/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,5 @@
 import { useNavOpen, useThemeTop } from '@myst-theme/providers';
-import { TableOfContents } from './TableOfContents';
+import { TableOfContents } from './TableOfContents.js';
 
 export function Navigation({
   children,
@@ -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/Navigation/ThemeButton.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@myst-theme/providers';
-import MoonIcon from '@heroicons/react/24/solid/MoonIcon';
-import SunIcon from '@heroicons/react/24/outline/SunIcon';
+import { MoonIcon } from '@heroicons/react/24/solid';
+import { SunIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
 export function ThemeButton({ className = 'w-8 h-8 mx-3' }: { className?: string }) {

package/src/components/Navigation/TopNav.tsx

@@ -2,11 +2,13 @@ import { NavLink } from '@remix-run/react';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
-import EllipsisVerticalIcon from '@heroicons/react/24/solid/EllipsisVerticalIcon';
-import MenuIcon from '@heroicons/react/24/solid/Bars3Icon';
-import ChevronDownIcon from '@heroicons/react/24/solid/ChevronDownIcon';
+import {
+  EllipsisVerticalIcon,
+  ChevronDownIcon,
+  Bars3Icon as MenuIcon,
+} from '@heroicons/react/24/solid';
 import type { SiteManifest, SiteNavItem } from 'myst-config';
-import { ThemeButton } from './ThemeButton';
+import { ThemeButton } from './ThemeButton.js';
 import {
   useBaseurl,
   useLinkProvider,
@@ -14,7 +16,7 @@ import {
   useSiteManifest,
   withBaseurl,
 } from '@myst-theme/providers';
-import { LoadingBar } from './Loading';
+import { LoadingBar } from './Loading.js';
 
 export const DEFAULT_NAV_HEIGHT = 60;
 

package/src/components/Navigation/index.tsx

@@ -1,5 +1,5 @@
-export { ThemeButton } from './ThemeButton';
-export { TopNav, DEFAULT_NAV_HEIGHT } from './TopNav';
-export { Navigation } from './Navigation';
-export { TableOfContents, InlineTableOfContents, useTocHeight } from './TableOfContents';
-export { LoadingBar } from './Loading';
+export { ThemeButton } from './ThemeButton.js';
+export { TopNav, DEFAULT_NAV_HEIGHT } from './TopNav.js';
+export { Navigation } from './Navigation.js';
+export { TableOfContents, InlineTableOfContents, useTocHeight } from './TableOfContents.js';
+export { LoadingBar } from './Loading.js';

package/src/components/SkipToArticle.tsx

@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+
+function makeSkipClickHandler(hash: string) {
+  return (e: React.UIEvent<HTMLElement, Event>) => {
+    e.preventDefault();
+    const el = document.querySelector(`#${hash}`);
+    if (!el) return;
+    (el.nextSibling as HTMLElement).focus();
+    history.replaceState(undefined, '', `#${hash}`);
+  };
+}
+
+export function SkipToArticle({
+  frontmatter = true,
+  article = true,
+}: {
+  frontmatter?: boolean;
+  article?: boolean;
+}) {
+  const fm = 'skip-to-frontmatter';
+  const art = 'skip-to-article';
+
+  const frontmatterHandler = useCallback(() => makeSkipClickHandler(fm), [frontmatter]);
+  const articleHandler = useCallback(() => makeSkipClickHandler(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={frontmatterHandler}
+        >
+          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

@@ -1,10 +1,11 @@
-export { ContentBlocks } from './ContentBlocks';
-export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './DocumentOutline';
-export { FooterLinksBlock } from './FooterLinksBlock';
-export { ContentReload } from './ContentReload';
-export { Bibliography } from './Bibliography';
-export { ArticleHeader } from './Headers';
-export { Abstract, Keywords } from './Abstract';
-export { ExternalOrInternalLink } from './ExternalOrInternalLink';
-export * from './Navigation';
-export { renderers } from './renderers';
+export { ContentBlocks } from './ContentBlocks.js';
+export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './DocumentOutline.js';
+export { FooterLinksBlock } from './FooterLinksBlock.js';
+export { ContentReload } from './ContentReload.js';
+export { Bibliography } from './Bibliography.js';
+export { ArticleHeader } from './Headers.js';
+export { Abstract, Keywords } from './Abstract.js';
+export { ExternalOrInternalLink } from './ExternalOrInternalLink.js';
+export * from './Navigation/index.js';
+export { renderers } from './renderers.js';
+export * from './SkipToArticle.js';

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from './utils';
-export * from './loaders';
-export * from './components';
-export * from './pages';
-export * from './seo';
+export * from './utils.js';
+export * from './loaders/index.js';
+export * from './components/index.js';
+export * from './pages/index.js';
+export * from './seo/index.js';

package/src/loaders/index.ts

@@ -1,3 +1,3 @@
-export * from './errors.server';
-export * from './links';
-export * from './theme.server';
+export * from './errors.server.js';
+export * from './links.js';
+export * from './theme.server.js';

package/src/pages/Article.tsx

@@ -1,18 +1,22 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
-import { Abstract, Bibliography, ContentBlocks, FooterLinksBlock, Keywords } from '../components';
-import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
-import { ErrorProjectNotFound } from './ErrorProjectNotFound';
+import {
+  Abstract,
+  Bibliography,
+  ContentBlocks,
+  FooterLinksBlock,
+  Keywords,
+} from '../components/index.js';
+import { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
+import { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 import type { PageLoader } from '@myst-theme/common';
 import { copyNode, extractPart, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
 import {
-  useComputeOptions,
   ExecuteScopeProvider,
   BusyScopeProvider,
   NotebookToolbar,
   ConnectionStatusTray,
-  BinderBadge,
   useCanCompute,
   ErrorTray,
 } from '@myst-theme/jupyter';
@@ -30,14 +34,11 @@ export const ArticlePage = React.memo(function ({
   hideKeywords?: boolean;
 }) {
   const canCompute = useCanCompute(article);
-  const { binderBadgeUrl } = useComputeOptions();
   const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
 
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
   const abstract = showAbstract ? extractPart(tree, 'abstract') : undefined;
-  // take binder url from article frontmatter or fallback to project
-  const binderUrl = article.frontmatter.binder ?? binderBadgeUrl;
 
   return (
     <ReferencesProvider
@@ -53,13 +54,9 @@ export const ArticlePage = React.memo(function ({
               className="pt-5 mb-8"
             />
           )}
-          {binderUrl && !canCompute && (
-            <div className="flex justify-end">
-              <BinderBadge binder={binderUrl} />
-            </div>
-          )}
           {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} />

package/src/pages/Root.tsx

@@ -12,12 +12,13 @@ import {
   Link,
   NavLink,
 } from '@remix-run/react';
-import { DEFAULT_NAV_HEIGHT, renderers } from '../components';
-import { Analytics } from '../seo';
-import { Error404 } from './Error404';
+import { DEFAULT_NAV_HEIGHT, renderers } from '../components/index.js';
+import { Analytics } from '../seo/index.js';
+import { Error404 } from './Error404.js';
 import classNames from 'classnames';
 import { ConfiguredThebeServerProvider } from '@myst-theme/jupyter';
 import { ThebeBundleLoaderProvider } from 'thebe-react';
+import type { BinderOptions, RepoProviderSpec } from 'thebe-core';
 
 export function Document({
   children,
@@ -27,6 +28,7 @@ export function Document({
   title,
   staticBuild,
   baseurl,
+  loadThebeLite,
   top = DEFAULT_NAV_HEIGHT,
 }: {
   children: React.ReactNode;
@@ -36,6 +38,7 @@ export function Document({
   title?: string;
   staticBuild?: boolean;
   baseurl?: string;
+  loadThebeLite?: boolean;
   top?: number;
 }) {
   const links = staticBuild
@@ -63,9 +66,11 @@ export function Document({
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
         <ThemeProvider theme={theme} renderers={renderers} {...links} top={top}>
           <BaseUrlProvider baseurl={baseurl}>
-            <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
+            <ThebeBundleLoaderProvider loadThebeLite={loadThebeLite} publicPath={baseurl}>
               <SiteProvider config={config}>
-                <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
+                <ConfiguredThebeServerProvider siteManifest={config}>
+                  {children}
+                </ConfiguredThebeServerProvider>
               </SiteProvider>
             </ThebeBundleLoaderProvider>
           </BaseUrlProvider>

package/src/pages/index.ts

@@ -1,5 +1,5 @@
-export { ErrorProjectNotFound } from './ErrorProjectNotFound';
-export { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
-export { Error404 } from './Error404';
-export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article';
-export { App, Document, AppCatchBoundary } from './Root';
+export { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
+export { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
+export { Error404 } from './Error404.js';
+export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article.js';
+export { App, Document, AppCatchBoundary } from './Root.js';

package/src/seo/index.ts

@@ -1,4 +1,4 @@
-export * from './analytics';
-export * from './meta';
-export * from './sitemap';
-export * from './robots';
+export * from './analytics.js';
+export * from './meta.js';
+export * from './sitemap.js';
+export * from './robots.js';