Website/frontend: add section for each component

.github/workflows/test-docs-scripts-frontend.yaml

@@ -0,0 +1,106 @@
+name: Test Documentation Scripts - Frontend
+
+# Test locally with:
+# ```bash
+# # Ubuntu 22.04 (recommended)
+# gh extension exec act \
+#   --workflows .github/workflows/test-docs-scripts-frontend.yaml \
+#   --matrix os:ubuntu-22.04
+#
+# # Ubuntu 24.04 (requires platform mapping)
+# gh extension exec act \
+#   --workflows .github/workflows/test-docs-scripts-frontend.yaml \
+#   --matrix os:ubuntu-24.04 \
+#   -P ubuntu-24.04=catthehacker/ubuntu:act-24.04
+# ```
+
+on:
+  push:
+
+jobs:
+  test-frontend-scripts:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-22.04, ubuntu-24.04, macos-latest]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Make scripts executable
+        run: |
+          chmod +x website/docs/developers/scripts/frontend/*.sh
+
+      - name: Install Node.js on Linux
+        if: runner.os == 'Linux'
+        run: |
+          bash website/docs/developers/scripts/frontend/install-nodejs-linux.sh
+          # Set up nvm environment for future steps
+          echo "NVM_DIR=$HOME/.nvm" >> $GITHUB_ENV
+
+      - name: Install Node.js on macOS
+        if: runner.os == 'macOS'
+        run: |
+          bash website/docs/developers/scripts/frontend/install-nodejs-macos.sh
+
+      - name: Install Angular CLI using documentation script
+        run: |
+          # Source nvm if available (Linux)
+          if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
+            \. "$NVM_DIR/nvm.sh"
+          fi
+          bash website/docs/developers/scripts/frontend/install-angular-cli.sh
+
+      - name: Install gtimeout on macOS
+        if: runner.os == 'macOS'
+        run: |
+          brew install coreutils
+          # Create symlink for timeout command
+          sudo ln -sf /usr/local/bin/gtimeout /usr/local/bin/timeout
+
+      - name: Test install dependencies script
+        run: |
+          # Source nvm if available (Linux)
+          if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
+            \. "$NVM_DIR/nvm.sh"
+          fi
+          bash website/docs/developers/scripts/frontend/install-dependencies.sh
+
+      - name: Test build development script
+        run: |
+          # Source nvm if available (Linux)
+          if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
+            \. "$NVM_DIR/nvm.sh"
+          fi
+          bash website/docs/developers/scripts/frontend/build-development.sh
+
+      - name: Test build production script
+        run: |
+          # Source nvm if available (Linux)
+          if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
+            \. "$NVM_DIR/nvm.sh"
+          fi
+          bash website/docs/developers/scripts/frontend/build-production.sh
+
+      - name: Test format code script
+        run: |
+          # Source nvm if available (Linux)
+          if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
+            \. "$NVM_DIR/nvm.sh"
+          fi
+          bash website/docs/developers/scripts/frontend/format-code.sh
+
+      - name: Prepare for Cypress tests (Ubuntu 22.04)
+        if: matrix.os == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
+            libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
+      - name: Prepare for Cypress tests (Ubuntu 24.04)
+        if: matrix.os == 'ubuntu-24.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
+            libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb

Makefile

@@ -224,6 +224,7 @@ lint-bash: ## Check all shell scripts using shellcheck
 		-not -path "*/target/*" \
 		-not -path "*/node_modules/*" \
 		-not -path "*/website/docs/developers/scripts/setup/*" \
+		-not -path "*/website/docs/developers/scripts/frontend/*" \
 		-print0 | xargs -0 shellcheck
 	@echo "Shellcheck completed successfully!"
 

frontend/Makefile

@@ -66,6 +66,14 @@ deploy: ## Deploy the application
 
 .PHONY: deploy-leaderboard
 deploy-leaderboard: ## Deploy the leaderboard application
+	$(MAKE) prebuild
+	$(MAKE) build-prod
+	cp dist/frontend/browser/assets/environments/leaderboard.js \
+		dist/frontend/browser/assets/environments/env.js
+	firebase deploy
+
+.PHONY: deploy-leaderboard-sentry
+deploy-leaderboard-sentry: ## Deploy the leaderboard application with Sentry sourcemaps
 	$(MAKE) prebuild
 	$(MAKE) build-prod-sentry
 	cp dist/frontend/browser/assets/environments/leaderboard.js \

frontend/README.md

@@ -1,79 +1,14 @@
 # Openmina Frontend
 
-This is a simple Angular application that will help you to see the behaviour of
-your local rust based mina node.
+The frontend documentation has been moved to the main project website.
 
-## Prerequisites
+Please see: [Frontend Documentation](../website/docs/developers/frontend.mdx)
 
-### 1. Node.js v23.1.0
-
-#### MacOS
-
-```bash
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-brew install [email protected]
-```
-
-#### Linux
-
-```bash
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
-source ~/.bashrc
-nvm install 23.1.0
-```
-
-#### Windows
-
-Download [Node.js v23.1.0](https://nodejs.org/) from the official website, open
-the installer and follow the prompts to complete the installation.
-
-### 2. Angular CLI v19.2.14
-
-```bash
-npm install -g @angular/[email protected]
-```
-
-### 3. Installation
-
-Open a terminal and navigate to this project's root directory
-
-```bash
-cd PROJECT_LOCATION/openmina/frontend
-```
-
-Install the dependencies
-
-```bash
-npm install
-```
-
-## Run the application
-
-```bash
-npm start
-```
-
-# Using O1JS wrapper
-
-as of now, o1js is not prepared to work with Angular, therefore we need to use
-the wrapper that is provided in the `src/assets/o1js` folder. This wrapper is a
-simple javascript webpack based application that will allow us to use the o1js
-library in our Angular application.
-
-How to use it:
-
-1. Open a terminal and navigate to the `src/assets/o1js` folder
-2. Install the dependencies
-
-```bash
-npm install
-```
-
-3. Build the wrapper
+To view the documentation locally:
 
 ```bash
-npm run build-o1jswrapper
+cd ../website
+make docs-serve
 ```
 
-4. That's it. Now you can use your code from o1js-wrapper inside the Angular
-   application by using `BenchmarksWalletsZkService => o1jsInterface`
+Then navigate to http://localhost:3000/docs/developers/frontend

website/docs/developers/frontend/index.mdx

@@ -0,0 +1,86 @@
+---
+title: Frontend Applications
+description: Web-based interfaces for the Mina Rust node ecosystem
+sidebar_position: 1
+---
+
+import CodeBlock from "@theme/CodeBlock";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import InstallNodejsLinux from "!!raw-loader!../scripts/frontend/install-nodejs-linux.sh";
+import InstallNodejsMacos from "!!raw-loader!../scripts/frontend/install-nodejs-macos.sh";
+import InstallAngularCli from "!!raw-loader!../scripts/frontend/install-angular-cli.sh";
+
+# Frontend Applications
+
+The Mina Rust node ecosystem includes several web-based frontend applications,
+each serving a specific purpose in the network.
+
+## Components
+
+### [Node Dashboard](./node-dashboard)
+
+A comprehensive web interface for monitoring and interacting with your Mina Rust
+node. View real-time blockchain state, network activity, and node metrics
+through an intuitive dashboard.
+
+### [Leaderboard](./leaderboard)
+
+Track community participation in testnets with a competitive leaderboard system.
+Previously used to monitor and rank testnet participants based on their
+contributions to network stability and block production.
+
+### [WebNode](./webnode)
+
+Run a Mina node directly in your web browser using WebAssembly. This
+experimental feature enables block production without installing native
+software, pushing the boundaries of decentralized infrastructure.
+
+## Prerequisites
+
+All frontend applications are built with Angular and require Node.js to be
+installed.
+
+<!-- prettier-ignore-start -->
+
+:::info Platform Compatibility
+
+These instructions are tested and compatible with:
+
+- **Ubuntu**: 22.04, 24.04
+- **macOS**: macOS-13, macOS-14, macOS-latest
+
+:::
+
+<!-- prettier-ignore-stop -->
+
+### Install Node.js
+
+<Tabs groupId="operating-systems">
+<TabItem value="linux" label="Linux">
+
+<CodeBlock language="bash" title="scripts/frontend/install-nodejs-linux.sh">
+  {InstallNodejsLinux}
+</CodeBlock>
+
+</TabItem>
+<TabItem value="macos" label="macOS">
+
+<CodeBlock language="bash" title="scripts/frontend/install-nodejs-macos.sh">
+  {InstallNodejsMacos}
+</CodeBlock>
+
+</TabItem>
+</Tabs>
+
+### Install Angular CLI
+
+<CodeBlock language="bash" title="scripts/frontend/install-angular-cli.sh">
+  {InstallAngularCli}
+</CodeBlock>
+
+## Next Steps
+
+With Node.js and Angular CLI installed, you're ready to build and run any of the
+frontend applications. Select a component above to learn about its specific
+features and configuration.

website/docs/developers/frontend/leaderboard.mdx

@@ -0,0 +1,84 @@
+---
+title: Leaderboard
+description: Community participation tracking for Mina Rust node testnets
+sidebar_position: 3
+---
+
+import CodeBlock from "@theme/CodeBlock";
+
+# Leaderboard
+
+The Leaderboard is a specialized frontend application designed to track and rank
+community participation in Mina Rust node testnets. It provides real-time
+visibility into testnet contributions, encouraging healthy competition among
+participants.
+
+## Overview
+
+The Leaderboard system was developed to monitor testnet participation metrics
+and provide transparent rankings of community members based on their
+contributions to network stability, block production, and overall testnet
+health.
+
+## Configuration
+
+### Building for Leaderboard
+
+Build the Leaderboard-specific version:
+
+```bash
+cd frontend
+
+# Build with leaderboard configuration
+make build-prod
+
+# Copy leaderboard environment
+cp dist/frontend/browser/assets/environments/leaderboard.js \
+   dist/frontend/browser/assets/environments/env.js
+```
+
+## Deployment
+
+### Firebase Deployment
+
+<!-- prettier-ignore-start -->
+
+:::caution Outdated Configuration
+
+The Firebase deployment configuration may be outdated. Please verify the current
+deployment targets and update the configuration as needed before deploying to
+production.
+
+:::
+
+<!-- prettier-ignore-stop -->
+
+Deploy the Leaderboard to Firebase hosting:
+
+```bash
+# Deploy leaderboard variant
+make deploy-leaderboard
+```
+
+This command will:
+
+1. Run prebuild to update version
+2. Build production assets with Sentry integration
+3. Configure leaderboard-specific environment
+4. Deploy to Firebase hosting
+
+### Standalone Deployment
+
+For custom hosting solutions:
+
+```bash
+# Build the application
+make build-prod
+
+# Configure for leaderboard
+cp dist/frontend/browser/assets/environments/leaderboard.js \
+   dist/frontend/browser/assets/environments/env.js
+
+# Serve the static files
+npx http-server dist/frontend/browser -p 8080
+```