Skip to content

Commit 0cb2be1

Browse files
fryorcrakenfryorcraken
authored
Re-organise the docs to have clear CTAs (#251)
* Split website in 4: - build - run node - learn - research * only show pages of section in sidebar * home button on each sidebar * index.md for homepages * Add video tutorials * delete old getting-started * rename to "Waku node" * fix nwaku compose * add to dict * script revert research changes * fix broken links * move research index content * move research folder under learn * move research folder under learn: side bar and buttons * remove pointless links
1 parent 1da7137 commit 0cb2be1

File tree

91 files changed

+568
-812
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+568
-812
lines changed

‎.cspell.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,20 @@
8383
"IPFS",
8484
"cheatsheet",
8585
"hacken",
86-
"statusteam"
86+
"statusteam",
87+
"pubkey",
88+
"multiaddresses",
89+
"peerstore",
90+
"addrs",
91+
"cred",
92+
"Kadmelia",
93+
"storev",
94+
"unsubs",
95+
"Linea",
96+
"upnp",
97+
"dnsaddr",
98+
"multiaddress",
99+
"Kademlia's"
87100
],
88101
"flagWords": [],
89102
"ignorePaths": [

docs/guides/js-waku/configure-discovery.mdx renamed to docs/build/javascript/configure-discovery.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ If you do not set up a bootstrap node or discovery mechanism, your node will not
1313
:::
1414

1515
:::tip
16-
Until [node incentivisation](/learn/research#prevention-of-denial-of-service-dos-and-node-incentivisation) is in place, you should [operate extra nodes](/#run-a-waku-node) alongside the ones provided by the Waku Network. When running a node, we recommend using the [DNS Discovery and Static Peers](#configure-dns-discovery-and-static-peers) configuration to connect to both the Waku Network and your node.
16+
Until [node incentivisation](/learn/research#prevention-of-denial-of-service-dos-and-node-incentivisation) is in place, you should [operate extra nodes](/run-node) alongside the ones provided by the Waku Network. When running a node, we recommend using the [DNS Discovery and Static Peers](#configure-dns-discovery-and-static-peers) configuration to connect to both the Waku Network and your node.
1717
:::
1818

1919
## Default bootstrap method
@@ -81,7 +81,7 @@ await Promise.all(promises);
8181
```
8282

8383
:::tip
84-
For local development using a `nwaku` node, use a `ws` address instead of `wss`. Remember that this setup is functional only when your web server is running locally. You can check how to get multi address of your locally run node in [Find node address](/guides/nwaku/find-node-address).
84+
For local development using a `nwaku` node, use a `ws` address instead of `wss`. Remember that this setup is functional only when your web server is running locally. You can check how to get multi address of your locally run node in [Find node address](/run-node/find-node-address).
8585
:::
8686

8787
## Configure DNS discovery

docs/guides/js-waku/debug-waku-dapp.md renamed to docs/build/javascript/debug-waku-dapp.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
---
22
title: Debug Your Waku DApp and WebSocket
33
hide_table_of_contents: true
4+
displayed_sidebar: build
45
---
56

6-
This guide provides detailed steps to enable and use debug logs to troubleshoot your Waku DApp, whether in a NodeJS or browser environment and check your WebSocket connections in [nwaku](/guides/nwaku/run-node).
7+
This guide provides detailed steps to enable and use debug logs to troubleshoot your Waku DApp, whether in a NodeJS or browser environment and check your WebSocket connections in [nwaku](/run-node/).
78

89
## Enabling debug logs
910

@@ -45,7 +46,7 @@ To view debug logs in your browser's console, modify the local storage and add t
4546

4647
## Checking WebSocket setup
4748

48-
[Nwaku](/guides/nwaku/run-node) provides native support for WebSocket (`ws`) and WebSocket Secure (`wss`) protocols. These are the only [transports](/learn/concepts/transports) supported for connecting to the Waku Network via browsers.
49+
[Nwaku](/run-node/) provides native support for WebSocket (`ws`) and WebSocket Secure (`wss`) protocols. These are the only [transports](/learn/concepts/transports) supported for connecting to the Waku Network via browsers.
4950

5051
It's important to note that browsers impose certain limitations on WebSocket usage:
5152

‎docs/build/javascript/faq.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: JavaScript SDK FAQ
3+
hide_table_of_contents: true
4+
sidebar_label: Frequently Asked Questions
5+
displayed_sidebar: build
6+
---
7+
8+
import { AccordionItem } from '@site/src/components/mdx'
9+
10+
<AccordionItem title="How do I install the @waku/sdk package in my project?">
11+
You can add the JavaScript SDK to your project using NPM, Yarn, or a CDN. Check out the <a href="/build/javascript/#installation">installation guide</a> to get started.
12+
</AccordionItem>
13+
14+
<AccordionItem title="Why should I use Protocol Buffers for my application's message structure when using Waku?">
15+
Protocol Buffers ensure consistent formatting, interoperability, and backward compatibility for your application's messages, with a smaller payload size than JSON. Check out the <a href="/build/javascript/#message-structure">installation guide</a> and <a href="https://protobuf.dev/overview/">Protobuf documentation</a> to learn more.
16+
</AccordionItem>
17+
18+
<AccordionItem title="What are the steps to retrieve historical messages on Waku?">
19+
Check out the <a href="/build/javascript/store-retrieve-messages">Retrieve Messages Using Store Protocol</a> guide to learn how to retrieve and filter historical messages using the <a href="/learn/concepts/protocols#store">Store protocol</a>.
20+
</AccordionItem>
21+
22+
<AccordionItem title="How can I prevent Store peers from storing my messages?">
23+
When <a href="/build/javascript/light-send-receive#choose-a-content-topic">creating your message encoder</a>, you can configure the <strong>ephemeral</strong> option to prevent Store peers from keeping your messages on the Waku Network.
24+
</AccordionItem>
25+
26+
<AccordionItem title="How can I encrypt, decrypt, and sign messages in my Waku application?">
27+
You can encrypt and decrypt your messages using symmetric, ECIES, and noise encryption methods. Check out the <a href="/build/javascript/message-encryption">Encrypt, Decrypt, and Sign Your Messages</a> guide to get started.
28+
</AccordionItem>
29+
30+
<AccordionItem title="How do I integrate Waku into a React application?">
31+
Waku has a specialized SDK designed for building React applications. Check out the <a href="/build/javascript/use-waku-react">Build React DApps Using @waku/react</a> guide for instructions on installation and usage.
32+
</AccordionItem>
33+
34+
<AccordionItem title="How can I bootstrap and discover peers in the Waku Network for browser nodes?">
35+
The JavaScript SDK has a <a href="/build/javascript/configure-discovery#default-bootstrap-method">default bootstrap method</a> that can be configured with <a href="/learn/concepts/static-peers">Static Peers</a> and <a href="/learn/concepts/dns-discovery">DNS Discovery</a>. Check out the <a href="/build/javascript/configure-discovery">Bootstrap Nodes and Discover Peers</a> guide for setting up peer discovery for your node.
36+
</AccordionItem>
37+
38+
<AccordionItem title="How can I integrate Waku into a NodeJS application?">
39+
Though the JavaScript SDK isn't directly usable in NodeJS due to <a href="/build/javascript/run-waku-nodejs">certain limitations</a>, we recommend running <a href="/run-node/run-docker-compose">nwaku in a Docker container</a> and consuming its <a href="https://waku-org.github.io/waku-rest-api/">REST API</a> in a NodeJS application.
40+
</AccordionItem>
41+
42+
<AccordionItem title="How can I debug my Waku DApp and check WebSocket connections?">
43+
Check out the <a href="/build/javascript/debug-waku-dapp">Debug Your Waku DApp and WebSocket</a> guide to discover how to use debug logs to troubleshoot your Waku DApp and resolve connection issues with nwaku WebSockets.
44+
</AccordionItem>
45+
46+
<AccordionItem title="How can I manage unexpected disconnections of my Filter subscription from Waku?">
47+
We recommend regularly pinging peers to check for an active connection and reinitiating the subscription when it disconnects. Check out the <a href="/build/javascript/manage-filter">Manage Your Filter Subscriptions</a> guide for a detailed explanation and step-by-step instructions.
48+
</AccordionItem>
49+
50+
<AccordionItem title="How can I send images and videos on the Waku Network?">
51+
While it's possible to transmit media such as images as bytes on Waku, we recommend uploading your media to a CDN or a file system like <a href="https://ipfs.tech/">IPFS</a> and then sharing the corresponding URL via Waku.
52+
</AccordionItem>
53+
54+
<AccordionItem title="How can I connect to my own node?">
55+
To manually set your own node as a starting point use <a href="/build/javascript/configure-discovery#configure-static-peers">Configure static peers</a>.
56+
</AccordionItem>

‎docs/build/javascript/index.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
title: JavaScript Waku SDK
3+
hide_table_of_contents: true
4+
displayed_sidebar: build
5+
---
6+
7+
:::caution
8+
Currently, the JavaScript Waku SDK (`@waku/sdk`) is **NOT compatible** with React Native. We plan to add support for React Native in the future.
9+
:::
10+
11+
The [JavaScript Waku SDK](https://github.com/waku-org/js-waku) (`@waku/sdk`) provides a TypeScript implementation of the [Waku protocol](/) designed for web browser environments. Developers can seamlessly integrate Waku functionalities into web applications, enabling efficient communication and collaboration among users using the `@waku/sdk` package.
12+
13+
## Video Tutorials
14+
15+
<div class="video-container">
16+
<iframe class="yt-video two-items" src="https://www.youtube.com/embed/PYQaXCxUCwA" title="Waku Tutorial 001: Introduction to Waku" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
17+
18+
<iframe class="yt-video two-items" src="https://www.youtube.com/embed/sfmMcrbiX0c" title="Build a game using Waku Protocol" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
19+
</div>
20+
21+
## Installation
22+
23+
Install the `@waku/sdk` package using your preferred package manager:
24+
25+
```mdx-code-block
26+
import Tabs from '@theme/Tabs';
27+
import TabItem from '@theme/TabItem';
28+
```
29+
30+
<Tabs groupId="package-manager">
31+
<TabItem value="npm" label="NPM">
32+
33+
```shell
34+
npm install @waku/sdk
35+
```
36+
37+
</TabItem>
38+
<TabItem value="yarn" label="Yarn">
39+
40+
```shell
41+
yarn add @waku/sdk
42+
```
43+
44+
</TabItem>
45+
</Tabs>
46+
47+
You can also use the `@waku/sdk` package via a CDN without installing it on your system:
48+
49+
```js
50+
import * as waku from "https://unpkg.com/@waku/sdk@latest/bundle/index.js";
51+
```
52+
53+
## Message structure
54+
55+
We recommend creating a message structure for your application using [Protocol Buffers](https://protobuf.dev/) for the following reasons:
56+
57+
1. **Consistency:** Ensures uniform message format for easy parsing and processing.
58+
2. **Interoperability:** Facilitates effective communication between different parts of your application.
59+
3. **Compatibility:** Allows smooth communication between older and newer app versions.
60+
4. **Payload Size:** Minimizes payload overhead, especially for byte arrays, unlike JSON which adds significant overhead.
61+
62+
To get started, install the `protobufjs` package using your preferred package manager:
63+
64+
<Tabs groupId="package-manager">
65+
<TabItem value="npm" label="NPM">
66+
67+
```shell
68+
npm install protobufjs
69+
```
70+
71+
</TabItem>
72+
<TabItem value="yarn" label="Yarn">
73+
74+
```shell
75+
yarn add protobufjs
76+
```
77+
78+
</TabItem>
79+
</Tabs>
80+
81+
You can also use the `protobufjs` package via a CDN without installing it on your system:
82+
83+
```js
84+
// Import the CDN
85+
import "https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js";
86+
```
87+
88+
```html
89+
<!-- Or include the protobufjs script -->
90+
<script src="https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js"></script>
91+
```
92+
93+
## Getting started
94+
95+
Have a look at the quick start guide and comprehensive tutorials to learn how to build applications using `@waku/sdk`:
96+
97+
| Guide | Description |
98+
|-----------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
99+
| [Send and Receive Messages in a Reliable Channel](/build/javascript/reliable-channels) | Learn how to send and receive messages with a convenient SDK that provide various reliable functionalities out-of-the-box. |
100+
| [Send and Receive Messages Using Light Push and Filter](/build/javascript/light-send-receive) | Learn how to send and receive messages on light nodes using the [Light Push](/learn/concepts/protocols#light-push) and [Filter](/learn/concepts/protocols#filter) protocols |
101+
| [Retrieve Messages Using Store Protocol](/build/javascript/store-retrieve-messages) | Learn how to retrieve and filter historical messages on light nodes using the [Store protocol](/learn/concepts/protocols#store) |
102+
| [Encrypt, Decrypt, and Sign Your Messages](/build/javascript/message-encryption) | Learn how to use the [@waku/message-encryption](https://www.npmjs.com/package/@waku/message-encryption) package to encrypt, decrypt, and sign your messages |
103+
| [Build React DApps Using @waku/react](/build/javascript/use-waku-react) | Learn how to use the [@waku/react](https://www.npmjs.com/package/@waku/react) package seamlessly integrate `@waku/sdk` into a React application |
104+
| [Scaffold DApps Using @waku/create-app](/build/javascript/use-waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `@waku/sdk` project from various example templates |
105+
| [Bootstrap Nodes and Discover Peers](/build/javascript/configure-discovery) | Learn how to bootstrap your node using [Static Peers](/learn/concepts/static-peers) and discover peers using [DNS Discovery](/learn/concepts/dns-discovery) |
106+
| [Run @waku/sdk in a NodeJS Application](/build/javascript/run-waku-nodejs) | Learn our suggested approach for using the `@waku/sdk` package within a NodeJS application |
107+
| [Debug Your Waku DApp and WebSocket](/build/javascript/debug-waku-dapp) | Learn how to troubleshoot your Waku DApp using debug logs and check [WebSocket](/learn/concepts/transports) connections in [nwaku](/run-node/) |
108+
| [Manage Your Filter Subscriptions](/build/javascript/manage-filter) | Learn how to manage [filter subscriptions](/learn/concepts/protocols#filter) and handle node disconnections in your application |
109+
110+
:::tip
111+
Until [node incentivisation](/learn/research#prevention-of-denial-of-service-dos-and-node-incentivisation) is in place, you should [operate extra nodes](/run-node/) alongside the ones provided by the Waku Network. When running a node, we recommend using the [DNS Discovery and Static Peers](/build/javascript/configure-discovery#configure-dns-discovery-and-static-peers) configuration to connect to both the Waku Network and your node.
112+
:::
113+
114+
## Get help and report issues
115+
116+
To engage in general discussions, seek assistance, or stay updated with the latest news, visit the `#support` and `#js-waku-contribute` channels on the [Waku Discord](https://discord.waku.org).
117+
118+
If you discover bugs or want to suggest new features, do not hesitate to [open an issue](https://github.com/waku-org/js-waku/issues/new/) in the [js-waku repository](https://github.com/waku-org/js-waku). Your feedback and contributions are highly valued and will help improve the `@waku/sdk` package.

docs/guides/js-waku/light-send-receive.md renamed to docs/build/javascript/light-send-receive.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
---
22
title: Send and Receive Messages Using Light Push and Filter
33
hide_table_of_contents: true
4+
displayed_sidebar: build
45
---
56

6-
This guide provides detailed steps to start using the `@waku/sdk` package by setting up a [Light Node](/learn/glossary#light-node) to send messages using the [Light Push protocol](/learn/concepts/protocols#light-push), and receive messages using the [Filter protocol](/learn/concepts/protocols#filter). Have a look at the [installation guide](/guides/js-waku/#installation) for steps on adding `@waku/sdk` to your project.
7+
This guide provides detailed steps to start using the `@waku/sdk` package by setting up a [Light Node](/learn/glossary#light-node) to send messages using the [Light Push protocol](/learn/concepts/protocols#light-push), and receive messages using the [Filter protocol](/learn/concepts/protocols#filter). Have a look at the [installation guide](/build/javascript/#installation) for steps on adding `@waku/sdk` to your project.
78

89
## Create a light node
910

@@ -21,7 +22,7 @@ await node.start();
2122
```
2223

2324
:::info
24-
When the `defaultBootstrap` parameter is set to `true`, your node will be bootstrapped using the [default bootstrap method](/guides/js-waku/configure-discovery#default-bootstrap-method). Have a look at the [Bootstrap Nodes and Discover Peers](/guides/js-waku/configure-discovery) guide to learn more methods to bootstrap nodes.
25+
When the `defaultBootstrap` parameter is set to `true`, your node will be bootstrapped using the [default bootstrap method](/build/javascript/configure-discovery#default-bootstrap-method). Have a look at the [Bootstrap Nodes and Discover Peers](/build/javascript/configure-discovery) guide to learn more methods to bootstrap nodes.
2526
:::
2627

2728
A node needs to know how to route messages. By default, it will use The Waku Network configuration (`{ clusterId: 1, shards: [0,1,2,3,4,5,6,7] }`). For most applications, it's recommended to use autosharding:
@@ -85,7 +86,7 @@ const encoder = createEncoder({ contentTopic });
8586
const decoder = createDecoder(contentTopic);
8687
```
8788

88-
The `ephemeral` parameter allows you to specify whether messages should **NOT** be stored by [Store peers](/guides/js-waku/store-retrieve-messages):
89+
The `ephemeral` parameter allows you to specify whether messages should **NOT** be stored by [Store peers](/build/javascript/store-retrieve-messages):
8990

9091
```js
9192
const encoder = createEncoder({
@@ -127,7 +128,7 @@ const DataPacket = new protobuf.Type("DataPacket")
127128
```
128129

129130
:::info
130-
Have a look at the [Protobuf installation](/guides/js-waku/#message-structure) guide for adding the `protobufjs` package to your project.
131+
Have a look at the [Protobuf installation](/build/javascript/#message-structure) guide for adding the `protobufjs` package to your project.
131132
:::
132133

133134
## Send messages using light push

docs/guides/js-waku/manage-filter.md renamed to docs/build/javascript/manage-filter.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
---
22
title: Manage Your Filter Subscriptions
33
hide_table_of_contents: true
4+
displayed_sidebar: build
45
---
56

6-
This guide provides detailed steps to manage [Filter](/learn/concepts/protocols#filter) subscriptions and handle node disconnections in your application. Have a look at the [Send and Receive Messages Using Light Push and Filter](/guides/js-waku/light-send-receive) guide for using the `Light Push` and `Filter` protocols.
7+
This guide provides detailed steps to manage [Filter](/learn/concepts/protocols#filter) subscriptions and handle node disconnections in your application. Have a look at the [Send and Receive Messages Using Light Push and Filter](/build/javascript/light-send-receive) guide for using the `Light Push` and `Filter` protocols.
78

89
## Overview
910

docs/guides/js-waku/message-encryption.mdx renamed to docs/build/javascript/message-encryption.mdx

File renamed without changes.

0 commit comments

Comments
 (0)