From 68cceccee0b716a450dfb102ee22f6f9ed493da1 Mon Sep 17 00:00:00 2001 From: Yana Date: Tue, 22 Oct 2024 14:23:44 +0300 Subject: [PATCH] Add accordion --- .../pages/developers/typescript/overview.mdx | 177 +++++++++++++----- documentation/docs/pages/styles.css | 12 ++ 2 files changed, 140 insertions(+), 49 deletions(-) diff --git a/documentation/docs/pages/developers/typescript/overview.mdx b/documentation/docs/pages/developers/typescript/overview.mdx index 1a163b232a..0d7801a716 100644 --- a/documentation/docs/pages/developers/typescript/overview.mdx +++ b/documentation/docs/pages/developers/typescript/overview.mdx @@ -1,71 +1,150 @@ -import { Callout } from 'nextra/components' -import { TableContainer, Table, TableBody, TableCell, TableRow, Paper } from '@mui/material' -import { NPMLink } from '../../../components/npm'; +import { Callout } from "nextra/components"; +import { + TableContainer, + Table, + TableBody, + TableCell, + TableRow, + Paper, +} from "@mui/material"; +import { NPMLink } from "../../../components/npm"; +import Accordion from "@mui/material/Accordion"; +import AccordionActions from "@mui/material/AccordionActions"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import AccordionDetails from "@mui/material/AccordionDetails"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; ## SDK overview + The Typescript SDK allows developers to start building browser-based Nym-based applications quickly, by simply importing the SDK modules into their code via NPM as they would any other Typescript library. Currently developers can use different packages from the Typescript SDK to run the following entirely in browser: - - - - - **Nym Smart Contracts** - - - Create a simple query or query and execute methods on the smart contracts that run the Nym Mixnet - - - - - - - - **Mixnet Client** - - - Send & receive text and binary traffic over the Nym Mixnet - - -
-
-
- - - - - - **mixFetch** - - - A drop-in replacement for [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - that sends HTTP requests over the Nym Mixnet - - -
-
-
- - - - -
+ + + + **Nym Smart Contracts** + + Create a simple query or query and execute methods on the smart + contracts that run the Nym Mixnet + + + + + + + **Mixnet Client** + + Send & receive text and binary traffic over the Nym Mixnet + + + +
+ +
+ +
+ + + + + **mixFetch** + + A drop-in replacement for + [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) + that sends HTTP requests over the Nym Mixnet + + + +
+ +
+ +
+ + + + +
## Which package should I use? All packages come in four different variations: + - **ESM**: For new projects with current tooling. These packages use the ECMAScript Modules (ESM) system. You may need to [configure your bundler](./bundling/bundling) to handle the packages WASM and web worker components; - **ESM full-fat**: These ESM packages are pre-bundled and include inline WebAssembly and web worker code; - **CommonJS**: For older projects that still use CommonJS. All WebAssembly (WASM) and web workers in the package need to be [bundled](./bundling/bundling) to work correctly; - **CommonJS full-fat**: These packages are already pre-bundled and should work in your project without additional configuration; - All `*-full-fat` variants have large bundle sizes because they include all WASM and web-workers as inline Base64 strings. If you care about your app's bundle size, then use the ESM variant. + All `*-full-fat` variants have large bundle sizes because they include all + WASM and web-workers as inline Base64 strings. If you care about your app's + bundle size, then use the ESM variant. - As the Typescript SDK and associated modules are still a work in progress, note that the inline WASM and web worker versions are likely to have issues if the web site / app / extension has a strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). + As the Typescript SDK and associated modules are still a work in progress, + note that the inline WASM and web worker versions are likely to have issues if + the web site / app / extension has a strict + [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). +
+ + } + aria-controls="panel1-content" + id="panel1-header" + aria-label="nym-node --help command output" + > + Command Output + + + +``` +!-- cmdrun ../../../../target/release/nym-node --help -- + +Usage: nym-node [OPTIONS] + +Commands: + build-info Show build information of this binary + bonding-information Show bonding information of this node depending on its currently selected mode + node-details Show details of this node + migrate Attempt to migrate an existing mixnode or gateway into a nym-node + run Start this nym-node + sign Use identity key of this node to sign provided message + help Print this message or the help of the given subcommand(s) + +Options: + -c, --config-env-file + Path pointing to an env file that configures the nym-node and overrides any preconfigured values [env: NYMNODE_CONFIG_ENV_FILE_ARG=] + --no-banner + Flag used for disabling the printed banner in tty [env: NYMNODE_NO_BANNER=] + -h, --help + Print help + -V, --version + Print version +``` + + + diff --git a/documentation/docs/pages/styles.css b/documentation/docs/pages/styles.css index a4e5ff9ade..0bb5b469a7 100644 --- a/documentation/docs/pages/styles.css +++ b/documentation/docs/pages/styles.css @@ -133,3 +133,15 @@ input:focus-visible { a.MuiLink-root { color: var(--colorPrimary) !important; } + +.MuiPaper-root.MuiAccordion-root { + border-radius: 8px; +} + +/* //TODO: customise light and dark mode */ + +/* @media (prefers-color-scheme: dark) { + .MuiPaper-root.MuiAccordion-root { + background-color: red; + } +} */