Embed ATS in your site

Drop the Δ ATS clock anywhere with a single <script> and one element. This page is a self-contained integration guide for third-party sites — no spec knowledge required.

Cross-references: design rationale in analog-clock (annex), conformance contract in manifesto §16.5, integrity policy in SECURITY.md §5.

1. One-liner

<script src="https://s-geffroy.github.io/ATS/assets/js/ats-clock.js" defer></script>
<ats-clock></ats-clock>

Live example (this very page):

2. Configurable attributes

The element observes attribute changes and re-renders live; updates-per-second is clamped at runtime.

3. CSP guidance (strict recommended)

The component runs entirely in the page (no network at runtime). Embedders SHOULD serve it under a strict Content Security Policy. The minimum policy that lets <ats-clock> work without 'unsafe-inline' is:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://s-geffroy.github.io;
  style-src 'self';
  img-src 'self' data:;
  connect-src 'self';
  object-src 'none';
  base-uri 'self';

What this costs you: no inline <script> blocks on the same page, no inline style="..." attributes on the embedded clock (the component uses Shadow DOM, so its internal styles are not affected). If you cannot avoid inline scripts, prefer hosting ats-clock.js on your own origin (see §5) and tighten script-src to 'self'.

Subresource Integrity (SRI): the script's content can shift between releases (we follow SemVer). Either pin a specific commit SHA in the URL, or self-host (§5) and compute SRI at build time.

4. Accessibility

<ats-clock> exposes its current value through aria-live="polite" on the inner readout, so screen readers announce updates without interrupting the user. The element is keyboard-inert (no focusable internals). Embedders SHOULD:

• Place the clock inside a region with an explicit heading (<h2> or aria-labelledby) so it has context.
• Avoid wrapping it in a <button> or making it part of a tabbing flow — it has no user action.
• Use updates-per-second="1" for ambient displays (less screen-reader chatter; users who want Blink granularity can override).

5. Self-hosting and alternative endpoint

For the strictest CSP and to remove the third-party dependency, copy ats-clock.js (and optionally ats.js if you also want the raw conversion routines) into your origin:

curl -O https://raw.githubusercontent.com/s-geffroy/ATS/main/docs/assets/js/ats-clock.js
curl -O https://raw.githubusercontent.com/s-geffroy/ATS/main/docs/assets/js/ats.js

Then your script-src can be just 'self'. Cross-references for self-host vs CDN trade-offs: SECURITY.md §5.

Server-side alternative. If you cannot execute JavaScript on the client, fetch the hourly snapshot at /api/now.json (regenerated by a GitHub Actions cron, see spec_version field for drift detection):

curl -s https://s-geffroy.github.io/ATS/api/now.json
# {
#   "utc": "2026-06-15T11:00:00Z",
#   "ats_canonical": "T+ Δ 20.7.8.4.45833",
#   "ats_display": "Δ20.7.8.4-45.8",
#   "spec_version": "0.7",
#   "cadence_minutes": 60
# }

This is not a live endpoint — it is refreshed hourly. For sub-minute precision, do the conversion locally with ats.js or code/ats.py.

6. Three concrete examples

Light-theme blog

<article>
  <h2>Posted</h2>
  <ats-clock format="short" lang="en" updates-per-second="1"></ats-clock>
</article>

Dark-theme dashboard tile

<section style="background:#0b0f17;color:#e8eef7;padding:1rem;border-radius:8px">
  <h2 style="margin:0 0 .5rem">ATS now</h2>
  <ats-clock format="both" lang="en" updates-per-second="10"></ats-clock>
</section>

Badge in a Markdown README

[![I run on Δ ATS](https://s-geffroy.github.io/ATS/assets/badge.svg)](https://s-geffroy.github.io/ATS/)

7. Live variants

8. Troubleshooting

9. npm (planned, v1.0)

The reference JavaScript routines are exported as a package (not yet published — see ROADMAP V1.0-H and versioning §7.2 (4)):

// import { atsFromMs, toCanonical, toShort } from '@s-geffroy/ats';
// import '@s-geffroy/ats/web-component'; // registers <ats-clock>