fix: use project frontmatter

jupyter-book · Dec 3, 2024 · eb592b2 · eb592b2
1 parent 724ce76
commit eb592b2
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 20 deletions.
diff --git a/packages/frontmatter/src/FrontmatterBlock.tsx b/packages/frontmatter/src/FrontmatterBlock.tsx
@@ -188,22 +188,29 @@ export function Journal({
   );
 }
 
+export type LaunchOptions = {
+  repo: string;
+  location: string;
+  binder?: string;
+  jupyterhub?: string;
+};
+
 export function FrontmatterBlock({
   frontmatter,
   kind = SourceFileKind.Article,
   authorStyle = 'block',
   hideBadges,
   hideExports,
   className,
-  location,
+  launchOptions,
 }: {
   frontmatter: Omit<PageFrontmatter, 'parts'>;
   kind?: SourceFileKind;
   authorStyle?: 'block' | 'list';
   hideBadges?: boolean;
   hideExports?: boolean;
   className?: string;
-  location?: string;
+  launchOptions?: LaunchOptions;
 }) {
   if (!frontmatter) return null;
   const {
@@ -272,13 +279,7 @@ export function FrontmatterBlock({
             </>
           )}
           {!hideExports && <DownloadsDropdown exports={(downloads ?? exports) as any} />}
-          {!hideLaunch && frontmatter.github && location && (
-            <LaunchButton
-              git={frontmatter.github}
-              location={location}
-              binder={frontmatter.binder}
-            />
-          )}
+          {!hideLaunch && launchOptions && <LaunchButton {...launchOptions} />}
         </div>
       )}
       {title && <h1 className="mb-0">{title}</h1>}

diff --git a/packages/frontmatter/src/LaunchButton.tsx b/packages/frontmatter/src/LaunchButton.tsx
@@ -7,7 +7,7 @@ import * as Tabs from '@radix-ui/react-tabs';
 import * as Form from '@radix-ui/react-form';
 
 type CommonLaunchProps = {
-  git: string;
+  repo: string;
   location: string;
   ref?: string;
   onLaunch?: () => void;
@@ -130,14 +130,14 @@ function BinderLaunchContent(props: BinderLaunchProps) {
 
   // Parse the repo, assume it is a validated GitHub URL
   let gitComponent: string;
-  const resource = parseKnownGitProvider(props.git);
+  const resource = parseKnownGitProvider(props.repo);
   switch (resource?.provider) {
     case 'github': {
       gitComponent = `gh/${resource.org}/${resource.repo}`;
       break;
     }
     default: {
-      const escapedURL = encodeURIComponent(props.git);
+      const escapedURL = encodeURIComponent(props.repo);
       gitComponent = `git/${escapedURL}`;
     }
   }
@@ -222,7 +222,7 @@ function JupyterHubLaunchContent(props: JupyterHubLaunchProps) {
   const { onLaunch } = props;
   const defaultHubBaseURL = props.jupyterhub ?? '';
 
-  const resource = parseKnownGitProvider(props.git);
+  const resource = parseKnownGitProvider(props.repo);
 
   let urlPath = 'lab/tree';
   switch (resource?.provider) {
@@ -233,7 +233,7 @@ function JupyterHubLaunchContent(props: JupyterHubLaunchProps) {
 
   // Encode query for nbgitpuller
   const query = encodeURLParams({
-    repo: props.git,
+    repo: props.repo,
     urlpath: urlPath,
     branch: props.ref,
   });

diff --git a/packages/site/src/pages/Article.tsx b/packages/site/src/pages/Article.tsx
@@ -43,6 +43,18 @@ export const ArticlePage = React.memo(function ({
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
   const parts = extractKnownParts(tree, article.frontmatter?.parts);
+  const launchOptions = React.useMemo(() => {
+    if (!manifest) {
+      return undefined;
+    }
+    const repo = manifest.thebe?.binder?.repo ?? manifest.github;
+    if (!repo) {
+      return undefined;
+    }
+    const binder = manifest.thebe?.binder?.url;
+    const location = article.location;
+    return { repo, binder, location };
+  }, [manifest, article.location]);
 
   return (
     <ReferencesProvider
@@ -54,8 +66,8 @@ export const ArticlePage = React.memo(function ({
           {!hide_title_block && (
             <FrontmatterBlock
               kind={article.kind}
-              location={article.location}
               frontmatter={{ ...article.frontmatter, downloads }}
+              launchOptions={launchOptions}
               className="mb-8 pt-9"
             />
           )}

diff --git a/themes/article/app/components/Article.tsx b/themes/article/app/components/Article.tsx
@@ -39,6 +39,18 @@ export function Article({
   const compute = useComputeOptions();
   const top = useThemeTop();
   const isOutlineMargin = useMediaQuery('(min-width: 1024px)');
+  const launchOptions = React.useMemo(() => {
+    if (!manifest) {
+      return undefined;
+    }
+    const repo = manifest.thebe?.binder?.repo ?? manifest.github;
+    if (!repo) {
+      return undefined;
+    }
+    const binder = manifest.thebe?.binder?.url;
+    const location = article.location;
+    return { repo, binder, location };
+  }, [manifest, article.location]);
   return (
     <ReferencesProvider
       references={{ ...article.references, article: article.mdast }}
@@ -49,7 +61,7 @@ export function Article({
           {!hideTitle && (
             <FrontmatterBlock
               frontmatter={{ title, subtitle }}
-              location={article.location}
+              launchOptions={launchOptions}
               className="mb-5"
             />
           )}

diff --git a/themes/article/app/components/ArticlePageAndNavigation.tsx b/themes/article/app/components/ArticlePageAndNavigation.tsx
@@ -6,9 +6,9 @@ export function ArticlePageAndNavigation({ children }: { children: React.ReactNo
     <UiStateProvider>
       <TabStateProvider>
         <GridSystemProvider gridSystem="article-left-grid">
-        <div className="fixed top-4 right-4 z-50">
+          <div className="fixed top-4 right-4 z-50">
             <ThemeButton />
-        </div>
+          </div>
           <article className="article content article-left-grid subgrid-gap">{children}</article>
         </GridSystemProvider>
       </TabStateProvider>

diff --git a/themes/book/.eslintrc.js b/themes/book/.eslintrc.js
@@ -1,4 +1,4 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'],
 };
diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx
@@ -76,6 +76,19 @@ export const ArticlePage = React.memo(function ({
   const keywords = article.frontmatter?.keywords ?? [];
   const parts = extractKnownParts(tree, article.frontmatter?.parts);
   const isOutlineMargin = useMediaQuery('(min-width: 1024px)');
+  const launchOptions = React.useMemo(() => {
+    if (!manifest) {
+      return undefined;
+    }
+    const repo = manifest.thebe?.binder?.repo ?? manifest.github;
+    if (!repo) {
+      return undefined;
+    }
+    const binder = manifest.thebe?.binder?.url;
+    const location = article.location;
+    return { repo, binder, location };
+  }, [manifest, article.location]);
+
   return (
     <ReferencesProvider
       references={{ ...article.references, article: article.mdast }}
@@ -86,9 +99,9 @@ export const ArticlePage = React.memo(function ({
           {!hide_title_block && (
             <FrontmatterBlock
               kind={article.kind}
-              location={article.location}
               frontmatter={{ ...article.frontmatter, downloads }}
               className="mb-8 pt-9"
+              launchOptions={launchOptions}
             />
           )}
           {!hide_outline && (