91 lines
2.3 KiB
Markdown
91 lines
2.3 KiB
Markdown
# Nebula
|
|
|
|
Nebula is the Go Templ implementation of the Sonr WebAwesome Web Component Framework, providing server-driven UI with HTMX integration.
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
* Go 1.13+
|
|
* HTMX (included via CDN)
|
|
|
|
### Installing
|
|
|
|
```bash
|
|
go install github.com/a-h/templ@latest
|
|
templ generate
|
|
go run .
|
|
```
|
|
|
|
## Architecture
|
|
|
|
Nebula converts HTML prototypes to Go `templ` templates with HTMX for server-driven UI:
|
|
|
|
```
|
|
Browser Go Server
|
|
------- ---------
|
|
[Web Awesome UI] <-- HTMX --> [Templ Renderer]
|
|
| |
|
|
| hx-post="/api/sign" |
|
|
| hx-target="#result" |
|
|
+--------------------------------->+
|
|
|
|
|
[Handler Logic]
|
|
|
|
|
+<---------------------------------+
|
|
| HTML Fragment Response
|
|
|
|
|
[DOM Update via HTMX]
|
|
```
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
nebula/
|
|
├── views/ # Page templates
|
|
├── layouts/ # Base layouts
|
|
├── components/ # Reusable components
|
|
├── handlers/ # HTTP handlers
|
|
└── MIGRATION.md # Detailed migration guide
|
|
```
|
|
|
|
## Key Features
|
|
|
|
- **Server-Driven UI**: HTMX-powered interactions without client-side JavaScript
|
|
- **Web Awesome Components**: Modern web component library
|
|
- **Go Templ**: Type-safe templates with Go integration
|
|
- **Auth Flow**: WebAuthn, OAuth, and multi-step authentication
|
|
- **Dashboard**: Wallet management, NFT gallery, service connections
|
|
|
|
## Pages
|
|
|
|
### Auth Pages (Popup/Webview Optimized)
|
|
- **Welcome**: 3-step onboarding stepper
|
|
- **Login**: WebAuthn sign-in with passkey/security key/QR
|
|
- **Register**: Device detection + registration wizard
|
|
- **Authorize**: OAuth consent for connect/sign/transaction
|
|
|
|
### Dashboard Pages
|
|
- **Accounts**: Token balances, transactions, drawers
|
|
- **NFTs**: Gallery with collections, filters, actions
|
|
- **Service**: Connected service detail with permissions
|
|
|
|
## Migration
|
|
|
|
See [MIGRATION.md](./MIGRATION.md) for detailed migration steps, component patterns, and HTMX integration examples.
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Generate templates
|
|
templ generate
|
|
|
|
# Run development server
|
|
go run .
|
|
|
|
# Watch for changes
|
|
templ generate --watch
|
|
```
|
|
|
|
|