feat: update community tab & gen-term logic

yfeng2824 · yfeng2824 · commit b832d425f073 · 2025-12-19T12:12:04.000+08:00
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -388,7 +388,7 @@ const config = {
           label: "Community",
           position: "left",
           menuId: "community",
-          activeBaseRegex: "/(ecosystem)/(history-and-hard-forks)",
+          activeBaseRegex: "/(ecosystem|history-and-hard-forks)",
           primaryItems: [
             {
               title: "Projects",
@@ -405,21 +405,51 @@ const config = {
               icon: "squareHistory",
               activeBaseRegex: "/history-and-hard-forks/",
             },
-            // TODO: Add Resources
+            {
+              title: "Contribute",
+              description: "Ways to participate and support the network",
+              href: "/docs/ecosystem/contribute",
+              icon: "squareContribution",
+              activeBaseRegex: "/ecosystem/contribute",
+            },
           ],
-          otherLabel: "OTHER",
+          otherLabel: "RESOURCES",
+          otherCol: 2,
           otherItems: [
             {
-              title: "Organizations",
-              href: "/docs/ecosystem/organizations",
-              icon: "organization",
-              activeBaseRegex: "/ecosystem/organizations",
+              title: "Positioning Paper",
+              href: "https://github.com/nervosnetwork/rfcs/blob/master/rfcs/0001-positioning/0001-positioning.md",
+              external: true,
             },
             {
-              title: "Contribute",
-              href: "/docs/ecosystem/contribute",
-              icon: "contribution",
-              activeBaseRegex: "/ecosystem/contribute",
+              title: "CKB RFCs",
+              href: "https://github.com/nervosnetwork/rfcs",
+              external: true,
+            },
+            {
+              title: "Fiber Network",
+              href: "https://www.fiber.world/docs",
+              external: true,
+            },
+            {
+              title: "Spore Protocol",
+              href: "https://docs.spore.pro/",
+              external: true,
+            },
+            {
+              title: "CKB Academy",
+              href: "https://academy.ckb.dev/",
+              external: true,
+            },
+            {
+              title: "CKB Cookbook",
+              href: "https://cookbook.ckbdapps.com/",
+              external: true,
+            },
+            {
+              title: "CKB Dev Log",
+              href: "https://github.com/nervosnetwork/ckb/discussions/categories/dev-log",
+              external: true,
             },
           ],
         },
diff --git a/website/scripts/generate-key-terms.mjs b/website/scripts/generate-key-terms.mjs
@@ -15,11 +15,37 @@ const outputPath = path.join(
   __dirname,
   "../src/components/Tooltip/key-terms.json"
 );
-const docsPath = path.join(__dirname, "../docs/tech-explanation");
+
+const docSections = [
+  {
+    slug: "tech-explanation",
+    dir: path.join(__dirname, "../docs/tech-explanation"),
+  },
+  {
+    slug: "ckb-fundamentals",
+    dir: path.join(__dirname, "../docs/ckb-fundamentals"),
+  },
+  {
+    slug: "assets-token-standards",
+    dir: path.join(__dirname, "../docs/assets-token-standards"),
+  },
+];
 
 const glossaryContent = fs.readFileSync(glossaryPath, "utf8");
 const terms = {};
 
+function resolveTermLink(normalizedTerm) {
+  for (const section of docSections) {
+    const md = path.join(section.dir, `${normalizedTerm}.md`);
+    const mdx = path.join(section.dir, `${normalizedTerm}.mdx`);
+    if (fs.existsSync(md) || fs.existsSync(mdx)) {
+      return `/docs/${section.slug}/${normalizedTerm}`;
+    }
+  }
+  // fallback to glossary anchor (same as before)
+  return `/docs/tech-explanation/glossary#${normalizedTerm}`;
+}
+
 remark()
   .use(() => (tree) => {
     let currentTerm = "";
@@ -59,17 +85,8 @@ remark()
           .toLowerCase()
           .replace(/[\s_]+/g, "-")
           .replace(/[()]/g, "");
-        const termFilePathMd = path.join(docsPath, `${normalizedTerm}.md`);
-        const termFilePathMdx = path.join(docsPath, `${normalizedTerm}.mdx`);
-        if (fs.existsSync(termFilePathMd) || fs.existsSync(termFilePathMdx)) {
-          terms[
-            currentTerm.toLowerCase()
-          ].link = `/docs/tech-explanation/${normalizedTerm}`;
-        } else {
-          terms[
-            currentTerm.toLowerCase()
-          ].link = `/docs/tech-explanation/glossary#${normalizedTerm}`;
-        }
+
+        terms[currentTerm.toLowerCase()].link = resolveTermLink(normalizedTerm);
       }
     });
   })
diff --git a/website/sidebars.js b/website/sidebars.js
@@ -296,7 +296,7 @@ export default {
   "Tech Explanation": [
     {
       type: "category",
-      label: "What makes CKB unique",
+      label: "What Makes CKB Unique",
       className: "category-ckb-features",
       collapsible: false,
       customProps: {
@@ -476,8 +476,13 @@ export default {
         },
         {
           type: "link",
-          label: "CKB Dev Log",
-          href: "https://github.com/nervosnetwork/ckb/discussions/categories/dev-log",
+          label: "Fiber Network",
+          href: "https://www.fiber.world/docs",
+        },
+        {
+          type: "link",
+          label: "Spore Protocol",
+          href: "https://docs.spore.pro",
         },
         {
           type: "link",
@@ -491,13 +496,8 @@ export default {
         },
         {
           type: "link",
-          label: "Fiber network",
-          href: "https://www.fiber.world/docs",
-        },
-        {
-          type: "link",
-          label: "Spore Protocol",
-          href: "https://docs.spore.pro",
+          label: "CKB Dev Log",
+          href: "https://github.com/nervosnetwork/ckb/discussions/categories/dev-log",
         },
       ],
     },
diff --git a/website/src/components/Navbar/MegaMenuNavbarItem/index.tsx b/website/src/components/Navbar/MegaMenuNavbarItem/index.tsx
@@ -1,11 +1,8 @@
-// src/components/Navbar/MegaMenuNavbarItem.tsx
-
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import { useLocation } from "@docusaurus/router";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-
 import ChevronDown from "/svg/icon-chevron-down.svg";
 import { sidebarIconMap, SidebarIconName } from "../../../icons";
 import styles from "./styles.module.css";
@@ -14,6 +11,7 @@ export type MegaMenuItem = {
   title: string;
   description?: string;
   href: string;
+  external?: boolean;
   icon?: SidebarIconName;
   activeBaseRegex?: string;
 };
@@ -27,6 +25,7 @@ export type MegaMenuNavbarItemProps = {
   primaryItems: MegaMenuItem[];
   otherItems?: MegaMenuItem[];
   otherLabel?: string;
+  otherCol?: 1 | 2;
 };
 
 const EVENT_NAME = "nervos:megamenu-open";
@@ -39,6 +38,7 @@ const MegaMenuNavbarItem: React.FC<MegaMenuNavbarItemProps> = ({
   primaryItems,
   otherItems = [],
   otherLabel = "OTHER",
+  otherCol = 1,
 }) => {
   const location = useLocation();
   const [open, setOpen] = useState(false);
@@ -183,15 +183,25 @@ const MegaMenuNavbarItem: React.FC<MegaMenuNavbarItemProps> = ({
             {otherItems.length > 0 && (
               <div className={styles.otherCol}>
                 <div className={styles.otherLabel}>{otherLabel}</div>
-                <div className={styles.otherList}>
+                <div
+                  className={clsx(
+                    styles.otherList,
+                    otherCol === 2 && styles.otherListTwoCols
+                  )}
+                >
                   {otherItems.map((item) => {
                     const Icon = item.icon ? sidebarIconMap[item.icon] : null;
+                    const External = sidebarIconMap["external"];
                     const active = isItemActive(item);
 
                     return (
                       <Link
                         key={item.href}
-                        to={useBaseUrl(item.href)}
+                        to={item.external ? item.href : useBaseUrl(item.href)}
+                        {...(item.external && {
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                        })}
                         className={clsx(
                           styles.otherItem,
                           active && styles.cardActive
@@ -205,6 +215,12 @@ const MegaMenuNavbarItem: React.FC<MegaMenuNavbarItemProps> = ({
                           />
                         )}
                         <span className={styles.otherTitle}>{item.title}</span>
+                        {item.external && (
+                          <External
+                            className={styles.externalIcon}
+                            aria-hidden="true"
+                          />
+                        )}
                       </Link>
                     );
                   })}
diff --git a/website/src/components/Navbar/MegaMenuNavbarItem/styles.module.css b/website/src/components/Navbar/MegaMenuNavbarItem/styles.module.css
@@ -35,15 +35,12 @@
   right: 0;
   top: var(--ifm-navbar-height);
   z-index: 200;
-
-  opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity 160ms ease, visibility 160ms ease;
+  transition: visibility 160ms ease;
 }
 
 .panelWrapperOpen {
-  opacity: 1;
   visibility: visible;
   pointer-events: auto;
 }
@@ -107,13 +104,17 @@
 }
 
 .otherLabel {
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-size: 1rem;
   color: var(--text-tertiary);
+  padding: 0.5rem 0;
 }
 
 .otherList {
   display: grid;
+  grid-template-columns: 1fr;
+}
+.otherListTwoCols {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .otherItem {
@@ -136,6 +137,12 @@
   color: var(--text-primary);
 }
 
+.externalIcon {
+  color: var(--text-tertiary);
+  width: 18px;
+  height: 18px;
+}
+
 .otherTitle {
   font-weight: 700;
   font-size: 1.125rem;
diff --git a/website/src/icons/index.ts b/website/src/icons/index.ts
@@ -21,6 +21,7 @@ import Rust from "/svg/icon-sidebar-rust.svg";
 import JS from "/svg/icon-sidebar-js.svg";
 import Organization from "/svg/icon-sidebar-organization.svg";
 import Feature from "/svg/icon-sidebar-feature.svg";
+import External from "/svg/icon-sidebar-external.svg";
 import SquareRocket from "/svg/square-rocket.svg";
 import SquareDapp from "/svg/square-dapp.svg";
 import SquareScript from "/svg/square-script.svg";
@@ -32,6 +33,7 @@ import SquareProject from "/svg/square-project.svg";
 import SquareHistory from "/svg/square-history.svg";
 import SquareResource from "/svg/square-resource.svg";
 import SquareStructure from "/svg/square-structure.svg";
+import SquareContribution from "/svg/square-contribution.svg";
 
 export const sidebarIconMap = {
   commonScript: CommonScript,
@@ -57,6 +59,7 @@ export const sidebarIconMap = {
   js: JS,
   organization: Organization,
   feature: Feature,
+  external: External,
   squareRocket: SquareRocket,
   squareDapp: SquareDapp,
   squareScript: SquareScript,
@@ -68,6 +71,7 @@ export const sidebarIconMap = {
   squareHistory: SquareHistory,
   squareResource: SquareResource,
   squareStructure: SquareStructure,
+  squareContribution: SquareContribution,
 };
 
 export type SidebarIconName = keyof typeof sidebarIconMap;
diff --git a/website/src/pages/homeContents.tsx b/website/src/pages/homeContents.tsx
@@ -68,7 +68,7 @@ const homeCardContents: HomeCardProps[] = [
   { title: "Run a Node", to: "/docs/node/node-overview", icon: "node" },
   { title: "Mining", to: "/docs/mining/guide", icon: "mining" },
   {
-    title: "Tech Explanation",
+    title: "CKB Fundamentals",
     to: "/docs/ckb-fundamentals/nervos-blockchain",
     icon: "tech-explanation",
   },
diff --git a/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -7,19 +7,12 @@ import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
 import { useLocation } from "@docusaurus/router";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
+import { MegaMenuItem } from "@site/src/components/Navbar/MegaMenuNavbarItem";
 
 import { sidebarIconMap, type SidebarIconName } from "../../../../icons";
 
 /* ---------- Types ---------- */
 
-type MegaMenuItem = {
-  title: string;
-  description?: string;
-  href: string;
-  icon?: SidebarIconName;
-  activeBaseRegex?: string;
-};
-
 type MegaMenuNavbarItem = {
   type: "custom-megaMenu";
   label: string;
@@ -135,24 +128,34 @@ function OtherItem({
   item,
   pathname,
   onClick,
+  external = false,
 }: {
   item: MegaMenuItem;
   pathname: string;
+  external?: boolean;
   onClick: () => void;
 }) {
   const Icon = resolveIcon(item.icon);
+  const External = sidebarIconMap["external"];
   const active = isActive(pathname, item);
 
   return (
     <Link
-      to={useBaseUrl(item.href)}
+      to={item.external ? item.href : useBaseUrl(item.href)}
+      {...(external && {
+        target: "_blank",
+        rel: "noopener noreferrer",
+      })}
       className={clsx(styles.otherItem, active && styles.activeText)}
       onClick={onClick}
     >
       {Icon && <Icon width={24} height={24} aria-hidden />}
       <span className={clsx(styles.otherTitle, active && styles.activeText)}>
         {item.title}
       </span>
+      {item.external && (
+        <External className={styles.externalIcon} aria-hidden="true" />
+      )}
     </Link>
   );
 }
diff --git a/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css b/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
diff --git a/website/src/theme/NotFound/Content/linkContents.ts b/website/src/theme/NotFound/Content/linkContents.ts
diff --git a/website/static/svg/icon-sidebar-external.svg b/website/static/svg/icon-sidebar-external.svg
diff --git a/website/static/svg/square-contribution.svg b/website/static/svg/square-contribution.svg

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ const homeCardContents: HomeCardProps[] = [`
`68`	`68`	`{ title: "Run a Node", to: "/docs/node/node-overview", icon: "node" },`
`69`	`69`	`{ title: "Mining", to: "/docs/mining/guide", icon: "mining" },`
`70`	`70`	`{`
`71`		`- title: "Tech Explanation",`
	`71`	`+ title: "CKB Fundamentals",`
`72`	`72`	`to: "/docs/ckb-fundamentals/nervos-blockchain",`
`73`	`73`	`icon: "tech-explanation",`
`74`	`74`	`},`