Merge pull request #35 from drindr/intuitive-menu

add more intuitive menu for node and example pages

Author: haixuanTao

package.json

@@ -25,6 +25,7 @@
     "@docusaurus/plugin-content-docs": "^3.2.0",
     "@docusaurus/preset-classic": "^3.2.0",
     "@docusaurus/theme-mermaid": "^3.2.0",
+    "@docusaurus/theme-common": "^3.2.0",
     "@docusaurus/theme-search-algolia": "^3.2.0",
     "@fontsource/work-sans": "^5.0.18",
     "@popperjs/core": "^2.11.8",

sidebars.js

@@ -9,9 +9,23 @@
  Create as many sidebars as you want.
  */
 
+
+import {readFileSync} from "fs";
+
+function getCategories(path) {
+  const fileContent = readFileSync(`${__dirname}/${path}`, 'utf8');
+  const jsonData = JSON.parse(fileContent);
+  return Array.from(new Set(jsonData.map(item => item.category)));
+}
+
+const CategoriesExamples = getCategories("./src/data/examples.json");
+const CategoriesNodes = getCategories("./src/data/nodes.json");
+
 // @ts-check
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+
+
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   // tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
@@ -48,25 +62,29 @@ const sidebars = {
       type: "category",
       label: "Examples",
       link: { type: "doc", id: "examples/readme" },
-      items: [
-        {
-          type: "autogenerated",
-          dirName: "examples",
-        },
-      ],
+      items: CategoriesExamples.map((val) => {
+        const dashVal = val.replaceAll(" ", "-");
+        return {
+          label: val,
+          type: "link",
+          href: `#${dashVal}`,
+        };
+      })
     },
   ],
   nodes: [
     {
       type: "category",
       label: "Nodes",
       link: { type: "doc", id: "nodes/readme" },
-      items: [
-        {
-          type: "autogenerated",
-          dirName: "nodes",
-        },
-      ],
+      items: CategoriesNodes.map((val) => {
+        const dashVal = val.replaceAll(" ", "-");
+        return {
+          label: val,
+          type: "link",
+          href: `#${dashVal}`,
+        };
+      })
     },
   ],
 };

src/components/ExampleShowcase/index.tsx

@@ -275,12 +275,13 @@ function ShowcaseCards({
             let categoryUsers = filteredUsers.filter(
               (user) => user.category == category
             );
+            let categoryDash = category.replace(/ /g, "-");
             if (categoryUsers.length === 0) {
               return null;
             }
             return (
               <div>
-                <Heading as="h2" id={"#" + category}>
+                <Heading as="h2" id={categoryDash}>
                   {category}
                 </Heading>
                 <ul className={clsx("clean-list", styles.showcaseList)}>