ensure svgs are inlined in production build

UofGAnalytics · Apr 28, 2022 · d140e8c · d140e8c
1 parent 82d6a6f
commit d140e8c
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 18 deletions.
diff --git a/compiler/src/hast/index.ts b/compiler/src/hast/index.ts
@@ -5,7 +5,7 @@ import { unified } from 'unified';
 import { VFile } from 'vfile';
 
 import { Context } from '../context';
-import { embedAssets } from './embed-assets';
+import { inlineRelativeAssets } from './inline-files';
 import { responsiveTables } from './responsive-tables';
 
 export async function hastPhase(
@@ -20,7 +20,7 @@ export async function hastPhase(
     .use(responsiveTables);
 
   if (!ctx.options.noEmbedAssets) {
-    processor.use(embedAssets, ctx);
+    processor.use(inlineRelativeAssets, ctx);
   }
 
   return processor.run(mdast, file);

diff --git a/compiler/src/hast/embed-assets.ts → compiler/src/hast/inline-files.ts b/compiler/src/hast/embed-assets.ts → compiler/src/hast/inline-files.ts
@@ -18,7 +18,7 @@ import { getSvgHast } from '../utils/get-svg-hast';
 import { failMessage } from '../utils/message';
 import { readFile, rehypeParser } from '../utils/utils';
 
-export function embedAssets(ctx: Context) {
+export function inlineRelativeAssets(ctx: Context) {
   return async (tree: Element, file: VFile) => {
     const transformations: Promise<void>[] = [];
     visit(tree, 'element', (node) => {
@@ -85,11 +85,16 @@ async function embedSvg(imgNode: Element, ctx: Context) {
   // const svgNode = getAssetHast(svg) as Element;
 
   const svgNode = getSvgHast(svg);
+  const svgProperties = svgNode.properties || {};
+
+  // helps to ensure the svg is responsive
+  delete svgProperties.width;
+  delete svgProperties.height;
 
   const className = 'knitr-svg';
   const properties = {
     ...imgNode.properties,
-    ...svgNode.properties,
+    ...svgProperties,
     className: [
       className,
       ...getNodeClassNames(imgNode, className),

diff --git a/compiler/src/mdast/__test__/embed-asset-url.test.ts b/compiler/src/mdast/__test__/embed-asset-url.test.ts
@@ -7,7 +7,7 @@ describe('embedAssetUrl', () => {
     });
     // console.log(html);
     const imgCount = (html.match(/img-wrapper/g) || []).length;
-    expect(imgCount).toBe(2);
+    expect(imgCount).toBe(3);
 
     // const svgCount = (html.match(/<svg.*?style="width: 70%;".*?>/) || [])
     //   .length;
@@ -17,6 +17,6 @@ describe('embedAssetUrl', () => {
       .match(/<span class="caption-count">Figure (\d+)/g)
       ?.map((s) => Number(s.slice(-1)));
 
-    expect(figureNum).toEqual([1, 2]);
+    expect(figureNum).toEqual([1, 2, 3]);
   });
 });
diff --git a/fixtures/relative-assets/test/dag-logo.svg b/fixtures/relative-assets/test/dag-logo.svg
diff --git a/fixtures/relative-assets/test/test.yaml b/fixtures/relative-assets/test/test.yaml
@@ -5,5 +5,5 @@ content:
     src: test1.Rmd
   - type: text
     src: test2.Rmd
-  # - type: text
-  #   src: test3.Rmd
+  - type: text
+    src: test3.Rmd
diff --git a/fixtures/relative-assets/test/test3.Rmd b/fixtures/relative-assets/test/test3.Rmd
@@ -1,3 +1 @@
-```{r, echo=FALSE, out.width = '70%'}
-knitr::include_graphics("venn_disjoint.pdf")
-```
+![Dag logo](dag-logo.svg)
diff --git a/template/src/styles/images.scss b/template/src/styles/images.scss
@@ -9,6 +9,13 @@ figure {
   .img-bg {
     display: inline-block;
     background: white;
+    width: 75%;
+    max-width: 100%;
+    height: auto;
+    margin-top: 3rem;
+    margin-right: auto;
+    margin-bottom: 3rem;
+    margin-left: auto;
   }
   svg.pdftex, svg.knitr-svg {
     margin-bottom: 0;

diff --git a/template/src/styles/tex.scss b/template/src/styles/tex.scss
@@ -1,13 +1,6 @@
 svg.pdftex,
 svg.knitr-svg {
   display: block;
-  width: 75%;
-  max-width: 100%;
-  height: auto;
-  margin-top: 3rem;
-  margin-right: auto;
-  margin-bottom: 3rem;
-  margin-left: auto;
   // background: white;
   // path {
   //   stroke: white;