How 0noxtackore/onofrietti-comics works
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: App.vue Route and shell · index.js Translations and locale · AdminPanel.vue Admin panel · init.js Firebase setup
Components 25
Public storefront
- Route and shell
src/App.vue - Site header
src/components/layout/SiteHeader.vue - Site menu
src/components/layout/SiteMenu.vue - Hero section
src/components/sections/HeroSection.vue - Catalog view
src/components/sections/LatestComicsSection.vue - Comic card
src/components/comic/ComicCard.vue - Comic cover
src/components/comic/ComicCover.vue - Issue details
src/components/comic/ComicDetail.vue - Site footer
src/components/layout/SiteFooter.vue
Content administration
- Admin panel
src/components/admin/AdminPanel.vue
Catalog and persistence
- Comic data service
src/services/comicsService.js - Fallback catalog
src/data/comics.js - Comic writes
src/services/adminService.js - Series management
src/services/seriesService.js - Character management
src/services/charactersService.js - Firestore
Shared application services
- Admin authentication
src/firebase/auth.js - Firebase setup
src/firebase/init.js - Firebase configuration
src/firebase/config.js - Navigation helper
src/utils/router.js - Translations and locale
src/i18n/index.js - Locale messages
src/i18n/messages.js - Locale detection
src/i18n/geo.js
Other components
- Visitor
- Administrator
Connections 38
- Visitor → Route and shell: opens site
README.md - Administrator → Route and shell: opens admin route
README.md - Route and shell → Site header: renders
src/App.vue - Route and shell → Site menu: renders
src/App.vue - Route and shell → Hero section: routes to
src/App.vue - Route and shell → Catalog view: routes to
src/App.vue - Route and shell → Issue details: routes to
src/App.vue - Route and shell → Admin panel: routes to
src/App.vue - Route and shell → Site footer: renders
src/App.vue - Route and shell → Navigation helper: navigates with
src/App.vue - Catalog view → Comic data service: loads catalog
src/components/sections/LatestComicsSection.vue - Catalog view → Comic card: renders
src/components/sections/LatestComicsSection.vue - Comic card → Comic cover: uses cover
src/components/comic/ComicCard.vue - Issue details → Comic data service: loads issue
src/components/comic/ComicDetail.vue - Admin panel → Admin authentication: signs in or out
src/components/admin/AdminPanel.vue - Admin panel → Comic writes: manages comics
src/components/admin/AdminPanel.vue - Admin panel → Series management: manages series
src/components/admin/AdminPanel.vue - Admin panel → Character management: manages characters
src/components/admin/AdminPanel.vue - Comic data service → Fallback catalog: falls back to
src/services/comicsService.js - Comic data service → Firebase setup: gets connection
src/services/comicsService.js - Comic data service → Firestore: reads comics
src/services/comicsService.js - Comic writes → Firebase setup: gets connection
src/services/adminService.js - Comic writes → Firestore: writes comics
src/services/adminService.js - Series management → Firebase setup: gets connection
src/services/seriesService.js - Series management → Firestore: reads and writes
src/services/seriesService.js - Character management → Firebase setup: gets connection
src/services/charactersService.js - Character management → Firestore: reads and writes
src/services/charactersService.js - Admin authentication → Firebase setup: gets connection
src/firebase/auth.js - Firebase setup → Firebase configuration: uses settings
src/firebase/init.js - Site header → Translations and locale: uses translations
src/components/layout/SiteHeader.vue - Site menu → Translations and locale: uses translations
src/components/layout/SiteMenu.vue - Hero section → Translations and locale: uses translations
src/components/sections/HeroSection.vue - Catalog view → Translations and locale: uses translations
src/components/sections/LatestComicsSection.vue - Issue details → Translations and locale: uses translations
src/components/comic/ComicDetail.vue - Site footer → Translations and locale: uses translations
src/components/layout/SiteFooter.vue - Admin panel → Translations and locale: uses translations
src/components/admin/AdminPanel.vue - Translations and locale → Locale messages: loads messages
src/i18n/index.js - Translations and locale → Locale detection: detects locale
src/i18n/index.js