circlewithadot.net

Static website for Circle With A Dot — 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>

services/aprelay.js tries these endpoints (in order) and fills #instances, #jobs, #updated:

https://relay-us-east.circlewithadot.net/relay-stats.json
/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

Copy releases/pessimist.html to releases/<slug>.html (or start from a template).
Put the cover image in images/ (e.g., images/<slug>.png).
Edit the page:
- Update <title>, headings, description.
- Replace the cover image path + alt text.
- Paste platform links (clean URLs; no UTMs by default).
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-labels 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.

3.2 KiB Raw Blame History Unescape Escape