@myst-theme/site 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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.4.2",
+    "@myst-theme/frontmatter": "^0.4.2",
+    "@myst-theme/jupyter": "^0.4.2",
+    "@myst-theme/common": "^0.4.2",
+    "@myst-theme/providers": "^0.4.2",
     "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.4.2",
+    "myst-to-react": "^0.4.2",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

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/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 && (