🧠 Display known front/back matter parts (#266)

packages/site/src/components/Abstract.tsx

@@ -2,14 +2,43 @@ 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 Abstract({ content }: { content: GenericParent }) {
-  if (!content) return <div className="hidden" aria-label="this article has no abstract" />;
+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',
+}: {
+  title?: string;
+  id?: string;
+  content?: GenericParent;
+}) {
+  if (!content) return null;
   return (
     <>
-      <h2 id="abstract" className="mb-3 text-base font-semibold group">
-        Abstract
-        <HashLink id="abstract" title="Link to Abstract" hover className="ml-2" />
+      <h2 id={id} className="mb-3 text-base font-semibold group">
+        {title}
+        <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
       <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
         <ContentBlocks mdast={content} className="col-body" />
@@ -25,8 +54,7 @@ export function Keywords({
   keywords?: string[];
   hideKeywords?: boolean;
 }) {
-  if (hideKeywords || !keywords || keywords.length === 0)
-    return <div className="hidden" aria-label="this article has no keywords" />;
+  if (hideKeywords || !keywords || keywords.length === 0) return null;
   return (
     <div className="mb-10 group">
       <span className="mr-2 font-semibold">Keywords:</span>

packages/site/src/components/Backmatter.tsx

@@ -0,0 +1,43 @@
+import type { GenericParent } from 'myst-common';
+import { ContentBlocks } from './ContentBlocks.js';
+import { HashLink } from 'myst-to-react';
+import type { KnownParts } from '../utils.js';
+
+export function BackmatterParts({ parts }: { parts: KnownParts }) {
+  return (
+    <>
+      <Backmatter
+        title="Data Availability"
+        id="data-availability"
+        content={parts.data_availability}
+      />
+      <Backmatter title="Acknowledgments" id="acknowledgments" content={parts.acknowledgments} />
+    </>
+  );
+}
+
+export function Backmatter({
+  title,
+  id,
+  content,
+}: {
+  title: string;
+  id: string;
+  content?: GenericParent;
+}) {
+  if (!content) return null;
+  return (
+    <div className="flex flex-col w-full md:flex-row">
+      <h2
+        id={id}
+        className="mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90"
+      >
+        {title}
+        <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
+      </h2>
+      <div className="grow">
+        <ContentBlocks mdast={content} className="opacity-80 col-screen" />
+      </div>
+    </div>
+  );
+}

packages/site/src/components/Bibliography.tsx

@@ -1,5 +1,6 @@
 import { useGridSystemProvider, useReferences } from '@myst-theme/providers';
 import classNames from 'classnames';
+import { HashLink } from 'myst-to-react';
 import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
@@ -13,7 +14,7 @@ export function Bibliography() {
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section className={classNames(grid, 'subgrid-gap col-screen')}>
+    <section id="references" className={classNames(grid, 'subgrid-gap col-screen')}>
       <div>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button
@@ -23,7 +24,10 @@ export function Bibliography() {
             {hidden ? 'Show All' : 'Collapse'}
           </button>
         )}
-        <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
+        <header className="text-lg font-semibold text-stone-900 dark:text-white group">
+          References
+          <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">
         <ol>

packages/site/src/components/index.ts

@@ -4,7 +4,8 @@ export { FooterLinksBlock } from './FooterLinksBlock.js';
 export { ContentReload } from './ContentReload.js';
 export { Bibliography } from './Bibliography.js';
 export { ArticleHeader } from './Headers.js';
-export { Abstract, Keywords } from './Abstract.js';
+export { FrontmatterParts, Abstract, Keywords } from './Abstract.js';
+export { BackmatterParts, Backmatter } from './Backmatter.js';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink.js';
 export * from './Navigation/index.js';
 export { renderers } from './renderers.js';

packages/site/src/pages/Article.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
 import {
-  Abstract,
   Bibliography,
   ContentBlocks,
   FooterLinksBlock,
-  Keywords,
+  FrontmatterParts,
+  BackmatterParts,
 } from '../components/index.js';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 import type { PageLoader } from '@myst-theme/common';
-import { copyNode, extractPart, type GenericParent } from 'myst-common';
+import { copyNode, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
 import {
   ExecuteScopeProvider,
@@ -21,16 +21,15 @@ import {
   ErrorTray,
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
+import { extractKnownParts } from '../utils.js';
 
 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();
@@ -39,7 +38,7 @@ export const ArticlePage = React.memo(function ({
 
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
-  const abstract = showAbstract ? extractPart(tree, 'abstract') : undefined;
+  const parts = extractKnownParts(tree);
 
   return (
     <ReferencesProvider
@@ -58,9 +57,9 @@ export const ArticlePage = React.memo(function ({
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
           <div id="skip-to-article" />
-          <Abstract content={abstract as GenericParent} />
-          {abstract && <Keywords keywords={keywords} hideKeywords={hideKeywords} />}
+          <FrontmatterParts parts={parts} keywords={keywords} hideKeywords={hideKeywords} />
           <ContentBlocks pageKind={article.kind} mdast={tree as GenericParent} />
+          <BackmatterParts parts={parts} />
           <Bibliography />
           <ConnectionStatusTray />
           {!hide_footer_links && !hide_all_footer_links && (

packages/site/src/utils.ts

@@ -1,5 +1,25 @@
+import type { GenericParent } from 'myst-common';
+import { extractPart } from 'myst-common';
+
 export function getDomainFromRequest(request: Request) {
   const url = new URL(request.url);
   const domain = `${url.protocol}//${url.hostname}${url.port ? `:${url.port}` : ''}`;
   return domain;
 }
+
+export type KnownParts = {
+  abstract?: GenericParent;
+  summary?: GenericParent;
+  keypoints?: GenericParent;
+  data_availability?: GenericParent;
+  acknowledgments?: GenericParent;
+};
+
+export function extractKnownParts(tree: GenericParent): KnownParts {
+  const abstract = extractPart(tree, 'abstract');
+  const summary = extractPart(tree, 'summary');
+  const keypoints = extractPart(tree, 'keypoints');
+  const data_availability = extractPart(tree, 'data_availability');
+  const acknowledgments = extractPart(tree, 'acknowledgments');
+  return { abstract, summary, keypoints, data_availability, acknowledgments };
+}

themes/article/app/routes/$.tsx

@@ -10,8 +10,9 @@ import {
   DocumentOutline,
   ArticleHeader,
   SupportingDocuments,
-  Abstract,
-  Keywords,
+  FrontmatterParts,
+  BackmatterParts,
+  extractKnownParts,
 } from '@myst-theme/site';
 import { ErrorTray, LaunchBinder, NotebookToolbar, useCanCompute } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
@@ -31,7 +32,7 @@ import {
   useSiteManifest,
 } from '@myst-theme/providers';
 import type { GenericParent } from 'myst-common';
-import { extractPart, copyNode } from 'myst-common';
+import { copyNode } from 'myst-common';
 import classNames from 'classnames';
 import { BusyScopeProvider, ConnectionStatusTray, ExecuteScopeProvider } from '@myst-theme/jupyter';
 import { SourceFileKind } from 'myst-spec-ext';
@@ -132,7 +133,7 @@ export function Article({
 }) {
   const keywords = article.frontmatter?.keywords ?? [];
   const tree = copyNode(article.mdast);
-  const abstract = extractPart(tree, 'abstract');
+  const parts = extractKnownParts(tree);
   const { title, subtitle } = article.frontmatter;
   const canCompute = useCanCompute();
 
@@ -158,9 +159,9 @@ export function Article({
           )}
           <ErrorTray pageSlug={article.slug} />
           <div id="skip-to-article" />
-          <Abstract content={abstract as GenericParent} />
-          <Keywords keywords={keywords} hideKeywords={hideKeywords} />
+          <FrontmatterParts parts={parts} keywords={keywords} hideKeywords={hideKeywords} />
           <ContentBlocks mdast={tree as GenericParent} />
+          <BackmatterParts parts={parts} />
           <Bibliography />
           <ConnectionStatusTray />
         </ExecuteScopeProvider>

themes/book/app/routes/$.tsx

@@ -108,7 +108,7 @@ export default function Page() {
             <DocumentOutline top={16} className="relative" outlineRef={outline} />
           </div>
         )}
-        <ArticlePage article={article} hide_all_footer_links={hide_footer_links} showAbstract />
+        <ArticlePage article={article} hide_all_footer_links={hide_footer_links} />
       </main>
     </ArticlePageAndNavigation>
   );