diff --git a/website/docs/dapp/TutorialOverview.tsx b/website/docs/dapp/TutorialOverview.tsx index a3dbd14ff..d131352ae 100644 --- a/website/docs/dapp/TutorialOverview.tsx +++ b/website/docs/dapp/TutorialOverview.tsx @@ -1,97 +1,163 @@ import Link from "@docusaurus/Link"; import { TutorialHeaderProps } from "@site/src/components/TutorialHeader"; -const TRANSFEROVERVIEW: TutorialHeaderProps = -{ - time: "2 - 5 min", - topics: [ - { label: "Cell Model", link:"/docs/tech-explanation/cell-model" }, - { label: "Transaction", link:"/docs/tech-explanation/glossary#transaction" }, - { label: "Witness", link:"/docs/tech-explanation/glossary#witness" }, - { label: "Signature", link:"/docs/tech-explanation/glossary#cryptographic-signature" }, - ], - tools: [ -
- wget https://apt.llvm.org/llvm.sh && chmod +x llvm.sh && sudo
- ./llvm.sh 16 && rm llvm.sh
-
- sudo dnf -y install clang
- sudo pacman --noconfirm -Syu clang
- brew install llvm@16
- scoop install llvm yasm
-
+ wget https://apt.llvm.org/llvm.sh && chmod +x llvm.sh && sudo
+ ./llvm.sh 16 && rm llvm.sh
+
+ sudo dnf -y install clang
+ sudo pacman --noconfirm -Syu clang
+ brew install llvm@16
+ scoop install llvm yasm
+ Get Help
', - className: 'navbar-help' - } - ] + type: "html", + position: "right", + value: + 'Get Help
', + className: "navbar-help", + }, + ], }, image: "img/undraw_online.svg", footer: { - style: 'dark', + style: "dark", links: [ { title: "Foundation", diff --git a/website/sidebars.js b/website/sidebars.js index 0c5cf263a..157009915 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -9,7 +9,7 @@ export default { "getting-started/how-ckb-works", "getting-started/quick-start", "getting-started/devtool", - ] + ], }, { type: "category", @@ -21,7 +21,7 @@ export default { "dapp/write-message", "dapp/create-token", "dapp/create-dob", - ] + ], }, { type: "category", @@ -34,17 +34,14 @@ export default { "script/minimal-script", "script/js-script", "script/common-script-error-code", - ] + ], }, { type: "category", label: "Integrate Wallets", className: "category-integrate-wallets", collapsible: false, - items: [ - "integrate-wallets/intro-to-wallets", - "integrate-wallets/joyid", - ] + items: ["integrate-wallets/intro-to-wallets", "integrate-wallets/joyid"], }, { type: "category", @@ -52,12 +49,12 @@ export default { className: "category-node", collapsible: false, items: [ - "node/rpcs", - "node/run-mainnet-node", - "node/run-testnet-node", - "node/run-devnet-node", - "node/run-public-rpc-node", - ] + "node/rpcs", + "node/run-mainnet-node", + "node/run-testnet-node", + "node/run-devnet-node", + "node/run-public-rpc-node", + ], }, { type: "category", @@ -72,7 +69,7 @@ export default { "mining/hardware", "mining/guide", "mining/info-stats", - ] + ], }, { type: "category", @@ -86,16 +83,14 @@ export default { "tech-explanation/consensus", "tech-explanation/economics", "tech-explanation/glossary", - ] + ], }, { type: "category", label: "Ecosystem", className: "category-ecosystem", collapsible: false, - items: [ - "ecosystem/projects", - ] + items: ["ecosystem/projects"], }, { type: "category", @@ -117,8 +112,8 @@ export default { type: "link", label: "CKB Dev Log", href: "https://github.com/nervosnetwork/ckb/discussions/categories/dev-log", - } - ] + }, + ], }, ], }; diff --git a/website/src/components/Button/index.tsx b/website/src/components/Button/index.tsx index c3d1ad165..cc9466c7c 100644 --- a/website/src/components/Button/index.tsx +++ b/website/src/components/Button/index.tsx @@ -3,18 +3,32 @@ import Link from "@docusaurus/Link"; import styles from "./styles.module.css"; interface ButtonProps { - link: string; - internal?: boolean; - children: React.ReactNode; - className?: string; + link: string; + internal?: boolean; + children: React.ReactNode; + className?: string; } -export default function Button({ link, internal = true, children, className }:ButtonProps): JSX.Element { - if (internal) { - return ( - {children} - ) - } +export default function Button({ + link, + internal = true, + children, + className, +}: ButtonProps): JSX.Element { + if (internal) { return ( - {children} + + {children} + ); + } + return ( + + {children} + + ); } diff --git a/website/src/components/Button/styles.module.css b/website/src/components/Button/styles.module.css index d180a3f04..5d79c207b 100644 --- a/website/src/components/Button/styles.module.css +++ b/website/src/components/Button/styles.module.css @@ -1,55 +1,55 @@ -@import '@css/customVariables.css'; +@import "@css/customVariables.css"; .solidBtn { - display: flex; - align-items: center; - justify-content: center; - padding: 0 1.5rem; - color: var(--dark-text-inverse) !important; - text-decoration: none !important; - border-radius: 80px; - font-weight: bold; - font-size: 1em; - line-height: 3em; - border: none; - box-shadow: var(--dark-btn-shadow); - backdrop-filter: blur(15px); - cursor: pointer; - width: fit-content; - position: relative; - overflow: hidden; - z-index: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 0 1.5rem; + color: var(--dark-text-inverse) !important; + text-decoration: none !important; + border-radius: 80px; + font-weight: bold; + font-size: 1em; + line-height: 3em; + border: none; + box-shadow: var(--dark-btn-shadow); + backdrop-filter: blur(15px); + cursor: pointer; + width: fit-content; + position: relative; + overflow: hidden; + z-index: 1; } .solidBtn:after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--dark-text-link); - border-radius: 80px; - z-index: -2; + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--dark-text-link); + border-radius: 80px; + z-index: -2; } .solidBtn:before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 0%; - height: 100%; - background-color: #5DF6C2; - transition: all 0.25s; - border-radius: 80px; - z-index: -1; + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 0%; + height: 100%; + background-color: #5df6c2; + transition: all 0.25s; + border-radius: 80px; + z-index: -1; } .solidBtn:hover:before { - width: 100%; + width: 100%; } @media (max-width: 768px) { - .solidBtn { - line-height: 2.5rem; - width: 100%; - } -} \ No newline at end of file + .solidBtn { + line-height: 2.5rem; + width: 100%; + } +} diff --git a/website/src/components/Card/index.tsx b/website/src/components/Card/index.tsx index 8b98cbf40..77b1191fe 100644 --- a/website/src/components/Card/index.tsx +++ b/website/src/components/Card/index.tsx @@ -1,60 +1,78 @@ import clsx from "clsx"; import Link from "@docusaurus/Link"; import styles from "./styles.module.css"; -import ThemedImage from '@theme/ThemedImage'; +import ThemedImage from "@theme/ThemedImage"; import { CardLinks } from "@site/src/pages/homeContents"; - export interface CardProps { - title: string; - description: string; - link: string; - type: 'tool' | 'tutorial' | 'concept'; - links?: CardLinks[]; - internal?: boolean; - className?: string; + title: string; + description: string; + link: string; + type: "tool" | "tutorial" | "concept"; + links?: CardLinks[]; + internal?: boolean; + className?: string; } -export default function Card({ title, description, link, type, links, internal = true, className }: CardProps): JSX.Element { - const props = { title, description, link, type, links, className }; - if (internal) { - return ( - -{description}
-{description}
+{description}
-{description}
+{tag}
)} -+ {tag} +
+ ))} +tags in markdown map to CodeBlocks. They may contain JSX children. When // the children is not a simple string, we just return a styled block without @@ -16,7 +16,8 @@ export default function CodeBlockJSX({+ className={clsx(styles.codeBlockStandalone, "thin-scrollbar", className)} + > ); diff --git a/website/src/theme/CodeBlock/Content/String.tsx b/website/src/theme/CodeBlock/Content/String.tsx index f8afb89f9..358bbbf04 100644 --- a/website/src/theme/CodeBlock/Content/String.tsx +++ b/website/src/theme/CodeBlock/Content/String.tsx @@ -1,21 +1,21 @@ -import React from 'react'; -import clsx from 'clsx'; -import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common'; +import React from "react"; +import clsx from "clsx"; +import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common"; import { parseCodeBlockTitle, parseLanguage, parseLines, containsLineNumbers, useCodeWordWrap, -} from '@docusaurus/theme-common/internal'; -import {Highlight, type Language} from 'prism-react-renderer'; -import Line from '@theme/CodeBlock/Line'; -import CopyButton from '@theme/CodeBlock/CopyButton'; -import WordWrapButton from '@theme/CodeBlock/WordWrapButton'; -import Container from '@theme/CodeBlock/Container'; -import type {Props} from '@theme/CodeBlock/Content/String'; +} from "@docusaurus/theme-common/internal"; +import { Highlight, type Language } from "prism-react-renderer"; +import Line from "@theme/CodeBlock/Line"; +import CopyButton from "@theme/CodeBlock/CopyButton"; +import WordWrapButton from "@theme/CodeBlock/WordWrapButton"; +import Container from "@theme/CodeBlock/Container"; +import type { Props } from "@theme/CodeBlock/Content/String"; -import styles from './styles.module.css'; +import styles from "./styles.module.css"; // Prism languages are always lowercase // We want to fail-safe and allow both "php" and "PHP" @@ -26,17 +26,17 @@ function normalizeLanguage(language: string | undefined): string | undefined { export default function CodeBlockString({ children, - className: blockClassName = '', + className: blockClassName = "", metastring, title: titleProp, showLineNumbers: showLineNumbersProp, language: languageProp, }: Props): JSX.Element { const { - prism: {defaultLanguage, magicComments}, + prism: { defaultLanguage, magicComments }, } = useThemeConfig(); const language = normalizeLanguage( - languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage, + languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage ); const prismTheme = usePrismTheme(); @@ -47,7 +47,7 @@ export default function CodeBlockString({ // "title=\"xyz\"" => title: "\"xyz\"" const title = parseCodeBlockTitle(metastring) || titleProp; - const {lineClassNames, code} = parseLines(children, { + const { lineClassNames, code } = parseLines(children, { metastring, language, magicComments, @@ -62,26 +62,30 @@ export default function CodeBlockString({ blockClassName, language && !blockClassName.includes(`language-${language}`) && - `language-${language}`, - )}> + `language-${language}` + )} + > {title &&{children}
{title}}- {({className, style, tokens, getLineProps, getTokenProps}) => ( + language={(language ?? "text") as Language} + > + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + className={clsx(className, styles.codeBlock, "thin-scrollbar")} + style={style} + >+ showLineNumbers && styles.codeBlockLinesWithNumbering + )} + > {tokens.map((line, i) => (
(undefined); const handleCopyCode = useCallback(() => { @@ -27,28 +27,29 @@ export default function CopyButton({code, className}: Props): JSX.Element { aria-label={ isCopied ? translate({ - id: 'theme.CodeBlock.copied', - message: 'Copied', - description: 'The copied button label on code blocks', + id: "theme.CodeBlock.copied", + message: "Copied", + description: "The copied button label on code blocks", }) : translate({ - id: 'theme.CodeBlock.copyButtonAriaLabel', - message: 'Copy code to clipboard', - description: 'The ARIA label for copy code blocks button', + id: "theme.CodeBlock.copyButtonAriaLabel", + message: "Copy code to clipboard", + description: "The ARIA label for copy code blocks button", }) } title={translate({ - id: 'theme.CodeBlock.copy', - message: 'Copy', - description: 'The copy button label on code blocks', + id: "theme.CodeBlock.copy", + message: "Copy", + description: "The copy button label on code blocks", })} className={clsx( - 'clean-btn', + "clean-btn", className, styles.copyButton, - isCopied && styles.copyButtonCopied, + isCopied && styles.copyButtonCopied )} - onClick={handleCopyCode}> + onClick={handleCopyCode} + >