@myst-theme/site 0.9.6 → 0.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.9.6",
-    "@myst-theme/diagrams": "^0.9.6",
-    "@myst-theme/frontmatter": "^0.9.6",
-    "@myst-theme/jupyter": "^0.9.6",
-    "@myst-theme/providers": "^0.9.6",
+    "@myst-theme/common": "^0.9.8",
+    "@myst-theme/diagrams": "^0.9.8",
+    "@myst-theme/frontmatter": "^0.9.8",
+    "@myst-theme/jupyter": "^0.9.8",
+    "@myst-theme/providers": "^0.9.8",
     "@radix-ui/react-collapsible": "^1.0.3",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.4.4",
     "myst-config": "^1.4.4",
-    "myst-demo": "^0.9.6",
+    "myst-demo": "^0.9.8",
     "myst-spec-ext": "^1.4.4",
-    "myst-to-react": "^0.9.6",
+    "myst-to-react": "^0.9.8",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Abstract.tsx

@@ -1,41 +1,21 @@
 import type { GenericParent } from 'myst-common';
 import { ContentBlocks } from './ContentBlocks.js';
-import classNames from 'classnames';
 import { HashLink } from 'myst-to-react';
-import { type KnownParts } from '../utils.js';
-
-export function FrontmatterParts({
-  parts,
-  keywords,
-  hideKeywords,
-}: {
-  parts: KnownParts;
-  keywords?: string[];
-  hideKeywords?: boolean;
-}) {
-  if (!parts.abstract && !parts.keypoints && !parts.summary) return null;
-  return (
-    <>
-      <Abstract content={parts.abstract} />
-      <Abstract content={parts.keypoints} title="Key Points" id="keypoints" />
-      <Abstract content={parts.summary} title="Plain Language Summary" id="summary" />
-      <Keywords keywords={keywords} hideKeywords={hideKeywords} />
-    </>
-  );
-}
 
 export function Abstract({
   content,
   title = 'Abstract',
   id = 'abstract',
+  className,
 }: {
   title?: string;
   id?: string;
   content?: GenericParent;
+  className?: string;
 }) {
   if (!content) return null;
   return (
-    <>
+    <div className={className}>
       <h2 id={id} className="mb-3 text-base font-semibold group">
         {title}
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
@@ -43,32 +23,6 @@ export function Abstract({
       <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
         <ContentBlocks mdast={content} className="col-body" />
       </div>
-    </>
-  );
-}
-
-export function Keywords({
-  keywords,
-  hideKeywords,
-}: {
-  keywords?: string[];
-  hideKeywords?: boolean;
-}) {
-  if (hideKeywords || !keywords || keywords.length === 0) return null;
-  return (
-    <div className="mb-10 group">
-      <span className="mr-2 font-semibold">Keywords:</span>
-      {keywords.map((k, i) => (
-        <span
-          key={k}
-          className={classNames({
-            "after:content-[','] after:mr-1": i < keywords.length - 1,
-          })}
-        >
-          {k}
-        </span>
-      ))}
-      <HashLink id="keywords" title="Link to Keywords" hover className="ml-2" />
     </div>
   );
 }

package/src/components/Backmatter.tsx

@@ -1,47 +1,49 @@
-import type { GenericNode, GenericParent } from 'myst-common';
+import type { GenericParent } from 'myst-common';
 import { HashLink, MyST } from 'myst-to-react';
-import type { KnownParts } from '../utils.js';
+import { getChildren, type KnownParts } from '../utils.js';
+import classNames from 'classnames';
 
-export function BackmatterParts({ parts }: { parts: KnownParts }) {
+export function BackmatterParts({
+  parts,
+  containerClassName,
+  innerClassName,
+}: {
+  parts: KnownParts;
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
   return (
-    <>
-      <Backmatter title="Acknowledgments" id="acknowledgments" content={parts.acknowledgments} />
+    <div className={containerClassName}>
+      <Backmatter
+        className={innerClassName}
+        title="Acknowledgments"
+        id="acknowledgments"
+        content={parts.acknowledgments}
+      />
       <Backmatter
+        className={innerClassName}
         title="Data Availability"
         id="data-availability"
         content={parts.data_availability}
       />
-    </>
+    </div>
   );
 }
 
-/**
- * This returns the contents of a part that we want to render (not the root or block, which are already wrapped)
- * This also fixes a bug that the key is not defined on a block.
- */
-function getChildren(content?: GenericParent): GenericNode | GenericNode[] {
-  if (
-    content?.type === 'root' &&
-    content.children?.length === 1 &&
-    content.children[0].type === 'block'
-  ) {
-    return content.children[0].children as GenericNode[];
-  }
-  return content as GenericNode;
-}
-
 export function Backmatter({
   title,
   id,
   content,
+  className,
 }: {
   title: string;
   id: string;
   content?: GenericParent;
+  className?: string;
 }) {
   if (!content) return null;
   return (
-    <div className="flex flex-col w-full md:flex-row group/backmatter">
+    <div className={classNames('flex flex-col w-full md:flex-row group/backmatter', className)}>
       <h2
         id={id}
         className="mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90 group-hover/backmatter:opacity-100"

package/src/components/Bibliography.tsx

@@ -5,7 +5,13 @@ import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
 
-export function Bibliography() {
+export function Bibliography({
+  containerClassName,
+  innerClassName,
+}: {
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
   const references = useReferences();
   const grid = useGridSystemProvider();
   const { order, data } = references?.cite ?? {};
@@ -14,8 +20,11 @@ export function Bibliography() {
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section id="references" className={classNames(grid, 'subgrid-gap col-screen')}>
-      <div>
+    <section
+      id="references"
+      className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
+    >
+      <div className={innerClassName}>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button
             onClick={() => setHidden(!hidden)}
@@ -29,7 +38,12 @@ export function Bibliography() {
           <HashLink id="references" title="Link to References" hover className="ml-2" />
         </header>
       </div>
-      <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
+      <div
+        className={classNames(
+          'pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
+          innerClassName,
+        )}
+      >
         <ol>
           {refs.map((label) => {
             const { html } = data[label];

package/src/components/ContentBlocks.tsx

@@ -3,18 +3,14 @@ import { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
 import classNames from 'classnames';
 import {
-  executableNodesFromBlock,
   NotebookClearCell,
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
 } from '@myst-theme/jupyter';
 import { useGridSystemProvider } from '@myst-theme/providers';
+import { isACodeCell } from '../utils.js';
 
-function isACodeCell(node: GenericParent) {
-  return !!executableNodesFromBlock(node);
-}
-
-function Block({
+export function Block({
   id,
   pageKind,
   node,

package/src/components/DocumentOutline.tsx

@@ -15,7 +15,7 @@ const HIGHLIGHT_CLASS = 'highlight';
 
 const onClient = typeof document !== 'undefined';
 
-type Heading = {
+export type Heading = {
   element: HTMLHeadingElement;
   id: string;
   title: string;
@@ -105,7 +105,7 @@ function getHeaders(selector: string): HTMLHeadingElement[] {
   return headers as HTMLHeadingElement[];
 }
 
-function useHeaders(selector: string, maxdepth: number) {
+export function useHeaders(selector: string, maxdepth: number) {
   if (!onClient) return { activeId: '', headings: [] };
   const onScreen = useRef<Set<HTMLHeadingElement>>(new Set());
   const [activeId, setActiveId] = useState<string>();

package/src/components/FooterLinksBlock.tsx

@@ -3,7 +3,7 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import type { FooterLinks, NavigationLink } from '@myst-theme/common';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 
-const FooterLink = ({
+export const FooterLink = ({
   title,
   short_title,
   url,

package/src/components/Footnotes.tsx

@@ -5,21 +5,35 @@ import type { FootnoteDefinition, FootnoteReference } from 'myst-spec-ext';
 import { HashLink, MyST } from 'myst-to-react';
 import { selectAll } from 'unist-util-select';
 
-export function Footnotes() {
+export function Footnotes({
+  containerClassName,
+  innerClassName,
+}: {
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
   const references = useReferences();
   const grid = useGridSystemProvider();
   const defs = selectAll('footnoteDefinition', references?.article) as FootnoteDefinition[];
   const refs = selectAll('footnoteReference', references?.article) as FootnoteReference[];
   if (defs.length === 0) return null;
   return (
-    <section id="footnotes" className={classNames(grid, 'subgrid-gap col-screen')}>
-      <div>
+    <section
+      id="footnotes"
+      className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
+    >
+      <div className={innerClassName}>
         <header className="text-lg font-semibold text-stone-900 dark:text-white group">
           Footnotes
           <HashLink id="footnotes" title="Link to Footnotes" hover className="ml-2" />
         </header>
       </div>
-      <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
+      <div
+        className={classNames(
+          'pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
+          innerClassName,
+        )}
+      >
         <ol>
           {defs.map((fn) => {
             return (

package/src/components/FrontmatterParts.tsx

@@ -0,0 +1,37 @@
+import { type KnownParts } from '../utils.js';
+import { Abstract } from './Abstract.js';
+import { Keywords } from './Keywords.js';
+
+export function FrontmatterParts({
+  parts,
+  keywords,
+  hideKeywords,
+  containerClassName,
+  innerClassName,
+}: {
+  parts: KnownParts;
+  keywords?: string[];
+  hideKeywords?: boolean;
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
+  if (!parts.abstract && !parts.keypoints && !parts.summary) return null;
+  return (
+    <div className={containerClassName}>
+      <Abstract className={innerClassName} content={parts.abstract} />
+      <Abstract
+        className={innerClassName}
+        content={parts.keypoints}
+        title="Key Points"
+        id="keypoints"
+      />
+      <Abstract
+        className={innerClassName}
+        content={parts.summary}
+        title="Plain Language Summary"
+        id="summary"
+      />
+      <Keywords className={innerClassName} keywords={keywords} hideKeywords={hideKeywords} />
+    </div>
+  );
+}

package/src/components/Keywords.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import { HashLink } from 'myst-to-react';
+
+export function Keywords({
+  keywords,
+  hideKeywords,
+  className,
+}: {
+  keywords?: string[];
+  hideKeywords?: boolean;
+  className?: string;
+}) {
+  if (hideKeywords || !keywords || keywords.length === 0) return null;
+  return (
+    <div className={classNames('mb-10 group', className)}>
+      <span className="mr-2 font-semibold">Keywords:</span>
+      {keywords.map((k, i) => (
+        <span
+          key={k}
+          className={classNames({
+            "after:content-[','] after:mr-1": i < keywords.length - 1,
+          })}
+        >
+          {k}
+        </span>
+      ))}
+      <HashLink id="keywords" title="Link to Keywords" hover className="ml-2" />
+    </div>
+  );
+}

package/src/components/Navigation/ActionMenu.tsx

@@ -0,0 +1,48 @@
+import { Fragment } from 'react';
+import classNames from 'classnames';
+import { Menu, Transition } from '@headlessui/react';
+import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
+import type { SiteManifest } from 'myst-config';
+
+export function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
+  if (!actions || actions.length === 0) return null;
+  return (
+    <Menu as="div" className="relative">
+      <div>
+        <Menu.Button className="flex text-sm bg-transparent rounded-full focus:outline-none">
+          <span className="sr-only">Open Menu</span>
+          <div className="flex items-center text-stone-200 hover:text-white">
+            <EllipsisVerticalIcon width="2rem" height="2rem" className="p-1" />
+          </div>
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          {actions?.map((action) => (
+            <Menu.Item key={action.url}>
+              {({ active }) => (
+                <a
+                  href={action.url}
+                  className={classNames(
+                    active ? 'bg-gray-100' : '',
+                    'block px-4 py-2 text-sm text-gray-700',
+                  )}
+                >
+                  {action.title}
+                </a>
+              )}
+            </Menu.Item>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

package/src/components/Navigation/HomeLink.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { useBaseurl, useLinkProvider, withBaseurl } from '@myst-theme/providers';
+
+export function HomeLink({
+  logo,
+  logoDark,
+  logoText,
+  name,
+}: {
+  logo?: string;
+  logoDark?: string;
+  logoText?: string;
+  name?: string;
+}) {
+  const Link = useLinkProvider();
+  const baseurl = useBaseurl();
+  const nothingSet = !logo && !logoText;
+  return (
+    <Link
+      className="flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
+      to={withBaseurl('/', baseurl)}
+      prefetch="intent"
+    >
+      {logo && (
+        <div
+          className={classNames('p-1 mr-3', {
+            'dark:bg-white dark:rounded': !logoDark,
+          })}
+        >
+          <img
+            src={logo}
+            className={classNames('h-9', { 'dark:hidden': !!logoDark })}
+            alt={logoText || name}
+            height="2.25rem"
+          ></img>
+          {logoDark && (
+            <img
+              src={logoDark}
+              className="hidden h-9 dark:block"
+              alt={logoText || name}
+              height="2.25rem"
+            ></img>
+          )}
+        </div>
+      )}
+      <span
+        className={classNames('text-md sm:text-xl tracking-tight sm:mr-5', {
+          'sr-only': !(logoText || nothingSet),
+        })}
+      >
+        {logoText || 'Made with MyST'}
+      </span>
+    </Link>
+  );
+}

package/src/components/Navigation/Loading.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 /**
  * Show a loading progess bad if the load takes more than 150ms
  */
-function useLoading() {
+export function useLoading() {
   const transitionState = useNavigation().state;
   const ref = useMemo<{ start?: NodeJS.Timeout; finish?: NodeJS.Timeout }>(() => ({}), []);
   const [showLoading, setShowLoading] = useState(false);

package/src/components/Navigation/TopNav.tsx

@@ -1,22 +1,18 @@
 import { Fragment } from 'react';
 import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
-import {
-  EllipsisVerticalIcon,
-  ChevronDownIcon,
-  Bars3Icon as MenuIcon,
-} from '@heroicons/react/24/solid';
+import { ChevronDownIcon, Bars3Icon as MenuIcon } from '@heroicons/react/24/solid';
 import type { SiteManifest, SiteNavItem } from 'myst-config';
 import { ThemeButton } from './ThemeButton.js';
 import {
-  useBaseurl,
   useLinkProvider,
   useNavLinkProvider,
   useNavOpen,
   useSiteManifest,
-  withBaseurl,
 } from '@myst-theme/providers';
 import { LoadingBar } from './Loading.js';
+import { HomeLink } from './HomeLink.js';
+import { ActionMenu } from './ActionMenu.js';
 
 export const DEFAULT_NAV_HEIGHT = 60;
 
@@ -57,7 +53,7 @@ function ExternalOrInternalLink({
   );
 }
 
-function NavItem({ item }: { item: SiteNavItem }) {
+export function NavItem({ item }: { item: SiteNavItem }) {
   const NavLink = useNavLinkProvider();
   if (!('children' in item)) {
     return (
@@ -136,7 +132,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
   );
 }
 
-function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
+export function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   if (!nav) return null;
   return (
     <div className="flex-grow hidden text-md lg:block">
@@ -147,102 +143,6 @@ function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   );
 }
 
-function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
-  if (!actions || actions.length === 0) return null;
-  return (
-    <Menu as="div" className="relative">
-      <div>
-        <Menu.Button className="flex text-sm bg-transparent rounded-full focus:outline-none">
-          <span className="sr-only">Open Menu</span>
-          <div className="flex items-center text-stone-200 hover:text-white">
-            <EllipsisVerticalIcon width="2rem" height="2rem" className="p-1" />
-          </div>
-        </Menu.Button>
-      </div>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          {actions?.map((action) => (
-            <Menu.Item key={action.url}>
-              {({ active }) => (
-                <a
-                  href={action.url}
-                  className={classNames(
-                    active ? 'bg-gray-100' : '',
-                    'block px-4 py-2 text-sm text-gray-700',
-                  )}
-                >
-                  {action.title}
-                </a>
-              )}
-            </Menu.Item>
-          ))}
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-}
-
-function HomeLink({
-  logo,
-  logoDark,
-  logoText,
-  name,
-}: {
-  logo?: string;
-  logoDark?: string;
-  logoText?: string;
-  name?: string;
-}) {
-  const Link = useLinkProvider();
-  const baseurl = useBaseurl();
-  const nothingSet = !logo && !logoText;
-  return (
-    <Link
-      className="flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
-      to={withBaseurl('/', baseurl)}
-      prefetch="intent"
-    >
-      {logo && (
-        <div
-          className={classNames('p-1 mr-3', {
-            'dark:bg-white dark:rounded': !logoDark,
-          })}
-        >
-          <img
-            src={logo}
-            className={classNames('h-9', { 'dark:hidden': !!logoDark })}
-            alt={logoText || name}
-            height="2.25rem"
-          ></img>
-          {logoDark && (
-            <img
-              src={logoDark}
-              className="hidden h-9 dark:block"
-              alt={logoText || name}
-              height="2.25rem"
-            ></img>
-          )}
-        </div>
-      )}
-      <span
-        className={classNames('text-md sm:text-xl tracking-tight sm:mr-5', {
-          'sr-only': !(logoText || nothingSet),
-        })}
-      >
-        {logoText || 'Made with MyST'}
-      </span>
-    </Link>
-  );
-}
-
 export function TopNav() {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();

package/src/components/Navigation/index.tsx

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

package/src/components/SkipToArticle.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 function makeSkipClickHandler(hash: string) {
   return (e: React.UIEvent<HTMLElement, Event>) => {
@@ -10,6 +10,10 @@ function makeSkipClickHandler(hash: string) {
   };
 }
 
+/**
+ * @deprecated use `SkipTo` instead with a list of targets
+ *
+ */
 export function SkipToArticle({
   frontmatter = true,
   article = true,
@@ -48,3 +52,26 @@ export function SkipToArticle({
     </div>
   );
 }
+
+/**
+ * Add a skip navigation unit with links based on a list of targets
+ */
+export const SkipTo = React.memo(({ targets }: { targets: { id: string; title: string }[] }) => {
+  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"
+    >
+      {targets.map(({ id, title }) => (
+        <a
+          key={id}
+          href={`#${id}`}
+          className="block px-2 py-1 text-black underline"
+          onClick={makeSkipClickHandler(id)}
+        >
+          {title}
+        </a>
+      ))}
+    </div>
+  );
+});

package/src/components/index.ts

@@ -1,13 +1,20 @@
-export { ContentBlocks } from './ContentBlocks.js';
-export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './DocumentOutline.js';
-export { FooterLinksBlock } from './FooterLinksBlock.js';
+export { ContentBlocks, Block } from './ContentBlocks.js';
+export {
+  DocumentOutline,
+  useOutlineHeight,
+  SupportingDocuments,
+  useHeaders,
+} from './DocumentOutline.js';
+export { FooterLinksBlock, FooterLink } from './FooterLinksBlock.js';
 export { ContentReload } from './ContentReload.js';
 export { Bibliography } from './Bibliography.js';
 export { Footnotes } from './Footnotes.js';
 export { ArticleHeader } from './Headers.js';
-export { FrontmatterParts, Abstract, Keywords } from './Abstract.js';
+export { Abstract } from './Abstract.js';
+export { Keywords } from './Keywords.js';
+export { FrontmatterParts } from './FrontmatterParts.js';
 export { BackmatterParts, Backmatter } from './Backmatter.js';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink.js';
 export * from './Navigation/index.js';
 export { renderers } from './renderers.js';
-export * from './SkipToArticle.js';
+export { SkipToArticle, SkipTo } from './SkipToArticle.js';

package/src/pages/Article.tsx

@@ -21,25 +21,7 @@ import {
   useComputeOptions,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
-import { extractKnownParts } from '../utils.js';
-import type { SiteAction } from 'myst-config';
-
-/**
- * Combines the project downloads and the export options
- */
-function combineDownloads(
-  siteDownloads: SiteAction[] | undefined,
-  pageFrontmatter: PageLoader['frontmatter'],
-) {
-  if (pageFrontmatter.downloads) {
-    return pageFrontmatter.downloads;
-  }
-  // No downloads on the page, combine the exports if they exist
-  if (siteDownloads) {
-    return [...(pageFrontmatter.exports ?? []), ...siteDownloads];
-  }
-  return pageFrontmatter.exports;
-}
+import { combineDownloads, extractKnownParts } from '../utils.js';
 
 /**
  * @deprecated This component is not maintained, in favor of theme-specific ArticlePages

package/src/seo/meta.ts

@@ -1,12 +1,12 @@
 import type { HtmlMetaDescriptor, V2_MetaDescriptor } from '@remix-run/react';
 
-type SocialSite = {
+export type SocialSite = {
   title: string;
   description?: string;
   twitter?: string;
 };
 
-type SocialArticle = {
+export type SocialArticle = {
   origin: string;
   url: string;
   // TODO: canonical

package/src/utils.ts

@@ -1,5 +1,8 @@
-import type { GenericParent } from 'myst-common';
+import type { GenericNode, GenericParent } from 'myst-common';
 import { extractPart } from 'myst-common';
+import type { PageLoader } from '@myst-theme/common';
+import type { SiteAction } from 'myst-config';
+import { executableNodesFromBlock } from '@myst-theme/jupyter';
 
 export function getDomainFromRequest(request: Request) {
   const url = new URL(request.url);
@@ -23,3 +26,39 @@ export function extractKnownParts(tree: GenericParent): KnownParts {
   const acknowledgments = extractPart(tree, ['acknowledgments', 'acknowledgements']);
   return { abstract, summary, keypoints, data_availability, acknowledgments };
 }
+
+/**
+ * Combines the project downloads and the export options
+ */
+export function combineDownloads(
+  siteDownloads: SiteAction[] | undefined,
+  pageFrontmatter: PageLoader['frontmatter'],
+) {
+  if (pageFrontmatter.downloads) {
+    return pageFrontmatter.downloads;
+  }
+  // No downloads on the page, combine the exports if they exist
+  if (siteDownloads) {
+    return [...(pageFrontmatter.exports ?? []), ...siteDownloads];
+  }
+  return pageFrontmatter.exports;
+}
+
+/**
+ * This returns the contents of a part that we want to render (not the root or block, which are already wrapped)
+ * This also fixes a bug that the key is not defined on a block.
+ */
+export function getChildren(content?: GenericParent): GenericNode | GenericNode[] {
+  if (
+    content?.type === 'root' &&
+    content.children?.length === 1 &&
+    content.children[0].type === 'block'
+  ) {
+    return content.children[0].children as GenericNode[];
+  }
+  return content as GenericNode;
+}
+
+export function isACodeCell(node: GenericParent) {
+  return !!executableNodesFromBlock(node);
+}