(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
index 9f42a6b00..523e32767 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -5,6 +5,9 @@ export default {
label: "Getting Started",
className: "category-getting-started",
collapsible: false,
+ customProps: {
+ icon: "rocket",
+ },
items: [
"getting-started/how-ckb-works",
"getting-started/quick-start",
@@ -17,6 +20,9 @@ export default {
label: "SDK & Devtools",
className: "category-tool",
collapsible: false,
+ customProps: {
+ icon: "tool",
+ },
items: [
"sdk-and-devtool/rust",
"sdk-and-devtool/go",
@@ -34,6 +40,9 @@ export default {
label: "Build DApp",
className: "category-dapp",
collapsible: false,
+ customProps: {
+ icon: "tutorial",
+ },
items: [
"dapp/transfer-ckb",
"dapp/store-data-on-cell",
@@ -47,6 +56,9 @@ export default {
label: "Integrate Wallets",
className: "category-integrate-wallets",
collapsible: false,
+ customProps: {
+ icon: "wallet",
+ },
items: [
"integrate-wallets/intro-to-wallets",
"integrate-wallets/ccc-wallet",
@@ -57,6 +69,9 @@ export default {
label: "Serialization (Molecule)",
className: "category-molecule",
collapsible: false,
+ customProps: {
+ icon: "molecule",
+ },
items: [
"serialization/serialization-molecule-in-ckb",
"serialization/features-molecule",
@@ -73,6 +88,9 @@ export default {
label: "How-Tos",
className: "category-howto",
collapsible: false,
+ customProps: {
+ icon: "howto",
+ },
items: [
"how-tos/how-to-sign-a-tx",
"how-tos/how-to-query-tx-state",
@@ -88,6 +106,9 @@ export default {
label: "Smart Contract Basics",
className: "category-script",
collapsible: false,
+ customProps: {
+ icon: "script",
+ },
items: [
"script/intro-to-script",
"script/program-language-for-script",
@@ -110,6 +131,9 @@ export default {
label: "Rust",
className: "category-rust",
collapsible: false,
+ customProps: {
+ icon: "rust",
+ },
items: [
"script/rust/rust-quick-start",
"script/rust/rust-build",
@@ -151,6 +175,9 @@ export default {
label: " JavaScript",
className: "category-js",
collapsible: false,
+ customProps: {
+ icon: "js",
+ },
items: [
"script/js/js-quick-start",
{
@@ -197,6 +224,9 @@ export default {
label: "Ecosystem Scripts",
className: "category-ecosystem-scripts",
collapsible: false,
+ customProps: {
+ icon: "commonScript",
+ },
items: [
"ecosystem-scripts/introduction",
{
@@ -245,6 +275,9 @@ export default {
type: "category",
label: "Script Development Course",
className: "category-full-script-development-series",
+ customProps: {
+ icon: "tutorial",
+ },
collapsible: false,
items: [
"script-course/intro-to-script-1",
@@ -261,19 +294,36 @@ export default {
},
],
"Tech Explanation": [
+ {
+ type: "category",
+ label: "What Makes CKB Unique",
+ className: "category-ckb-features",
+ collapsible: false,
+ customProps: {
+ icon: "feature",
+ },
+ items: [
+ "ckb-features/extreme-decentralization",
+ "ckb-features/native-quantum-resistance",
+ "ckb-features/vm-built-for-hackers",
+ ],
+ },
{
type: "category",
label: "CKB Fundamentals",
className: "category-ckb-fundamentals",
collapsible: false,
+ customProps: {
+ icon: "concept",
+ },
items: [
- "tech-explanation/nervos-blockchain",
- "tech-explanation/ckb-vs-btc",
- "tech-explanation/cell-model",
- "tech-explanation/ckb-vm",
- "tech-explanation/consensus",
- "tech-explanation/ckb-address",
- "tech-explanation/ckbhash",
+ "ckb-fundamentals/nervos-blockchain",
+ "ckb-fundamentals/ckb-vs-btc",
+ "ckb-fundamentals/cell-model",
+ "ckb-fundamentals/ckb-vm",
+ "ckb-fundamentals/consensus",
+ "ckb-fundamentals/ckb-address",
+ "ckb-fundamentals/ckbhash",
],
},
{
@@ -281,6 +331,9 @@ export default {
label: "Core Structures",
className: "category-core-structures",
collapsible: false,
+ customProps: {
+ icon: "structure",
+ },
items: [
{
type: "category",
@@ -340,23 +393,31 @@ export default {
},
{
type: "category",
- label: "Assets & Token Standards",
- className: "category-token-standards",
+ label: "Resources",
+ className: "category-resources",
collapsible: false,
- items: [
- "tech-explanation/assets-overview",
- "tech-explanation/economics",
- "tech-explanation/xudt",
- "tech-explanation/spore-protocol",
- "tech-explanation/rgbpp",
- ],
+ customProps: {
+ icon: "resource",
+ },
+ items: ["tech-explanation/glossary"],
},
+ ],
+ "Assets & Token": [
{
type: "category",
- label: "Resources",
- className: "category-resources",
+ label: "Assets & Token Standards",
+ className: "category-token-standards",
collapsible: false,
- items: ["tech-explanation/glossary"],
+ customProps: {
+ icon: "token",
+ },
+ items: [
+ "assets-token-standards/assets-overview",
+ "assets-token-standards/economics",
+ "assets-token-standards/xudt",
+ "assets-token-standards/spore-protocol",
+ "assets-token-standards/rgbpp",
+ ],
},
],
Ecosystem: [
@@ -364,28 +425,43 @@ export default {
type: "category",
label: "Ecosystem",
className: "category-ecosystem",
+ customProps: {
+ icon: "ecosystem",
+ },
collapsible: false,
- items: [
- "ecosystem/projects",
- "ecosystem/organizations",
- "ecosystem/contribute",
- ],
+ items: ["ecosystem/projects", "ecosystem/organizations"],
},
{
type: "category",
label: "History & Hard Forks",
className: "category-history",
collapsible: false,
+ customProps: {
+ icon: "history",
+ },
items: [
"history-and-hard-forks/intro-to-hard-fork",
"history-and-hard-forks/ckb-hard-fork-history",
"history-and-hard-forks/rethinking-forks",
],
},
+ {
+ type: "category",
+ label: "Contribution",
+ className: "category-contribution",
+ collapsible: false,
+ customProps: {
+ icon: "contribution",
+ },
+ items: ["ecosystem/contribute"],
+ },
{
type: "category",
label: "Resources",
className: "category-resources",
+ customProps: {
+ icon: "resource",
+ },
collapsible: false,
items: [
{
@@ -400,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",
@@ -413,32 +494,22 @@ export default {
label: "CKB Cookbook",
href: "https://cookbook.ckbdapps.com/",
},
- ],
- },
- {
- type: "category",
- label: "Other Protocols",
- className: "category-other-protocols",
- collapsible: false,
- items: [
- {
- 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",
},
],
},
],
- "Nodes & Mining": [
+ Nodes: [
{
type: "category",
label: "Run a Node",
className: "category-node",
+ customProps: {
+ icon: "node",
+ },
collapsible: false,
items: [
"node/node-overview",
@@ -463,10 +534,15 @@ export default {
"node/node-config",
],
},
+ ],
+ Mining: [
{
type: "category",
label: "Mining",
className: "category-mining",
+ customProps: {
+ icon: "mining",
+ },
collapsible: false,
items: [
"mining/guide",
diff --git a/website/src/components/Home/index.tsx b/website/src/components/Home/index.tsx
index eb598ea23..d5c17082d 100644
--- a/website/src/components/Home/index.tsx
+++ b/website/src/components/Home/index.tsx
@@ -1,21 +1,25 @@
import clsx from "clsx";
+import { useEffect, useMemo, useState } from "react";
+import Link from "@docusaurus/Link";
+
import styles from "./styles.module.css";
-import WalletCard, { WalletCardProps } from "../WalletCard";
-import { useEffect, useState } from "react";
import CardLayout from "../CardLayout";
-import Link from "@docusaurus/Link";
-import EcoCard, { EcoCardProps } from "../EcoCard";
import Button from "../Button";
+import TutorialFrame from "../TutorialFrame";
+import WalletCard, { WalletCardProps } from "../WalletCard";
+import EcoCard, { EcoCardProps } from "../EcoCard";
+
import {
TutorialProps,
contactUsContents,
devToolSectionContents,
homeCardContents,
tutorialSectionContents,
+ uniqueSectionContents,
} from "../../pages/homeContents";
+
import { walletCardContents } from "../../../docs/integrate-wallets/CardContents";
import ecoCardContents from "../../../docs/ecosystem/EcoCardContents";
-import TutorialFrame from "../TutorialFrame";
interface EcoSectionProps {
title: string;
@@ -25,47 +29,42 @@ interface EcoSectionProps {
children: React.ReactNode;
}
-// Card component at the top of the home page
+/* ---------------- Top cards ---------------- */
function HomeCardSection() {
return (
- 
-
- ) : (
-
-
-
-
- )}
+
-
+
+
+
+ {card.title}
- {card.links && ( + + {card.links ? (
- {card.links.map((link, index) => (
+ {card.links.map((l) => (
- {link.label}
+ {l.label}
![{"Navigate]({"/svg/icon-circle-arrow.svg"})
))}
- )}
+ ) : null}
))}
))}
DApp Tutorials
+
- {tutorialSectionContents.map((tutorial, index) => (
-
- handleTutorialClick(tutorial)}
+ {tutorialSectionContents.map((t) => (
+
+
))}
+
+ {uniqueSectionContents.map((card) => (
+
+
+
+ );
+}
+
+/* ---------------- Ecosystem wrapper ---------------- */
function EcoSection({
title,
icon,
@@ -169,11 +198,12 @@ function EcoSection({
className={clsx(styles.section, styles.flexCol)}
style={{ marginTop: topMargin }}
>
- {glow && (
+ {glow ? (
+
+
+
+
+ {card.title}
+{card.description}
+ + + + ))} +
-
+ 
- )}
+ ) : null}
+
+
{title}
setCurrentTag("All")}
+ type="button"
>
All Wallets
- {tags.map((tag, index) => (
+
+ {tags.map((tag) => (
))}
+
SDKs
- {devToolSectionContents
- .filter((tool) => tool.category === "SDK")
- .map((tool, index) => (
-
- {tool.title}
-
- ))}
+ {sdks.map((tool) => (
+
+ {tool.title}
+
+ ))}
Other Dev Tools
- {devToolSectionContents
- .filter((tool) => tool.category === "Other DevTools")
- .map((tool, index) => (
-
- {tool.title}
-
- ))}
+ {others.map((tool) => (
+
+ {tool.title}
+
+ ))}
-
@@ -399,14 +419,16 @@ function ProjectDisplay(): JSX.Element {
);
}
+/* ---------------- Dev log ---------------- */
function DevLogSection(): JSX.Element {
return (
-
+
+
+
Discover Dev Log
@@ -416,98 +438,106 @@ function DevLogSection(): JSX.Element {
forward.
- ![{"dev]({"/svg/illus-dev-log.svg"})
+ 
+
-
+
+
+
Explore CKB History & Hard Forks
- Delve into the milestones and pivotal updates that have shaped CKB's
- development. Gain detailed insights into each hard fork and understand
- their impact on the evolution of the network.
+ Delve into the milestones and pivotal updates that have shaped
+ CKB's development. Gain detailed insights into each hard fork and
+ understand their impact on the evolution of the network.
- ![{"history]({"/svg/illus-history.svg"})
- 
+ 
+
+
Learn Basics
- Begin your journey with our comprehensive guide on "How CKB Works” to - ensure you have a solid understanding before diving deeper. + Begin your journey with our comprehensive guide on "How CKB + Works" to ensure you have a solid understanding before diving + deeper.
OR
Jumpstart Your Development
Run the command below in your terminal to start developing dApps on the CKB Devnet immediately.
-
{copied ? (
"Copied to clipboard!"
@@ -522,22 +552,24 @@ function CTASection(): JSX.Element {
/>
)}
-
+
{`Copyright © ${new Date().getFullYear()} Nervos Foundation. All Rights Reserved.`}
+
- {contactUsContents.map((media, index) => (
+ {contactUsContents.map((media) => (
.borderBtm:not(:last-child) {
border-bottom: 1px solid var(--dark-border-invisible);
}
+
.link {
line-height: 3rem;
color: var(--dark-text-secondary) !important;
text-decoration: none !important;
}
+
.line {
cursor: pointer;
padding: 0 0.5rem;
}
+
.line:hover {
background-color: var(--dark-hover);
border-radius: 2px;
}
-/* wallet section specific */
+/* ---------------- Wallet section ---------------- */
.filters {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
+
.tag {
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
+
+ padding: 0 0.75rem;
+ margin: 0 1rem 1rem 0;
+
font-size: 0.875rem;
+ line-height: 2rem;
+
background-color: var(--dark-surface-03);
color: var(--dark-text-tertiary);
- line-height: 2rem;
+
border-radius: 32px;
border: 1px solid var(--dark-border-subtle);
box-shadow: none;
cursor: pointer;
- margin: 0 1rem 1rem 0;
- padding: 0 0.75rem;
}
+
.tag:hover {
background-color: var(--dark-surface-03-hover);
}
+
.activeTag {
background-color: var(--dark-alert-success-bg) !important;
border: 1px solid var(--dark-alert-success);
color: var(--dark-text-primary);
}
-/* DApp section specific */
+/* ---------------- DApp tutorials ---------------- */
.tutorialSection {
padding: 7.5rem 2.5rem;
gap: 2.5rem;
}
+
.tutorialLeft {
width: 636px;
}
+
.tutorialSidebar {
margin: 2.5rem 0;
color: var(--dark-text-secondary);
}
+
.tutorialItem {
+ width: 100%;
+ text-align: left;
+
+ border: none;
+ background: transparent;
+
border-radius: 8px;
display: flex;
flex-direction: column;
+
padding: 1rem 1.25rem;
opacity: 0.5;
cursor: pointer;
+
position: relative;
overflow: hidden;
}
+
.tutorialItem:hover {
background-color: var(--dark-hover);
}
+
+.itemTitle {
+ margin-bottom: 0.5rem;
+ color: var(--dark-text-primary);
+ z-index: 1;
+}
+
.itemDecor {
position: absolute;
right: -1.5rem;
@@ -179,52 +221,103 @@
z-index: 0;
display: none;
}
-.itemTitle {
- margin-bottom: 0.5rem;
- color: var(--dark-text-primary);
- z-index: 1;
-}
+
.itemActive {
background: var(--dark-surface-accent);
box-shadow: 0px 10px 40px -5px rgba(7, 28, 39, 0.4);
opacity: 1;
}
+
.itemActive .itemDecor {
display: block;
}
+
.tutorialFrame {
width: 567px;
}
-/* Dev tools section specific */
-.tableContainer {
+/* ---------------- Unique cards ---------------- */
+.uniqueWrap {
+ width: 100%;
+}
+
+.uniqueCard {
+ position: relative;
+ display: block;
+ text-decoration: none;
+
+ height: 340px;
+ padding: 1.5rem;
+
+ background-image: url("/svg/unique-card-shape.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+}
+
+.uniqueCard:hover {
+ text-decoration: none;
+}
+
+.uniqueCardHeader {
display: flex;
- justify-content: space-between;
+ align-items: center;
+ gap: 0.85rem;
+}
+
+.uniqueIcon {
+ width: 56px;
+ height: 56px;
+}
+
+.uniqueCardTitle {
+ margin: 0;
}
+.uniqueCardDesc {
+ margin: 0;
+ padding: 1rem 0;
+
+ color: var(--dark-text-secondary);
+ font-size: 1rem;
+ line-height: 1.7;
+ min-height: 8rem;
+}
+
+/* ---------------- Dev tools ---------------- */
+.devlogSection {
+ margin-bottom: 2.5rem;
+}
.column {
display: flex;
flex-direction: column;
color: var(--dark-text-primary);
flex: 1;
}
+
.cell {
- border: 1px solid var(--dark-border-subtle);
- height: 3.5rem;
- line-height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
+
+ height: 3.5rem;
+ line-height: 3.5rem;
+
+ border: 1px solid var(--dark-border-subtle);
cursor: pointer;
+
text-decoration: none !important;
color: var(--dark-text-primary);
font-weight: bold;
+
flex: 1 1 50%;
}
+
.cell:hover {
background-color: var(--dark-hover);
border-color: var(--dark-border-accent);
}
+
.columnHeader {
background-color: var(--dark-surface-03) !important;
border: 1px solid var(--dark-border-subtle) !important;
@@ -232,68 +325,79 @@
cursor: default;
}
-/* Project Display specific */
+/* ---------------- Projects carousel ---------------- */
.carouselContainer {
width: 100%;
}
+
.carouselController {
gap: 0.5rem;
}
+
.arrowLeft,
.arrowRight {
width: 2rem;
min-width: 2rem;
height: 2rem;
+
display: flex;
align-items: center;
justify-content: center;
- border: none;
+
+ border: 1px solid var(--dark-border-accent);
+ border-radius: 50%;
+
cursor: pointer;
- color: var(--dark-alert-success);
background: var(--dark-alert-success-bg);
- border-radius: 50%;
- border: 1px solid var(--dark-border-accent);
+ color: var(--dark-alert-success);
}
+
.arrowLeft:hover,
.arrowRight:hover {
background: var(--dark-surface-03-hover);
}
+
.arrowLeft {
transform: scaleX(-1);
}
-/* Dev Log specific */
+/* ---------------- Dev log / history ---------------- */
+
.illusContainer {
width: 417px;
height: 350px;
}
+
.leftContainer {
max-width: 55%;
}
+
.description {
color: var(--dark-text-secondary);
font-size: 1.25rem;
}
-/* CTA section specific */
+/* ---------------- CTA ---------------- */
.ctaSection {
background-color: var(--dark-surface-02);
}
+
.ctaSection::before {
content: "";
position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ inset: 0;
+
background-image: url("/img/noise.png");
background-position: center;
background-repeat: repeat;
+
z-index: -1;
}
+
.ctaSubsection {
max-width: 40%;
}
+
.or {
background-color: var(--dark-surface-01);
width: 5rem;
@@ -301,15 +405,21 @@
height: 5rem;
border-radius: 50%;
}
+
.command {
+ border: none;
+
background-color: var(--dark-alert-success-bg);
padding: 0 2rem;
+
line-height: 3rem;
width: 286px;
border-radius: 40px;
+
color: var(--dark-text-link);
cursor: pointer;
}
+
.command:hover {
background: radial-gradient(
50% 50% at 50% 50%,
@@ -319,77 +429,107 @@
transition: opacity 0.2s;
}
-/* Footer section specific */
+/* ---------------- Footer ---------------- */
.footerSection {
border-top: 1px solid var(--dark-border-invisible);
min-height: 4rem;
padding: 1rem 4rem;
}
+
.copyright {
color: var(--dark-text-secondary);
font-size: 0.875rem;
text-align: center;
}
+
.icons {
flex-wrap: wrap;
justify-content: center;
}
+
.iconBG {
display: flex;
align-items: center;
justify-content: center;
+
width: 2.25rem;
height: 2.25rem;
+
background-color: var(--dark-surface-02);
border-radius: 50%;
cursor: pointer;
}
+
.iconBG:hover {
background-color: var(--dark-surface-03);
}
-/* Responsiveness */
+/* ---------------- Responsive ---------------- */
+
+@media (max-width: 1440px) {
+ .uniqueCard {
+ background-image: none;
+ background-color: var(--dark-surface-02);
+ border: 1px solid var(--dark-border-invisible);
+ border-radius: 2rem;
+ height: fit-content;
+ }
+ .uniqueCardDesc {
+ min-height: 4rem;
+ }
+}
+
@media (max-width: 996px) {
.illusContainer {
width: 100%;
}
+
.tutorialSection {
flex-direction: column;
padding: 3.5rem;
}
+
.tutorialLeft,
.tutorialFrame {
width: 100%;
}
+
.devlogSection {
flex-direction: column-reverse;
- align-items: start;
+ align-items: flex-start;
}
+
.leftContainer {
max-width: 100%;
}
+
.ctaSection {
flex-direction: column;
gap: 2.5rem;
- align-items: start;
+ align-items: flex-start;
}
+
.ctaSubsection {
max-width: 100%;
}
+
.footerSection {
flex-direction: column;
gap: 1rem;
}
}
+
@media (max-width: 768px) {
.section {
padding: 2.5rem 1.25rem;
border-radius: 20px;
}
+
.sectionGlow,
.sectionGlowOpposite {
display: none;
}
+
.flexCol {
gap: 1.25rem;
}
diff --git a/website/src/components/Navbar/MegaMenuNavbarItem/index.tsx b/website/src/components/Navbar/MegaMenuNavbarItem/index.tsx
new file mode 100644
index 000000000..c4591aaad
--- /dev/null
+++ b/website/src/components/Navbar/MegaMenuNavbarItem/index.tsx
@@ -0,0 +1,237 @@
+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";
+
+export type MegaMenuItem = {
+ title: string;
+ description?: string;
+ href: string;
+ external?: boolean;
+ icon?: SidebarIconName;
+ activeBaseRegex?: string;
+};
+
+export type MegaMenuNavbarItemProps = {
+ label: string;
+ menuId: string;
+ position?: "left" | "right";
+ className?: string;
+ activeBaseRegex?: string;
+ primaryItems: MegaMenuItem[];
+ otherItems?: MegaMenuItem[];
+ otherLabel?: string;
+ otherCol?: 1 | 2;
+};
+
+const EVENT_NAME = "nervos:megamenu-open";
+const MegaMenuNavbarItem: React.FC = ({
+ label,
+ menuId,
+ position = "left",
+ className,
+ activeBaseRegex,
+ primaryItems,
+ otherItems = [],
+ otherLabel = "OTHER",
+ otherCol = 1,
+}) => {
+ const location = useLocation();
+ const [open, setOpen] = useState(false);
+
+ // smooth close on tab-switch / pointer move
+ const closeTimerRef = useRef(null);
+ const clearCloseTimer = () => {
+ if (closeTimerRef.current) {
+ window.clearTimeout(closeTimerRef.current);
+ closeTimerRef.current = null;
+ }
+ };
+
+ const announceOpen = () => {
+ window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: { menuId } }));
+ };
+
+ const openNow = () => {
+ clearCloseTimer();
+ setOpen(true);
+ announceOpen();
+ };
+
+ const closeSoon = () => {
+ clearCloseTimer();
+ closeTimerRef.current = window.setTimeout(() => setOpen(false), 120);
+ };
+
+ const closeNow = () => {
+ clearCloseTimer();
+ setOpen(false);
+ };
+
+ // Close this menu when another opens
+ useEffect(() => {
+ const handler = (e: Event) => {
+ const ev = e as CustomEvent<{ menuId: string }>;
+ if (ev?.detail?.menuId && ev.detail.menuId !== menuId) setOpen(false);
+ };
+ window.addEventListener(EVENT_NAME, handler);
+ return () => window.removeEventListener(EVENT_NAME, handler);
+ }, [menuId]);
+
+ // ESC closes
+ useEffect(() => {
+ if (!open) return;
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") setOpen(false);
+ };
+ window.addEventListener("keydown", onKeyDown);
+ return () => window.removeEventListener("keydown", onKeyDown);
+ }, [open]);
+
+ const isTabRouteActive =
+ activeBaseRegex !== undefined &&
+ new RegExp(activeBaseRegex).test(location.pathname);
+
+ const underlineActive = isTabRouteActive || open;
+
+ const isItemActive = (item: MegaMenuItem) => {
+ if (item.activeBaseRegex)
+ return new RegExp(item.activeBaseRegex).test(location.pathname);
+ const base = useBaseUrl(item.href);
+ return location.pathname.startsWith(base);
+ };
+
+ return (
+ <>
+
![{"glowing]({"/svg/header-glow.svg"})
-
);
}
-function SwitchToDark() {
+function Section({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) {
+ return (
+ >({});
+
+ useEffect(() => {
+ const next: Record = {};
+ menus.forEach((menu) => {
+ if (isActive(pathname, menu)) {
+ next[menu.menuId] = true;
+ }
+ });
+ setOpenMap((prev) => ({ ...prev, ...next }));
+ }, [pathname, menus]);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default MegaMenuNavbarItem;
diff --git a/website/src/components/Navbar/MegaMenuNavbarItem/styles.module.css b/website/src/components/Navbar/MegaMenuNavbarItem/styles.module.css
new file mode 100644
index 000000000..7e0e4f39f
--- /dev/null
+++ b/website/src/components/Navbar/MegaMenuNavbarItem/styles.module.css
@@ -0,0 +1,165 @@
+.megaItem {
+ position: relative;
+}
+
+.trigger {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ padding: 0.25rem 0;
+ background: none;
+ border: none;
+ cursor: pointer;
+ font: inherit;
+ border-bottom: 2px solid transparent;
+}
+
+.megaItemActive .trigger {
+ color: var(--text-link);
+ border-bottom-color: var(--text-link);
+}
+
+.chevron {
+ width: 14px;
+ height: 14px;
+ color: var(--text-secondary);
+ transition: transform 150ms ease, color 150ms ease;
+}
+.megaItemActive .chevron {
+ color: var(--text-link);
+}
+
+.panelWrapper {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: var(--ifm-navbar-height);
+ z-index: 200;
+ visibility: hidden;
+ pointer-events: none;
+ transition: visibility 160ms ease;
+}
+
+.panelWrapperOpen {
+ visibility: visible;
+ pointer-events: auto;
+}
+
+.panel {
+ width: 100%;
+ background: var(--surface-02);
+ border-top: 1px solid var(--border-subtle);
+ padding: 1rem;
+}
+
+.layout {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ align-items: start;
+}
+
+.primaryCol {
+ display: grid;
+}
+
+.primaryCard {
+ display: block;
+ text-decoration: none;
+ border-radius: 0.5rem;
+ transition: background 150ms ease, border-color 150ms ease;
+}
+
+.primaryCard:hover,
+.primaryCard:focus {
+ text-decoration: none;
+ background: var(--hover);
+}
+
+.primaryInner {
+ display: flex;
+ gap: 0.85rem;
+ align-items: center;
+ padding: 1rem;
+}
+
+.primaryIcon {
+ width: 56px;
+ height: 56px;
+ flex: 0 0 auto;
+}
+
+.primaryTitle {
+ font-weight: 700;
+ font-size: 1.125rem;
+ color: var(--text-primary);
+ line-height: 1.4;
+}
+
+.primaryDesc {
+ margin-top: 0.25rem;
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ line-height: 1.7;
+}
+
+.otherLabel {
+ 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 {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ text-decoration: none;
+ color: var(--text-primary);
+ padding: 0.5rem 0;
+}
+
+.otherItem:hover,
+.otherItem:focus {
+ text-decoration: none;
+}
+
+.otherIcon {
+ width: 24px;
+ height: 24px;
+ color: var(--text-primary);
+}
+
+.externalIcon {
+ color: var(--text-tertiary);
+ width: 18px;
+ height: 18px;
+}
+
+.otherTitle {
+ font-weight: 700;
+ font-size: 1.125rem;
+}
+
+.primaryCard:hover .primaryIcon,
+.primaryCard:hover .primaryTitle,
+.primaryCard:hover .primaryDesc,
+.otherItem:hover .otherIcon,
+.otherItem:hover .otherTitle {
+ color: var(--text-link);
+}
+
+.cardActive .primaryIcon,
+.cardActive .primaryTitle,
+.cardActive .primaryDesc,
+.cardActive .otherIcon,
+.cardActive .otherTitle {
+ color: var(--text-link);
+}
diff --git a/website/src/components/Tooltip/key-terms.json b/website/src/components/Tooltip/key-terms.json
index 76020a856..c04436753 100644
--- a/website/src/components/Tooltip/key-terms.json
+++ b/website/src/components/Tooltip/key-terms.json
@@ -57,7 +57,7 @@
},
"cell model": {
"content": "A representation of how state is managed on Nervos CKB.",
- "link": "/docs/tech-explanation/cell-model"
+ "link": "/docs/ckb-fundamentals/cell-model"
},
"censorship resistance": {
"content": "Censorship resistance in blockchain generally means that it is difficult for a malicious party to prevent the blockchain from confirming a set of transactions generated by honest users.",
@@ -77,7 +77,7 @@
},
"ckb-vm": {
"content": "CKB-VM is a crypto-agnostic virtual machine, a RISC-V instruction set based VM for executing both on-chain and off-chain code.",
- "link": "/docs/tech-explanation/ckb-vm"
+ "link": "/docs/ckb-fundamentals/ckb-vm"
},
"code hash": {
"content": "A field in a Cell that contains a hash value which could refer to a specific piece of data, or a specific Cell referenced by Type ID.",
@@ -117,7 +117,7 @@
},
"consensus": {
"content": "An algorithm executed among a number of distributed participants, ensuring that all participants faithfully executing this algorithm can reach agreement on some data value even if the other participants are faulty or malicious.",
- "link": "/docs/tech-explanation/consensus"
+ "link": "/docs/ckb-fundamentals/consensus"
},
"consume": {
"content": "The process of using a Live Cell as an input to a transaction.",
@@ -297,7 +297,7 @@
},
"nervos blockchain": {
"content": "The layer 1 blockchain of the Nervos Network known as the Common Knowledge Base.",
- "link": "/docs/tech-explanation/nervos-blockchain"
+ "link": "/docs/ckb-fundamentals/nervos-blockchain"
},
"nervos dao": {
"content": "Nervos DAO enable users to lock CKBytes to get compensation from Nervos CKB secondary issuance.",
@@ -565,7 +565,7 @@
},
"ckbhash": {
"content": "CKB uses blake2b as the default hash algorithm with the following configurations:.",
- "link": "/docs/tech-explanation/ckbhash"
+ "link": "/docs/ckb-fundamentals/ckbhash"
},
"ckb merkle tree": {
"content": "CKB Merkle Tree is a CBMT( ) using following merge function:.",
@@ -1001,7 +1001,7 @@
},
"xudt": {
"content": "An extended UDT standard upon sUDT (Simple UDT) to accommodate additional functionalities, including regulatory compliance.",
- "link": "/docs/tech-explanation/xudt"
+ "link": "/docs/assets-token-standards/xudt"
},
"zk-snark": {
"content": "A form of cryptographic proof, that when used in cryptocurrencies, allows for privacy features which do not reveal the amounts or participants in transactions.",
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 1820bfcb6..9b01c2eec 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -37,6 +37,7 @@
/* Sidebar */
--doc-sidebar-width: 260px !important;
--ifm-sidebar-border-color: var(--border-subtle);
+ --ifm-navbar-sidebar-width: 100vw;
/* DocSearch for algolia*/
--docsearch-modal-background: var(--surface-03) !important;
@@ -84,6 +85,9 @@ ul.dropdown__menu {
}
@media (max-width: 1280px) {
+ .navbar {
+ padding: 0 1rem;
+ }
.navbar__item {
display: none;
}
@@ -268,114 +272,18 @@ ul.dropdown__menu {
padding-right: 1rem;
}
-/* Add icon next to the menus */
-.category-getting-started > div > a:before {
- content: url("/svg/icon-sidebar-rocket.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-dapp > div > a:before {
- content: url("/svg/icon-sidebar-tutorial.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-script > div > a:before {
- content: url("/svg/icon-sidebar-script.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-tool > div > a:before {
- content: url("/svg/icon-sidebar-tool.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-integrate-wallets > div > a:before {
- content: url("/svg/icon-sidebar-wallet.svg");
- margin-right: 0.5rem;
+/* Customize sidebar icons next to category names */
+.sidebarIcon {
width: 1.125rem;
height: 1.125rem;
-}
-.category-node > div > a:before {
- content: url("/svg/icon-sidebar-node.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-ecosystem-scripts > div > a:before {
- content: url("/svg/icon-sidebar-common-script.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-molecule > div > a:before {
- content: url("/svg/icon-sidebar-molecule.svg");
margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-howto > div > a:before {
- content: url("/svg/icon-sidebar-howto.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-mining > div > a:before {
- content: url("/svg/icon-sidebar-mining.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-history-hardfork > div > a:before {
- content: url("/svg/icon-sidebar-history.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-ckb-fundamentals > div > a:before {
- content: url("/svg/icon-sidebar-concept.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-core-structures > div > a:before {
- content: url("/svg/icon-sidebar-structure.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-token-standards > div > a:before {
- content: url("/svg/icon-sidebar-token.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-ecosystem > div > a:before {
- content: url("/svg/icon-sidebar-ecosystem.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-resources > div > a:before {
- content: url("/svg/icon-sidebar-resource.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
-}
-.category-rust > div > a:before {
- content: url("/svg/icon-sidebar-script.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
+ flex-shrink: 0;
+ color: var(--text-tertiary);
}
-.category-js > div > a:before {
- content: url("/svg/icon-sidebar-script.svg");
- margin-right: 0.5rem;
- width: 1.125rem;
- height: 1.125rem;
+
+.sidebarCategoryLabelWithIcon {
+ display: inline-flex;
+ align-items: center;
}
/* Footer */
diff --git a/website/src/icons/index.ts b/website/src/icons/index.ts
new file mode 100644
index 000000000..2f040e350
--- /dev/null
+++ b/website/src/icons/index.ts
@@ -0,0 +1,77 @@
+import CommonScript from "/svg/icon-sidebar-common-script.svg";
+import Concept from "/svg/icon-sidebar-concept.svg";
+import Ecosystem from "/svg/icon-sidebar-ecosystem.svg";
+import History from "/svg/icon-sidebar-history.svg";
+import HowTo from "/svg/icon-sidebar-howto.svg";
+import Mining from "/svg/icon-sidebar-mining.svg";
+import Molecule from "/svg/icon-sidebar-molecule.svg";
+import Node from "/svg/icon-sidebar-node.svg";
+import Resource from "/svg/icon-sidebar-resource.svg";
+import Rocket from "/svg/icon-sidebar-rocket.svg";
+import Rpc from "/svg/icon-sidebar-rpc.svg";
+import Script from "/svg/icon-sidebar-script.svg";
+import Structure from "/svg/icon-sidebar-structure.svg";
+import Token from "/svg/icon-sidebar-token.svg";
+import Tool from "/svg/icon-sidebar-tool.svg";
+import Tutorial from "/svg/icon-sidebar-tutorial.svg";
+import Wallet from "/svg/icon-sidebar-wallet.svg";
+import Project from "/svg/icon-sidebar-project.svg";
+import Contribution from "/svg/icon-sidebar-contribution.svg";
+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";
+import SquareFeature from "/svg/square-feature.svg";
+import SquareConcept from "/svg/square-concept.svg";
+import SquareNodes from "/svg/square-nodes.svg";
+import SquareMine from "/svg/square-mine.svg";
+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,
+ concept: Concept,
+ ecosystem: Ecosystem,
+ history: History,
+ howto: HowTo,
+ mining: Mining,
+ molecule: Molecule,
+ node: Node,
+ resource: Resource,
+ rocket: Rocket,
+ rpc: Rpc,
+ script: Script,
+ structure: Structure,
+ token: Token,
+ tool: Tool,
+ tutorial: Tutorial,
+ wallet: Wallet,
+ project: Project,
+ contribution: Contribution,
+ rust: Rust,
+ js: JS,
+ organization: Organization,
+ feature: Feature,
+ external: External,
+ squareRocket: SquareRocket,
+ squareDapp: SquareDapp,
+ squareScript: SquareScript,
+ squareFeature: SquareFeature,
+ squareConcept: SquareConcept,
+ squareNodes: SquareNodes,
+ squareMine: SquareMine,
+ squareProject: SquareProject,
+ 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
index bc096a538..8213b2995 100644
--- a/website/src/pages/homeContents.tsx
+++ b/website/src/pages/homeContents.tsx
@@ -2,6 +2,14 @@ export interface CardLinks {
label: string;
link: string;
}
+
+export interface HomeCardProps {
+ title: string;
+ icon: string;
+ links?: CardLinks[];
+ to?: string;
+}
+
export interface TutorialProps {
title: string;
description: string;
@@ -9,17 +17,18 @@ export interface TutorialProps {
iframeSrc: string;
illusSrc: string;
}
+
export interface DevToolProps {
title: string;
href: string;
- category: string;
+ category: "SDK" | "Other DevTools";
}
-export interface HomeCardProps {
- title: string;
- links?: CardLinks[];
- to?: string;
+export interface UniqueProps {
icon: string;
+ title: string;
+ description: string;
+ link: string;
}
const homeCardContents: HomeCardProps[] = [
@@ -56,19 +65,11 @@ const homeCardContents: HomeCardProps[] = [
],
icon: "script",
},
+ { title: "Run a Node", to: "/docs/node/node-overview", icon: "node" },
+ { title: "Mining", to: "/docs/mining/guide", icon: "mining" },
{
- title: "Run a Node",
- to: "/docs/node/node-overview",
- icon: "node",
- },
- {
- title: "Mining",
- to: "/docs/mining/guide",
- icon: "mining",
- },
- {
- title: "Tech Explanation",
- to: "/docs/tech-explanation/nervos-blockchain",
+ title: "CKB Fundamentals",
+ to: "/docs/ckb-fundamentals/nervos-blockchain",
icon: "tech-explanation",
},
];
@@ -108,27 +109,35 @@ const tutorialSectionContents: TutorialProps[] = [
},
];
-const devToolSectionContents: DevToolProps[] = [
+const uniqueSectionContents: UniqueProps[] = [
{
- title: "Rust",
- href: "/docs/sdk-and-devtool/rust",
- category: "SDK",
+ icon: "nodes",
+ title: "Extreme Decentralization",
+ description:
+ "Secured by Proof-of-Work so anyone can verify the network without trusting a central party.",
+ link: "/docs/ckb-features/extreme-decentralization",
},
{
- title: "Go",
- href: "/docs/sdk-and-devtool/go",
- category: "SDK",
+ icon: "quantum",
+ title: "Native Quantum Resistance",
+ description:
+ "Supports quantum-resistant cryptography to help protect assets and identities over time.",
+ link: "/docs/ckb-features/native-quantum-resistance",
},
{
- title: "Java",
- href: "/docs/sdk-and-devtool/java",
- category: "SDK",
- },
- {
- title: "TypeScript",
- href: "/docs/sdk-and-devtool/ccc",
- category: "SDK",
+ icon: "vm",
+ title: "Virtual Machine Built for Hackers",
+ description:
+ "Uses a public, open standard (RISC-V) to run and verify on-chain rules in a transparent way.",
+ link: "/docs/ckb-features/vm-built-for-hackers",
},
+];
+
+const devToolSectionContents: DevToolProps[] = [
+ { title: "Rust", href: "/docs/sdk-and-devtool/rust", category: "SDK" },
+ { title: "Go", href: "/docs/sdk-and-devtool/go", category: "SDK" },
+ { title: "Java", href: "/docs/sdk-and-devtool/java", category: "SDK" },
+ { title: "TypeScript", href: "/docs/sdk-and-devtool/ccc", category: "SDK" },
{
title: "CKB-CLI",
href: "https://github.com/nervosnetwork/ckb-cli",
@@ -165,15 +174,14 @@ const contactUsContents: CardLinks[] = [
},
];
-// Just to include a default export
-const HomeContentsPage: React.FC = () => {
- return null;
-};
+// default export placeholder
+const HomeContentsPage: React.FC = () => null;
export default HomeContentsPage;
export {
homeCardContents,
tutorialSectionContents,
+ uniqueSectionContents,
devToolSectionContents,
contactUsContents,
};
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 9708c4e24..b6d100e23 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,28 +1,31 @@
import { useEffect } from "react";
import LogRocket from "logrocket";
import Layout from "@theme/Layout";
+import clsx from "clsx";
+import { useColorMode } from "@docusaurus/theme-common";
+
import styles from "./styles.module.css";
import CardLayout from "../components/CardLayout";
-import clsx from "clsx";
+import CookieConsent from "../components/CookieConsent";
+
import {
HomeCardSection,
+ DAppSection,
+ UniqueCardSection,
WalletDisplay,
ToolDisplay,
+ ProjectDisplay,
DevLogSection,
HistorySection,
- ProjectDisplay,
- FooterSection,
CTASection,
- DAppSection,
+ FooterSection,
} from "../components/Home";
-import { useColorMode } from "@docusaurus/theme-common";
-import CookieConsent from "../components/CookieConsent";
export default function Home() {
useEffect(() => {
- // Initialize LogRocket
LogRocket.init("ghkibu/nervos-doc");
}, []);
+
return (
+
+
+ {/* LEFT: Primary cards */}
+
+
+ {primaryItems.map((item) => {
+ const Icon = item.icon ? sidebarIconMap[item.icon] : null;
+ const active = isItemActive(item);
+
+ return (
+
+
+
+ {/* RIGHT: Other list */}
+ {otherItems.length > 0 && (
+
+ {Icon && (
+
+ )}
+
+
+ );
+ })}
+
+
+ {item.title}
+ {item.description && (
+
+ {item.description}
+
+ )}
+
+
+ )}
+ {otherLabel}
+
+ {otherItems.map((item) => {
+ const Icon = item.icon ? sidebarIconMap[item.icon] : null;
+ const External = sidebarIconMap["external"];
+ const active = isItemActive(item);
+
+ return (
+
+ {Icon && (
+
+ )}
+ {item.title}
+ {item.external && (
+
+ )}
+
+ );
+ })}
+
+
-
-
- Nervos CKB Documentation
-
+
+
+
+
Nervos CKB Documentation
+Discover the power of Nervos CKB through tutorials, guides, and concepts -
+
+
+
+
-
-
+
+
-
+
+
+
+
+
- Explore Ecosystem -
+
+
+
+
Explore our curated selection of featured tools and resources designed to empower your development on Nervos CKB -
-
-
+
+
+
Unveil{" "} Updates and Evolution -
-
+
+
Ready to Dive In?
-
+
+
+
+
+
Ready to Dive In?
+Whether you're curious about how CKB works or eager to jump straight into building, we've got you covered. -
{children}
+ );
+}
+
+function UniqueHeader() {
+ return (
+
+
+ );
+}
+
+function ForceDarkMode() {
const { setColorMode } = useColorMode();
useEffect(() => {
setColorMode("dark");
- }, []);
+ }, [setColorMode]);
+
return null;
}
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 291c18a9c..356b2917b 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -1,28 +1,42 @@
@import "@css/customVariables.css";
-/* General styling */
.homeLayout {
width: 100%;
background: url("/svg/header-bg.svg") no-repeat top center;
background-color: var(--dark-surface-01) !important;
}
+
+.relative {
+ position: relative;
+}
+
.headerGlow {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
-.relative {
- position: relative;
+
+.sectionContainer {
+ width: 100%;
+ max-width: 1440px;
+ margin: 0 auto 10rem;
+ padding: 0 4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
+
.header1 {
font-size: 3.5em;
margin: 7.5rem 0 1.25rem;
}
+
.header2 {
font-size: 3em;
margin: 8.75rem 0 1.25rem;
}
+
.header1,
.header2 {
font-family: "Poppins-Bold", sans-serif;
@@ -30,49 +44,69 @@
text-align: center;
color: var(--dark-text-primary);
}
+
+.noTop {
+ margin-top: 0;
+}
+
.description {
text-align: center;
color: var(--dark-text-secondary);
- font-size: 1.25rem;
+ font-size: 1.125rem;
}
+
.titleBtm {
margin-bottom: 2rem;
}
-.flexCol {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
+
+.textHighlight {
+ color: var(--dark-text-link);
}
-.sectionContainer {
+
+.textLeftAlign {
+ text-align: left;
+}
+
+/* Unique header layout */
+.uniqueHeader {
width: 100%;
- max-width: 1440px;
- margin: 0 auto;
display: flex;
- flex-direction: column;
- align-items: center;
- padding: 0 4rem;
- margin-bottom: 10rem;
+ justify-content: space-between;
+ gap: 5rem;
+ align-items: flex-start;
}
-.textHighlight {
- color: var(--dark-text-link);
+.uniqueMaxWidth {
+ max-width: 560px;
}
+
.ecoBG {
background: url("/svg/bg-eco-header.svg") no-repeat top center;
}
+
.updateBG {
background: url("/svg/bg-update-header.svg") no-repeat top center;
}
+@media (max-width: 996px) {
+ .uniqueHeader {
+ flex-direction: column;
+ gap: 0;
+ }
+ .uniqueMaxWidth {
+ max-width: 100%;
+ }
+}
@media (max-width: 768px) {
.header1 {
font-size: 2.5rem;
margin: 3rem 0 1.25rem;
}
+
.header2 {
font-size: 2em;
margin: 8rem 0 1.25rem;
}
+
.sectionContainer {
padding: 0 1rem;
margin-bottom: 5rem;
diff --git a/website/src/theme/DocSidebarItem/Category/index.tsx b/website/src/theme/DocSidebarItem/Category/index.tsx
new file mode 100644
index 000000000..6e47dce29
--- /dev/null
+++ b/website/src/theme/DocSidebarItem/Category/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import OriginalCategory from "@theme-original/DocSidebarItem/Category";
+import type { Props } from "@theme/DocSidebarItem/Category";
+import { sidebarIconMap, SidebarIconName } from "../../../icons";
+
+export default function DocSidebarItemCategoryWrapper(props: Props) {
+ const iconKey = props.item.customProps?.icon as SidebarIconName | undefined;
+ const Icon = iconKey ? sidebarIconMap[iconKey] : null;
+
+ // If no icon, fall back to the original behavior
+ if (!Icon) {
+ return + What Makes CKB + Unique +
+ ++ CKB combines PoW security, quantum-resistant cryptography, and a RISC-V + VM—built for long-term, verifiable applications +
+ onToggle((e.currentTarget as HTMLDetailsElement).open)}
+ >
+
+ );
+}
+
+function PrimaryItem({
+ item,
+ pathname,
+ onClick,
+}: {
+ item: MegaMenuItem;
+ pathname: string;
+ onClick: () => void;
+}) {
+ const Icon = resolveIcon(item.icon);
+ const active = isActive(pathname, item);
+
+ return (
+
+ {Icon && + + {label} + + +
+ {children} +
+
+
+ );
+}
+
+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 (
+
+ {Icon &&
+ {item.title}
+
+ {item.description && (
+
+ {item.description}
+
+ )}
+
+
+ );
+}
diff --git a/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css b/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
new file mode 100644
index 000000000..d6484e574
--- /dev/null
+++ b/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
@@ -0,0 +1,180 @@
+.mobileNav {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.mobileSearchRow {
+ width: 100%;
+}
+
+.mobileSearchRow :global(.aa-DetachedSearchButton) {
+ width: 100% !important;
+ height: 2.5rem;
+ border-radius: 999px;
+ background: transparent;
+ border: 1px solid var(--dark-border-subtle);
+ padding: 0 1rem 0 0.5rem;
+}
+.mobileSearchRow :global(.aa-DetachedSearchButton):hover {
+ background: var(--dark-hover);
+}
+.mobileSearchRow :global(.aa-DetachedSearchButtonPlaceholder) {
+ display: block;
+}
+
+.groups {
+ padding: 0.5rem 0 0;
+}
+
+.summary {
+ list-style: none;
+ cursor: pointer;
+ padding: 0.5rem 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.summary::-webkit-details-marker {
+ display: none;
+}
+
+.summaryLabel {
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--dark-text-primary);
+}
+
+.chevron {
+ width: 0.5rem;
+ height: 0.5rem;
+ border-right: 1px solid var(--dark-text-secondary);
+ border-bottom: 1px solid var(--dark-text-secondary);
+ transform: rotate(45deg);
+}
+
+details[open] .chevron {
+ transform: rotate(-135deg);
+}
+
+details[open] {
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid var(--dark-border-subtle);
+}
+
+/* Primary items */
+.primaryList {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+.primaryIcon {
+ width: 2.5rem;
+ min-width: 2.5rem;
+ height: 2.5rem;
+}
+
+.primaryItem {
+ display: flex;
+ gap: 0.75rem;
+ align-items: flex-start;
+ text-decoration: none !important;
+ padding: 0.5rem 0;
+ border-radius: 0.5rem;
+}
+
+.primaryItem:hover {
+ background: var(--dark-hover);
+}
+
+.primaryTitle {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.4;
+ color: var(--dark-text-primary);
+}
+
+.primaryDesc {
+ font-size: 0.75rem;
+ line-height: 1.7;
+ color: var(--dark-text-secondary);
+}
+
+/* Other items (within each menu) */
+
+.otherLabel {
+ padding-bottom: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--dark-text-tertiary);
+}
+
+.otherList {
+ display: flex;
+ flex-direction: column;
+}
+
+.otherItem {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 0;
+ text-decoration: none !important;
+ border-radius: 0.5rem;
+ color: var(--dark-text-primary);
+}
+
+.otherItem:hover {
+ background: var(--dark-hover);
+}
+
+.otherTitle {
+ font-size: 1rem;
+ font-weight: 700;
+ line-height: 1.4;
+ color: var(--dark-text-primary);
+}
+
+.externalIcon {
+ width: 0.85rem;
+ height: 0.85rem;
+ color: var(--dark-text-tertiary);
+}
+
+.primaryTitle.activeText {
+ color: var(--dark-text-link);
+}
+
+.primaryDesc.activeText {
+ color: var(--dark-text-link);
+}
+
+.otherTitle.activeText {
+ color: var(--dark-text-link);
+}
+
+.otherItem.activeText {
+ color: var(--dark-text-link);
+}
+
+/* Bottom CTA */
+.footer {
+ margin-top: 1rem;
+}
+
+.helpButton {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ height: 2.5rem;
+ border-radius: 999px;
+ text-decoration: none !important;
+ border: 1px solid var(--dark-border-subtle);
+ color: var(--dark-text-primary) !important;
+}
+
+.helpButton:hover {
+ background: var(--dark-hover);
+}
diff --git a/website/src/theme/NavbarItem/ComponentTypes/index.ts b/website/src/theme/NavbarItem/ComponentTypes/index.ts
new file mode 100644
index 000000000..b218b0509
--- /dev/null
+++ b/website/src/theme/NavbarItem/ComponentTypes/index.ts
@@ -0,0 +1,10 @@
+import type { ComponentTypesObject } from "@theme/NavbarItem/ComponentTypes";
+import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
+import MegaMenuNavbarItem from "@site/src/components/Navbar/MegaMenuNavbarItem";
+
+const customTypes: ComponentTypesObject = {
+ ...ComponentTypes,
+ "custom-megaMenu": MegaMenuNavbarItem,
+};
+
+export default customTypes;
diff --git a/website/src/theme/NotFound/Content/linkContents.ts b/website/src/theme/NotFound/Content/linkContents.ts
index e1c68dc24..55d78973b 100644
--- a/website/src/theme/NotFound/Content/linkContents.ts
+++ b/website/src/theme/NotFound/Content/linkContents.ts
@@ -7,8 +7,8 @@ const suggestedLinks: CardLinks[] = [
{ label: "Run a Node", link: "/docs/node/node-overview" },
{ label: "Mining", link: "/docs/mining/guide" },
{
- label: "Tech Explanation",
- link: "/docs/tech-explanation/nervos-blockchain",
+ label: "CKB Fundamentals",
+ link: "/docs/ckb-fundamentals/nervos-blockchain",
},
];
export { suggestedLinks };
diff --git a/website/static/svg/icon-chevron-down.svg b/website/static/svg/icon-chevron-down.svg
new file mode 100644
index 000000000..66a28335e
--- /dev/null
+++ b/website/static/svg/icon-chevron-down.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/static/svg/icon-sidebar-common-script.svg b/website/static/svg/icon-sidebar-common-script.svg
index 3a0c9551c..e36fc71e9 100644
--- a/website/static/svg/icon-sidebar-common-script.svg
+++ b/website/static/svg/icon-sidebar-common-script.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-concept.svg b/website/static/svg/icon-sidebar-concept.svg
index 6fb2fbf75..2b7dc19fc 100644
--- a/website/static/svg/icon-sidebar-concept.svg
+++ b/website/static/svg/icon-sidebar-concept.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-contribution.svg b/website/static/svg/icon-sidebar-contribution.svg
new file mode 100644
index 000000000..b2df9d86f
--- /dev/null
+++ b/website/static/svg/icon-sidebar-contribution.svg
@@ -0,0 +1,4 @@
+
diff --git a/website/static/svg/icon-sidebar-ecosystem.svg b/website/static/svg/icon-sidebar-ecosystem.svg
index cd259a738..3a2cd26a8 100644
--- a/website/static/svg/icon-sidebar-ecosystem.svg
+++ b/website/static/svg/icon-sidebar-ecosystem.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-external.svg b/website/static/svg/icon-sidebar-external.svg
new file mode 100644
index 000000000..7292664d3
--- /dev/null
+++ b/website/static/svg/icon-sidebar-external.svg
@@ -0,0 +1,4 @@
+
diff --git a/website/static/svg/icon-sidebar-feature.svg b/website/static/svg/icon-sidebar-feature.svg
new file mode 100644
index 000000000..3a9d44b94
--- /dev/null
+++ b/website/static/svg/icon-sidebar-feature.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/static/svg/icon-sidebar-history.svg b/website/static/svg/icon-sidebar-history.svg
index d890bceae..ab349d19f 100644
--- a/website/static/svg/icon-sidebar-history.svg
+++ b/website/static/svg/icon-sidebar-history.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-howto.svg b/website/static/svg/icon-sidebar-howto.svg
index 5cf5ff8dd..6219fcd30 100644
--- a/website/static/svg/icon-sidebar-howto.svg
+++ b/website/static/svg/icon-sidebar-howto.svg
@@ -1,5 +1,5 @@
diff --git a/website/static/svg/icon-sidebar-js.svg b/website/static/svg/icon-sidebar-js.svg
new file mode 100644
index 000000000..ca7f983f0
--- /dev/null
+++ b/website/static/svg/icon-sidebar-js.svg
@@ -0,0 +1,5 @@
+
diff --git a/website/static/svg/icon-sidebar-mining.svg b/website/static/svg/icon-sidebar-mining.svg
index 9d23ca8bd..a048421e8 100644
--- a/website/static/svg/icon-sidebar-mining.svg
+++ b/website/static/svg/icon-sidebar-mining.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-molecule.svg b/website/static/svg/icon-sidebar-molecule.svg
index 8d35d0c2f..d8297bc7a 100644
--- a/website/static/svg/icon-sidebar-molecule.svg
+++ b/website/static/svg/icon-sidebar-molecule.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-node.svg b/website/static/svg/icon-sidebar-node.svg
index 672f51458..c3b2b5849 100644
--- a/website/static/svg/icon-sidebar-node.svg
+++ b/website/static/svg/icon-sidebar-node.svg
@@ -1,7 +1,7 @@
diff --git a/website/static/svg/icon-sidebar-organization.svg b/website/static/svg/icon-sidebar-organization.svg
new file mode 100644
index 000000000..5a7435432
--- /dev/null
+++ b/website/static/svg/icon-sidebar-organization.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/static/svg/icon-sidebar-project.svg b/website/static/svg/icon-sidebar-project.svg
new file mode 100644
index 000000000..36163366e
--- /dev/null
+++ b/website/static/svg/icon-sidebar-project.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/static/svg/icon-sidebar-resource.svg b/website/static/svg/icon-sidebar-resource.svg
index 90fe75e09..fd3e49bbd 100644
--- a/website/static/svg/icon-sidebar-resource.svg
+++ b/website/static/svg/icon-sidebar-resource.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-rocket.svg b/website/static/svg/icon-sidebar-rocket.svg
index 8a178848b..e32862629 100644
--- a/website/static/svg/icon-sidebar-rocket.svg
+++ b/website/static/svg/icon-sidebar-rocket.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-rpc.svg b/website/static/svg/icon-sidebar-rpc.svg
index 2def9ae05..56a261e07 100644
--- a/website/static/svg/icon-sidebar-rpc.svg
+++ b/website/static/svg/icon-sidebar-rpc.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-rust.svg b/website/static/svg/icon-sidebar-rust.svg
new file mode 100644
index 000000000..1b294a022
--- /dev/null
+++ b/website/static/svg/icon-sidebar-rust.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/static/svg/icon-sidebar-script.svg b/website/static/svg/icon-sidebar-script.svg
index 6b080a340..5bffee89f 100644
--- a/website/static/svg/icon-sidebar-script.svg
+++ b/website/static/svg/icon-sidebar-script.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-structure.svg b/website/static/svg/icon-sidebar-structure.svg
index d0b09f571..2b59b03d9 100644
--- a/website/static/svg/icon-sidebar-structure.svg
+++ b/website/static/svg/icon-sidebar-structure.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-token.svg b/website/static/svg/icon-sidebar-token.svg
index 979999d3e..41dc3d079 100644
--- a/website/static/svg/icon-sidebar-token.svg
+++ b/website/static/svg/icon-sidebar-token.svg
@@ -1,5 +1,5 @@
diff --git a/website/static/svg/icon-sidebar-tool.svg b/website/static/svg/icon-sidebar-tool.svg
index 653a50852..f6d9f4f17 100644
--- a/website/static/svg/icon-sidebar-tool.svg
+++ b/website/static/svg/icon-sidebar-tool.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-tutorial.svg b/website/static/svg/icon-sidebar-tutorial.svg
index 8d38522cc..cbc45d2e7 100644
--- a/website/static/svg/icon-sidebar-tutorial.svg
+++ b/website/static/svg/icon-sidebar-tutorial.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/icon-sidebar-wallet.svg b/website/static/svg/icon-sidebar-wallet.svg
index cdf40d361..f94e028fa 100644
--- a/website/static/svg/icon-sidebar-wallet.svg
+++ b/website/static/svg/icon-sidebar-wallet.svg
@@ -1,3 +1,3 @@
diff --git a/website/static/svg/square-concept.svg b/website/static/svg/square-concept.svg
new file mode 100644
index 000000000..d5fa1fa41
--- /dev/null
+++ b/website/static/svg/square-concept.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-contribution.svg b/website/static/svg/square-contribution.svg
new file mode 100644
index 000000000..dae78156e
--- /dev/null
+++ b/website/static/svg/square-contribution.svg
@@ -0,0 +1,23 @@
+
diff --git a/website/static/svg/square-feature.svg b/website/static/svg/square-feature.svg
new file mode 100644
index 000000000..a5fcec867
--- /dev/null
+++ b/website/static/svg/square-feature.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-history.svg b/website/static/svg/square-history.svg
new file mode 100644
index 000000000..37cff32a0
--- /dev/null
+++ b/website/static/svg/square-history.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-mine.svg b/website/static/svg/square-mine.svg
new file mode 100644
index 000000000..b214bc99d
--- /dev/null
+++ b/website/static/svg/square-mine.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-nodes.svg b/website/static/svg/square-nodes.svg
new file mode 100644
index 000000000..c2440df67
--- /dev/null
+++ b/website/static/svg/square-nodes.svg
@@ -0,0 +1,43 @@
+
diff --git a/website/static/svg/square-quantum.svg b/website/static/svg/square-quantum.svg
new file mode 100644
index 000000000..a5e6af5ec
--- /dev/null
+++ b/website/static/svg/square-quantum.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-resource.svg b/website/static/svg/square-resource.svg
new file mode 100644
index 000000000..51803e656
--- /dev/null
+++ b/website/static/svg/square-resource.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-structure.svg b/website/static/svg/square-structure.svg
new file mode 100644
index 000000000..afbca0410
--- /dev/null
+++ b/website/static/svg/square-structure.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/square-vm.svg b/website/static/svg/square-vm.svg
new file mode 100644
index 000000000..957826ec9
--- /dev/null
+++ b/website/static/svg/square-vm.svg
@@ -0,0 +1,18 @@
+
diff --git a/website/static/svg/unique-card-shape.svg b/website/static/svg/unique-card-shape.svg
new file mode 100644
index 000000000..95cc4a5d2
--- /dev/null
+++ b/website/static/svg/unique-card-shape.svg
@@ -0,0 +1,6 @@
+
+
+
+ {/* Groups */}
+
+ {menus.map((menu) => {
+ const active = isActive(pathname, menu);
+ const open = openMap[menu.menuId] ?? false;
+
+ return (
+
+ setOpenMap((prev) => ({
+ ...prev,
+ [menu.menuId]: next,
+ }))
+ }
+ >
+
+ );
+ })}
+
+
+ {/* Footer CTA */}
+
+ {menu.primaryItems.map((item) => (
+
+
+ {menu.otherItems?.length ? (
+ <>
+
+ {menu.otherLabel || "OTHER"}
+
+
+ {menu.otherItems.map((item) => (
+
+
+ ) : null}
+
+
+ 
+ {"Get Help"}
+
+
+
+ {"Get Help"}
+
+