# cle07/vue-actix-blog architecture

> Architecture diagram of the GitHub repository cle07/vue-actix-blog, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cle07/vue-actix-blog
- Repository: https://github.com/cle07/vue-actix-blog

## Overview

#### Purpose and Entry Points
A single-project content site combines a Rust/Actix Web backend with a Vue SPA. Markdown articles (from an expected `articles/` source directory) are synchronized into SQLite and exposed through APIs; the frontend renders articles, timelines, and Lua-related pages.

Backend startup: `src/main.rs`. Frontend bootstrap: `frontend/src/main.js`, with HTML/Vite entry at `frontend/index.html`.

#### Backend HTTP Host
Actix Web owns production HTTP serving, API registration, and likely static SPA delivery. It is the integration boundary between browser clients, SQLite-backed article data, and Lua execution/compilation functionality.

Paths: `src/main.rs`, `src/api.rs`, `src/lua.rs`.

#### Content Synchronization and Persistence
The repository’s primary content pipeline is Markdown article files → parsed/synchronized article records → SQLite database → API responses. The checked-in frontend database artifact suggests the database may be distributed or consumed during frontend-oriented workflows, while Rust database access remains centralized.

Paths: `src/db.rs`, `frontend/articles.db`, `src/api.rs`.

#### Article API and Navigation Model
Article-oriented endpoints in `src/api.rs` provide the backend contract consumed by Vue views. Obsidian-style links imply article content and metadata form a graph-like navigation model rather than isolated documents; article and timeline screens are distinct consumers of this data.

Paths: `src/api.rs`, `frontend/src/views/Article.vue`, `frontend/src/views/Timeline.vue`.

#### Lua Execution Surface
Lua is a separate backend capability, exposed through an Actix endpoint rather than implemented solely in the browser. The frontend provides both a playground and dedicated Lua pages, creating a request boundary between Vue code editing/UI and Rust-side compilation or execution.

Paths: `src/lua.rs`, `frontend/src/components/LuaPlayground.vue`, `frontend/src/views/Lua.vue`.

#### Vue SPA Composition
Vue is organized around route-selected views and reusable presentation components. `App.vue` is the shell; `router.js` controls view selection; article rendering is split between wrapper and article views. Shared navigation and timeline components support cross-page movement.

Paths: `frontend/src/App.vue`, `frontend/src/router.js`, `frontend/src/views/ArticleWrapper.vue`, `frontend/src/components/NavBar.vue`.

#### Deployment and Runtimes
Rust/Cargo builds and runs the Actix service; Bun/Vite builds or serves the Vue application. Development uses separate servers (Vue on 5173, Actix API on 8080). Production builds frontend assets and serves the application through Actix. Docker is the deployment packaging boundary.

Paths: `Cargo.toml`, `frontend/package.json`, `frontend/vite.config.js`, `Dockerfile`.

Main entry points: [`frontend/src/router.js`](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/router.js) (Route selection), [`src/main.rs`](https://github.com/cle07/vue-actix-blog/blob/main/src/main.rs) (Actix HTTP host), [`src/api.rs`](https://github.com/cle07/vue-actix-blog/blob/main/src/api.rs) (Article API), [`frontend/src/App.vue`](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Rust backend"]
  node_actix["Actix HTTP host<br/>Rust service<br/>[main.rs]"]
  node_article_api["Article API<br/>API routes<br/>[api.rs]"]
  node_lua_api["Lua execution<br/>backend capability<br/>[lua.rs]"]
end

subgraph group_content["Content pipeline"]
  node_markdown["Markdown articles<br/>content source"]
  node_database[("SQLite article store<br/>SQLite database<br/>[db.rs]")]
  node_frontend_db[("Frontend DB artifact<br/>SQLite artifact<br/>[articles.db]")]
end

subgraph group_frontend["Vue SPA"]
  node_spa_entry["SPA entry<br/>HTML/Vite entry<br/>[index.html]"]
  node_vue_bootstrap["Vue bootstrap<br/>SPA bootstrap<br/>[main.js]"]
  node_app_shell["App shell<br/>Vue shell<br/>[App.vue]"]
  node_router["Route selection<br/>Vue router<br/>[router.js]"]
  node_article_views["Article views<br/>Vue views<br/>[ArticleWrapper.vue]"]
  node_timeline_view["Timeline view<br/>Vue view<br/>[Timeline.vue]"]
  node_navigation["Navigation UI<br/>Vue component<br/>[NavBar.vue]"]
  node_lua_ui["Lua UI<br/>Vue playground<br/>[LuaPlayground.vue]"]
  node_lua_view["Lua page<br/>Vue view<br/>[Lua.vue]"]
end

subgraph group_delivery["Build &amp; deployment"]
  node_vite["Bun/Vite runtime<br/>frontend build server<br/>[vite.config.js]"]
  node_cargo["Cargo runtime<br/>Rust build<br/>[Cargo.toml]"]
  node_docker["Docker package<br/>deployment image"]
end

node_markdown -->|"parse and synchronize"| node_database
node_database -.->|"distributed artifact"| node_frontend_db
node_actix -->|"registers"| node_article_api
node_actix -->|"registers"| node_lua_api
node_article_api -->|"reads article records"| node_database
node_spa_entry -->|"loads"| node_vue_bootstrap
node_vue_bootstrap -->|"mounts"| node_app_shell
node_app_shell -->|"uses"| node_router
node_router -->|"selects"| node_article_views
node_router -->|"selects"| node_timeline_view
node_router -->|"selects"| node_lua_view
node_app_shell -->|"renders"| node_navigation
node_article_views -->|"fetches articles"| node_article_api
node_timeline_view -->|"fetches timeline data"| node_article_api
node_lua_view -->|"hosts"| node_lua_ui
node_lua_ui -->|"executes requests"| node_lua_api
node_vite -->|"serves and builds"| node_spa_entry
node_cargo -->|"builds and runs"| node_actix
node_actix -.->|"serves in production"| node_spa_entry
node_docker -->|"packages"| node_cargo
node_docker -->|"packages built assets"| node_vite

click node_actix "https://github.com/cle07/vue-actix-blog/blob/main/src/main.rs"
click node_article_api "https://github.com/cle07/vue-actix-blog/blob/main/src/api.rs"
click node_lua_api "https://github.com/cle07/vue-actix-blog/blob/main/src/lua.rs"
click node_database "https://github.com/cle07/vue-actix-blog/blob/main/src/db.rs"
click node_frontend_db "https://github.com/cle07/vue-actix-blog/blob/main/frontend/articles.db"
click node_spa_entry "https://github.com/cle07/vue-actix-blog/blob/main/frontend/index.html"
click node_vue_bootstrap "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/main.js"
click node_app_shell "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/App.vue"
click node_router "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/router.js"
click node_article_views "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/views/ArticleWrapper.vue"
click node_timeline_view "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/views/Timeline.vue"
click node_navigation "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/components/NavBar.vue"
click node_lua_ui "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/components/LuaPlayground.vue"
click node_lua_view "https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/views/Lua.vue"
click node_vite "https://github.com/cle07/vue-actix-blog/blob/main/frontend/vite.config.js"
click node_cargo "https://github.com/cle07/vue-actix-blog/blob/main/Cargo.toml"
click node_docker "https://github.com/cle07/vue-actix-blog/blob/main/Dockerfile"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_actix,node_article_api,node_lua_api toneBlue
class node_markdown,node_database,node_frontend_db toneAmber
class node_spa_entry,node_vue_bootstrap,node_app_shell,node_router,node_article_views,node_timeline_view,node_navigation,node_lua_ui,node_lua_view toneMint
class node_vite,node_cargo,node_docker toneRose
```

## Components

### Rust backend

- [Actix HTTP host](https://github.com/cle07/vue-actix-blog/blob/main/src/main.rs): Rust service · Serves APIs and production SPA assets. · `src/main.rs`
- [Article API](https://github.com/cle07/vue-actix-blog/blob/main/src/api.rs): API routes · Article and navigation contract for the SPA. · `src/api.rs`
- [Lua execution](https://github.com/cle07/vue-actix-blog/blob/main/src/lua.rs): backend capability · Compiles or executes Lua through an HTTP endpoint. · `src/lua.rs`

### Content pipeline

- **Markdown articles**: content source · Source articles synchronized into persistent records.
- [SQLite article store](https://github.com/cle07/vue-actix-blog/blob/main/src/db.rs): SQLite database · Central persisted article data. · `src/db.rs`
- [Frontend DB artifact](https://github.com/cle07/vue-actix-blog/blob/main/frontend/articles.db): SQLite artifact · Checked-in database used by frontend-oriented workflows. · `frontend/articles.db`

### Vue SPA

- [SPA entry](https://github.com/cle07/vue-actix-blog/blob/main/frontend/index.html): HTML/Vite entry · `frontend/index.html`
- [Vue bootstrap](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/main.js): SPA bootstrap · `frontend/src/main.js`
- [App shell](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/App.vue): Vue shell · `frontend/src/App.vue`
- [Route selection](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/router.js): Vue router · `frontend/src/router.js`
- [Article views](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/views/ArticleWrapper.vue): Vue views · Wrapper and article screens render linked article content. · `frontend/src/views/ArticleWrapper.vue`
- [Timeline view](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/views/Timeline.vue): Vue view · `frontend/src/views/Timeline.vue`
- [Navigation UI](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/components/NavBar.vue): Vue component · `frontend/src/components/NavBar.vue`
- [Lua UI](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/components/LuaPlayground.vue): Vue playground · Browser editing interface for backend Lua requests. · `frontend/src/components/LuaPlayground.vue`
- [Lua page](https://github.com/cle07/vue-actix-blog/blob/main/frontend/src/views/Lua.vue): Vue view · `frontend/src/views/Lua.vue`

### Build & deployment

- [Bun/Vite runtime](https://github.com/cle07/vue-actix-blog/blob/main/frontend/vite.config.js): frontend build server · Runs development server and builds SPA assets. · `frontend/vite.config.js`
- [Cargo runtime](https://github.com/cle07/vue-actix-blog/blob/main/Cargo.toml): Rust build · Builds and runs the Actix service. · `Cargo.toml`
- [Docker package](https://github.com/cle07/vue-actix-blog/blob/main/Dockerfile): deployment image · Packages the production application. · `Dockerfile`

## Connections

- Markdown articles → SQLite article store: parse and synchronize
- SQLite article store → Frontend DB artifact: distributed artifact
- Actix HTTP host → Article API: registers
- Actix HTTP host → Lua execution: registers
- Article API → SQLite article store: reads article records
- SPA entry → Vue bootstrap: loads
- Vue bootstrap → App shell: mounts
- App shell → Route selection: uses
- Route selection → Article views: selects
- Route selection → Timeline view: selects
- Route selection → Lua page: selects
- App shell → Navigation UI: renders
- Article views → Article API: fetches articles
- Timeline view → Article API: fetches timeline data
- Lua page → Lua UI: hosts
- Lua UI → Lua execution: executes requests
- Bun/Vite runtime → SPA entry: serves and builds
- Cargo runtime → Actix HTTP host: builds and runs
- Actix HTTP host → SPA entry: serves in production
- Docker package → Cargo runtime: packages
- Docker package → Bun/Vite runtime: packages built assets