@myst-theme/site 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,22 +16,22 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.5.1",
-    "@myst-theme/frontmatter": "^0.5.1",
-    "@myst-theme/jupyter": "^0.5.1",
-    "@myst-theme/common": "^0.5.1",
-    "@myst-theme/providers": "^0.5.1",
+    "@myst-theme/diagrams": "^0.5.2",
+    "@myst-theme/frontmatter": "^0.5.2",
+    "@myst-theme/jupyter": "^0.5.2",
+    "@myst-theme/common": "^0.5.2",
+    "@myst-theme/providers": "^0.5.2",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.1.1",
     "myst-spec-ext": "^1.1.1",
     "myst-config": "^1.1.1",
-    "myst-demo": "^0.5.1",
-    "myst-to-react": "^0.5.1",
+    "myst-demo": "^0.5.2",
+    "myst-to-react": "^0.5.2",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.3.0",
+    "thebe-react": "^0.3.2",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {

package/src/components/Abstract.tsx

@@ -0,0 +1,40 @@
+import type { GenericParent } from 'myst-common';
+import { ContentBlocks } from './ContentBlocks';
+import classNames from 'classnames';
+
+export function Abstract({ content }: { content: GenericParent }) {
+  if (!content) return null;
+  return (
+    <>
+      <span className="mb-3 font-semibold">Abstract</span>
+      <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">
+      <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>
+  );
+}

package/src/components/index.ts

@@ -4,6 +4,7 @@ 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';

package/src/pages/Article.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
-import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
+import { Abstract, Bibliography, ContentBlocks, FooterLinksBlock, Keywords } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '@myst-theme/common';
@@ -17,7 +17,6 @@ import {
   ErrorTray,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
-import classNames from 'classnames';
 
 export const ArticlePage = React.memo(function ({
   article,
@@ -61,29 +60,8 @@ export const ArticlePage = React.memo(function ({
           )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
-          {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>
-              )}
-            </>
-          )}
+          <Abstract content={abstract as GenericParent} />
+          {abstract && <Keywords keywords={keywords} hideKeywords={hideKeywords} />}
           <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />
           <Bibliography />
           <ConnectionStatusTray />