From 8f42a7b92ea121ea9901ee3ddff66615f9506bc3 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 23 Jun 2023 21:15:02 +0900 Subject: [PATCH] style: update code block style --- packages/docusaurus-playground/docs/test.md | 163 ++++++++++++++++++ .../src/client/css/custom.scss | 6 + .../src/client/prism/dark-theme.ts | 100 +---------- .../src/client/prism/light-theme.ts | 79 +-------- .../CodeBlock/Container/styles.module.css | 1 - .../theme/CodeBlock/Content/styles.module.css | 1 + 6 files changed, 181 insertions(+), 169 deletions(-) create mode 100644 packages/docusaurus-playground/docs/test.md diff --git a/packages/docusaurus-playground/docs/test.md b/packages/docusaurus-playground/docs/test.md new file mode 100644 index 0000000..3b290f0 --- /dev/null +++ b/packages/docusaurus-playground/docs/test.md @@ -0,0 +1,163 @@ +--- +title: Run a Nwaku Node +--- + +Nwaku is a lightweight and robust Nim client for running a Waku node, equipped with tools to monitor and maintain a running node. Nwaku is highly configurable, enabling operators to select the [protocols](/overview/concepts/protocols) they want to support based on their needs, motivations, and available resources. + +This guide provides detailed steps to download, build, configure, and connect a `nwaku` node to the Waku Network. It also includes interacting with the node and finding its addresses. + +## Get the Binary + +To run a node, you must have the `nwaku` binary. Nwaku provides multiple options for acquiring the node binary: + +#### Download the Binary + +| | Description | Documentation | +| ------------------ | ------------------------------------------------------------- | ---------------------------------------------------------------------------------- | +| Precompiled Binary | Download a precompiled binary of the `nwaku` node | [Download Nwaku Binary](https://github.com/waku-org/nwaku/tags) | +| Nightly Release | Try the latest `nwaku` updates without compiling the binaries | [Download Nightly Release](https://github.com/waku-org/nwaku/releases/tag/nightly) | + +#### Build the Binary + +You can build the node binary directly from the [nwaku source code](https://github.com/waku-org/nwaku). To learn more, please refer to the [Build Nwaku from Source](/guides/nwaku/build-source) guide. + +#### Run the Binary in Docker + +| | Description | Documentation | +| ---------------- | ---------------------------------------- | ----------------------------------------------------------------- | +| Docker Container | Run a `nwaku` node in a Docker Container | [Run Nwaku in a Docker Container](/guides/nwaku/run-docker) | +| Docker Compose | Run a `nwaku` node with Docker Compose | [Run Nwaku with Docker Compose](/guides/nwaku/run-docker-compose) | + +:::tip +You can run the `nwaku` binaries and Docker images on cloud service providers like [Google Cloud](https://cloud.google.com/), [Microsoft Azure](https://azure.microsoft.com/), [Amazon Web Services](https://aws.amazon.com/), and [DigitalOcean](https://www.digitalocean.com/). +::: + +## Run the Node + +Once you have gotten the `nwaku` binary, run it using the [default configuration](/guides/reference/node-config-methods#default-configuration-values): + +```bash +# Run with default configuration +./build/wakunode2 + +# See available command line options +./build/wakunode2 --help +``` + +:::tip +For more advanced configurations like enabling other protocols or maintaining a consistent `PeerID`, please refer to the [Node Configuration Methods](/guides/reference/node-config-methods) guide. +::: + +## Bootstrap the Node + +To join the Waku Network, nodes must [bootstrap](/overview/reference/glossary#bootstrapping) for an entry point before discovering more peers. Nwaku provides multiple [peer discovery](/overview/concepts/peer-discovery) mechanisms: + +| | Description | Documentation | +| ------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | +| Static Peers | Configure the bootstrap nodes that `nwaku` should establish connections upon startup | [Configure Static Peers](/guides/nwaku/configure-discovery#configure-static-peers) | +| DNS Discovery | Enable `nwaku` to bootstrap nodes using the [DNS Discovery](/overview/concepts/dns-discovery) mechanism | [Configure DNS Discovery](/guides/nwaku/configure-discovery#configure-dns-discovery) | +| Discv5 | Enable `nwaku` to discover peers using the [Discv5](/overview/concepts/discv5) mechanism | [Configure Discv5](/guides/nwaku/configure-discovery#configure-discv5) | + +:::tip +You can configure a `nwaku` node to use multiple peer discovery mechanisms simultaneously. +::: + +## Interact with the Node + +You can interact with a running `nwaku` node through the [JSON RPC API](https://rfc.vac.dev/spec/16/), such as querying the node information using the `get_waku_v2_debug_v1_info` method: + +```mdx-code-block +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +``` + + + + +```bash +curl --location --request GET 'http://localhost:8545' \ +--header 'Content-Type: application/json' \ +--data '{ + "jsonrpc": "2.0", + "id": "id", + "method": "get_waku_v2_debug_v1_info", + "params": [] +}' +``` + + + + +```json +{ + "jsonrpc": "2.0", + "id": "id", + "result": { + "listenAddresses": [ + "/ip4/0.0.0.0/tcp/60000/p2p/16Uiu2HAmUbPquFQqje3jiqoB5YoiUbBya59NB4qqEzeiTNGHeA6w" + ], + "enrUri": "enr:-Iu4QCQZXZDb_JsYmLoYor0F5E_95HbIywgO_wgx2rIdDbmCJZkTzmlCr0wmMzV47lgik_tVwww5mIng90Ris83TisMBgmlkgnY0gmlwhAAAAACJc2VjcDI1NmsxoQPszztG-Ev52ZB7tk0jF8s6Md4KvyY_rhzNZokaaB_ABIN0Y3CC6mCFd2FrdTIB" + } +} +``` + + + + +:::info +The `listenAddresses` field stores the node's listening address(es), while the `enrUri` field stores the discoverable `ENR` URI for peer discovery. +::: + +## Find the Node Addresses + +You can find the addresses of a running node through its logs or by calling the `get_waku_v2_debug_v1_info` method of the [JSON RPC API](https://rfc.vac.dev/spec/16/). + +:::tip +When starting the node, `nwaku` will display all the public listening and discovery addresses at the `INFO` log level. +::: + +### Listening Addresses + +Look for the log entry that begins with `Listening on`, for example: + +```txt title="Nwaku Log Output" +INF 2023-06-15 16:09:54.448+01:00 Listening on topics="waku node" tid=1623445 file=waku_node.nim:922 full=[/ip4/0.0.0.0/tcp/60000/p2p/16Uiu2HAmQCsH9V81xoqTwGuT3qwkZWbwY1TtTQwpr3DjHU2TSwMn][/ip4/0.0.0.0/tcp/8000/ws/p2p/16Uiu2HAmQCsH9V81xoqTwGuT3qwkZWbwY1TtTQwpr3DjHU2TSwMn] +``` + +```bash +# Listening TCP transport address +/ip4/0.0.0.0/tcp/60000/p2p/16Uiu2HAmQCsH9V81xoqTwGuT3qwkZWbwY1TtTQwpr3DjHU2TSwMn + +# Listening WebSocket address +/ip4/0.0.0.0/tcp/8000/ws/p2p/16Uiu2HAmQCsH9V81xoqTwGuT3qwkZWbwY1TtTQwpr3DjHU2TSwMn +``` + +### Discoverable ENR Addresses + +A `nwaku` node can encode its addressing information in an [Ethereum Node Record (ENR)](https://eips.ethereum.org/EIPS/eip-778) following the [WAKU2-ENR](https://rfc.vac.dev/spec/31/) specification, primarily for peer discovery. + +#### ENR for DNS discovery + +Look for the log entry that begins with `DNS: discoverable ENR`, for example: + +```txt title="Nwaku Log Output" +INF 2023-06-15 16:09:54.448+01:00 DNS: discoverable ENR topics="waku node" tid=1623445 file=waku_node.nim:923 enr=enr:-Iu4QBKYj8Ovxwz4fIalxZ_1a8dOCU2WC-1LQrcBCCb4Np93f9-UuSZXn3vagJL1S3k3hwRYfOp3JSbW7_VqwtqMIeMBgmlkgnY0gmlwhAAAAACJc2VjcDI1NmsxoQOrmyV59dAzY4ZKrvrj32VOoZbLby8dCKFnXnqhIdQ0NYN0Y3CC6mCFd2FrdTIB +``` + +```bash +# ENR the node addresses are encoded in +enr:-Iu4QBKYj8Ovxwz4fIalxZ_1a8dOCU2WC-1LQrcBCCb4Np93f9-UuSZXn3vagJL1S3k3hwRYfOp3JSbW7_VqwtqMIeMBgmlkgnY0gmlwhAAAAACJc2VjcDI1NmsxoQOrmyV59dAzY4ZKrvrj32VOoZbLby8dCKFnXnqhIdQ0NYN0Y3CC6mCFd2FrdTIB +``` + +#### ENR for Discv5 + +Look for the log entry that begins with `Discv5: discoverable ENR`, for example: + +```txt title="Nwaku Log Output" +INF 2023-06-15 16:09:54.448+01:00 Discv5: discoverable ENR topics="waku node" tid=1623445 file=waku_node.nim:924 enr=enr:-IO4QDxToTg86pPCK2KvMeVCXC2ADVZWrxXSvNZeaoa0JhShbM5qed69RQz1s1mWEEqJ3aoklo_7EU9iIBcPMVeKlCQBgmlkgnY0iXNlY3AyNTZrMaEDdBHK1Gx6y_zv5DVw5Qb3DtSOMmVHTZO1WSORrF2loL2DdWRwgiMohXdha3UyAw +``` + +```bash +# ENR the node addresses are encoded in +enr:-IO4QDxToTg86pPCK2KvMeVCXC2ADVZWrxXSvNZeaoa0JhShbM5qed69RQz1s1mWEEqJ3aoklo_7EU9iIBcPMVeKlCQBgmlkgnY0iXNlY3AyNTZrMaEDdBHK1Gx6y_zv5DVw5Qb3DtSOMmVHTZO1WSORrF2loL2DdWRwgiMohXdha3UyAw +``` diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 58ceec5..2b7eb7c 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -235,6 +235,7 @@ --ifm-table-background: transparent !important; --ifm-table-stripe-background: transparent !important; + --ifm-pre-border-radius: 0 !important; @include utils.responsive('xl', 'down') { --container-max-width: 912px; @@ -1200,4 +1201,9 @@ pre code { margin-block: 40px; } +code { + --lsd-typography-generic-font-family: monospace; + background: rgba(var(--lsd-theme-primary), 0.1); +} + @import './blog.scss'; diff --git a/packages/logos-docusaurus-theme/src/client/prism/dark-theme.ts b/packages/logos-docusaurus-theme/src/client/prism/dark-theme.ts index fb9e247..843e159 100644 --- a/packages/logos-docusaurus-theme/src/client/prism/dark-theme.ts +++ b/packages/logos-docusaurus-theme/src/client/prism/dark-theme.ts @@ -1,104 +1,12 @@ import { PrismTheme } from 'prism-react-renderer' +import dracula from 'prism-react-renderer/themes/dracula' const theme: PrismTheme = { + ...dracula, plain: { - color: '#ffffff', - backgroundColor: 'transparent', + ...dracula.plain, + backgroundColor: 'rgba(255, 255, 255, 0.08)', }, - styles: [ - { - types: ['prolog'], - style: { - color: 'rgb(0, 0, 128)', - }, - }, - { - types: ['comment'], - style: { - color: 'rgb(106, 153, 85)', - }, - }, - { - types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'], - style: { - color: '#BC89BD', - }, - }, - { - types: ['number', 'inserted'], - style: { - color: 'rgb(181, 206, 168)', - }, - }, - { - types: ['constant'], - style: { - color: 'rgb(100, 102, 149)', - }, - }, - { - types: ['attr-name', 'variable'], - style: { - color: 'rgb(156, 220, 254)', - }, - }, - { - types: ['deleted', 'string', 'attr-value', 'template-punctuation'], - style: { - color: 'rgb(206, 145, 120)', - }, - }, - { - types: ['selector'], - style: { - color: 'rgb(215, 186, 125)', - }, - }, - { - types: ['tag'], - style: { - color: 'rgb(78, 201, 176)', - }, - }, - { - types: ['tag'], - languages: ['markup'], - style: { - color: 'rgb(86, 156, 214)', - }, - }, - { - types: ['punctuation', 'operator'], - style: { - color: 'rgb(212, 212, 212)', - }, - }, - { - types: ['punctuation'], - languages: ['markup'], - style: { - color: '#808080', - }, - }, - { - types: ['function'], - style: { - color: 'rgb(220, 220, 170)', - }, - }, - { - types: ['class-name'], - style: { - color: 'rgb(78, 201, 176)', - }, - }, - { - types: ['char'], - style: { - color: 'rgb(209, 105, 105)', - }, - }, - ], } export default theme diff --git a/packages/logos-docusaurus-theme/src/client/prism/light-theme.ts b/packages/logos-docusaurus-theme/src/client/prism/light-theme.ts index 3e757f4..b4bb272 100644 --- a/packages/logos-docusaurus-theme/src/client/prism/light-theme.ts +++ b/packages/logos-docusaurus-theme/src/client/prism/light-theme.ts @@ -1,77 +1,12 @@ -// Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css -const theme = { +import { PrismTheme } from 'prism-react-renderer' +import vsLight from 'prism-react-renderer/themes/vsLight' + +const theme: PrismTheme = { + ...vsLight, plain: { - color: '#393A34', - backgroundColor: 'transparent', + ...vsLight.plain, + backgroundColor: 'rgba(0, 0, 0, 0.08)', }, - styles: [ - { - types: ['comment', 'prolog', 'doctype', 'cdata'], - style: { - color: '#999988', - fontStyle: 'italic', - }, - }, - { - types: ['namespace'], - style: { - opacity: 0.7, - }, - }, - { - types: ['string', 'attr-value'], - style: { - color: '#e3116c', - }, - }, - { - types: ['punctuation', 'operator'], - style: { - color: '#393A34', - }, - }, - { - types: [ - 'entity', - 'url', - 'symbol', - 'number', - 'boolean', - 'variable', - 'constant', - 'property', - 'regex', - 'inserted', - ], - style: { - color: '#36acaa', - }, - }, - { - types: ['atrule', 'keyword', 'attr-name', 'selector'], - style: { - color: '#00a4db', - }, - }, - { - types: ['function', 'deleted', 'tag'], - style: { - color: '#d73a49', - }, - }, - { - types: ['function-variable'], - style: { - color: '#6f42c1', - }, - }, - { - types: ['tag', 'selector', 'keyword'], - style: { - color: '#00009f', - }, - }, - ], } export default theme diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css index 4e63faa..567c22d 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css @@ -2,6 +2,5 @@ background: transparent; color: var(--prism-color); margin-bottom: var(--ifm-leading); - border: 1px solid rgb(var(--lsd-border-primary)); border-radius: 0; } diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css index 926594e..c362641 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css @@ -4,6 +4,7 @@ } .codeBlockTitle { + background: rgba(var(--lsd-theme-primary), 0.08); border-bottom: 1px solid var(--ifm-color-primary); font-size: var(--ifm-code-font-size); font-weight: 500;