First commit

README.md

@@ -1,2 +1,82 @@
 # circlewithadot.net
 
+Static website for **[Circle With A Dot](https://circlewithadot.net)** — a simple site for my music, tech projects, and socials. I keep the pages minimal so visitors can get where they want quickly. This site is tailored to my needs; feel free to fork and adapt it to yours (within the terms of the **AGPL-3.0-or-later**). Some services I add might not be relevant to you, and that’s fine—contributions and ideas are always welcome. I am not an HTML/CSS/JS expert, but I hope some of this is useful for you.
+
+- No build step; plain **HTML/CSS/JS**
+- Works on any static host / reverse proxy (Caddy, Nginx, HAProxy, etc.)
+- **LibreJS-friendly**: first-party JS is labeled and a Web Labels page is provided
+
+---
+
+## Structure
+
+    /
+    ├─ index.html
+    ├─ style.css
+    ├─ images/
+    │  ├─ cwad_logo.png
+    │  ├─ pessimist.png
+    │  └─ icon_*.png
+    ├─ releases/
+    │  ├─ pessimist.html
+    │  └─ style.css              ← stylesheet for release pages
+    ├─ services/
+    │  ├─ aprelay.html
+    │  └─ aprelay.js
+    └─ about/
+       └─ javascript/
+          └─ index.html          ← LibreJS Web Labels page
+
+---
+
+## Components
+
+### Click-to-copy
+
+Use anywhere to get a “copied!” UX and copy to clipboard:
+
+    <span class="copyable" data-copy="https://example.com/inbox">
+      https://example.com/inbox
+    </span>
+
+### Relay stats widget (ActivityPub)
+
+`services/aprelay.js` tries these endpoints (in order) and fills `#instances`, `#jobs`, `#updated`:
+
+1. `https://relay-us-east.circlewithadot.net/relay-stats.json`
+2. `/relay-stats.json` (same origin)
+
+Expected JSON:
+
+    { "instances": 0, "jobs_per_min": 0, "updated": "2025-08-31T02:13:19Z" }
+
+---
+
+## Release landing pages (Hyperfollow-style)
+
+Each release gets a simple landing page under `/releases/SLUG.html` that links out to Spotify/Apple/Bandcamp/PeerTube/etc. The release pages use `/releases/style.css`.
+
+### Add a new release
+
+1. Copy `releases/pessimist.html` to `releases/<slug>.html` (or start from a template).
+2. Put the cover image in `images/` (e.g., `images/<slug>.png`).
+3. Edit the page:
+   - Update `<title>`, headings, description.
+   - Replace the cover image path + alt text.
+   - Paste platform links (clean URLs; no UTMs by default).
+4. Optionally add a link on `index.html` pointing to the new release page.
+
+Notes:
+- Icons live in `/images/icon_*.png`. Add more as needed and follow the same naming pattern.
+- Use descriptive `alt` text and `aria-label`s for accessibility.
+
+---
+
+## LibreJS & JavaScript licensing
+
+**LibreJS note:** All first-party JavaScript on this site is AGPL-3.0-or-later and labeled so the LibreJS add-on can verify and allow it. The Bandcamp embed on release pages loads third-party scripts that don’t publish LibreJS license markers, so LibreJS blocks that player by default (requiring whitelisting). I plan to replace the embed with a LibreJS-compatible approach (e.g., native `<audio>/<video>` with direct files) in a future update.
+
+## License
+
+- **Code** (HTML/CSS/JS): **AGPL-3.0-or-later** — see `LICENSE`.
+- Media (art, audio) may have different licenses; see file-level notes where applicable.