# xtpm/cloverslove architecture

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

- Interactive diagram: https://gitdiagram.com/xtpm/cloverslove
- Repository: https://github.com/xtpm/cloverslove

## Overview

cloverslove is a personal, title-screen-style website. A visitor navigates its sections to view profile and activity, browse live GitHub repositories and README summaries, explore socials, and change settings. The browser app also manages the animated background, music, and synthesized menu sounds. A scheduled Cloudflare Worker records Spotify listening history in KV for the site to display. The main browser file is only partially excerpted, so documented capabilities are included, but uncertain internal call relationships are omitted.

Main entry points: [`main.js`](https://github.com/xtpm/cloverslove/blob/main/main.js) (Site and navigation), [`worker/src/index.js`](https://github.com/xtpm/cloverslove/blob/main/worker/src/index.js) (History API and recorder), [`sfx.js`](https://github.com/xtpm/cloverslove/blob/main/sfx.js) (Menu sound effects), [`public/assets/video`](https://github.com/xtpm/cloverslove/tree/main/public/assets/video) (Background media)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Browser experience"]
  node_app["Site and navigation<br/>[main.js]"]
  node_preferences["Settings and preferences<br/>[main.js]"]
  node_sound["Menu sound effects<br/>[sfx.js]"]
  node_media["Background media"]
  node_music["Background music<br/>[background.mp3]"]
end

subgraph group_profile["Profile and discovery"]
  node_about["About and activity<br/>[main.js]"]
  node_repos["Repository browser<br/>[main.js]"]
  node_readmes["Repository summaries<br/>[main.js]"]
  node_socials["Social links<br/>[main.js]"]
end

subgraph group_listening["Listening history"]
  node_history["Listening history view<br/>[main.js]"]
  node_worker["History API and recorder<br/>[index.js]"]
  node_kv[("Workers KV history<br/>[index.js]")]
end

subgraph group_services["External services"]
  node_lanyard["Lanyard presence"]
  node_github["GitHub API"]
  node_githubreadme["GitHub raw README"]
end

node_visitor(("Visitor"))
node_scheduler(("Cloudflare scheduler"))

node_visitor -->|"navigates"| node_app
node_app -->|"manages"| node_preferences
node_app -->|"plays"| node_sound
node_app -->|"uses"| node_media
node_app -->|"uses"| node_music
node_app -->|"renders"| node_about
node_app -->|"renders"| node_repos
node_app -->|"renders"| node_socials
node_repos -->|"fetches repositories"| node_github
node_repos -->|"opens summary"| node_readmes
node_readmes -->|"fetches README"| node_githubreadme
node_about -->|"fetches presence"| node_lanyard
node_worker -->|"checks listening"| node_lanyard
node_worker -->|"reads and writes"| node_kv
node_scheduler -->|"triggers recording"| node_worker
node_history -->|"fetches history"| node_worker

click node_app "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_preferences "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_sound "https://github.com/xtpm/cloverslove/blob/main/sfx.js"
click node_media "https://github.com/xtpm/cloverslove/tree/main/public/assets/video"
click node_music "https://github.com/xtpm/cloverslove/blob/main/public/assets/music/background.mp3"
click node_about "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_repos "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_readmes "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_socials "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_history "https://github.com/xtpm/cloverslove/blob/main/main.js"
click node_worker "https://github.com/xtpm/cloverslove/blob/main/worker/src/index.js"
click node_kv "https://github.com/xtpm/cloverslove/blob/main/worker/src/index.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_preferences,node_sound,node_media,node_music toneBlue
class node_about,node_repos,node_readmes,node_socials toneAmber
class node_history,node_worker,node_kv toneMint
class node_lanyard,node_github,node_githubreadme,node_scheduler toneRose
class node_visitor toneIndigo
```

## Components

### Browser experience

- [Site and navigation](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`
- [Settings and preferences](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`
- [Menu sound effects](https://github.com/xtpm/cloverslove/blob/main/sfx.js): `sfx.js`
- [Background media](https://github.com/xtpm/cloverslove/tree/main/public/assets/video): `public/assets/video`
- [Background music](https://github.com/xtpm/cloverslove/blob/main/public/assets/music/background.mp3): `public/assets/music/background.mp3`

### Profile and discovery

- [About and activity](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`
- [Repository browser](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`
- [Repository summaries](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`
- [Social links](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`

### Listening history

- [Listening history view](https://github.com/xtpm/cloverslove/blob/main/main.js): `main.js`
- [History API and recorder](https://github.com/xtpm/cloverslove/blob/main/worker/src/index.js): `worker/src/index.js`
- [Workers KV history](https://github.com/xtpm/cloverslove/blob/main/worker/src/index.js): `worker/src/index.js`

### External services

- **Lanyard presence**
- **GitHub API**
- **GitHub raw README**

### Other components

- **Visitor**
- **Cloudflare scheduler**

## Connections

- Visitor → Site and navigation: navigates (evidence: `README.md`)
- Site and navigation → Settings and preferences: manages (evidence: `README.md`)
- Site and navigation → Menu sound effects: plays (evidence: `main.js`)
- Site and navigation → Background media: uses (evidence: `README.md`)
- Site and navigation → Background music: uses (evidence: `README.md`)
- Site and navigation → About and activity: renders (evidence: `README.md`)
- Site and navigation → Repository browser: renders (evidence: `README.md`)
- Site and navigation → Social links: renders (evidence: `README.md`)
- Repository browser → GitHub API: fetches repositories (evidence: `main.js`)
- Repository browser → Repository summaries: opens summary (evidence: `main.js`)
- Repository summaries → GitHub raw README: fetches README (evidence: `main.js`)
- About and activity → Lanyard presence: fetches presence (evidence: `main.js`)
- History API and recorder → Lanyard presence: checks listening (evidence: `worker/src/index.js`)
- History API and recorder → Workers KV history: reads and writes (evidence: `worker/src/index.js`)
- Cloudflare scheduler → History API and recorder: triggers recording (evidence: `worker/src/index.js`)
- Listening history view → History API and recorder: fetches history (evidence: `main.js`)