87 lines
2.6 KiB
Markdown
87 lines
2.6 KiB
Markdown
|
# TypeDialog Web Assets
|
||
|
|
|
||
|
|
Web-based landing page, architecture diagram, and static content for TypeDialog.
|
||
|
|
|
||
|
|
## Directory Structure
|
||
|
|
|
||
|
|
```text
|
||
|
|
assets/web/
|
||
|
|
├── src/
|
||
|
|
│ ├── index.html # Source HTML (readable)
|
||
|
|
│ └── architecture-diagram.html # Source architecture viewer
|
||
|
|
├── index.html # Minified/Production HTML
|
||
|
|
├── architecture-diagram.html # Minified architecture viewer
|
||
|
|
├── typedialog_architecture.svg # Architecture diagram (dark mode)
|
||
|
|
├── typedialog_architecture_white.svg # Architecture diagram (light mode)
|
||
|
|
├── minify.sh # Build script
|
||
|
|
└── README.md
|
||
|
|
```
|
||
|
|
|
||
|
|
## Files
|
||
|
|
|
||
|
|
### `src/index.html` - Source Landing Page
|
||
|
|
|
||
|
|
- Inline CSS and JavaScript (no external dependencies beyond Inter font)
|
||
|
|
- Bilingual content (English/Spanish) with localStorage persistence
|
||
|
|
- Dark/light theme toggle with logo swap
|
||
|
|
- Responsive design (mobile-first)
|
||
|
|
- Link to architecture diagram viewer
|
||
|
|
|
||
|
|
### `src/architecture-diagram.html` - Architecture Viewer
|
||
|
|
|
||
|
|
- Full-page SVG architecture diagram
|
||
|
|
- Dark/light theme toggle (swaps between two SVG variants)
|
||
|
|
- Back-link to landing page
|
||
|
|
- Shares theme preference with landing page via localStorage
|
||
|
|
|
||
|
|
### Architecture SVGs
|
||
|
|
|
||
|
|
Two variants of the architecture diagram:
|
||
|
|
|
||
|
|
- `typedialog_architecture.svg` - Dark background (#0f0f1a)
|
||
|
|
- `typedialog_architecture_white.svg` - Light background (#ffffff)
|
||
|
|
|
||
|
|
Both show the complete TypeDialog architecture:
|
||
|
|
|
||
|
|
- Form Definitions layer (Nickel + TOML + load_form)
|
||
|
|
- typedialog-core (three-phase execution, core modules, BackendFactory)
|
||
|
|
- 6 Backends (CLI, TUI, Web, AI, Agent, Prov-Gen)
|
||
|
|
- Output formats (JSON, YAML, TOML, Nickel Roundtrip)
|
||
|
|
- LLM Providers (Claude, OpenAI, Gemini, Ollama)
|
||
|
|
- Integrations (Nushell, Nickel Contracts, Tera, Multi-Cloud, CI/CD)
|
||
|
|
|
||
|
|
## Development
|
||
|
|
|
||
|
|
Edit source files in `src/`, then regenerate minified versions:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
chmod +x assets/web/minify.sh
|
||
|
|
./assets/web/minify.sh
|
||
|
|
```
|
||
|
|
|
||
|
|
## Deployment
|
||
|
|
|
||
|
|
Serve from any static web server:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Rust
|
||
|
|
cargo install static-web-server
|
||
|
|
static-web-server -d assets/web/
|
||
|
|
|
||
|
|
# Python
|
||
|
|
python3 -m http.server --directory assets/web
|
||
|
|
|
||
|
|
# Node.js
|
||
|
|
npx http-server assets/web
|
||
|
|
```
|
||
|
|
|
||
|
|
Logo SVGs are referenced from the parent `assets/` directory via relative paths (`../typedialog_logo_h.svg`).
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- **Responsive**: Mobile-first with media queries
|
||
|
|
- **Performance**: Inline CSS/JS, no frameworks, minified production
|
||
|
|
- **Bilingual**: EN/ES with dynamic switching
|
||
|
|
- **Theming**: Dark/light with localStorage persistence and logo swap
|
||
|
|
- **Architecture**: SVG diagram with dark/light variants showing full system
|