From efe89f7941a50a302759650f37aaf3f67116d6c7 Mon Sep 17 00:00:00 2001
From: Alex Ni <12097569+nialexsan@users.noreply.github.com>
Date: Fri, 18 Aug 2023 21:51:28 -0400
Subject: [PATCH] hacky way to convert plane MD  to cards

---
 docs/tools/index.md       |  6 +++-
 docusaurus.config.js      |  9 +++--
 src/css/custom.css        | 23 ++++++++++++
 src/modules/toolscards.ts | 76 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 110 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/toolscards.ts

diff --git a/docs/tools/index.md b/docs/tools/index.md
index a5ec9b24ab..a3c215bcca 100644
--- a/docs/tools/index.md
+++ b/docs/tools/index.md
@@ -6,6 +6,8 @@ description: Essential tools for the Flow blockchain ecosystem
 
 # Tools
 
+<div id="tools" className="tools-cards">
+
 ## Node Providers
 
 ### Quick Node
@@ -227,4 +229,6 @@ The [Flow Client Library (FCL)](./clients/fcl-js/index.md) JS is a package used
 
 ### HTTP API
 
-[Flow OpenAPI](/http-api) specification
\ No newline at end of file
+[Flow OpenAPI](/http-api) specification
+
+</div>
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2f8ba6f0fc..d5f9a4e512 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -139,6 +139,8 @@ const editUrl = ({ docPath }) => {
   return `https://github.com/${owner}/${name}/tree/${branch}/${sourceDocPath}`;
 };
 
+const baseUrl = process.env.BASE_URL || '/docs/';
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Flow Developer Portal',
@@ -149,7 +151,7 @@ const config = {
   url: getUrl(),
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: process.env.BASE_URL || '/docs/',
+  baseUrl,
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -596,7 +598,7 @@ const config = {
   ],
   scripts: [
     {
-      src: '/mixpanel.js',
+      src: `${baseUrl}mixpanel.js`,
       async: true,
       onload: mixpanelOnLoad,
     },
@@ -609,7 +611,7 @@ const config = {
       async: true,
     },
     {
-      src: '/hotjar.js',
+      src: `${baseUrl}hotjar.js`,
       async: true,
     },
     {
@@ -621,6 +623,7 @@ const config = {
       async: true,
     },
   ],
+  clientModules: [require.resolve('./src//modules/toolscards.ts')],
 };
 
 module.exports = config;
diff --git a/src/css/custom.css b/src/css/custom.css
index 9c2f1c82be..e51766e7be 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -75,3 +75,26 @@
 #navbar-discord {
   content: var(--image-navbar-discord);
 }
+
+.tools-cards > div {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-areas: "header header" "description description";
+  margin-bottom: 2rem;
+}
+
+.tools-cards > div > h2 {
+  grid-area: header;
+}
+
+.tools-cards > div > p {
+  grid-area: description;
+}
+
+.tools-cards > div > div {
+  padding: 1rem;
+  background-color: var(--ifm-card-background-color);
+  border-radius: var(--ifm-card-border-radius);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
\ No newline at end of file
diff --git a/src/modules/toolscards.ts b/src/modules/toolscards.ts
new file mode 100644
index 0000000000..900cdf86d8
--- /dev/null
+++ b/src/modules/toolscards.ts
@@ -0,0 +1,76 @@
+/**
+ * convert a plane structure with [h2 p h3 p p h3 p p] to [div(h2 div(h3 p p) div(h3 p p))]
+ * in order to render cards in place of simple markdown with styles defined in src/css/custom.css
+ * @param param0
+ * @returns
+ */
+export function onRouteDidUpdate({ location, previousLocation }): void {
+  // Don't execute if we are still on the same page; the lifecycle may be fired
+  // because the hash changes (e.g. when navigating between headings)
+  if (location.pathname !== previousLocation?.pathname) {
+    const page = document.getElementById('tools');
+    if (page == null) {
+      return;
+    }
+
+    const htmlElements = page.children;
+
+    // Initialize variables to store the current section and subsection
+    let currentSection = document.createElement('div');
+    let currentCard = document.createElement('div');
+
+    const appendCard = (): void => {
+      const anchor: HTMLAnchorElement | null = currentCard.querySelector(
+        'a[href]:not([href^="#"])',
+      );
+      if (anchor != null) {
+        currentCard.addEventListener('click', (event) => {
+          if ((event?.target as HTMLAnchorElement)?.tagName === 'A') {
+            // If it's an anchor tag, let the click event on the anchor proceed as usual
+            return;
+          }
+          anchor.click();
+        });
+        currentCard.style.cursor = 'pointer';
+      }
+      currentSection.appendChild(currentCard);
+    };
+
+    // Initialize an array to store the parsed divs
+    document.createElement('div');
+
+    // Loop through the HTML elements
+    for (const element of Array.from(htmlElements)) {
+      switch (element.tagName) {
+        case 'H2': {
+          if (currentCard.children.length > 0) {
+            appendCard();
+          }
+          if (currentSection.children.length > 0) {
+            page.appendChild(currentSection);
+          }
+
+          currentSection = document.createElement('div');
+          currentSection.appendChild(element);
+          currentCard = document.createElement('div');
+          break;
+        }
+        case 'H3': {
+          if (currentCard.children.length > 0) {
+            appendCard();
+          }
+          currentCard = document.createElement('div');
+          currentCard.appendChild(element);
+          break;
+        }
+        default: {
+          if (currentCard.children.length === 0) {
+            currentSection.appendChild(element);
+          } else {
+            currentCard.appendChild(element);
+          }
+        }
+      }
+    }
+  }
+}