@myst-theme/site 0.4.2 → 0.5.0

package/package.json

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

package/src/components/Bibliography.tsx

@@ -1,17 +1,19 @@
-import { useReferences } from '@myst-theme/providers';
+import { useGridSystemProvider, useReferences } from '@myst-theme/providers';
+import classNames from 'classnames';
 import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
 
 export function Bibliography() {
   const references = useReferences();
+  const grid = useGridSystemProvider();
   const { order, data } = references?.cite ?? {};
   const filtered = order?.filter((l) => l);
   const [hidden, setHidden] = useState(true);
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section className="article-grid article-subgrid-gap col-screen">
+    <section className={classNames(grid, 'subgrid-gap col-screen')}>
       <div>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button

package/src/components/ContentBlocks.tsx

@@ -7,6 +7,7 @@ import {
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
 } from '@myst-theme/jupyter';
+import { useGridSystemProvider } from '@myst-theme/providers';
 
 function isACodeCell(node: GenericParent) {
   return (
@@ -30,7 +31,8 @@ function Block({
   node: GenericParent;
   className?: string;
 }) {
-  const subGrid = 'article-grid article-subgrid-gap col-screen';
+  const grid = useGridSystemProvider();
+  const subGrid = `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =

package/src/components/Headers.tsx

@@ -0,0 +1,59 @@
+import {
+  FrontmatterBlock,
+  GitHubLink,
+  Journal,
+  LicenseBadges,
+  OpenAccessBadge,
+} from '@myst-theme/frontmatter';
+import { useGridSystemProvider } from '@myst-theme/providers';
+import classNames from 'classnames';
+import type { PageFrontmatter } from 'myst-frontmatter';
+
+export function ArticleHeader({ frontmatter }: { frontmatter: PageFrontmatter }) {
+  const grid = useGridSystemProvider();
+  const { subject, venue, biblio, ...rest } = frontmatter ?? {};
+  return (
+    <header
+      className={classNames('w-full relative pt-[2rem] col-screen article', grid, 'subgrid-gap', {
+        'bg-no-repeat bg-cover bg-top': frontmatter?.banner,
+        'pb-[4rem] min-h-[300px]': frontmatter?.banner,
+      })}
+      style={{
+        backgroundImage: frontmatter?.banner ? `url(${frontmatter?.banner})` : undefined,
+      }}
+    >
+      {frontmatter?.banner && (
+        <div className="absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur top-[2rem] h-[calc(100%-4rem)] w-full col-screen md:col-screen-inset pointer-events-none"></div>
+      )}
+      <div
+        className={classNames('flex w-full align-middle z-10 py-2 mb-[1rem] text-sm', {
+          'col-screen md:col-screen-inset px-4': frontmatter?.banner,
+          'col-page-right': !frontmatter?.banner,
+          'bg-white/80 dark:bg-black/80': frontmatter?.banner,
+        })}
+      >
+        {subject && (
+          <div
+            className={classNames('flex-none pr-2 smallcaps', {
+              'border-r mr-2': venue,
+            })}
+          >
+            {subject}
+          </div>
+        )}
+        <Journal venue={venue} biblio={biblio} />
+        <div className="flex-grow"></div>
+        <LicenseBadges license={frontmatter?.license} />
+        <OpenAccessBadge open_access={frontmatter?.open_access} />
+        <GitHubLink github={frontmatter?.github} />
+      </div>
+      <FrontmatterBlock
+        frontmatter={rest}
+        authorStyle="list"
+        className={classNames('z-10', { 'pt-4': frontmatter?.banner })}
+        hideBadges
+        hideExports
+      />
+    </header>
+  );
+}

package/src/components/Navigation/TableOfContents.tsx

@@ -8,6 +8,7 @@ import {
   useSiteManifest,
   useBaseurl,
   withBaseurl,
+  useGridSystemProvider,
 } from '@myst-theme/providers';
 import { getProjectHeadings, type Heading } from '@myst-theme/common';
 
@@ -143,6 +144,7 @@ export const TableOfContents = ({
   projectSlug?: string;
   footer?: React.ReactNode;
 }) => {
+  const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
   const config = useSiteManifest();
@@ -162,7 +164,9 @@ export const TableOfContents = ({
     <div
       ref={tocRef}
       className={classNames(
-        'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
+        'fixed',
+        `xl:${grid}`, // for example, xl:article-grid
+        'grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
         { hidden: !open },
         { 'z-30': open },
       )}

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { DocumentOutline, useOutlineHeight } from './DocumentOutline';
 export { FooterLinksBlock } from './FooterLinksBlock';
 export { ContentReload } from './ContentReload';
 export { Bibliography } from './Bibliography';
+export { ArticleHeader } from './Headers';
 export { ExternalOrInternalLink } from './ExternalOrInternalLink';
 export * from './Navigation';
 export { renderers } from './renderers';

package/src/pages/Root.tsx

@@ -92,7 +92,7 @@ export function AppCatchBoundary() {
   return (
     <Document theme={Theme.light}>
       <article className="article">
-        <main className="article-grid article-subgrid-gap col-screen">
+        <main className="article-grid subgrid-gap col-screen">
           <Error404 />
         </main>
       </article>