YNU-168: introduce a dark theme and update docs

docs/manuals/running-clearnode-locally.md

@@ -28,12 +28,12 @@ CLEARNODE_LOG_LEVEL=info
 BROKER_PRIVATE_KEY=0xac0974bec38a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
 
 # Networks Configuration
-POLYGON_INFURA_URL=wss://polygon-mainnet.infura.io/ws/v3/your-api-key
+POLYGON_BLOCKCHAIN_RPC=wss://polygon-mainnet.infura.io/ws/v3/your-api-key
 POLYGON_CUSTODY_CONTRACT_ADDRESS=0x490fb189DdE3a01B00be9BA5F41e3447FbC838b6
 POLYGON_ADJUDICATOR_ADDRESS=0xcbbc03a873c11beeFA8D99477E830be48d8Ae6D7
 POLYGON_BALANCE_CHECKER_ADDRESS=0x2352c63A83f9Fd126af8676146721Fa00924d7e4
 
-# BASE_INFURA_URL=...
+# BASE_BLOCKCHAIN_RPC=...
 # BASE_CUSTODY_CONTRACT_ADDRESS=...
 # BASE_ADJUDICATOR_ADDRESS=...
 # BASE_BALANCE_CHECKER_ADDRESS=...
@@ -91,15 +91,15 @@ Clearnode supports the following mainnet networks, which can be configured by ad
 
 | Network          | Chain ID | Environment Variable Prefix |
 | ---------------- | -------- | --------------------------- |
-| ETH_MAINNET      | 1        | `ETH_MAINNET_`              |
+| ETHEREUM         | 1        | `ETHEREUM_`                 |
 | ROOTSTOCK        | 30       | `ROOTSTOCK_`                |
 | POLYGON          | 137      | `POLYGON_`                  |
 | WORLD_CHAIN      | 480      | `WORLD_CHAIN_`              |
 | FLOW             | 747      | `FLOW_`                     |
 | BASE             | 8453     | `BASE_`                     |
 | CELO             | 42220    | `CELO_`                     |
-| LINEA_MAINNET    | 59144    | `LINEA_MAINNET_`            |
-| XRPL_EVM_MAINNET | 1440000  | `XRPL_EVM_MAINNET_`         |
+| LINEA            | 59144    | `LINEA_`                    |
+| XRPL_EVM         | 1440000  | `XRPL_EVM_`                 |
 
 And it supports the following testnet networks:
 
@@ -109,21 +109,21 @@ And it supports the following testnet networks:
 | POLYGON_AMOY     | 80002    | `POLYGON_AMOY_`             |
 | BASE_SEPOLIA     | 84532    | `BASE_SEPOLIA_`             |
 | XRPL_EVM_TESTNET | 1449000  | `XRPL_EVM_TESTNET_`         |
-| ETH_SEPOLIA      | 11155111 | `ETH_SEPOLIA_`              |
+| ETHEREUM_SEPOLIA      | 11155111 | `ETHEREUM_SEPOLIA_`              |
 | LOCALNET         | 1337     | `LOCALNET_`                 |
 | ANVIL            | 31337    | `ANVIL_`                    |
 
 For each network, you can configure:
 
-- `{NETWORK}_INFURA_URL` or similar RPC endpoint
+- `{NETWORK}_BLOCKCHAIN_RPC` or similar RPC endpoint
 - `{NETWORK}_CUSTODY_CONTRACT_ADDRESS`
 - `{NETWORK}_ADJUDICATOR_ADDRESS`
 - `{NETWORK}_BALANCE_CHECKER_ADDRESS`
 
 ### Configuration Notes
 
 - **BROKER_PRIVATE_KEY**: Default private key for local development (never use in production)
-- **POLYGON_INFURA_URL**: Replace `your-api-key` with your actual Infura API key
+- **POLYGON_BLOCKCHAIN_RPC**: Replace `your-api-key` with your Infura API key or use another RPC provider
 - **Database Configuration**: Default PostgreSQL configuration for local development
 - **Token Configuration**: Pre-configured with USDC and WETH tokens on Polygon
 
@@ -140,7 +140,7 @@ The Docker Compose setup typically includes:
 
 1. **Port Conflicts**: If you encounter port conflicts, check which services are running on the same ports and either stop them or modify the ports in docker-compose.yml
 
-2. **Infura API Key**: Make sure to replace the placeholder Infura API key with a valid one
+2. **Blockchain RPC**: Make sure to add Blockchain RPC URLs for your chains.
 
 ### Useful Commands
 

docusaurus.config.ts

@@ -50,6 +50,7 @@ const config: Config = {
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          sidebarCollapsed: false,
         },
         blog: false,
         theme: {
@@ -78,13 +79,15 @@ const config: Config = {
     image: 'img/docusaurus-social-card.jpg',
     colorMode: {
       defaultMode: 'light',
-      disableSwitch: true,
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
     },
     navbar: {
       title: '',
       logo: {
         alt: 'Yellow Network',
-        src: 'img/logo.svg',
+        src: 'img/themes/light/logo.svg',
+        srcDark: 'img/themes/dark/logo.svg',
       },
       items: [
         {
@@ -119,8 +122,9 @@ const config: Config = {
         },
         {
           href: 'https://github.com/layer-3',
-          label: 'GitHub',
           position: 'right',
+          className: 'header-github-link',
+          'aria-label': 'GitHub repository',
         },
       ],
     },
@@ -132,7 +136,8 @@ const config: Config = {
           items: [
             {
               html: `
-                <img src="img/logo.svg" alt="Yellow Network" style="width: 80px; margin-bottom: 20px; margin-left: 0;" />
+                <img src="img/themes/light/logo.svg" alt="Yellow Network" style="width: 80px; margin-bottom: 20px; margin-left: 0;" class="footer-logo-light" />
+                <img src="img/themes/dark/logo.svg" alt="Yellow Network" style="width: 80px; margin-bottom: 20px; margin-left: 0; display: none;" class="footer-logo-dark" />
               `,
             },
           ],

sidebars.ts

@@ -13,26 +13,86 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  Create as many sidebars as you want.
  */
 const sidebars: SidebarsConfig = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
+  // Learn section sidebar
   tutorialSidebar: [
+    'learn/index',
     {
-      type: 'autogenerated', 
-      dirName: '.',
-    }
+      type: 'category',
+      label: 'Introduction',
+      collapsible: true,
+      collapsed: false,
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: 'learn/introduction',
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Beginner',
+      collapsible: true,
+      collapsed: false,
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: 'learn/beginner',
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Advanced',
+      collapsible: true,
+      collapsed: false,
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: 'learn/advanced',
+        },
+      ],
+    },
   ],
 
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
+  // Build section sidebar
+  buildSidebar: [
     {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
+      type: 'autogenerated',
+      dirName: 'build',
+    },
+  ],
+
+  // Manuals section sidebar
+  manualsSidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'manuals',
+    },
+  ],
+
+  // Tutorials section sidebar
+  tutorialsSidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'tutorials',
+    },
+  ],
+
+  // API Reference sidebar
+  apiSidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'api-reference',
+    },
+  ],
+
+  // Legacy sidebar
+  legacySidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'legacy',
     },
   ],
-   */
 };
 
 export default sidebars;

src/components/HomepageFeatures/index.tsx

@@ -2,11 +2,14 @@ import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useColorMode} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
   imageSrc: string;
+  imageSrcDark: string;
   description: ReactNode;
   link: string;
   isExternal?: boolean;
@@ -15,7 +18,8 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
     title: 'Learn the Basics',
-    imageSrc: require('@site/static/img/icons/learn.png').default,
+    imageSrc: require('@site/static/img/themes/light/icons/learn.png').default,
+    imageSrcDark: require('@site/static/img/themes/dark/icons/learn.png').default,
     description: (
       <>
         Understand the fundamentals of Yellow Network, its architecture,
@@ -26,7 +30,8 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Build a Yellow App',
-    imageSrc: require('@site/static/img/icons/build.png').default,
+    imageSrc: require('@site/static/img/themes/light/icons/build.png').default,
+    imageSrcDark: require('@site/static/img/themes/dark/icons/build.png').default,
     description: (
       <>
         Create decentralized applications using Yellow SDK with real-time
@@ -37,7 +42,8 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Run a Clearnode',
-    imageSrc: require('@site/static/img/icons/clearnode.png').default,
+    imageSrc: require('@site/static/img/themes/light/icons/clearnode.png').default,
+    imageSrcDark: require('@site/static/img/themes/dark/icons/clearnode.png').default,
     description: (
       <>
         Set up and operate a clearnode to participate in the network,
@@ -48,7 +54,8 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Join the Community',
-    imageSrc: require('@site/static/img/icons/community.png').default,
+    imageSrc: require('@site/static/img/themes/light/icons/community.png').default,
+    imageSrcDark: require('@site/static/img/themes/dark/icons/community.png').default,
     description: (
       <>
         Connect with developers, traders, and node operators in our
@@ -60,7 +67,8 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Apply for Grants',
-    imageSrc: require('@site/static/img/icons/grants.png').default,
+    imageSrc: require('@site/static/img/themes/light/icons/grants.png').default,
+    imageSrcDark: require('@site/static/img/themes/dark/icons/grants.png').default,
     description: (
       <>
         Get funding support for your Yellow Network project through
@@ -72,7 +80,10 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function Feature({title, imageSrc, description, link, isExternal}: FeatureItem) {
+function Feature({title, imageSrc, imageSrcDark, description, link, isExternal}: FeatureItem) {
+  const {colorMode} = useColorMode();
+  const currentImageSrc = colorMode === 'dark' ? imageSrcDark : imageSrc;
+
   const linkProps = isExternal 
     ? { href: link, target: '_blank', rel: 'noopener noreferrer' }
     : { to: link };
@@ -85,7 +96,7 @@ function Feature({title, imageSrc, description, link, isExternal}: FeatureItem)
       >
         <div className={styles.featureContent}>
           <div className={styles.featureSquare}>
-            <img src={imageSrc} alt={title} className={styles.featureIcon} />
+            <img src={currentImageSrc} alt={title} className={styles.featureIcon} />
           </div>
           <Heading as="h3" className={styles.featureTitle}>{title}</Heading>
           <p className={styles.featureDescription}>{description}</p>