# 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.