# parta99/pawiwahan architecture

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

- Interactive diagram: https://gitdiagram.com/parta99/pawiwahan
- Repository: https://github.com/parta99/pawiwahan

## Overview

This repository contains two wedding-invitation websites: a static HTML/CSS/JS theme and a Vue theme that adds guest-management interactions. Invitees view the invitation, use RSVP and guest-list features, and can sign in to post nested comments; hosts manage guest information through the documented spreadsheet integration. The Vue entry point installs the router, which selects views rendered by the app. README capabilities are included where source excerpts were unavailable; their internal wiring is therefore left unspecified.

Main entry points: [`thema-2-VueJS/src/router/index.js`](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/router/index.js) (Route Selection), [`thema-2-VueJS/src/main.js`](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/main.js) (App Entry), [`thema-2-VueJS/src/components/TheAuthComments.vue`](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/TheAuthComments.vue) (Nested Comments), [`thema-2-VueJS/src/App.vue`](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/App.vue) (Vue App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_static["Static Invitation"]
  node_theme1["Theme 1 Site<br/>[index.html]"]
  node_theme1logic["Invitation Behavior<br/>[pawiwahan.js]"]
end

subgraph group_vue["Vue Invitation"]
  node_theme2["Vue App<br/>[App.vue]"]
  node_entry["App Entry<br/>[main.js]"]
  node_router["Route Selection<br/>[index.js]"]
  node_home["Home View<br/>[HomeView.vue]"]
  node_about["Couple Details<br/>[AboutView.vue]"]
  node_carousel["Photo Carousel<br/>[Carousel.vue]"]
  node_countdown["Event Countdown<br/>[TheCountdown.vue]"]
  node_audio["Audio and Social<br/>[SocialItem.vue]"]
  node_gallery["Gallery<br/>[TheGalery.vue]"]
end

subgraph group_guest["Guest Interactions"]
  node_reservation["RSVP Form"]
  node_guestlist["Guest List"]
  node_comments["Nested Comments"]
end

subgraph group_integrations["External Services"]
  node_sheets[("Google Sheets")]
  node_firebase["Firebase Auth"]
  node_commentapi["Comments API"]
end

node_invitee(("Invitee"))

node_invitee -->|"opens invitation"| node_theme1
node_theme1 -->|"runs scripts"| node_theme1logic
node_invitee -->|"opens invitation"| node_entry
node_entry -->|"mounts app"| node_theme2
node_entry -->|"installs router"| node_router
node_theme2 -->|"renders routes"| node_router
node_router -->|"selects route"| node_home
node_router -->|"selects route"| node_about
node_router -->|"renders view"| node_theme2
node_invitee -->|"submits RSVP"| node_reservation
node_reservation -.->|"submits form"| node_sheets
node_invitee -->|"views guests"| node_guestlist
node_guestlist -.->|"uses guest data"| node_sheets
node_invitee -->|"posts comments"| node_comments
node_comments -.->|"authenticates user"| node_firebase
node_comments -->|"sends comment requests"| node_commentapi

click node_theme1 "https://github.com/parta99/pawiwahan/blob/main/thema-1/index.html"
click node_theme1logic "https://github.com/parta99/pawiwahan/blob/main/thema-1/assets/js/pawiwahan.js"
click node_theme2 "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/App.vue"
click node_entry "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/main.js"
click node_router "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/router/index.js"
click node_home "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/HomeView.vue"
click node_about "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/AboutView.vue"
click node_carousel "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/Carousel.vue"
click node_countdown "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/TheCountdown.vue"
click node_audio "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/SocialItem.vue"
click node_gallery "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/TheGalery.vue"
click node_reservation "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/TheReservasiTest.vue"
click node_guestlist "https://github.com/parta99/pawiwahan/tree/main/thema-2-VueJS/src/views"
click node_comments "https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/TheAuthComments.vue"

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_theme1,node_theme1logic toneBlue
class node_theme2,node_entry,node_router,node_home,node_about,node_carousel,node_countdown,node_audio,node_gallery toneAmber
class node_reservation,node_guestlist,node_comments toneMint
class node_sheets,node_firebase,node_commentapi toneRose
class node_invitee toneIndigo
```

## Components

### Static Invitation

- [Theme 1 Site](https://github.com/parta99/pawiwahan/blob/main/thema-1/index.html): `thema-1/index.html`
- [Invitation Behavior](https://github.com/parta99/pawiwahan/blob/main/thema-1/assets/js/pawiwahan.js): `thema-1/assets/js/pawiwahan.js`

### Vue Invitation

- [Vue App](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/App.vue): `thema-2-VueJS/src/App.vue`
- [App Entry](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/main.js): `thema-2-VueJS/src/main.js`
- [Route Selection](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/router/index.js): `thema-2-VueJS/src/router/index.js`
- [Home View](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/HomeView.vue): `thema-2-VueJS/src/views/HomeView.vue`
- [Couple Details](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/AboutView.vue): `thema-2-VueJS/src/views/AboutView.vue`
- [Photo Carousel](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/Carousel.vue): `thema-2-VueJS/src/views/Carousel.vue`
- [Event Countdown](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/TheCountdown.vue): `thema-2-VueJS/src/components/TheCountdown.vue`
- [Audio and Social](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/SocialItem.vue): `thema-2-VueJS/src/components/SocialItem.vue`
- [Gallery](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/TheGalery.vue): `thema-2-VueJS/src/views/TheGalery.vue`

### Guest Interactions

- [RSVP Form](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/views/TheReservasiTest.vue): `thema-2-VueJS/src/views/TheReservasiTest.vue`
- [Guest List](https://github.com/parta99/pawiwahan/tree/main/thema-2-VueJS/src/views): `thema-2-VueJS/src/views`
- [Nested Comments](https://github.com/parta99/pawiwahan/blob/main/thema-2-VueJS/src/components/TheAuthComments.vue): `thema-2-VueJS/src/components/TheAuthComments.vue`

### External Services

- **Google Sheets**
- **Firebase Auth**
- **Comments API**

### Other components

- **Invitee**

## Connections

- Invitee → Theme 1 Site: opens invitation
- Theme 1 Site → Invitation Behavior: runs scripts
- Invitee → App Entry: opens invitation
- App Entry → Vue App: mounts app
- App Entry → Route Selection: installs router
- Vue App → Route Selection: renders routes
- Route Selection → Home View: selects route
- Route Selection → Couple Details: selects route
- Route Selection → Vue App: renders view
- Invitee → RSVP Form: submits RSVP
- RSVP Form → Google Sheets: submits form
- Invitee → Guest List: views guests
- Guest List → Google Sheets: uses guest data
- Invitee → Nested Comments: posts comments
- Nested Comments → Firebase Auth: authenticates user
- Nested Comments → Comments API: sends comment requests