🎨 Updates for article theme (#172)

jupyter-book · Jul 14, 2023 · 02158b7 · 02158b7
1 parent 8a4106c
commit 02158b7
Show file tree

Hide file tree

Showing 27 changed files with 9,281 additions and 3,385 deletions.
diff --git a/.changeset/large-carpets-explode.md b/.changeset/large-carpets-explode.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/jupyter': patch
+---
+
+Change to ThebeMarkdownCell
diff --git a/.changeset/moody-guests-hunt.md b/.changeset/moody-guests-hunt.md
@@ -0,0 +1,8 @@
+---
+'@myst-theme/frontmatter': patch
+'@myst-theme/article': patch
+'@myst-theme/site': patch
+'@myst-theme/book': patch
+---
+
+Add banners and change article theme
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frontmatter/package.json b/packages/frontmatter/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.13",
-    "@scienceicons/react": "^0.0.2",
+    "@scienceicons/react": "^0.0.3",
     "classnames": "^2.3.2",
     "myst-common": "*",
     "myst-frontmatter": "*"

diff --git a/packages/frontmatter/src/FrontmatterBlock.tsx b/packages/frontmatter/src/FrontmatterBlock.tsx
@@ -273,11 +273,15 @@ export function FrontmatterBlock({
   frontmatter,
   kind = SourceFileKind.Article,
   authorStyle = 'block',
+  hideBadges,
+  hideExports,
   className,
 }: {
   frontmatter: PageFrontmatter;
   kind?: SourceFileKind;
   authorStyle?: 'block' | 'list';
+  hideBadges?: boolean;
+  hideExports?: boolean;
   className?: string;
 }) {
   if (!frontmatter) return null;
@@ -306,7 +310,7 @@ export function FrontmatterBlock({
     return null;
   }
   return (
-    <div className={classNames('mb-8', className)}>
+    <div className={classNames(className)}>
       {hasHeaders && (
         <div className="flex items-center h-6 mt-3 mb-5 text-sm font-light">
           {subject && (
@@ -320,15 +324,19 @@ export function FrontmatterBlock({
           )}
           <Journal venue={venue} biblio={biblio} />
           <div className="flex-grow"></div>
-          <LicenseBadges license={license} />
-          <OpenAccessBadge open_access={open_access} />
-          <GitHubLink github={github} />
-          {isJupyter && (
-            <div className="inline-block mr-1">
-              <JupyterIcon className="inline-block w-5 h-5" />
-            </div>
+          {!hideBadges && (
+            <>
+              <LicenseBadges license={license} />
+              <OpenAccessBadge open_access={open_access} />
+              <GitHubLink github={github} />
+              {isJupyter && (
+                <div className="inline-block mr-1">
+                  <JupyterIcon className="inline-block w-5 h-5" />
+                </div>
+              )}
+            </>
           )}
-          <DownloadsDropdown exports={exports as any} />
+          {!hideExports && <DownloadsDropdown exports={exports as any} />}
         </div>
       )}
       {title && <h1 className="mb-0">{title}</h1>}

diff --git a/packages/frontmatter/src/index.ts b/packages/frontmatter/src/index.ts
@@ -1,2 +1,3 @@
 export * from './FrontmatterBlock';
+export * from './licenses';
 export * from './downloads';
diff --git a/packages/jupyter/package.json b/packages/jupyter/package.json
@@ -27,9 +27,9 @@
     "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "myst-common": "^1.0.1",
-    "myst-config": "^1.0.0",
-    "myst-frontmatter": "^1.0.0",
+    "myst-common": "^1.0.3",
+    "myst-config": "^1.0.2",
+    "myst-frontmatter": "^1.0.4",
     "myst-spec": "^0.0.4",
     "myst-to-react": "^0.3.8",
     "nanoid": "^4.0.2",

diff --git a/packages/jupyter/src/execute/utils.ts b/packages/jupyter/src/execute/utils.ts
@@ -68,7 +68,7 @@ export function notebookFromMdast(
     } else {
       // assume content - concatenate it
       // TODO inject cell metadata
-      const cell = new core.ThebeNonExecutableCell(
+      const cell = new core.ThebeMarkdownCell(
         block.key,
         notebook.id,
         block.children.reduce((acc, child) => acc + '\n' + (child.value ?? ''), ''),

diff --git a/packages/myst-demo/package.json b/packages/myst-demo/package.json
@@ -22,23 +22,23 @@
     "@heroicons/react": "^2.0.13",
     "classnames": "^2.3.2",
     "js-yaml": "^4.1.0",
-    "myst-common": "^1.0.1",
-    "myst-config": "^1.0.0",
-    "myst-directives": "^1.0.1",
+    "myst-common": "^1.0.3",
+    "myst-config": "^1.0.2",
+    "myst-directives": "^1.0.3",
     "myst-ext-card": "^1.0.0",
-    "myst-ext-exercise": "^1.0.0",
-    "myst-ext-grid": "^1.0.0",
-    "myst-ext-proof": "^1.0.0",
-    "myst-ext-tabs": "^1.0.0",
-    "myst-frontmatter": "^1.0.0",
-    "myst-parser": "^1.0.1",
+    "myst-ext-exercise": "^1.0.1",
+    "myst-ext-grid": "^1.0.1",
+    "myst-ext-proof": "^1.0.1",
+    "myst-ext-tabs": "^1.0.1",
+    "myst-frontmatter": "^1.0.4",
+    "myst-parser": "^1.0.3",
     "myst-spec": "^0.0.4",
-    "myst-to-docx": "^1.0.0",
-    "myst-to-html": "^1.0.1",
-    "myst-to-jats": "^1.0.2",
+    "myst-to-docx": "^1.0.1",
+    "myst-to-html": "^1.0.3",
+    "myst-to-jats": "^1.0.5",
     "myst-to-react": "^0.3.8",
-    "myst-to-tex": "^1.0.0",
-    "myst-transforms": "^1.0.0",
+    "myst-to-tex": "^1.0.3",
+    "myst-transforms": "^1.0.3",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7",

diff --git a/packages/myst-to-react/package.json b/packages/myst-to-react/package.json
@@ -24,8 +24,8 @@
     "@radix-ui/react-hover-card": "^1.0.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "myst-common": "^1.0.1",
-    "myst-config": "^1.0.0",
+    "myst-common": "^1.0.3",
+    "myst-config": "^1.0.2",
     "myst-spec": "^0.0.4",
     "nanoid": "^4.0.2",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/packages/myst-to-react/src/components/LinkCard.tsx b/packages/myst-to-react/src/components/LinkCard.tsx
@@ -16,7 +16,7 @@ export function LinkCard({
   loading?: boolean;
   title: React.ReactNode;
   description?: React.ReactNode;
-  thumbnail?: string;
+  thumbnail?: string | null;
   className?: string;
 }) {
   const Link = useLinkProvider();

diff --git a/packages/providers/package.json b/packages/providers/package.json
@@ -22,9 +22,9 @@
   "peerDependencies": {
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
-    "myst-common": "^1.0.1",
-    "myst-config": "^1.0.0",
-    "myst-frontmatter": "^1.0.0",
+    "myst-common": "^1.0.3",
+    "myst-config": "^1.0.2",
+    "myst-frontmatter": "^1.0.4",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
   },

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -22,8 +22,8 @@
     "@myst-theme/providers": "^0.3.8",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.0.1",
-    "myst-config": "^1.0.0",
+    "myst-common": "^1.0.3",
+    "myst-config": "^1.0.2",
     "myst-demo": "^0.3.8",
     "myst-to-react": "^0.3.8",
     "nbtx": "^0.2.3",

diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx
@@ -26,7 +26,7 @@ type Props = {
  * scrollIntoView is used to ensure that when a user clicks on an item, it will smoothly scroll.
  */
 const Headings = ({ headings, activeId, highlight, selector }: Props) => (
-  <ul className="text-sm text-slate-400 leading-6">
+  <ul className="text-sm leading-6 text-slate-400">
     {headings.map((heading) => (
       <li
         key={heading.id}
@@ -43,7 +43,7 @@ const Headings = ({ headings, activeId, highlight, selector }: Props) => (
             'text-slate-500 dark:text-slate-300': heading.level >= 3 && heading.id !== activeId,
             'text-blue-600 dark:text-white font-bold': heading.id === activeId,
             'pr-2': heading.id !== activeId, // Allows for bold to change length
-            'pl-2': heading.level === 2,
+            'pl-2': heading.level === 1 || heading.level === 2,
             'pl-4': heading.level === 3,
             'pl-8 text-xs': heading.level === 4,
             'pl-10 text-xs font-light': heading.level === 5,
@@ -156,9 +156,6 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadin
   return { observer };
 };
 
-const DOC_OUTLINE_CLASS =
-  'fixed bottom-0 right-[max(0px,calc(50%-45rem))] w-[14rem] lg:w-[18rem] py-10 px-4 lg:px-8 overflow-y-auto hidden lg:block';
-
 export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
   const container = useRef<T>(null);
   const outline = useRef<T>(null);
@@ -186,7 +183,7 @@ export function useOutlineHeight<T extends HTMLElement = HTMLElement>() {
 export const DocumentOutline = ({
   outlineRef,
   top,
-  className = DOC_OUTLINE_CLASS,
+  className,
   selector = SELECTOR,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
@@ -204,7 +201,7 @@ export const DocumentOutline = ({
       ref={outlineRef}
       aria-label="Document Outline"
       className={classNames(
-        'not-prose overflow-y-auto hidden',
+        'not-prose overflow-y-auto',
         'transition-opacity duration-700', // Animation on load
         className,
       )}
@@ -213,7 +210,7 @@ export const DocumentOutline = ({
         maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
       }}
     >
-      <div className="mb-4 text-sm uppercase text-slate-900 leading-6 dark:text-slate-100">
+      <div className="mb-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
         In this article
       </div>
       <Headings headings={headings} activeId={activeId} highlight={highlight} selector={selector} />

diff --git a/packages/site/src/loaders/utils.ts b/packages/site/src/loaders/utils.ts
@@ -101,6 +101,17 @@ export function updateSiteManifestStaticLinksInplace(
   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) => {
@@ -118,6 +129,12 @@ export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: Update
   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;
@@ -142,8 +159,8 @@ export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: Update
   outputs.forEach((node) => {
     if (!node.data) return;
     walkOutputs(node.data, (obj) => {
-      // The path will be defined from output of myst-cli
-      // Here we are re-asigning it to the current domain
+      // 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);
     });

diff --git a/packages/site/src/pages/Article.tsx b/packages/site/src/pages/Article.tsx
@@ -33,7 +33,11 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
       <BusyScopeProvider>
         <ExecuteScopeProvider contents={article}>
           {!hide_title_block && (
-            <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
+            <FrontmatterBlock
+              kind={article.kind}
+              frontmatter={article.frontmatter}
+              className="mb-8"
+            />
           )}
           {binderUrl && !canCompute && (
             <div className="flex justify-end">

diff --git a/packages/site/src/pages/Root.tsx b/packages/site/src/pages/Root.tsx
@@ -60,7 +60,7 @@ export function Document({
           analytics_plausible={config?.analytics_plausible}
         />
       </head>
-      <body className="m-0 bg-white transition-colors duration-500 dark:bg-stone-900">
+      <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
         <ThemeProvider theme={theme} renderers={renderers} {...links}>
           <BaseUrlProvider baseurl={baseurl}>
             <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
@@ -88,21 +88,6 @@ export function App() {
   );
 }
 
-export function AppWithReload() {
-  const { theme, config, CONTENT_CDN_PORT, MODE, BASE_URL } = useLoaderData<SiteLoader>();
-  return (
-    <Document
-      theme={theme}
-      config={config}
-      scripts={MODE === 'static' ? undefined : <ContentReload port={CONTENT_CDN_PORT} />}
-      staticBuild={MODE === 'static'}
-      baseurl={BASE_URL}
-    >
-      <Outlet />
-    </Document>
-  );
-}
-
 export function AppCatchBoundary() {
   return (
     <Document theme={Theme.light}>

diff --git a/packages/site/src/pages/index.ts b/packages/site/src/pages/index.ts
@@ -2,4 +2,4 @@ export { ErrorProjectNotFound } from './ErrorProjectNotFound';
 export { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 export { Error404 } from './Error404';
 export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article';
-export { App, AppWithReload, Document, AppCatchBoundary } from './Root';
+export { App, Document, AppCatchBoundary } from './Root';
diff --git a/themes/article/app/root.tsx b/themes/article/app/root.tsx
@@ -4,11 +4,13 @@ import thebeCoreCss from 'thebe-core/dist/lib/thebe-core.css';
 import { getConfig } from '~/utils/loaders.server';
 import type { SiteLoader } from '@myst-theme/site';
 import {
-  AppWithReload,
+  Document,
   responseNoSite,
   getMetaTagsForSite,
   getThemeSession,
+  ContentReload,
 } from '@myst-theme/site';
+import { Outlet, useLoaderData } from '@remix-run/react';
 export { AppCatchBoundary as CatchBoundary } from '@myst-theme/site';
 
 export const meta: MetaFunction = ({ data }) => {
@@ -44,8 +46,23 @@ export const loader: LoaderFunction = async ({ request }): Promise<SiteLoader> =
     config,
     CONTENT_CDN_PORT: process.env.CONTENT_CDN_PORT ?? 3100,
     MODE: (process.env.MODE ?? 'app') as 'app' | 'static',
+    BASE_URL: process.env.BASE_URL || undefined,
   };
   return data;
 };
 
-export default AppWithReload;
+export default function AppWithReload() {
+  const { theme, config, CONTENT_CDN_PORT, MODE, BASE_URL } = useLoaderData<SiteLoader>();
+  return (
+    <Document
+      theme={theme}
+      config={config}
+      scripts={MODE === 'static' ? undefined : <ContentReload port={CONTENT_CDN_PORT} />}
+      staticBuild={MODE === 'static'}
+      baseurl={BASE_URL}
+      scrollTopClass="scroll-p-0"
+    >
+      <Outlet />
+    </Document>
+  );
+}