WIP - added dynamic pages

docusaurus.config.js

@@ -7,6 +7,32 @@ const codeTheme = themes.dracula;
 const remarkCodesandbox = require("remark-codesandbox");
 const isProd = process.env.NODE_ENV === "production";
 
+const fetch = require('node-fetch');
+
+async function fetchAndGenerateSidebarItems() {
+  try {
+    const response = await fetch("https://sot-network-methods.vercel.app/specs/linea");
+    const data = await response.json();
+    const dynamicItems = data.methods.map((method) => ({
+      type: "link",
+      label: method.name,
+      href: `/services/reference/linea/json-rpc-methods-new/${method.name}`,
+    }));
+    return [
+      {
+        type: "category",
+        label: "JSON-RPC Methods NEW",
+        collapsed: false,
+        items: dynamicItems,
+      },
+    ];
+  } catch (error) {
+    console.error("Error fetching methods:", error);
+    return [];
+  }
+}
+
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "MetaMask developer documentation",
@@ -32,6 +58,7 @@ const config = {
 
   customFields: {
     LD_CLIENT_ID: process.env.LD_CLIENT_ID,
+    sidebarData: {}
   },
 
   trailingSlash: true,
@@ -122,6 +149,18 @@ const config = {
         editUrl: "https://github.com/MetaMask/metamask-docs/edit/main/",
         sidebarPath: require.resolve("./services-sidebar.js"),
         breadcrumbs: false,
+        sidebarItemsGenerator: async function ({ defaultSidebarItemsGenerator, ...args }) {
+          config.customFields.sidebarData = args
+          let sidebarItems = await defaultSidebarItemsGenerator(args);
+          const dynamicSidebarItems = await fetchAndGenerateSidebarItems();
+          const updatedItems = sidebarItems.map(item => {
+            if (item?.label === "Linea" && item?.items) {
+              item.items = [...item.items, ...dynamicSidebarItems]
+            }
+            return item;
+          })
+          return [...updatedItems];
+        },
       },
     ],
     [

src/CustomPage.tsx

@@ -0,0 +1,103 @@
+import Layout from "@theme/Layout";
+import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
+import ParserOpenRPC from "@site/src/components/ParserOpenRPC";
+import React from "react";
+import DocSidebar from '@theme/DocSidebar';
+import styles from "../src/theme/Layout/styles.module.css"
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function generateSidebarItems(docs) {
+  const categories = {};
+
+  docs.forEach((doc) => {
+    if (doc.id === 'index') {
+      categories['Introduction'] = {
+        type: 'link',
+        href: '/services',
+        label: doc.frontMatter?.sidebar_label || doc.title,
+      };
+      return;
+    }
+
+    const pathParts = doc.sourceDirName.split('/');
+    let currentCategory = categories;
+    let isIndexPage = doc.id.endsWith('/index');
+
+    pathParts.forEach((part, index) => {
+      if (!currentCategory[part]) {
+        if (isIndexPage && index === pathParts.length - 2) {
+          currentCategory[part] = {
+            type: 'category',
+            label: doc.frontMatter?.sidebar_label || doc.frontMatter?.title || part,
+            collapsed: true,
+            collapsible: true,
+            link: {
+              type: 'generated-index',
+              slug: pathParts.slice(0, index + 1).join('/')
+            },
+            items: []
+          };
+        } else {
+          currentCategory[part] = {
+            type: 'category',
+            label: part,
+            collapsed: true,
+            collapsible: true,
+            items: []
+          };
+        }
+      }
+
+      if (index === pathParts.length - 1 && !isIndexPage) {
+        currentCategory[part].items.push({
+          type: 'link',
+          label: doc.frontMatter?.title || doc.title,
+          href: `/services/${doc.id.replace(/\/index$/, '')}`,
+          sidebar_position: doc.frontMatter?.sidebar_position || Number.MAX_SAFE_INTEGER
+        });
+      }
+      currentCategory = currentCategory[part].items;
+    });
+  });
+
+  const convertToArray = (categoryObj) => {
+    return Object.values(categoryObj).map((category) => {
+      if (category.items && typeof category.items === 'object') {
+        category.items = convertToArray(category.items);
+        if (category.items.every(item => item.sidebar_position !== undefined)) {
+          category.items.sort((a, b) => (a.sidebar_position || Number.MAX_SAFE_INTEGER) - (b.sidebar_position || Number.MAX_SAFE_INTEGER));
+        }
+      }
+      return category;
+    });
+  };
+  return convertToArray(categories);
+}
+
+const sidebar_wrapper_classes = "theme-doc-sidebar-container docSidebarContainer_node_modules-@docusaurus-theme-classic-lib-theme-DocRoot-Layout-Sidebar-styles-module"
+
+const CustomPage = (props) => {
+  const customData = props.route.customData;
+  const { siteConfig } = useDocusaurusContext();
+  const formattedData = generateSidebarItems(siteConfig.customFields.sidebarData.docs);
+
+  return (
+    <Layout>
+      <div className={styles.pageWrapper}>
+        <aside className={sidebar_wrapper_classes}>
+          <DocSidebar sidebar={formattedData} path="" onCollapse={() => {}} isHidden={false} />
+        </aside>
+        <div className={styles.mainContainer}>
+          <div className={styles.contentWrapper}>
+          <ParserOpenRPC
+            network={NETWORK_NAMES.linea}
+            method={customData.name}
+          />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default CustomPage;

src/plugins/plugin-json-rpc.ts

@@ -40,18 +40,59 @@ const requests = [
   },
 ];
 
+
+
 export default function useNetworksMethodPlugin() {
   return {
     name: "plugin-json-rpc",
     async contentLoaded({ actions }) {
-      const { setGlobalData } = actions;
+      const { setGlobalData, createData, addRoute } = actions;
+
       await fetchMultipleData(requests)
         .then((responseArray) => {
+
           setGlobalData({ netData: responseArray });
+
+          return Promise.all(responseArray[0].data.methods.map(async (page) => {
+
+            const methodMDXContent = generateMethodMDX(page);
+
+            const filePath = await createData(
+              `services/reference/linea/json-rpc-methods-new/${page.name}.mdx`,
+              methodMDXContent
+            );
+
+            return addRoute({
+              path: `/services/reference/linea/json-rpc-methods-new/${page.name}`,
+              component: require.resolve("../CustomPage.tsx"),
+              exact: true,
+              modules: {
+                methodFile: filePath,
+              },
+              customData: { ...page }
+            });
+          }));
         })
         .catch(() => {
           setGlobalData({ netData: [] });
         });
     },
   };
 }
+
+
+function generateMethodMDX(page) {
+  return `---
+title: '${page.name}'
+---
+
+
+
+# ${page.name}
+
+
+  `;
+}
+
+
+