@myst-theme/site 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "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.4.1",
-    "@myst-theme/frontmatter": "^0.4.1",
-    "@myst-theme/jupyter": "^0.4.1",
-    "@myst-theme/common": "^0.4.1",
-    "@myst-theme/providers": "^0.4.1",
+    "@myst-theme/diagrams": "^0.5.0",
+    "@myst-theme/frontmatter": "^0.5.0",
+    "@myst-theme/jupyter": "^0.5.0",
+    "@myst-theme/common": "^0.5.0",
+    "@myst-theme/providers": "^0.5.0",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.1.0",
-    "myst-spec-ext": "^1.1.0",
-    "myst-config": "^1.1.0",
-    "myst-demo": "^0.4.1",
-    "myst-to-react": "^0.4.1",
+    "myst-common": "^1.1.1",
+    "myst-spec-ext": "^1.1.1",
+    "myst-config": "^1.1.1",
+    "myst-demo": "^0.5.0",
+    "myst-to-react": "^0.5.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Bibliography.tsx

@@ -1,17 +1,19 @@
-import { useReferences } from '@myst-theme/providers';
+import { useGridSystemProvider, useReferences } from '@myst-theme/providers';
+import classNames from 'classnames';
 import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
 
 export function Bibliography() {
   const references = useReferences();
+  const grid = useGridSystemProvider();
   const { order, data } = references?.cite ?? {};
   const filtered = order?.filter((l) => l);
   const [hidden, setHidden] = useState(true);
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section className="article-grid article-subgrid-gap col-screen">
+    <section className={classNames(grid, 'subgrid-gap col-screen')}>
       <div>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button

package/src/components/ContentBlocks.tsx

@@ -7,6 +7,7 @@ import {
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
 } from '@myst-theme/jupyter';
+import { useGridSystemProvider } from '@myst-theme/providers';
 
 function isACodeCell(node: GenericParent) {
   return (
@@ -30,7 +31,8 @@ function Block({
   node: GenericParent;
   className?: string;
 }) {
-  const subGrid = 'article-grid article-subgrid-gap col-screen';
+  const grid = useGridSystemProvider();
+  const subGrid = `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =

package/src/components/DocumentOutline.tsx

@@ -70,6 +70,25 @@ const Headings = ({ headings, activeId, highlight, selector }: Props) => (
   </ul>
 );
 
+function cloneHeadingElement(originalElement: HTMLSpanElement) {
+  // Clone the original element
+  const clonedElement = originalElement.cloneNode(true) as HTMLSpanElement;
+
+  // Get all <abbr> elements in the cloned element
+  const abbrElements = clonedElement.getElementsByTagName('abbr');
+
+  // Move children of <abbr> elements to their parent
+  for (let i = 0; i < abbrElements.length; i++) {
+    const abbr = abbrElements[i];
+    const parent = abbr.parentNode as HTMLSpanElement;
+    while (abbr.firstChild) {
+      parent.insertBefore(abbr.firstChild, abbr);
+    }
+    parent.removeChild(abbr);
+  }
+  return clonedElement;
+}
+
 function getHeaders(selector: string): HTMLHeadingElement[] {
   const headers = Array.from(document.querySelectorAll(selector)).filter((e) => {
     const parent = e.closest('.exclude-from-outline');
@@ -135,7 +154,9 @@ function useHeaders(selector: string) {
     })
     .filter((h) => !!h.text)
     .map(({ level, text, id }) => {
-      const { innerText: title, innerHTML: titleHTML } = text as HTMLSpanElement;
+      const { innerText: title, innerHTML: titleHTML } = cloneHeadingElement(
+        text as HTMLSpanElement,
+      );
       return { title, titleHTML, id, level };
     });
 

package/src/components/FooterLinksBlock.tsx

@@ -36,7 +36,7 @@ const FooterLink = ({
 };
 
 export function FooterLinksBlock({ links }: { links?: FooterLinks }) {
-  if (!links) return null;
+  if (!links || (!links.navigation?.prev && !links.navigation?.next)) return null;
   return (
     <div className="flex pt-10 mb-10 space-x-4">
       {links.navigation?.prev && <FooterLink {...links.navigation?.prev} right />}

package/src/components/Headers.tsx

@@ -0,0 +1,59 @@
+import {
+  FrontmatterBlock,
+  GitHubLink,
+  Journal,
+  LicenseBadges,
+  OpenAccessBadge,
+} from '@myst-theme/frontmatter';
+import { useGridSystemProvider } from '@myst-theme/providers';
+import classNames from 'classnames';
+import type { PageFrontmatter } from 'myst-frontmatter';
+
+export function ArticleHeader({ frontmatter }: { frontmatter: PageFrontmatter }) {
+  const grid = useGridSystemProvider();
+  const { subject, venue, biblio, ...rest } = frontmatter ?? {};
+  return (
+    <header
+      className={classNames('w-full relative pt-[2rem] col-screen article', grid, 'subgrid-gap', {
+        'bg-no-repeat bg-cover bg-top': frontmatter?.banner,
+        'pb-[4rem] min-h-[300px]': frontmatter?.banner,
+      })}
+      style={{
+        backgroundImage: frontmatter?.banner ? `url(${frontmatter?.banner})` : undefined,
+      }}
+    >
+      {frontmatter?.banner && (
+        <div className="absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur top-[2rem] h-[calc(100%-4rem)] w-full col-screen md:col-screen-inset pointer-events-none"></div>
+      )}
+      <div
+        className={classNames('flex w-full align-middle z-10 py-2 mb-[1rem] text-sm', {
+          'col-screen md:col-screen-inset px-4': frontmatter?.banner,
+          'col-page-right': !frontmatter?.banner,
+          'bg-white/80 dark:bg-black/80': frontmatter?.banner,
+        })}
+      >
+        {subject && (
+          <div
+            className={classNames('flex-none pr-2 smallcaps', {
+              'border-r mr-2': venue,
+            })}
+          >
+            {subject}
+          </div>
+        )}
+        <Journal venue={venue} biblio={biblio} />
+        <div className="flex-grow"></div>
+        <LicenseBadges license={frontmatter?.license} />
+        <OpenAccessBadge open_access={frontmatter?.open_access} />
+        <GitHubLink github={frontmatter?.github} />
+      </div>
+      <FrontmatterBlock
+        frontmatter={rest}
+        authorStyle="list"
+        className={classNames('z-10', { 'pt-4': frontmatter?.banner })}
+        hideBadges
+        hideExports
+      />
+    </header>
+  );
+}

package/src/components/Navigation/TableOfContents.tsx

@@ -8,6 +8,7 @@ import {
   useSiteManifest,
   useBaseurl,
   withBaseurl,
+  useGridSystemProvider,
 } from '@myst-theme/providers';
 import { getProjectHeadings, type Heading } from '@myst-theme/common';
 
@@ -143,6 +144,7 @@ export const TableOfContents = ({
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
   const config = useSiteManifest();
@@ -162,7 +164,9 @@ export const TableOfContents = ({
     <div
       ref={tocRef}
       className={classNames(
-        'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
+        '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 },
       )}

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { DocumentOutline, useOutlineHeight } from './DocumentOutline';
 export { FooterLinksBlock } from './FooterLinksBlock';
 export { ContentReload } from './ContentReload';
 export { Bibliography } from './Bibliography';
+export { ArticleHeader } from './Headers';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink';
 export * from './Navigation';
 export { renderers } from './renderers';

package/src/pages/Article.tsx

@@ -4,7 +4,7 @@ import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '@myst-theme/common';
-import type { GenericParent } from 'myst-common';
+import { copyNode, extractPart, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
 import {
   useComputeOptions,
@@ -17,18 +17,26 @@ import {
   ErrorTray,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
+import classNames from 'classnames';
 
 export const ArticlePage = React.memo(function ({
   article,
   hide_all_footer_links,
+  showAbstract,
+  hideKeywords,
 }: {
   article: PageLoader;
   hide_all_footer_links?: boolean;
+  showAbstract?: boolean;
+  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;
 
@@ -53,7 +61,30 @@ export const ArticlePage = React.memo(function ({
           )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
-          <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
+          {abstract && (
+            <>
+              <span className="font-semibold">Abstract</span>
+              <div className="px-6 py-1 m-3 rounded-sm bg-slate-50 dark:bg-slate-800">
+                <ContentBlocks mdast={abstract as GenericParent} className="col-body" />
+              </div>
+              {!hideKeywords && keywords.length > 0 && (
+                <div className="mb-10">
+                  <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>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+          <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />
           <Bibliography />
           <ConnectionStatusTray />
           {!hide_footer_links && !hide_all_footer_links && (

package/src/pages/Root.tsx

@@ -92,7 +92,7 @@ export function AppCatchBoundary() {
   return (
     <Document theme={Theme.light}>
       <article className="article">
-        <main className="article-grid article-subgrid-gap col-screen">
+        <main className="article-grid subgrid-gap col-screen">
           <Error404 />
         </main>
       </article>