# 0noxtackore/onofrietti-comics architecture

> Architecture diagram of the GitHub repository 0noxtackore/onofrietti-comics, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/0noxtackore/onofrietti-comics
- Repository: https://github.com/0noxtackore/onofrietti-comics

## Overview

Onofrietti Comics is a Vue-based digital comics storefront with a public catalog and issue details, plus an authenticated admin panel for managing comics, series, and characters. Visitors enter through the site shell, browse or open a comic, and can switch languages; administrators sign in before managing content. Firebase-backed services fall back to seeded comics when unavailable. Edges are limited to relationships shown in excerpts, the source index, or README; some feature details are documented but their internal wiring was not sampled.

Main entry points: [`src/App.vue`](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/App.vue) (Route and shell), [`src/i18n/index.js`](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/index.js) (Translations and locale), [`src/components/admin/AdminPanel.vue`](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/admin/AdminPanel.vue) (Admin panel), [`src/firebase/init.js`](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/init.js) (Firebase setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public storefront"]
  node_app["Route and shell<br/>[App.vue]"]
  node_header["Site header<br/>[SiteHeader.vue]"]
  node_menu["Site menu<br/>[SiteMenu.vue]"]
  node_hero["Hero section<br/>[HeroSection.vue]"]
  node_catalogview["Catalog view"]
  node_comiccard["Comic card<br/>[ComicCard.vue]"]
  node_comiccover["Comic cover<br/>[ComicCover.vue]"]
  node_detail["Issue details<br/>[ComicDetail.vue]"]
  node_footer["Site footer<br/>[SiteFooter.vue]"]
end

subgraph group_admin["Content administration"]
  node_adminpanel["Admin panel<br/>[AdminPanel.vue]"]
end

subgraph group_data["Catalog and persistence"]
  node_comicsservice["Comic data service<br/>[comicsService.js]"]
  node_seed["Fallback catalog<br/>[comics.js]"]
  node_adminservice["Comic writes<br/>[adminService.js]"]
  node_series["Series management<br/>[seriesService.js]"]
  node_characters["Character management"]
  node_firestore[("Firestore")]
end

subgraph group_shared["Shared application services"]
  node_auth["Admin authentication<br/>[auth.js]"]
  node_firebaseinit["Firebase setup<br/>[init.js]"]
  node_firebaseconfig["Firebase configuration<br/>[config.js]"]
  node_router["Navigation helper<br/>[router.js]"]
  node_i18n["Translations and locale<br/>[index.js]"]
  node_messages["Locale messages<br/>[messages.js]"]
  node_geolocale["Locale detection<br/>[geo.js]"]
end

node_visitor(("Visitor"))
node_adminuser(("Administrator"))

node_visitor -->|"opens site"| node_app
node_adminuser -->|"opens admin route"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_menu
node_app -->|"routes to"| node_hero
node_app -->|"routes to"| node_catalogview
node_app -->|"routes to"| node_detail
node_app -->|"routes to"| node_adminpanel
node_app -->|"renders"| node_footer
node_app -->|"navigates with"| node_router
node_catalogview -->|"loads catalog"| node_comicsservice
node_catalogview -->|"renders"| node_comiccard
node_comiccard -->|"uses cover"| node_comiccover
node_detail -->|"loads issue"| node_comicsservice
node_adminpanel -->|"signs in or out"| node_auth
node_adminpanel -->|"manages comics"| node_adminservice
node_adminpanel -->|"manages series"| node_series
node_adminpanel -->|"manages characters"| node_characters
node_comicsservice -->|"falls back to"| node_seed
node_comicsservice -->|"gets connection"| node_firebaseinit
node_comicsservice -->|"reads comics"| node_firestore
node_adminservice -->|"gets connection"| node_firebaseinit
node_adminservice -->|"writes comics"| node_firestore
node_series -->|"gets connection"| node_firebaseinit
node_series -->|"reads and writes"| node_firestore
node_characters -->|"gets connection"| node_firebaseinit
node_characters -->|"reads and writes"| node_firestore
node_auth -->|"gets connection"| node_firebaseinit
node_firebaseinit -->|"uses settings"| node_firebaseconfig
node_header -->|"uses translations"| node_i18n
node_menu -->|"uses translations"| node_i18n
node_hero -->|"uses translations"| node_i18n
node_catalogview -->|"uses translations"| node_i18n
node_detail -->|"uses translations"| node_i18n
node_footer -->|"uses translations"| node_i18n
node_adminpanel -->|"uses translations"| node_i18n
node_i18n -->|"loads messages"| node_messages
node_i18n -->|"detects locale"| node_geolocale

click node_app "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/App.vue"
click node_header "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/layout/SiteHeader.vue"
click node_menu "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/layout/SiteMenu.vue"
click node_hero "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/sections/HeroSection.vue"
click node_catalogview "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/sections/LatestComicsSection.vue"
click node_comiccard "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/comic/ComicCard.vue"
click node_comiccover "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/comic/ComicCover.vue"
click node_detail "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/comic/ComicDetail.vue"
click node_footer "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/layout/SiteFooter.vue"
click node_adminpanel "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/admin/AdminPanel.vue"
click node_comicsservice "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/comicsService.js"
click node_seed "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/data/comics.js"
click node_adminservice "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/adminService.js"
click node_series "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/seriesService.js"
click node_characters "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/charactersService.js"
click node_auth "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/auth.js"
click node_firebaseinit "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/init.js"
click node_firebaseconfig "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/config.js"
click node_router "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/utils/router.js"
click node_i18n "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/index.js"
click node_messages "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/messages.js"
click node_geolocale "https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/geo.js"

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_app,node_header,node_menu,node_hero,node_catalogview,node_comiccard,node_comiccover,node_detail,node_footer toneBlue
class node_adminpanel toneAmber
class node_comicsservice,node_seed,node_adminservice,node_series,node_characters,node_firestore toneMint
class node_auth,node_firebaseinit,node_firebaseconfig,node_router,node_i18n,node_messages,node_geolocale toneRose
class node_visitor,node_adminuser toneIndigo
```

## Components

### Public storefront

- [Route and shell](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/App.vue): `src/App.vue`
- [Site header](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/layout/SiteHeader.vue): `src/components/layout/SiteHeader.vue`
- [Site menu](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/layout/SiteMenu.vue): `src/components/layout/SiteMenu.vue`
- [Hero section](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/sections/HeroSection.vue): `src/components/sections/HeroSection.vue`
- [Catalog view](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/sections/LatestComicsSection.vue): `src/components/sections/LatestComicsSection.vue`
- [Comic card](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/comic/ComicCard.vue): `src/components/comic/ComicCard.vue`
- [Comic cover](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/comic/ComicCover.vue): `src/components/comic/ComicCover.vue`
- [Issue details](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/comic/ComicDetail.vue): `src/components/comic/ComicDetail.vue`
- [Site footer](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/layout/SiteFooter.vue): `src/components/layout/SiteFooter.vue`

### Content administration

- [Admin panel](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/components/admin/AdminPanel.vue): `src/components/admin/AdminPanel.vue`

### Catalog and persistence

- [Comic data service](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/comicsService.js): `src/services/comicsService.js`
- [Fallback catalog](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/data/comics.js): `src/data/comics.js`
- [Comic writes](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/adminService.js): `src/services/adminService.js`
- [Series management](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/seriesService.js): `src/services/seriesService.js`
- [Character management](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/services/charactersService.js): `src/services/charactersService.js`
- **Firestore**

### Shared application services

- [Admin authentication](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/auth.js): `src/firebase/auth.js`
- [Firebase setup](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/init.js): `src/firebase/init.js`
- [Firebase configuration](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/firebase/config.js): `src/firebase/config.js`
- [Navigation helper](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/utils/router.js): `src/utils/router.js`
- [Translations and locale](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/index.js): `src/i18n/index.js`
- [Locale messages](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/messages.js): `src/i18n/messages.js`
- [Locale detection](https://github.com/0noxtackore/onofrietti-comics/blob/main/src/i18n/geo.js): `src/i18n/geo.js`

### Other components

- **Visitor**
- **Administrator**

## Connections

- Visitor → Route and shell: opens site (evidence: `README.md`)
- Administrator → Route and shell: opens admin route (evidence: `README.md`)
- Route and shell → Site header: renders (evidence: `src/App.vue`)
- Route and shell → Site menu: renders (evidence: `src/App.vue`)
- Route and shell → Hero section: routes to (evidence: `src/App.vue`)
- Route and shell → Catalog view: routes to (evidence: `src/App.vue`)
- Route and shell → Issue details: routes to (evidence: `src/App.vue`)
- Route and shell → Admin panel: routes to (evidence: `src/App.vue`)
- Route and shell → Site footer: renders (evidence: `src/App.vue`)
- Route and shell → Navigation helper: navigates with (evidence: `src/App.vue`)
- Catalog view → Comic data service: loads catalog (evidence: `src/components/sections/LatestComicsSection.vue`)
- Catalog view → Comic card: renders (evidence: `src/components/sections/LatestComicsSection.vue`)
- Comic card → Comic cover: uses cover (evidence: `src/components/comic/ComicCard.vue`)
- Issue details → Comic data service: loads issue (evidence: `src/components/comic/ComicDetail.vue`)
- Admin panel → Admin authentication: signs in or out (evidence: `src/components/admin/AdminPanel.vue`)
- Admin panel → Comic writes: manages comics (evidence: `src/components/admin/AdminPanel.vue`)
- Admin panel → Series management: manages series (evidence: `src/components/admin/AdminPanel.vue`)
- Admin panel → Character management: manages characters (evidence: `src/components/admin/AdminPanel.vue`)
- Comic data service → Fallback catalog: falls back to (evidence: `src/services/comicsService.js`)
- Comic data service → Firebase setup: gets connection (evidence: `src/services/comicsService.js`)
- Comic data service → Firestore: reads comics (evidence: `src/services/comicsService.js`)
- Comic writes → Firebase setup: gets connection (evidence: `src/services/adminService.js`)
- Comic writes → Firestore: writes comics (evidence: `src/services/adminService.js`)
- Series management → Firebase setup: gets connection (evidence: `src/services/seriesService.js`)
- Series management → Firestore: reads and writes (evidence: `src/services/seriesService.js`)
- Character management → Firebase setup: gets connection (evidence: `src/services/charactersService.js`)
- Character management → Firestore: reads and writes (evidence: `src/services/charactersService.js`)
- Admin authentication → Firebase setup: gets connection (evidence: `src/firebase/auth.js`)
- Firebase setup → Firebase configuration: uses settings (evidence: `src/firebase/init.js`)
- Site header → Translations and locale: uses translations (evidence: `src/components/layout/SiteHeader.vue`)
- Site menu → Translations and locale: uses translations (evidence: `src/components/layout/SiteMenu.vue`)
- Hero section → Translations and locale: uses translations (evidence: `src/components/sections/HeroSection.vue`)
- Catalog view → Translations and locale: uses translations (evidence: `src/components/sections/LatestComicsSection.vue`)
- Issue details → Translations and locale: uses translations (evidence: `src/components/comic/ComicDetail.vue`)
- Site footer → Translations and locale: uses translations (evidence: `src/components/layout/SiteFooter.vue`)
- Admin panel → Translations and locale: uses translations (evidence: `src/components/admin/AdminPanel.vue`)
- Translations and locale → Locale messages: loads messages (evidence: `src/i18n/index.js`)
- Translations and locale → Locale detection: detects locale (evidence: `src/i18n/index.js`)