Add accordion
This commit is contained in:
Yana
@@ -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:
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
**Nym Smart Contracts**
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
Create a simple query or query and execute methods on the smart contracts that run the Nym Mixnet
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<NPMLink packageName={'@nymproject/contract-clients'} kind={'esm'}/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
**Mixnet Client**
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
Send & receive text and binary traffic over the Nym Mixnet
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<NPMLink packageName={'@nymproject/sdk'} kind={'esm'}/><br/>
|
||||
<NPMLink packageName={'@nymproject/sdk-full-fat'} kind={'esm'} preBundled/><br/>
|
||||
<NPMLink packageName={'@nymproject/sdk-commonjs'} kind={'cjs'}/><br/>
|
||||
<NPMLink packageName={'@nymproject/sdk-full-fat-commonjs'} kind={'cjs'} preBundled/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
**mixFetch**
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
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
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<NPMLink packageName={'@nymproject/mix-fetch'} kind={'esm'}/><br/>
|
||||
<NPMLink packageName={'@nymproject/mix-fetch-full-fat'} kind={'esm'} preBundled/><br/>
|
||||
<NPMLink packageName={'@nymproject/mix-fetch-commonjs'} kind={'cjs'}/><br/>
|
||||
<NPMLink packageName={'@nymproject/mix-fetch-full-fat-commonjs'} kind={'cjs'} preBundled/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>**Nym Smart Contracts**</TableCell>
|
||||
<TableCell>
|
||||
Create a simple query or query and execute methods on the smart
|
||||
contracts that run the Nym Mixnet
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<NPMLink packageName={"@nymproject/contract-clients"} kind={"esm"} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>**Mixnet Client**</TableCell>
|
||||
<TableCell>
|
||||
Send & receive text and binary traffic over the Nym Mixnet
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<NPMLink packageName={"@nymproject/sdk"} kind={"esm"} />
|
||||
<br />
|
||||
<NPMLink
|
||||
packageName={"@nymproject/sdk-full-fat"}
|
||||
kind={"esm"}
|
||||
preBundled
|
||||
/>
|
||||
<br />
|
||||
<NPMLink packageName={"@nymproject/sdk-commonjs"} kind={"cjs"} />
|
||||
<br />
|
||||
<NPMLink
|
||||
packageName={"@nymproject/sdk-full-fat-commonjs"}
|
||||
kind={"cjs"}
|
||||
preBundled
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>**mixFetch**</TableCell>
|
||||
<TableCell>
|
||||
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
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<NPMLink packageName={"@nymproject/mix-fetch"} kind={"esm"} />
|
||||
<br />
|
||||
<NPMLink
|
||||
packageName={"@nymproject/mix-fetch-full-fat"}
|
||||
kind={"esm"}
|
||||
preBundled
|
||||
/>
|
||||
<br />
|
||||
<NPMLink
|
||||
packageName={"@nymproject/mix-fetch-commonjs"}
|
||||
kind={"cjs"}
|
||||
/>
|
||||
<br />
|
||||
<NPMLink
|
||||
packageName={"@nymproject/mix-fetch-full-fat-commonjs"}
|
||||
kind={"cjs"}
|
||||
preBundled
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
## 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;
|
||||
|
||||
<Callout type="warning" emoji="🥛">
|
||||
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.
|
||||
</Callout>
|
||||
|
||||
<Callout type="info" emoji="⚠️">
|
||||
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).
|
||||
</Callout>
|
||||
<br />
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1-content"
|
||||
id="panel1-header"
|
||||
aria-label="<code>nym-node --help</code> command output"
|
||||
>
|
||||
Command Output
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
|
||||
```
|
||||
!-- cmdrun ../../../../target/release/nym-node --help --
|
||||
|
||||
Usage: nym-node [OPTIONS] <COMMAND>
|
||||
|
||||
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 <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
|
||||
```
|
||||
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
} */
|
||||
|
||||
Reference in New Issue
Block a user