feat(docs): changed sidebar labels to the right ones

MetaMask · Sep 19, 2024 · 5622de0 · 5622de0
1 parent cfc5fb5
commit 5622de0
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 21 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -3,7 +3,7 @@
 
 require("dotenv").config();
 const { fetchAndGenerateSidebarItems } = require("./src/helpers/index.ts");
-const capitalize = require("lodash.capitalize");
+const upperFirst = require("lodash.upperfirst");
 const { themes } = require("prism-react-renderer");
 const codeTheme = themes.dracula;
 const remarkCodesandbox = require("remark-codesandbox");
@@ -134,7 +134,7 @@ const config = {
           const dynamicSidebarItems = await fetchAndGenerateSidebarItems(networkName);
           config.customFields.dynamicData = dynamicSidebarItems;
           const updatedItems = sidebarItems.map(item => {
-            if (item?.label === capitalize(networkName) && item?.items) {
+            if (item?.label === upperFirst(networkName) && item?.items) {
               item.items = [...item.items, ...dynamicSidebarItems]
             }
             return item;

diff --git a/package.json b/package.json
@@ -48,9 +48,9 @@
     "dotenv": "^16.4.5",
     "js-cookie": "^3.0.5",
     "launchdarkly-js-client-sdk": "^3.3.0",
-    "lodash.capitalize": "^4.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.isobject": "^3.0.2",
+    "lodash.upperfirst": "^4.3.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^3.0.0",
     "prism-react-renderer": "^2.1.0",

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -456,3 +456,70 @@ export enum NETWORK_NAMES {
   linea = "linea",
   metamask = "metamask",
 }
+
+export const lineaSidebarNames = [
+  {
+    old: "get-started",
+    new: "Get Started"
+  },
+  {
+    old: "how-to",
+    new: "How to"
+  },
+  {
+    old: "use-ipfs",
+    new: "Use IPFS"
+  },
+  {
+    old: "access-ipfs-content",
+    new: "Access IPFS content"
+  },
+  {
+    old: "send-a-transaction",
+    new: "Send transactions"
+  },
+  {
+    old: "use-infura-as-a-reverse-proxy",
+    new: "Use Infura as a reverse proxy"
+  },
+  {
+    old: "layer-2-networks",
+    new: "Layer 2 networks"
+  },
+  {
+    old: "json-rpc-methods",
+    new: "JSON-RPC APIs"
+  },
+  {
+    old: "avalanche-c-chain",
+    new: "Avalanche (C-Chain)"
+  },
+  {
+    old: "bnb-smart-chain",
+    new: "BNB Smart Chain"
+  },
+  {
+    old: "gas-api",
+    new: "Gas API"
+  },
+  {
+    old: "ipfs",
+    new: "IPFS"
+  },
+  {
+    old: "opbnb",
+    new: "opBNB"
+  },
+  {
+    old: "polygon-pos",
+    new: "Polygon PoS"
+  },
+  {
+    old: "zksync",
+    new: "ZKsync Era"
+  },
+  {
+    old: "http-api-methods",
+    new: "HTTP API methods"
+  },
+]
diff --git a/src/pages/CustomPage/index.tsx b/src/pages/CustomPage/index.tsx
@@ -5,7 +5,16 @@ import React, { useEffect, useState } from "react";
 import DocSidebar from '@theme/DocSidebar';
 import styles from "@site/src/theme/Layout/styles.module.css"
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import * as capitalize  from "lodash.capitalize"
+import * as upperFirst  from "lodash.upperfirst"
+import { lineaSidebarNames } from "@site/src/lib/constants";
+
+const formatMenuLabel = (label) => {
+  const menuItem = lineaSidebarNames.find(name => name.old === label);
+  if (menuItem) {
+    return menuItem.new;
+  }
+  return label;
+}
 
 function generateSidebarItems(docs) {
   const categories = {};
@@ -15,22 +24,21 @@ function generateSidebarItems(docs) {
       categories['Introduction'] = {
         type: 'link',
         href: '/services',
-        label: capitalize(doc.frontMatter?.sidebar_label || doc.title),
+        label: upperFirst(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) => {
+    pathParts.map(pathPart => formatMenuLabel(pathPart)).forEach((part, index) => {
       if (!currentCategory[part]) {
         if (isIndexPage && index === pathParts.length - 2) {
           currentCategory[part] = {
             type: 'category',
-            label: capitalize(doc.frontMatter?.sidebar_label || doc.frontMatter?.title || part),
-            collapsed: true,
+            label: upperFirst(doc.frontMatter?.sidebar_label || doc.frontMatter?.title || part),
+            collapsed: false,
             collapsible: true,
             link: {
               type: 'generated-index',
@@ -41,8 +49,8 @@ function generateSidebarItems(docs) {
         } else {
           currentCategory[part] = {
             type: 'category',
-            label: capitalize(part),
-            collapsed: true,
+            label: upperFirst(part),
+            collapsed: part !== "get-started",
             collapsible: true,
             items: []
           };
@@ -52,7 +60,7 @@ function generateSidebarItems(docs) {
       if (index === pathParts.length - 1 && !isIndexPage) {
         currentCategory[part].items.push({
           type: 'link',
-          label: capitalize(doc.frontMatter?.title || doc.title),
+          label: doc.frontMatter?.title || doc.title,
           href: `/services/${doc.id.replace(/\/index$/, '')}`,
           sidebar_position: doc.frontMatter?.sidebar_position || Number.MAX_SAFE_INTEGER
         });
@@ -88,7 +96,7 @@ const CustomPage = (props) => {
         return {
           ...item,
           items: item.items.map(referenceItem => {
-            if (referenceItem?.label === capitalize(NETWORK_NAMES.linea) && referenceItem?.items) {
+            if (referenceItem?.label === upperFirst(NETWORK_NAMES.linea) && referenceItem?.items) {
               return { ...referenceItem, items: [...referenceItem.items, ...siteConfig.customFields.dynamicData] };
             }
             return referenceItem;

diff --git a/yarn.lock b/yarn.lock
@@ -12569,13 +12569,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.capitalize@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "lodash.capitalize@npm:4.2.1"
-  checksum: d9195f31d48c105206f1099946d8bbc8ab71435bc1c8708296992a31a992bb901baf120fdcadd773098ac96e62a79e6b023ee7d26a2deb0d6c6aada930e6ad0a
-  languageName: node
-  linkType: hard
-
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -12618,6 +12611,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.upperfirst@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "lodash.upperfirst@npm:4.3.1"
+  checksum: cadec6955900afe1928cc60cdc4923a79c2ef991e42665419cc81630ed9b4f952a1093b222e0141ab31cbc4dba549f97ec28ff67929d71e01861c97188a5fa83
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.12, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.17.5":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -13463,9 +13463,9 @@ __metadata:
     eslint-plugin-react: ^7.34.2
     js-cookie: ^3.0.5
     launchdarkly-js-client-sdk: ^3.3.0
-    lodash.capitalize: ^4.2.1
     lodash.debounce: ^4.0.8
     lodash.isobject: ^3.0.2
+    lodash.upperfirst: ^4.3.1
     node-polyfill-webpack-plugin: ^2.0.1
     prettier: ^3.0.0
     prism-react-renderer: ^2.1.0