ensure all images (not just plots) get white background

UofGAnalytics · Apr 26, 2022 · 1818fc3 · 1818fc3
1 parent 025a386
commit 1818fc3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 38 deletions.
diff --git a/compiler/src/hast/embed-assets.ts b/compiler/src/hast/embed-assets.ts
@@ -19,45 +19,46 @@ import { failMessage } from '../utils/message';
 import { readFile, rehypeParser } from '../utils/utils';
 
 export function embedAssets(ctx: Context) {
-  async function embed(node: Element, file: VFile) {
-    const src = getImageSrc(node);
-    const parsed = path.parse(src);
-    try {
-      switch (parsed.ext) {
-        case '.png':
-        case '.jpg':
-        case '.jpeg':
-        case '.gif':
-          return await embedImage(node, ctx, file);
-        case '.svg':
-          return await embedSvg(node, ctx);
-        case '.pdf':
-          // return await embedPdfSvg(node);
-          throw new Error(
-            `Unhandled file extension: .pdf (convert to .svg)`
-          );
-        case '.html':
-          return await embedHtml(node);
-        default:
-          throw new Error(`Unhandled file extension: ${parsed.ext}`);
-      }
-    } catch (_err) {
-      console.log(_err);
-      const err = _err as Error;
-      failMessage(file, err?.message || '', node.position);
-    }
-  }
   return async (tree: Element, file: VFile) => {
     const transformations: Promise<void>[] = [];
     visit(tree, 'element', (node) => {
       if (node.tagName === 'img') {
-        transformations.push(embed(node, file));
+        transformations.push(embed(node, file, ctx));
       }
     });
     await Promise.all(transformations);
   };
 }
 
+async function embed(node: Element, file: VFile, ctx: Context) {
+  const src = getImageSrc(node);
+  const parsed = path.parse(src);
+  try {
+    switch (parsed.ext) {
+      case '.png':
+      case '.jpg':
+      case '.jpeg':
+      case '.gif':
+        return await embedImage(node, ctx, file);
+      case '.svg':
+        return await embedSvg(node, ctx);
+      case '.pdf':
+        // return await embedPdfSvg(node);
+        throw new Error(
+          `Unhandled file extension: .pdf (convert to .svg)`
+        );
+      case '.html':
+        return await embedHtml(node);
+      default:
+        throw new Error(`Unhandled file extension: ${parsed.ext}`);
+    }
+  } catch (_err) {
+    console.log(_err);
+    const err = _err as Error;
+    failMessage(file, err?.message || '', node.position);
+  }
+}
+
 async function embedImage(node: Element, ctx: Context, file: VFile) {
   const src = getImageSrc(node);
   const mime = mimes.getType(path.extname(src));

diff --git a/compiler/src/mdast/images.ts b/compiler/src/mdast/images.ts
@@ -17,12 +17,21 @@ export function images(ctx: Context) {
 function template(node: Image, count: number) {
   const image: Element = {
     type: 'element',
-    tagName: 'img',
+    tagName: 'div',
     properties: {
-      src: node.url,
-      alt: node.alt,
+      className: 'img-bg',
     },
-    children: [],
+    children: [
+      {
+        type: 'element',
+        tagName: 'img',
+        properties: {
+          src: node.url,
+          alt: node.alt,
+        },
+        children: [],
+      },
+    ],
   };
 
   if (node.data?.width) {

diff --git a/template/src/styles/images.scss b/template/src/styles/images.scss
@@ -5,17 +5,17 @@ img {
 }
 
 figure {
-  svg.pdftex, svg.knitr-svg {
-    margin-bottom: 0;
+  text-align: center;
+  .img-bg {
+    display: inline-block;
     background: white;
   }
-  img {
-    margin: 0 auto;
+  svg.pdftex, svg.knitr-svg {
+    margin-bottom: 0;
   }
   figcaption {
     margin-bottom: 3rem;
     padding-top: 0.5rem;
-    text-align: center;
     a {
       font-style: italic;
       color: var(--fadedTextColor);