🌉 Update images to work locally (#145)

Author: rowanc1

.github/workflows/build.yml

@@ -153,6 +153,9 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+      - name: Install missing dependencies
+        # On May 30, 2023 this wasn't included in the base try removing in future!
+        run: pip install typing_extensions
       - uses: jupyterlab/maintainer-tools/.github/actions/check-links@v1
         with:
           ignore_links: 'https:\/\/mybinder\.org.*'

src/images.ts

@@ -6,7 +6,7 @@ import { AttachmentsResolver } from '@jupyterlab/attachments';
 
 type Options = {
   resolver: IRenderMime.IResolver | null;
-  cell: MarkdownCell;
+  cell?: MarkdownCell;
 };
 
 export async function imageUrlSourceTransform(
@@ -17,10 +17,18 @@ export async function imageUrlSourceTransform(
   await Promise.all(
     images.map(async image => {
       if (!image || !image.url) return;
-      const resolver = new AttachmentsResolver({
-        parent: opts.resolver ?? undefined,
-        model: opts.cell.model.attachments
-      });
+      if (!opts.resolver) {
+        console.warn(
+          'No resolver supplied to `imageUrlSourceTransform`, local images may not work.'
+        );
+        return;
+      }
+      const resolver = opts.cell
+        ? new AttachmentsResolver({
+            parent: opts.resolver ?? undefined,
+            model: opts.cell?.model.attachments
+          })
+        : opts.resolver;
       const path = await resolver.resolveUrl(image.url);
       if (!path) return;
       const url = await resolver.getDownloadUrl(path);

src/mime.tsx

@@ -33,6 +33,7 @@ import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
 import { unified } from 'unified';
 import { Signal } from '@lumino/signaling';
 import React from 'react';
+import { imageUrlSourceTransform } from './images';
 
 /**
  * The MIME type for Markdown.
@@ -120,8 +121,9 @@ export class RenderedMySTMarkdown
    *
    * @returns A promise which resolves when rendering is complete.
    */
-  renderModel(model: IRenderMime.IMimeModel): Promise<void> {
-    const mdast = markdownParse(model.data[MIME_TYPE] as string);
+  async renderModel(model: IRenderMime.IMimeModel): Promise<void> {
+    const markdownText = model.data[MIME_TYPE] as string;
+    const mdast = markdownParse(markdownText, false);
     const linkTransforms = [
       new WikiTransformer(),
       new GithubTransformer(),
@@ -131,7 +133,6 @@ export class RenderedMySTMarkdown
     const file = new VFile();
     const references = {
       cite: { order: [], data: {} },
-      footnotes: {},
       article: mdast as any
     };
     const { frontmatter: frontmatterRaw } = getFrontmatter(mdast, {
@@ -159,6 +160,11 @@ export class RenderedMySTMarkdown
       .use(keysPlugin)
       .runSync(mdast as any, file);
 
+    // Go through all links and replace the source if they are local
+    await imageUrlSourceTransform(mdast as any, {
+      resolver: this.resolver
+    });
+
     this.state = {
       mdast,
       references,

src/myst.ts

@@ -32,7 +32,7 @@ import { internalLinksPlugin } from './links';
 import { addCiteChildrenPlugin } from './citations';
 import { evalRole } from './roles';
 
-export function markdownParse(text: string): Root {
+export function markdownParse(text: string, inNotebook = true): Root {
   const mdast = mystParse(text, {
     directives: [
       cardDirective,
@@ -56,9 +56,11 @@ export function markdownParse(text: string): Root {
       }
     })
     .runSync(mdast as any);
-  // Lift children out of blocks for the next step
-  // We are working here as one cell at a time
-  liftChildren(mdast, 'block');
+  if (inNotebook) {
+    // If in the notebook, lift children out of blocks for the next step
+    // We are working here as one cell at a time
+    liftChildren(mdast, 'block');
+  }
   return mdast as Root;
 }
 

style/preflight.css

@@ -27,6 +27,11 @@
   background-image: none; /* 2 */
 }
 
+.myst img {
+  max-width: 100%;
+}
+
 .myst figure img {
   display: block;
+  max-width: 100%;
 }