feat(root): add stackblitz button and add new variant of "copy code" …

…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751

gatsby-node.js

@@ -1,4 +1,5 @@
 const path = require(`path`);
+const fs = require("fs");
 // eslint-disable-next-line import/no-extraneous-dependencies
 const webpack = require("webpack");
 const pagesConfig = require("./src/config");
@@ -236,6 +237,11 @@ exports.createResolvers = ({ createResolvers }) => {
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
+    resolve: {
+      fallback: {
+        fs: false,
+      },
+    },
     plugins: [
       /**
        * See line 203 of:
@@ -277,3 +283,52 @@ exports.onCreateWebpackConfig = ({ actions }) => {
     ],
   });
 };
+
+exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
+  const { createNode } = actions;
+
+  // Read all files in the sub-directories of the patterns folder
+  function getFilePaths(dirPath) {
+    let filePaths = [];
+    const files = fs.readdirSync(dirPath);
+
+    files.forEach((file) => {
+      const absolutePath = path.join(dirPath, file);
+      if (fs.statSync(absolutePath).isDirectory()) {
+        filePaths = filePaths.concat(getFilePaths(absolutePath));
+      } else {
+        filePaths.push(absolutePath);
+      }
+    });
+
+    return filePaths;
+  }
+
+  // Read all files in the patterns folder
+  const patternsDir = path.resolve(
+    __dirname,
+    "src/content/structured/patterns/templates"
+  );
+  const filePaths = getFilePaths(patternsDir);
+
+  // For each file in the patterns folder, read the contents of the file and create a data node
+  filePaths.forEach((filePath) => {
+    const content = fs.readFileSync(filePath, "utf8");
+    const regex = /(?:\\|\/)patterns(?:\\|\/)templates((?:\\|\/).*)$/;
+    const regexMatchedFilePath = filePath.match(regex)[0];
+
+    const nodeMeta = {
+      id: createNodeId(`${regexMatchedFilePath}`),
+      parent: null,
+      children: [],
+      internal: {
+        type: `PatternsTemplates`,
+        contentFilePath: regexMatchedFilePath,
+        content,
+        contentDigest: createContentDigest(content),
+      },
+    };
+
+    createNode(nodeMeta);
+  });
+};

package.json

@@ -10,6 +10,7 @@
     "@mdi/react": "^1.5.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@stackblitz/sdk": "^1.9.0",
     "@ukic/docs": "^2.9.2",
     "@ukic/fonts": "^2.6.0",
     "@ukic/react": "^2.11.0",
@@ -42,6 +43,8 @@
     "gatsby-transformer-remark": "^6.12.0",
     "gatsby-transformer-sharp": "^4.2.0",
     "github-slugger": "^1.4.0",
+    "lodash.kebabcase": "^4.1.1",
+    "lodash.startcase": "^4.4.0",
     "performant-array-to-tree": "^1.9.1",
     "prism-react-renderer": "^1.3.1",
     "prismjs": "^1.25.0",

src/assets/svg/index.ts

@@ -3,3 +3,4 @@ export { default as GCHQLogo } from "./gchq-logo.svg";
 export { default as MI5Logo } from "./mi5-logo.svg";
 export { default as SISLogo } from "./sis-logo.svg";
 export { default as ICDSLogo } from "./icds-logo.svg";
+export { default as StackblitzLogo } from "./stackblitz-logo.svg";

src/components/CodePreview/index.css

@@ -72,9 +72,7 @@
 }
 
 .snippet-container ic-button {
-  margin-top: var(--ic-space-xxs);
-  margin-right: var(--ic-space-xs);
-  margin-bottom: var(--ic-space-xs);
+  margin: var(--ic-space-xxs) var(--ic-space-xxs) var(--ic-space-xxs) 0;
 }
 
 .snippet-container ic-button button.button {