From baf66776511bebb5a53958c177f79b201dc6de0f Mon Sep 17 00:00:00 2001 From: NoahMaizels Date: Tue, 26 Aug 2025 16:17:24 +0700 Subject: [PATCH 1/3] getting started page and template app revisions --- docs/documentation/getting-started.md | 228 +++++++++++++++++++++++--- static/img/develop-on-swarm-00.jpg | Bin 0 -> 28924 bytes static/img/develop-on-swarm-01.jpg | Bin 0 -> 109618 bytes static/img/develop-on-swarm-02.jpg | Bin 0 -> 92955 bytes 4 files changed, 208 insertions(+), 20 deletions(-) create mode 100644 static/img/develop-on-swarm-00.jpg create mode 100644 static/img/develop-on-swarm-01.jpg create mode 100644 static/img/develop-on-swarm-02.jpg diff --git a/docs/documentation/getting-started.md b/docs/documentation/getting-started.md index 4ce2fa2a..6e56afac 100644 --- a/docs/documentation/getting-started.md +++ b/docs/documentation/getting-started.md @@ -8,7 +8,6 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' - ## About *bee-js* `bee-js` simplifies development on Swarm by abstracting away many of finer details and quirks of the Bee API so that you can focus on building your dream DAPP with minimal hassle. It's the easiest way to get started developing on Swarm. @@ -46,9 +45,11 @@ yarn add @ethersphere/bee-js --save -After that you need to import the Bee class and create a bee instance connecting to your Bee node (here we assume it runs on localhost on default port). +After that you need to import the `Bee` class and initialize an instance of it using our Bee node's API endpoint (here we assume it runs on localhost on the default port). -Be aware, if you will pass invalid URL the constructor will throw an exception! +:::info Run your own Bee node +You can find out more about setting up a Bee node and getting your node's API endpoint in the [Bee docs](https://docs.ethswarm.org/docs/installation/quick-start) +::: ```js import { Bee } from "@ethersphere/bee-js" @@ -58,10 +59,6 @@ const bee = new Bee('http://localhost:1633') That’s it! now you can use the `bee` object. -:::info Run your own Bee node -You can find out more about running Bee node in the [Bee docs](https://docs.ethswarm.org/docs/installation/quick-start) -::: - :::tip Using ` ``` -::: + ## Quickstart with *create-swarm-app* From cdaed08a279d9e686356c55868b39a0b1884c07a Mon Sep 17 00:00:00 2001 From: NoahMaizels Date: Tue, 2 Sep 2025 20:13:26 +0700 Subject: [PATCH 3/3] add swarm-cli optionally to prereqs and add css to make links in admonitions more noticable --- docs/documentation/getting-started.md | 16 +++---- src/css/custom.css | 69 +++++++++++++++++++++++++-- 2 files changed, 74 insertions(+), 11 deletions(-) diff --git a/docs/documentation/getting-started.md b/docs/documentation/getting-started.md index 1f868676..cc633c4f 100644 --- a/docs/documentation/getting-started.md +++ b/docs/documentation/getting-started.md @@ -24,6 +24,7 @@ On this page you will learn how to install `bee-js` and connect it with your exi - **Linux or macOS:** A Unix based operating system is preferred. Windows is supported with some small exceptions. For a smoother experience, Windows users can use [WSL](https://learn.microsoft.com/en-us/windows/wsl/install) - **Node.js (v18 or higher)** - [Get Node.js](https://nodejs.org/) - **npm (Node Package Manager)** - [Get npm](https://docs.npmjs.com/) +- **`swarm-cli`** (optional cli tool for command line node management) - [Get `swarm-cli`](https://github.com/ethersphere/swarm-cli/blob/master/README.md) :::tip Node.js and npm are not required if you choose to import `bee-js` directly as a script from [unpkg.com](https://unpkg.com/@ethersphere/bee-js/dist/index.browser.min.js). @@ -86,8 +87,6 @@ under global namespace `BeeJs`: ``` - - ## Quickstart with *create-swarm-app* The `create-swarm-app` tool generates ready‑to‑run skeletons for `bee-js` projects in your chosen setup (CommonJS, ESM, TypeScript, or Vite + TypeScript) with a single command. @@ -301,7 +300,13 @@ After selecting a file to upload, a reference hash to the file will be returned: ![](/img/develop-on-swarm-02.jpg) -Currently our application is running on localhost, and is only accessible locally. To make this application accessible for anyone on Swarm, all we need to do create a production build of our application using `vite build` and then upload it to the Swarm with `swarm-cli`. +#### Using `swarm-cli` to Host on Swarm (optional) + +:::tip +Learn more about [hosting websites on Swarm](http://docs.ethswarm.org/docs/develop/access-the-swarm/host-your-website) in the official bee-docs. +::: + +Currently our application is running on localhost, and is only accessible locally. To make this application accessible for anyone on Swarm, all we need to do create a production build of our application using `vite build` and then upload it to the Swarm with `swarm-cli`. ```bash npm run build @@ -332,8 +337,3 @@ The URL returned in the terminal can now be shared and accessed by anyone with a http://localhost:1633/bzz/764b08bb0f9e82d4bdce951b1ded816bd0417e039828e4308d61ab3035ff60a2/ ``` -## Next Steps - -As a next step, you may wish to look into [connecting your site to an ENS domain](https://docs.ethswarm.org/docs/develop/access-the-swarm/host-your-website/#enable-ens-on-your-node) so that it is accessible from a human-readable address. - -You may also want to start exploring more the [example applications section (PLACEHOLDER)](#) along with the accompanying step-by-step guides to deepen your understanding of what's possible on Swarm. \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index a80cd3f5..39d04fba 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -206,7 +206,70 @@ article header h1, color: #FFAE42; /* Matches your hover color */ } -/* Ensure info icon is visible in light mode */ -.alert--info .admonitionIcon_Rf37 svg path { - fill: #FFF8DC !important; + +[data-theme='dark'] .theme-admonition-note { + background-color: #465158; + border-color: #C1C9CF; +} + +[data-theme='dark'] .theme-admonition-tip { + background-color: #0F6648; + border-color: #00DAA1; +} + +[data-theme='dark'] .theme-admonition-info { + background-color: #264C6E; + border-color: #007FFF; +} + +[data-theme='dark'] .theme-admonition-caution { + background-color: #784213; + border-color: #F37300; } + +[data-theme='dark'] .theme-admonition-danger { + background-color: #791112; + border-color: #F30000; +} + + +[data-theme='light'] .theme-admonition-note { + background-color: #E5E9EC; + border-color: #C1C9CF; +} + +[data-theme='light'] .theme-admonition-tip { + background-color: #E0FFF4; + border-color: #00DAA1; +} + +[data-theme='light'] .theme-admonition-info { + background-color: #E2F1FF; + border-color: #007FFF; +} + +[data-theme='light'] .theme-admonition-caution { + background-color: #FDE9D7; + border-color: #F37300; +} + +[data-theme='light'] .theme-admonition-danger { + background-color: #FECDCD; + border-color: #F30000; +} + +/* Style links inside admonitions */ +.theme-admonition a { + font-weight: 600; /* slightly bold, not as heavy as 700 */ + text-decoration: none; /* remove default underline */ + border-bottom: 2px solid currentColor; /* underline effect using border */ + padding-bottom: 1px; /* spacing so border doesn’t touch text */ +} + +/* Hover/focus state for better interactivity */ +.theme-admonition a:hover, +.theme-admonition a:focus { + color: var(--ifm-color-primary); /* matches your orange accent */ + border-bottom-color: var(--ifm-color-primary); +} +