# tsoding/playlist architecture

> Architecture diagram of the GitHub repository tsoding/playlist, 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/tsoding/playlist
- Repository: https://github.com/tsoding/playlist

## Overview

Playlist is a small static site listing tracks the author plays before streams and during breaks. The README identifies the site but does not describe its implementation or how its files connect, so the graph shows only the documented user entry point; relationships among the HTML and CSS files are not verified.

Main entry points: [`index.html`](https://github.com/tsoding/playlist/blob/main/index.html) (Playlist page)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_listener(("Listener"))
node_playlist["Playlist page<br/>[index.html]"]
node_main_css["Main styles<br/>[main.css]"]
node_reset_css["Reset styles<br/>[reset.css]"]

node_listener -->|"opens"| node_playlist

click node_playlist "https://github.com/tsoding/playlist/blob/main/index.html"
click node_main_css "https://github.com/tsoding/playlist/blob/main/main.css"
click node_reset_css "https://github.com/tsoding/playlist/blob/main/reset.css"

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_listener toneIndigo
class node_playlist,node_main_css,node_reset_css toneTeal
```

## Components

### Other components

- **Listener**
- [Playlist page](https://github.com/tsoding/playlist/blob/main/index.html): `index.html`
- [Main styles](https://github.com/tsoding/playlist/blob/main/main.css): `main.css`
- [Reset styles](https://github.com/tsoding/playlist/blob/main/reset.css): `reset.css`

## Connections

- Listener → Playlist page: opens (evidence: `README.md`)