From 337ebee510f76e224c6dda055ea9aa1824b77a5f Mon Sep 17 00:00:00 2001 From: Dorian Date: Tue, 3 Feb 2026 21:43:33 +0000 Subject: [PATCH] Revise BUILD-GUIDE and enhance ISO build process - Updated BUILD-GUIDE.md to streamline instructions for building the Archipelago Auto-Installer ISO, including prerequisites and post-installation steps. - Added detailed sections on capturing the live server state and building from source. - Enhanced Docker and Podman integration in build scripts for improved backend and web UI capture. - Introduced new app metadata for "IndeedHub" in the Docker package scanner and updated UI components for better installation progress tracking. - Improved styling and functionality in the Bitcoin UI for a more cohesive user experience. --- .cursor/rules/UI-STANDARDS.md | 355 +++++++++++ BUILD-GUIDE.md | 357 +++-------- DEPLOYMENT.md | 417 ++++++++++++ apps/indeedhub/manifest.yml | 71 +++ .../src/container/docker_packages.rs | 10 + core/container/src/podman_client.rs | 10 +- deploy-frontend.exp | 6 + deploy-indeedhub-full.sh | 35 + docker/bitcoin-ui/Dockerfile | 19 + docker/bitcoin-ui/bg-network.jpg | Bin 0 -> 634948 bytes docker/bitcoin-ui/bitcoin-knots.webp | Bin 0 -> 13940 bytes docker/bitcoin-ui/index.html | 600 ++++++++++++++---- docker/bitcoin-ui/nginx.conf | 28 + docs/BETA-RELEASE-CHECKLIST.md | 188 ++++++ docs/BITCOIN-KNOTS-BETA.md | 268 ++++++++ image-recipe/BUILD-ISO-STATUS.md | 86 +++ image-recipe/build-auto-installer-iso.sh | 156 +++-- .../public/assets/img/app-icons/indeedhub.png | Bin 0 -> 90431 bytes .../public/assets/img/app-icons/indeedhub.svg | 95 +++ neode-ui/src/utils/dummyApps.ts | 36 ++ neode-ui/src/views/Marketplace.vue | 269 ++++++-- scripts/deploy-bitcoin-knots.sh | 122 ++++ 22 files changed, 2619 insertions(+), 509 deletions(-) create mode 100644 .cursor/rules/UI-STANDARDS.md create mode 100644 DEPLOYMENT.md create mode 100644 apps/indeedhub/manifest.yml create mode 100755 deploy-frontend.exp create mode 100755 deploy-indeedhub-full.sh create mode 100644 docker/bitcoin-ui/Dockerfile create mode 100644 docker/bitcoin-ui/bg-network.jpg create mode 100644 docker/bitcoin-ui/bitcoin-knots.webp create mode 100644 docker/bitcoin-ui/nginx.conf create mode 100644 docs/BETA-RELEASE-CHECKLIST.md create mode 100644 docs/BITCOIN-KNOTS-BETA.md create mode 100644 image-recipe/BUILD-ISO-STATUS.md create mode 100644 neode-ui/public/assets/img/app-icons/indeedhub.png create mode 100644 neode-ui/public/assets/img/app-icons/indeedhub.svg create mode 100644 scripts/deploy-bitcoin-knots.sh diff --git a/.cursor/rules/UI-STANDARDS.md b/.cursor/rules/UI-STANDARDS.md new file mode 100644 index 00000000..44bc5f2b --- /dev/null +++ b/.cursor/rules/UI-STANDARDS.md @@ -0,0 +1,355 @@ +# Archipelago UI Standards & Coding Rules + +## Core Design System + +Archipelago uses a **glassmorphism-based design system** with dark backgrounds, subtle transparency, and elegant blur effects. All UI components should follow these established patterns. + +--- + +## Standard Interactive Card: `.path-option-card` + +**This is our PRIMARY interactive card component.** Use this pattern for all selectable/clickable card containers. + +### Base Styles +```css +.path-option-card { + position: relative; + background: rgba(0, 0, 0, 0.60); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.45), + inset 0 1px 0 rgba(255, 255, 255, 0.22); + border-radius: 16px; + padding: 12px 10px; + transition: all 0.3s ease; + cursor: pointer; + border: none; +} +``` + +### Gradient Border Effect (Default - Subtle) +```css +.path-option-card::before { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 2px; + background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent); + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; +} +``` + +### Hover State +```css +.path-option-card:hover { + transform: translateY(-2px); + background: rgba(0, 0, 0, 0.35); + box-shadow: + 0 12px 32px rgba(0, 0, 0, 0.6), + inset 0 1px 0 rgba(255, 255, 255, 0.25); +} + +.path-option-card:hover::before { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent); +} +``` + +### Selected State +```css +.path-option-card--selected { + background: rgba(255, 255, 255, 0.12); + box-shadow: + 0 12px 32px rgba(0, 0, 0, 0.6), + 0 0 30px rgba(255, 255, 255, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.35); + transform: translateY(-2px); +} + +.path-option-card--selected::before { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent); +} +``` + +### Icon Styling +```css +.path-option-card svg { + color: rgba(255, 255, 255, 0.85); + filter: + drop-shadow(0 1px 1px rgba(255, 255, 255, 0.3)) + drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) + drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.6)); + stroke-width: 2.5; +} + +.path-option-card:hover svg { + color: rgba(255, 255, 255, 1); + filter: + drop-shadow(0 1px 2px rgba(255, 255, 255, 0.5)) + drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9)); +} +``` + +--- + +## Button Standards + +### Primary Action Button: `.gradient-button` +Use for main actions like **Launch**, **Install**, **Save**, **Submit** + +```css +.gradient-button { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.95); + transition: all 0.3s ease; +} + +.gradient-button:hover { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%); + border-color: rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); +} +``` + +### Secondary Action Button: `.glass-button` +Use for secondary actions like **Cancel**, **Close**, **Back** + +```css +.glass-button { + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(18px); + border: 1px solid rgba(255, 255, 255, 0.18); + color: rgba(255, 255, 255, 0.9); + transition: all 0.3s ease; +} + +.glass-button:hover { + color: white; +} +``` + +### Path Action Button: `.path-action-button` +Use for onboarding/path selection flows (**Continue**, **Skip**) + +```css +.path-action-button { + font-size: 18px; + font-weight: 500; + border-radius: 16px; + background: rgba(0, 0, 0, 0.25); + color: rgba(255, 255, 255, 0.96); + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.45), + inset 0 1px 0 rgba(255, 255, 255, 0.22); + backdrop-filter: blur(24px); + border: none; + cursor: pointer; + transition: all 0.3s ease; +} + +.path-action-button:hover { + transform: translateY(-2px); + background: rgba(0, 0, 0, 0.35); + box-shadow: + 0 12px 32px rgba(0, 0, 0, 0.6), + inset 0 1px 0 rgba(255, 255, 255, 0.25); +} +``` + +--- + +## Container Standards + +### Glass Card: `.glass-card` +Use for content containers, modals, panels + +```css +.glass-card { + background-color: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); + border-radius: 1rem; + overflow-x: hidden; + overflow-y: visible; +} +``` + +### Gradient Card: `.gradient-card` +Use for featured content, highlighted sections + +```css +.gradient-card { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%); + backdrop-filter: blur(18px); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); + border-radius: 1rem; +} +``` + +--- + +## Color Palette + +### Primary Colors +- **White text**: `rgba(255, 255, 255, 0.9)` (primary) +- **White text hover**: `rgba(255, 255, 255, 1)` (full white) +- **Muted text**: `rgba(255, 255, 255, 0.6)` - `rgba(255, 255, 255, 0.7)` + +### Background Colors +- **Dark overlay**: `rgba(0, 0, 0, 0.8)` - `rgba(0, 0, 0, 0.9)` +- **Glass background**: `rgba(0, 0, 0, 0.6)` - `rgba(0, 0, 0, 0.65)` +- **Light glass**: `rgba(0, 0, 0, 0.35)` + +### Border Colors +- **Subtle border**: `rgba(255, 255, 255, 0.18)` +- **Prominent border**: `rgba(255, 255, 255, 0.2)` - `rgba(255, 255, 255, 0.3)` + +### Accent Colors +- **Orange** (Bitcoin/sync): `#fb923c` - `#f59e0b` +- **Green** (success): `#4ade80` +- **Red** (danger): `#ef4444` +- **Blue** (info): `#3b82f6` + +--- + +## Animation Standards + +### Transitions +- **Standard**: `all 0.3s ease` +- **Fast**: `all 0.15s ease` +- **Slow**: `all 0.5s ease-in-out` + +### Transform on Hover +```css +transform: translateY(-2px); +``` + +### Transform on Active/Click +```css +transform: translateY(1px); +``` + +--- + +## Blur Effects + +- **Standard blur**: `blur(18px)` +- **Strong blur**: `blur(24px)` - `blur(40px)` +- **Light blur**: `blur(10px)` + +--- + +## Shadow Standards + +### Card Shadows +```css +/* Default */ +box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); + +/* Hover */ +box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); + +/* With inset highlight */ +box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.45), + inset 0 1px 0 rgba(255, 255, 255, 0.22); +``` + +--- + +## Icon Guidelines + +### Icon Shadow Effects +```css +filter: + drop-shadow(0 1px 1px rgba(255, 255, 255, 0.3)) + drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) + drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.6)); +``` + +### Icon Colors +- **Default**: `rgba(255, 255, 255, 0.85)` +- **Hover**: `rgba(255, 255, 255, 1)` +- **Muted**: `rgba(255, 255, 255, 0.6)` + +### Stroke Width +- **Standard**: `2.5` +- **Thin**: `2` +- **Bold**: `3` + +--- + +## Usage Rules + +### DO: +✅ Use `.path-option-card` for all interactive/selectable cards +✅ Use `.gradient-button` for primary actions +✅ Use `.glass-card` for content containers +✅ Add subtle `translateY(-2px)` on hover +✅ Use `backdrop-filter: blur()` for glass effects +✅ Include inset highlights: `inset 0 1px 0 rgba(255, 255, 255, 0.22)` +✅ Use gradient borders with CSS masks for subtle elevation +✅ Maintain 0.3s ease transitions for smooth interactions + +### DON'T: +❌ Create custom card styles - extend existing ones +❌ Use solid backgrounds - always use transparency + blur +❌ Ignore hover states - all interactive elements need hover feedback +❌ Mix different border styles - use gradient mask or single border +❌ Use hard shadows - keep shadows soft with blur +❌ Forget `-webkit-backdrop-filter` for Safari support + +--- + +## Responsive Considerations + +### Mobile Adjustments +- Reduce padding by ~25% on small screens +- Reduce blur slightly for performance (`blur(12px)` instead of `blur(18px)`) +- Simplify animations (consider `prefers-reduced-motion`) +- Touch targets minimum 44x44px + +### Breakpoints +```css +/* Mobile first */ +sm: 640px /* Small tablets */ +md: 768px /* Tablets */ +lg: 1024px /* Desktops */ +xl: 1280px /* Large desktops */ +``` + +--- + +## Accessibility + +- Ensure sufficient contrast (WCAG AA minimum) +- Include `:focus-visible` states matching `:hover` +- Use semantic HTML (` + + - -
-
-
-
-
-
-
-

ZMQ

-

Enabled

-
-
- + +
+
+
+ + + +
+
+

Blockchain Sync

+

Checking sync status...

+
+
+ + +
+
+ Block 0 + 0% +
+
+
+
+
+ + +
+
+

Current Height

+

-

+
+
+

Network Height

+

-

+
+
+

Headers

+

-

+
+
+

Verification

+

-

-
- -
-
-
- - - -
-
-

Node Information

-

Bitcoin Core node status

-
-
- -
-
-
- - - - Node Status -
- Running -
- -
-
- - - - Version -
- v27.0 -
- -
-
- - - - Network -
- Regtest -
-
- - -
- - +
@@ -304,7 +464,7 @@ RPC Host
- localhost:18443 + localhost:8332
@@ -314,7 +474,7 @@ RPC User
- bitcoin + archipelago
@@ -328,7 +488,7 @@
-
@@ -379,7 +539,7 @@
- @@ -391,7 +551,7 @@

Node Settings

- +
@@ -419,7 +579,7 @@

Node Logs

- +
Loading logs... @@ -428,8 +588,161 @@