WIP: feat(docs): ACT-1532 - Create Pages for the Linea JSON-RPC methods dynamically

.gitignore

@@ -8,6 +8,7 @@
 .docusaurus
 .cache-loader
 .idea
+.yarn
 
 # Misc
 .DS_Store

docusaurus.config.js → docusaurus.config.ts

@@ -2,6 +2,9 @@
 // Note: type annotations allow type checking and IDEs autocompletion
 
 require("dotenv").config();
+const { fetchAndGenerateDynamicSidebarItems } = require("./src/helpers");
+import { JSON_RPC_METHODS_LABEL, NETWORK_NAMES, CustomFields } from "./src/lib/constants";
+const upperFirst = require("lodash.upperfirst");
 const { themes } = require("prism-react-renderer");
 const { REF_ALLOW_LOGIN_PATH } = require("./src/lib/constants");
 const codeTheme = themes.dracula;
@@ -37,7 +40,9 @@ const config = {
     DASHBOARD_PREVIEW_URL: process.env.DASHBOARD_PREVIEW_URL,
     SENTRY_KEY: process.env.SENTRY_KEY,
     GF_SURVEY_KEY: process.env.GF_SURVEY_KEY,
-  },
+    sidebarData: { docs: []},
+    dynamicData: [],
+  } as CustomFields,
 
   trailingSlash: true,
 
@@ -128,6 +133,30 @@ 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 fetchAndGenerateDynamicSidebarItems(NETWORK_NAMES.linea);
+          config.customFields.dynamicData = dynamicSidebarItems;
+          const updatedItems = sidebarItems.map(item => {
+            if (item?.label === upperFirst(NETWORK_NAMES.linea) && item?.items) {
+              return { 
+                ...item,
+                items: 
+                  [
+                    ...item.items.map(mappedItem => {
+                      if (mappedItem.label === JSON_RPC_METHODS_LABEL) {
+                        return {...mappedItem, items: [...dynamicSidebarItems[0].items]};
+                      }
+                      return mappedItem
+                    }),
+                  ]
+              };
+            }
+            return item;
+          });
+          return [...updatedItems];
+        },
       },
     ],
     [

package.json

@@ -55,6 +55,7 @@
     "launchdarkly-js-client-sdk": "^3.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isplainobject": "^4.0.6",
+    "lodash.upperfirst": "^4.3.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^3.3.3",
     "prism-react-renderer": "^2.1.0",

services/tutorials/ethereum/authenticate-with-jwt.md

@@ -10,7 +10,7 @@ import TabItem from '@theme/TabItem';
 # Authenticate with JWT
 
 This tutorial demonstrates how to create and apply a JSON Web Token (JWT) to authenticate an 
-[`eth_blockNumber`](../../api/networks/ethereum/json-rpc-methods/eth_blocknumber.mdx) API request 
+[`eth_blockNumber`](/services/reference/ethereum/json-rpc-methods/eth_blocknumber/) API request 
 with Node.js. 
 
 Developers can configure the expiry time and scope of JWTs to enhance the security profile of their dapps.
@@ -157,7 +157,7 @@ Replace the following values in the `.env` file:
 
 - `<YOUR-API-KEY>` with your API key from the Infura dashboard.
 - `<YOUR-JWT-KEY-ID>` with the JWT's key ID. This is generated by Infura, and you can find it in the Infura dashboard. The code in [Step 4](#4-create-and-apply-your-jwt) applies this ID to the JWT header to allow Infura to identify which key was used to sign the JWT.
-- `<NETWORK-URL>` with the URL of an Infura network for which your key has access rights, and that supports the method [`eth_blockNumber`](../../api/networks/ethereum/json-rpc-methods/eth_blocknumber.mdx).
+- `<NETWORK-URL>` with the URL of an Infura network for which your key has access rights, and that supports the method [`eth_blockNumber`](/services/reference/ethereum/json-rpc-methods/eth_blocknumber/).
 
 :::warning Important
 

src/components/AuthLogin/styles.module.css

@@ -1,8 +1,8 @@
 .modalOverlay {
   z-index: 300;
   position: fixed;
-  inset: 0px;
-  background-color: rgba(0, 0, 0, 0.75);
+  inset: 0;
+  background-color: rgb(0 0 0 / 75%);
 }
 
 .modalWrapper {
@@ -22,7 +22,9 @@
 
 .modalContent {
   color: #FFF;
+
   --font-family-sans: "Euclid Circular B", "Roboto", sans-serif;
+
   position: relative;
 }
 
@@ -52,39 +54,41 @@
   left: 0;
   width: 60px;
   height: 60px;
-
-  -webkit-animation: rotating 3s linear infinite;
-  -moz-animation: rotating 3s linear infinite;
-  -ms-animation: rotating 3s linear infinite;
-  -o-animation: rotating 3s linear infinite;
+  animation: rotating 3s linear infinite;
+  animation: rotating 3s linear infinite;
+  animation: rotating 3s linear infinite;
+  animation: rotating 3s linear infinite;
   animation: rotating 3s linear infinite;
 }
 
-@-webkit-keyframes spinner /* Safari and Chrome */ {
+@keyframes spinner /* Safari and Chrome */ {
   from {
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+    transform: rotate(360deg);
     transform: rotate(360deg);
   }
+
   to {
-    -webkit-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+    transform: rotate(-360deg);
     transform: rotate(-360deg);
   }
 }
+
 @keyframes rotating {
   from {
-    -ms-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+    transform: rotate(360deg);
     transform: rotate(360deg);
   }
+
   to {
-    -ms-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-    -webkit-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+    transform: rotate(-360deg);
+    transform: rotate(-360deg);
+    transform: rotate(-360deg);
     transform: rotate(-360deg);
   }
 }
@@ -100,7 +104,7 @@
   font-size: 18px;
   font-weight: 700;
   line-height: 24px;
-  margin: 12px 0 0 0;
+  margin: 12px 0 0;
 }
 
 .content {

src/components/CustomReferencePage/index.tsx

@@ -0,0 +1,150 @@
+import Layout from "@theme/Layout";
+import ParserOpenRPC from "@site/src/components/ParserOpenRPC";
+import React, { useEffect, useState } from "react";
+import DocSidebar from '@theme/DocSidebar';
+import styles from "@site/src/theme/Layout/styles.module.css"
+import customStyles from "./styles.module.css"
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import upperFirst  from "lodash.upperfirst"
+import { JSON_RPC_METHODS_LABEL, lineaSidebarNames, NETWORK_NAMES, SidebarItem, CustomFields } from "@site/src/lib/constants";
+import { useLocation } from "@docusaurus/router";
+
+const formatMenuLabel = (label) => {
+  const menuItem = lineaSidebarNames.find(name => name.old === label);
+  if (menuItem) {
+    return menuItem.new;
+  }
+  return label;
+}
+
+function generateSidebarItems(docs) {
+  const categories = {};
+
+  docs.forEach((doc) => {
+    if (doc.id === 'index') {
+      categories['Introduction'] = {
+        type: 'link',
+        href: '/services',
+        label: upperFirst(doc.frontMatter?.sidebar_label || doc.title),
+      };
+      return;
+    }
+
+    const pathParts = doc.sourceDirName.split('/');
+    let currentCategory = categories;
+    let isIndexPage = doc.id.endsWith('/index');
+    pathParts.map(pathPart => formatMenuLabel(pathPart)).forEach((part, index) => {
+      if (!currentCategory[part]) {
+        if (isIndexPage && index === pathParts.length - 2) {
+          currentCategory[part] = {
+            type: 'category',
+            label: upperFirst(doc.frontMatter?.sidebar_label || doc.frontMatter?.title || part),
+            collapsed: false,
+            collapsible: true,
+            href: `/services/reference`,
+            items: []
+          };
+        } else {
+          currentCategory[part] = {
+            type: 'category',
+            label: upperFirst(part),
+            href: `/services/${doc.sourceDirName}`,
+            collapsed: part !== "Get started",
+            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: SidebarItem) => {
+      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 CustomReferencePage = (props) => {
+  const customData = props.route.customData;
+  const { siteConfig } = useDocusaurusContext();
+  const [formattedData, setFormattedData] = useState([]);
+  const { pathname } = useLocation();
+  const customSiteConfig = siteConfig.customFields as CustomFields;
+
+  useEffect(() => {
+    if (customSiteConfig && customSiteConfig?.dynamicData && customSiteConfig?.sidebarData.docs) {
+      setFormattedData(generateSidebarItems(customSiteConfig.sidebarData.docs).map(item => {
+        if (item?.label === "Reference" && item?.items) {
+          return {
+            ...item,
+            items: item.items.map(referenceItem => {
+              if (referenceItem?.label === upperFirst(NETWORK_NAMES.linea) && referenceItem?.items && customSiteConfig.dynamicData) {
+                return { 
+                  ...referenceItem,
+                  items: [
+                    ...referenceItem.items.filter(({ label }) => label !== JSON_RPC_METHODS_LABEL),
+                    ...customSiteConfig.dynamicData.map(dynamicItem => {
+                      const jsonRpcCategory = referenceItem.items.find(({ label }) => label === JSON_RPC_METHODS_LABEL);
+                      if (jsonRpcCategory) {
+                        return {
+                          ...dynamicItem,
+                          ...{ href: "/services/reference/linea/json-rpc-methods/" },
+                          ...{ items: [...dynamicItem.items, ...jsonRpcCategory.items.filter(refItem => refItem.type === "category")] }
+                        };
+                      }
+                      return dynamicItem;
+                    })
+                  ] 
+                };
+              }
+              return referenceItem;
+            })
+          }
+        }
+        return item;
+      }));
+    }
+  }, []);
+
+  return formattedData ? (
+    <Layout>
+      <div className={styles.pageWrapper}>
+        <aside>
+          <div className={customStyles.sidebarViewport}>
+            <div className={ customStyles.sidebar}>
+              <DocSidebar sidebar={formattedData} path={pathname} onCollapse={() => {}} isHidden={false} />
+            </div>
+          </div>
+        </aside>
+        <div className={styles.mainContainer}>
+          <div className={styles.contentWrapper}>
+            <ParserOpenRPC
+              network={NETWORK_NAMES.linea}
+              method={customData.name}
+            />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  ) : null;
+};
+
+export default CustomReferencePage;

src/components/CustomReferencePage/styles.module.css

@@ -0,0 +1,24 @@
+.sidebar {
+  display: none;
+}
+
+@media (width >= 997px) {
+  .sidebarViewport {
+    height: 100%;
+    max-height: 100vh;
+    position: sticky;
+    top: 0;
+  }
+
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: var(--doc-sidebar-width);
+    padding-top: 0 !important;
+  }
+
+  .sidebar>div {
+    padding-top: 0 !important;
+  }
+}