refactor: ways to embed visualisation

Now can pass custom code block or only pass image url.
researchdata-sheffield · Jul 20, 2021 · 2a38a32 · 2a38a32
1 parent d7d847a
commit 2a38a32
Show file tree

Hide file tree

Showing 11 changed files with 1,981 additions and 64 deletions.
diff --git a/content/visualisation/2021-06-22-Covid-Plot/index.mdx b/content/visualisation/2021-06-22-Covid-Plot/index.mdx
@@ -21,22 +21,7 @@ pngExternalImagePath: https://raw.githubusercontent.com/VictimOfMaths/COVID-19/m
 </VisDiv>
 
 <VisPagination mdx={props.mdx}>
-  <EmbedCode>
-
-  ```html
-  <a 
-    href="https://dataviz.shef.ac.uk/visualisation/22/06/2021/Covid-Plot" 
-    target="_blank"
-  >
-    <img 
-      style="height:550px; width:auto" 
-      src="https://raw.githubusercontent.com/VictimOfMaths/COVID-19/master/Exposure%20mapping/COVIDBivariateLondon.png" 
-      alt="Covid bivariate - London" 
-    />
-  </a>
-  ```
-
-  </EmbedCode>
+  <EmbedCode url="https://raw.githubusercontent.com/VictimOfMaths/COVID-19/master/Exposure%20mapping/COVIDBivariateLondon.png" />
 </VisPagination>
 
 <VisDetail mdx={props.mdx} />

diff --git a/...t/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/index.mdx b/...t/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/index.mdx
@@ -48,22 +48,7 @@ export const data = [
 
 
 <VisPagination mdx={props.mdx}>
-  <EmbedCode>
-
-  ```html
-  <a 
-    href=\`${props.mdx.frontmatter.title}https://dataviz.shef.ac.uk/visualisation/24/06/2021/Increased-snack-intake-in-UK-and-Australia\` 
-    target="_blank"
-  >
-    <img 
-      alt="Increased snack intake in UK and Australia" 
-      src="https://raw.githubusercontent.com/researchdata-sheffield/dataviz-hub2/master/content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/Increased-snack-intake-in-UK-and-Australia.svg" 
-      style="height:550px; width:auto" 
-    />
-  </a>
-  ```
-
-  </EmbedCode>
+  <EmbedCode localPath="pngImagePath" />
 </VisPagination>
 
 <VisDetail mdx={props.mdx} />

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -9,25 +9,36 @@ const { createFilePath } = require('gatsby-source-filesystem');
 const kebabCase = require(`lodash.kebabcase`);
 const path = require("path");
 const readingTime = require("reading-time");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
 
 
-// prevent error from canvas used by trianglify
 exports.onCreateWebpackConfig = ({
   stage,
   loaders,
   actions,
 }) => {
+  actions.setWebpackConfig({
+    plugins: [
+      new NodePolyfillPlugin()
+    ],
+    resolve: {
+      fallback: {
+        "fs": false
+      }
+    }
+  });
+
   if (stage === "build-html") {
     actions.setWebpackConfig({
       module: {
         rules: [
-          {
+          { // prevent error from canvas used by trianglify
             test: /canvas/,
-            use: loaders.null(),
-          },
+            use: loaders.null(),  
+          }
         ],
-      }
-    })
+      },
+    });
   }
 };