@myst-theme/site 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "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.4",
-    "@myst-theme/diagrams": "^0.9.4",
-    "@myst-theme/frontmatter": "^0.9.4",
-    "@myst-theme/jupyter": "^0.9.4",
-    "@myst-theme/providers": "^0.9.4",
+    "@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",
     "@radix-ui/react-collapsible": "^1.0.3",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.4.1",
-    "myst-config": "^1.4.1",
-    "myst-demo": "^0.9.4",
-    "myst-spec-ext": "^1.4.1",
-    "myst-to-react": "^0.9.4",
+    "myst-common": "^1.4.4",
+    "myst-config": "^1.4.4",
+    "myst-demo": "^0.9.6",
+    "myst-spec-ext": "^1.4.4",
+    "myst-to-react": "^0.9.6",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Backmatter.tsx

@@ -1,6 +1,5 @@
-import type { GenericParent } from 'myst-common';
-import { ContentBlocks } from './ContentBlocks.js';
-import { HashLink } from 'myst-to-react';
+import type { GenericNode, GenericParent } from 'myst-common';
+import { HashLink, MyST } from 'myst-to-react';
 import type { KnownParts } from '../utils.js';
 
 export function BackmatterParts({ parts }: { parts: KnownParts }) {
@@ -16,6 +15,21 @@ export function BackmatterParts({ parts }: { parts: KnownParts }) {
   );
 }
 
+/**
+ * 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,
@@ -35,11 +49,8 @@ export function Backmatter({
         {title}
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
-      <div className="grow">
-        <ContentBlocks
-          mdast={content}
-          className="opacity-90 group-hover/backmatter:opacity-100 col-screen"
-        />
+      <div className="grow opacity-90 group-hover/backmatter:opacity-100 col-screen">
+        <MyST ast={getChildren(content)} />
       </div>
     </div>
   );

package/src/components/Footnotes.tsx

@@ -0,0 +1,54 @@
+import { useGridSystemProvider, useReferences } from '@myst-theme/providers';
+import classNames from 'classnames';
+import type { GenericNode } from 'myst-common';
+import type { FootnoteDefinition, FootnoteReference } from 'myst-spec-ext';
+import { HashLink, MyST } from 'myst-to-react';
+import { selectAll } from 'unist-util-select';
+
+export function Footnotes() {
+  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>
+        <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">
+        <ol>
+          {defs.map((fn) => {
+            return (
+              <li key={(fn as GenericNode).key} id={`fn-${fn.identifier}`} className="group">
+                <div className="flex flex-row">
+                  <div className="break-words grow">
+                    <MyST ast={fn.children} />
+                  </div>
+                  <div className="flex flex-col grow-0">
+                    {refs
+                      .filter((ref) => ref.identifier === fn.identifier)
+                      .map((ref) => (
+                        <HashLink
+                          key={(ref as GenericNode).key}
+                          id={`fnref-${(ref as GenericNode).key}`}
+                          title="Link to Content"
+                          hover
+                          className="p-1"
+                          children="↩"
+                          scrollBehavior="instant"
+                        />
+                      ))}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+    </section>
+  );
+}

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './Docume
 export { FooterLinksBlock } 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 { BackmatterParts, Backmatter } from './Backmatter.js';

package/src/pages/Article.tsx

@@ -41,6 +41,11 @@ function combineDownloads(
   return pageFrontmatter.exports;
 }
 
+/**
+ * @deprecated This component is not maintained, in favor of theme-specific ArticlePages
+ *
+ * As examples, MyST book and article themes define their own ArticlePage components.
+ */
 export const ArticlePage = React.memo(function ({
   article,
   hide_all_footer_links,