@myst-theme/site 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,17 +16,18 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.4.0",
-    "@myst-theme/frontmatter": "^0.4.0",
-    "@myst-theme/jupyter": "^0.4.0",
-    "@myst-theme/providers": "^0.4.0",
+    "@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.0",
-    "myst-to-react": "^0.4.0",
+    "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",
@@ -34,8 +35,6 @@
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
-    "@remix-run/node": "^1.17.0",
-    "@remix-run/react": "^1.17.0",
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
     "react": "^16.8 || ^17.0 || ^18.0",

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
 import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
-import type { FooterLinks, NavigationLink } from '../types';
+import type { FooterLinks, NavigationLink } from '@myst-theme/common';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 
 const FooterLink = ({
@@ -16,7 +16,7 @@ const FooterLink = ({
   return (
     <Link
       prefetch="intent"
-      className="flex-1 block p-4 font-normal text-gray-600 no-underline border border-gray-200 rounded group hover:border-blue-600 dark:hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 dark:text-gray-100 dark:border-gray-500 shadow-sm hover:shadow-lg dark:shadow-neutral-700"
+      className="flex-1 block p-4 font-normal text-gray-600 no-underline border border-gray-200 rounded shadow-sm group hover:border-blue-600 dark:hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 dark:text-gray-100 dark:border-gray-500 hover:shadow-lg dark:shadow-neutral-700"
       to={withBaseurl(url, baseurl)}
     >
       <div className="flex h-full align-middle">
@@ -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/Navigation/TableOfContents.tsx

@@ -9,8 +9,7 @@ import {
   useBaseurl,
   withBaseurl,
 } from '@myst-theme/providers';
-import { getProjectHeadings } from '../../loaders';
-import type { Heading } from '../../types';
+import { getProjectHeadings, type Heading } from '@myst-theme/common';
 
 type Props = {
   folder?: string;

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from './utils';
-export * from './types';
 export * from './loaders';
 export * from './components';
 export * from './pages';

package/src/loaders/errors.server.ts

@@ -1,7 +1,4 @@
-export enum ErrorStatus {
-  noSite = 'Site was not found',
-  noArticle = 'Article was not found',
-}
+import { ErrorStatus } from '@myst-theme/common';
 
 export function responseNoSite(): Response {
   // note: error boundary logic is dependent on the string sent here

package/src/loaders/index.ts

@@ -1,5 +1,3 @@
 export * from './errors.server';
-export * as cdn from './cdn.server';
-export * from './utils';
 export * from './links';
 export * from './theme.server';

package/src/pages/Article.tsx

@@ -3,8 +3,8 @@ import { ReferencesProvider } from '@myst-theme/providers';
 import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
-import type { PageLoader } from '../types';
-import type { GenericParent } from 'myst-common';
+import type { PageLoader } from '@myst-theme/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

@@ -1,5 +1,5 @@
 import type { SiteManifest } from 'myst-config';
-import type { SiteLoader } from '../types';
+import type { SiteLoader } from '@myst-theme/common';
 import { BaseUrlProvider, SiteProvider, Theme, ThemeProvider } from '@myst-theme/providers';
 import {
   Links,

package/src/loaders/cdn.server.ts

@@ -1,172 +0,0 @@
-import fetch from 'node-fetch';
-import NodeCache from 'node-cache';
-import type { SiteManifest } from 'myst-config';
-import { responseNoArticle, responseNoSite } from './errors.server';
-import {
-  getFooterLinks,
-  getProject,
-  updatePageStaticLinksInplace,
-  updateSiteManifestStaticLinksInplace,
-} from './utils';
-import { redirect } from '@remix-run/node';
-import type { PageLoader } from '../types';
-
-interface CdnRouter {
-  cdn?: string;
-}
-
-declare global {
-  // Disable multiple caches when this file is rebuilt
-  // eslint-disable-next-line
-  var cdnRouterCache: NodeCache | undefined, configCache: NodeCache | undefined;
-}
-
-export type Host = string | { CDN: string; id: string };
-
-const DEFAULT_CDN = 'https://cdn.curvenote.com/';
-
-function getCdnRouterCache() {
-  if (global.cdnRouterCache) return global.cdnRouterCache;
-  console.log('Creating cdnRouterCache');
-  // The router should update every minute
-  global.cdnRouterCache = new NodeCache({ stdTTL: 30 });
-  return global.cdnRouterCache;
-}
-
-export function getConfigCache() {
-  if (global.configCache) return global.configCache;
-  console.log('Creating configCache');
-  // The config can be long lived as it is static (0 == ∞)
-  global.configCache = new NodeCache({ stdTTL: 0 });
-  return global.configCache;
-}
-
-async function getCdnPath(hostname: string): Promise<string | undefined> {
-  const cached = getCdnRouterCache().get<CdnRouter>(hostname);
-  if (cached) return cached.cdn;
-  const response = await fetch(`https://api.curvenote.com/routers/${hostname}`);
-  if (response.status === 404) {
-    // Always hit the API again if it is not found!
-    return;
-  }
-  const data = (await response.json()) as CdnRouter;
-  getCdnRouterCache().set<CdnRouter>(hostname, data);
-  return data.cdn;
-}
-
-function withPublicFolderUrl(baseUrl: string, url: string): string {
-  return withBaseUrl(baseUrl, `public${url}`);
-}
-
-export async function getCdnLocation(host: Host) {
-  if (typeof host === 'string') {
-    const id = await getCdnPath(host);
-    if (!id) throw responseNoSite();
-    return { CDN: DEFAULT_CDN, id };
-  }
-  return host;
-}
-
-export async function getCdnBaseUrl(host: Host): Promise<string> {
-  const { CDN, id } = await getCdnLocation(host);
-  return `${CDN}${id}/`;
-}
-
-function withBaseUrl<T extends string | undefined>(baseUrl: string, url: T): T {
-  if (!url) return url;
-  return `${baseUrl}${url}` as T;
-}
-
-/**
- * Basic comparison for checking that the title and (possible) slug are the same
- */
-function foldTitleString(title?: string): string | undefined {
-  return title?.replace(/[-\s_]/g, '').toLowerCase();
-}
-
-/**
- * If the site title and the first nav item are the same, remove it.
- */
-function removeSingleNavItems(config: SiteManifest) {
-  if (
-    config?.nav?.length === 1 &&
-    foldTitleString(config.nav[0].title) === foldTitleString(config.title)
-  ) {
-    config.nav = [];
-  }
-}
-
-export async function getConfig(host: Host): Promise<SiteManifest> {
-  const location = await getCdnLocation(host);
-  const baseUrl = await getCdnBaseUrl(location);
-  const { id } = location;
-  if (!id) throw responseNoSite();
-  const cached = getConfigCache().get<SiteManifest>(id);
-  // Load the data from an in memory cache.
-  if (cached) return cached;
-  const response = await fetch(withBaseUrl(baseUrl, 'config.json'));
-  if (response.status === 404) throw responseNoSite();
-  const data = (await response.json()) as SiteManifest;
-  data.id = id;
-  removeSingleNavItems(data);
-  updateSiteManifestStaticLinksInplace(data, (url) => withPublicFolderUrl(baseUrl, url));
-  getConfigCache().set<SiteManifest>(id, data);
-  return data;
-}
-
-export async function getObjectsInv(host: Host): Promise<Buffer | undefined> {
-  const baseUrl = await getCdnBaseUrl(host);
-  if (!baseUrl) return;
-  const url = `${baseUrl}objects.inv`;
-  const response = await fetch(url);
-  if (response.status === 404) return;
-  const buffer = await response.buffer();
-  return buffer;
-}
-
-async function getData(
-  baseUrl: string,
-  config?: SiteManifest,
-  project?: string,
-  slug?: string,
-): Promise<PageLoader | null> {
-  if (!slug || !config) throw responseNoArticle();
-  const { id } = config;
-  if (!id) throw responseNoSite();
-  const projectPart = project ? `${project}/` : '';
-  const response = await fetch(withBaseUrl(baseUrl, `content/${projectPart}${slug}.json`));
-  if (response.status === 404) throw responseNoArticle();
-  const data = (await response.json()) as PageLoader;
-  return updatePageStaticLinksInplace(data, (url) => withPublicFolderUrl(baseUrl, url));
-}
-
-export async function getPage(
-  host: Host,
-  opts: {
-    domain?: string;
-    project?: string;
-    loadIndexPage?: boolean;
-    slug?: string;
-    redirect?: boolean | string;
-  },
-): Promise<PageLoader | Response | null> {
-  const projectName = opts.project;
-  const baseUrl = await getCdnBaseUrl(host);
-  const config = await getConfig(host);
-  if (!config) throw responseNoSite();
-  const project = getProject(config, projectName);
-  if (!project) throw responseNoArticle();
-  if (opts.slug === project.index && opts.redirect) {
-    return redirect(
-      `${typeof opts.redirect === 'string' ? opts.redirect : '/'}${projectName ?? ''}`,
-    );
-  }
-  const slug = opts.loadIndexPage || opts.slug == null ? project.index : opts.slug;
-  const loader = await getData(baseUrl, config, projectName, slug).catch((e) => {
-    console.error(e);
-    return null;
-  });
-  if (!loader) throw responseNoArticle();
-  const footer = getFooterLinks(config, projectName, slug);
-  return { ...loader, footer, domain: opts.domain as string, project: projectName as string };
-}

package/src/loaders/utils.ts

@@ -1,169 +0,0 @@
-import type { MinifiedOutput } from 'nbtx';
-import { walkOutputs } from 'nbtx';
-import type { SiteManifest } from 'myst-config';
-import { selectAll } from 'unist-util-select';
-import type { Image as ImageSpec, Link as LinkSpec } from 'myst-spec';
-import type { FooterLinks, Heading, NavigationLink, PageLoader } from '../types';
-
-type Image = ImageSpec & { urlOptimized?: string };
-type Link = LinkSpec & { static?: boolean };
-type Output = { data?: MinifiedOutput[] };
-
-type ManifestProject = Required<SiteManifest>['projects'][0];
-type ManifestProjectItem = ManifestProject['pages'][0];
-
-export function getProject(
-  config?: SiteManifest,
-  projectSlug?: string,
-): ManifestProject | undefined {
-  if (!config) return undefined;
-  if (!projectSlug) return config.projects?.[0];
-  const project = config.projects?.find((p) => p.slug === projectSlug);
-  return project;
-}
-
-export function getProjectHeadings(
-  config: SiteManifest,
-  projectSlug?: string,
-  opts: { addGroups: boolean } = { addGroups: false },
-): Heading[] | undefined {
-  const project = getProject(config, projectSlug);
-  if (!project) return undefined;
-  const headings: Heading[] = [
-    {
-      title: project.title,
-      short_title: project.short_title,
-      slug: project.index,
-      path: project.slug ? `/${project.slug}` : '/',
-      level: 'index',
-    },
-    ...project.pages.map((p) => {
-      if (!('slug' in p)) return p;
-      return { ...p, path: projectSlug ? `/${project.slug}/${p.slug}` : `/${p.slug}` };
-    }),
-  ];
-  if (opts.addGroups) {
-    let lastTitle = project.short_title || project.title;
-    return headings.map((heading) => {
-      if (!heading.slug || heading.level === 'index') {
-        lastTitle = heading.short_title || heading.title;
-      }
-      return { ...heading, group: lastTitle };
-    });
-  }
-  return headings;
-}
-
-function getHeadingLink(currentSlug: string, headings?: Heading[]): NavigationLink | undefined {
-  if (!headings) return undefined;
-  const linkIndex = headings.findIndex(({ slug }) => !!slug && slug !== currentSlug);
-  const link = headings[linkIndex];
-  if (!link?.path) return undefined;
-  return {
-    title: link.title,
-    short_title: link.short_title,
-    url: link.path,
-    group: link.group,
-  };
-}
-
-export function getFooterLinks(
-  config?: SiteManifest,
-  projectSlug?: string,
-  slug?: string,
-): FooterLinks {
-  if (!slug || !config) return {};
-  const pages = getProjectHeadings(config, projectSlug, {
-    addGroups: true,
-  });
-  const found = pages?.findIndex(({ slug: s }) => s === slug) ?? -1;
-  if (found === -1) return {};
-  const prev = getHeadingLink(slug, pages?.slice(0, found).reverse());
-  const next = getHeadingLink(slug, pages?.slice(found + 1));
-  const footer: FooterLinks = {
-    navigation: { prev, next },
-  };
-  return footer;
-}
-
-type UpdateUrl = (url: string) => string;
-
-export function updateSiteManifestStaticLinksInplace(
-  data: SiteManifest,
-  updateUrl: UpdateUrl,
-): SiteManifest {
-  data.actions?.forEach((action) => {
-    if (!action.static) return;
-    action.url = updateUrl(action.url);
-  });
-  // TODO: this needs to be based on the template.yml in the future
-  if (data.logo) data.logo = updateUrl(data.logo);
-  if (data.logo_dark) data.logo_dark = updateUrl(data.logo_dark);
-  // Update the thumbnails to point at the CDN
-  data.projects?.forEach((project) => {
-    if (project.banner) project.banner = updateUrl(project.banner);
-    if (project.bannerOptimized) project.bannerOptimized = updateUrl(project.bannerOptimized);
-    if (project.thumbnail) project.thumbnail = updateUrl(project.thumbnail);
-    if (project.thumbnailOptimized)
-      project.thumbnailOptimized = updateUrl(project.thumbnailOptimized);
-    if (project?.exports) {
-      project.exports = project.exports.map((exp) => {
-        if (!exp.url) return exp;
-        return { ...exp, url: updateUrl(exp.url) };
-      });
-    }
-    project.pages
-      .filter((page): page is ManifestProjectItem => 'slug' in page)
-      .forEach((page) => {
-        if (page.thumbnail) page.thumbnail = updateUrl(page.thumbnail);
-        if (page.thumbnailOptimized) page.thumbnailOptimized = updateUrl(page.thumbnailOptimized);
-      });
-  });
-  return data;
-}
-
-export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: UpdateUrl): PageLoader {
-  if (data?.frontmatter?.thumbnail) {
-    data.frontmatter.thumbnail = updateUrl(data.frontmatter.thumbnail);
-  }
-  if (data?.frontmatter?.thumbnailOptimized) {
-    data.frontmatter.thumbnailOptimized = updateUrl(data.frontmatter.thumbnailOptimized);
-  }
-  if (data?.frontmatter?.banner) {
-    data.frontmatter.banner = updateUrl(data.frontmatter.banner);
-  }
-  if (data?.frontmatter?.bannerOptimized) {
-    data.frontmatter.bannerOptimized = updateUrl(data.frontmatter.bannerOptimized);
-  }
-  if (data?.frontmatter?.exports) {
-    data.frontmatter.exports = data.frontmatter.exports.map((exp) => {
-      if (!exp.url) return exp;
-      return { ...exp, url: updateUrl(exp.url) };
-    });
-  }
-  // Fix all of the images to point to the CDN
-  const images = selectAll('image', data.mdast) as Image[];
-  images.forEach((node) => {
-    node.url = updateUrl(node.url);
-    if (node.urlOptimized) {
-      node.urlOptimized = updateUrl(node.urlOptimized);
-    }
-  });
-  const links = selectAll('link,linkBlock,card', data.mdast) as Link[];
-  const staticLinks = links.filter((node) => node.static);
-  staticLinks.forEach((node) => {
-    // These are static links to thinks like PDFs or other referenced files
-    node.url = updateUrl(node.url);
-  });
-  const outputs = selectAll('output', data.mdast) as Output[];
-  outputs.forEach((node) => {
-    if (!node.data) return;
-    walkOutputs(node.data, (obj) => {
-      // The path will be defined from output of myst
-      // Here we are re-assigning it to the current domain
-      if (!obj.path) return;
-      obj.path = updateUrl(obj.path);
-    });
-  });
-  return data;
-}

package/src/types.ts

@@ -1,52 +0,0 @@
-import type { Root } from 'mdast';
-import type { Dependency, SourceFileKind } from 'myst-spec-ext';
-import type { References } from 'myst-common';
-import type { SiteManifest } from 'myst-config';
-import type { PageFrontmatter } from 'myst-frontmatter';
-import type { Theme } from '@myst-theme/providers';
-
-export type Heading = {
-  slug?: string;
-  path?: string;
-  title: string;
-  short_title?: string;
-  level: number | 'index';
-  group?: string;
-};
-
-export type SiteLoader = {
-  theme: Theme;
-  config?: SiteManifest;
-  CONTENT_CDN_PORT?: string | number;
-  MODE?: 'app' | 'static';
-  BASE_URL?: string;
-};
-
-export type NavigationLink = {
-  group?: string;
-  title: string;
-  url: string;
-  short_title?: string;
-};
-
-export type FooterLinks = {
-  navigation?: {
-    prev?: NavigationLink;
-    next?: NavigationLink;
-  };
-};
-
-export type PageLoader = {
-  kind: SourceFileKind;
-  file: string;
-  sha256: string;
-  slug: string;
-  domain: string; // This is written in at render time in the site
-  project: string; // This is written in at render time in the site
-  frontmatter: PageFrontmatter;
-  mdast: Root;
-  references: References;
-  footer?: FooterLinks;
-  // This may not be defined
-  dependencies?: Dependency[];
-};