CountLink

A free, zero-backend countdown timer. Set a duration, copy the link, send it to a room — everyone who opens that link sees the identical countdown, perfectly in sync, because the deadline is a timestamp encoded in the URL itself. No account, no server, no database.

Live at countlink.app. For local dev, open index.html directly or serve the folder — see below.

License: source-available, not open source. No LICENSE file means all rights reserved by default — this repo is public so the "nothing you paste is uploaded" claim is checkable, not an invitation to redistribute or relaunch it as your own product.

Why this exists

Full research and reasoning is in the project memory (see /Users/bruno/.claude/projects/-Users-bruno-Code-boring-apps/memory/), but the short version: single-purpose "boring" utility sites (vClock, Wheel of Names, word counters) generate real, verifiable ad revenue at near-zero operating cost. vClock specifically — a free online timer — earns an estimated ~$500K/yr from Google AdSense on ~5.4M monthly visits. CountLink copies that proven business model (free tool, one ad slot, programmatic SEO pages) while adding a genuine feature vClock doesn't have: shareable, synced-by-link countdowns.

Project structure

index.html              the tool — home page, canonical version of the UI
control.html            phone-control remote (opt-in, off by default — see docs/phone-control-setup.md)
assets/
  style.css             all styling, shared by index.html and every /timers/ page
  app.js                all timer logic, shared the same way
  control.js             control.html's logic — separate file, different DOM shape
  clock.js               clock correction: measures this device against /api/now, exposes CountlinkClock.now()
  realtime.js            phone-control pub/sub over Ably, plus the key→sid derivation (see "Phone control")
  realtime-config.js     the on/off switch — window.COUNTLINK_PHONE_CONTROL (no key here any more)
  vendor/qrcode-2.0.4.js QR codes drawn locally (MIT, Kazuhiko Arase), loaded on first use
sw.js                   service worker — network-first; caches pages as visited so the app opens offline
features.html           generated — every capability, named (see "The feature inventory")
timers/                 programmatic SEO landing pages (see docs/monetization.md)
  meeting-timer.html     the Meetings cluster hub
  exam-timer.html
  ...                    (the eight fixed-duration pages were consolidated into
                          /timers/ on 2026-07-29 — see _redirects for why)
guides/                 generated long-form articles
vs/                     generated head-to-head comparison pages (/vs/<competitor>)
functions/              Cloudflare Pages Functions — the only server-side code here
  mcp.js                 the MCP server at /mcp
  api/now.js             the current time, for clock.js
  api/realtime-token.js  phone-control tokens (holds the only Ably key, Pages secret ABLY_API_KEY)
  badge.svg.js           the README badge image
  j/[code].js            join codes: /j/<code> -> the ordinary #t= link
scripts/
  build-timer-pages.mjs  regenerates /timers/, /guides/, /vs/, features.html,
                          sitemap.xml and llms.txt from one data list
  articles.mjs           the /guides articles, as data
  comparisons.mjs        the /vs/ comparisons, as data — read its header before
                          editing: these pages make factual claims about other
                          companies and the rules are not stylistic
docs/
  monetization.md        step-by-step: analytics, AdSense, Pro/Stripe, growing /timers/
  perception-gap-2026-09-06.md  why assistants called this site "minimalist", and the fix
  phone-control-setup.md pause/adjust/stop from a phone — LIVE; who may control what, key rotation (done 2026-09-26) and how to repeat it, Ably usage
  webmcp.md              the in-browser agent tools, and the origin-trial token step
ads.txt                 AdSense seller-verification file — already filled in and live; AdSense approval is separate from this file existing
robots.txt              allows crawling, points to sitemap.xml
sitemap.xml             generated — do not hand-edit, re-run the build script instead
archive/                earlier prototype ideas explored before CountLink (kept for reference)

Running it locally

No build step for the pages themselves. Use the included server during development: it sends Cache-Control: no-store so edits always show up on reload, and it runs functions/ in-process with Pages-style routing, so /api/now, /api/realtime-token, /j/<code>, /badge.svg and /mcp all answer locally exactly as they do in production:

cd /Users/bruno/Code/boring-apps/countlink
node scripts/dev-server.mjs 4173
# open http://localhost:4173
# phone control locally needs a key: ABLY_API_KEY=<key> node scripts/dev-server.mjs 4173

After editing any file in assets/ that a page loads by URL (the stylesheet or any script), run node scripts/bump-asset-version.mjs. Assets are cached for 4 hours, and the build refuses to run if a page references a stale hash.

(This is also what .claude/launch.json runs when using the Claude Code preview.)

How the sync mechanic works

assets/app.js writes the countdown's end-timestamp and label into the URL hash on start, e.g. #t=1783378107213&l=Workshop%20resumes. Opening that same URL on any other device reads the same timestamp and counts down to it — so there's nothing to host, nothing to keep running, and no possibility of the "server" going down. Each page first checks the device's clock against /api/now and corrects for any error it can distinguish from network jitter (assets/clock.js); with the network gone it falls back to the device clock, which is all it ever used before 2026-09-26.

The URL contract: #t= vs #for=

There are two shapes of link, and the difference is the product:

#for= exists because until it did, only a human in a browser who had already pressed start could produce a working CountLink URL — the share link carries an absolute timestamp, so nothing that doesn't know the current epoch time could write one. That ruled out every context that wants to write a timer down in advance: an AI assistant answering "give me a 25 minute shared timer" (the largest traffic channel this site has), a bookmark, a calendar invite, a lesson plan, a saved OBS scene.

It accepts the same grammar the board accepts on paste — 25m, 1h30m, 90s, 5:00, 1:30:00, 45 — by calling the very same parsePastedDuration(), so there is only one duration syntax on the whole site. Add a label with &l=. Works on any timer page.

A setup link deliberately does not start itself. If it did, three people opening the same #for=25m would each get their own countdown from whenever they clicked — the per-visitor "evergreen countdown" deliberately rejected in docs/ and the exact opposite of "one fixed instant, identical on every screen". e2e/setup-link.spec.mjs fails if that ever changes.

The one exception is &go=1, which starts on load. It is opt-in precisely so "a shared link never auto-starts" stays a visible rule rather than a hidden per-page exception, and it exists for the OBS overlay — a Browser Source is one scene on one machine with every control stripped out and no link to copy from it, so there is no second viewer to fall out of sync with. The full overlay URL is /embed/?overlay=1#for=10m&go=1; both halves matter — /embed/ is the ad-and-analytics-free build, ?overlay=1 is what actually makes it transparent. Never hand out /?overlay=1 (see docs/overlay-ads.md: it redirects to /embed/ too late to stop the preload scanner queueing the ad scripts, and ads on a content-free screen is a live AdSense violation).

The MCP server (/mcp)

functions/mcp.js is a Cloudflare Pages Function exposing CountLink over the Model Context Protocol, so an assistant can hand someone a working link rather than telling them to go and make one. Four tools, all genuinely read-only (there is no backend — a timer is string arithmetic over a duration): create_timer, create_agenda, create_badge and describe_timer_link.

create_agenda takes an ordered list of { duration, label? } segments and returns one link on /timers/agenda-timer that starts now (or at an optional start_at) and advances through every segment on every screen, plus a run sheet. It mirrors encodeAgendaHash() in assets/app.js byte for byte and is round-tripped through that page's own parseAgendaHash() in the tests. describe_timer_link reads agenda links too, including a scheduled one that hasn't started yet.

A scheduled start_at in the future shows a "Starts soon" countdown, not an inflated first segment — computeAgendaState()'s idx gained a -2 ("not started") sentinel alongside the existing -1 ("finished"), because every segment boundary being positive meant any negative elapsed time used to resolve to segment 0, folding the wait into that segment's remaining time. Mirrored in functions/mcp.js's describeUrl(). e2e/agenda.spec.mjs covers the live transition — a 2-second-out agenda actually ticking over into its first segment with no reload, across all 5 browser projects.

create_timer covers three shapes with boolean flags: a plain shared link by default, for_obs_overlay: true for a self-starting OBS Browser Source, and embed_on_website: true for a ready-to-paste <iframe> snippet for someone's own web page. The last two are NOT the same URL shape despite both routing through /embed/ — OBS is one viewer, so its link auto-starts per load (#for=…&go=1); a website has many visitors, so its link must be a single fixed instant (#t=…) they all see identically, or it degenerates into the "evergreen per-visitor countdown" this product exists not to be. The website embed also carries the attribution <a> OUTSIDE the <iframe> — a link inside a frame is attributed to the frame's own document, not the host page, so it earns no backlink; this is the one mechanism on the whole site that compounds links without per-instance outreach (see docs/monetization.md).

create_badge is the same attribution mechanism for places an <iframe> cannot go — a GitHub README, a forum signature — where only a plain image is allowed. functions/badge.svg.js is a second, separate Pages Function (GET /badge.svg?t=<end-ms>&l=<label>&style=<board|minimal|light>, self-contained the same way mcp.js is) that server-renders an SVG showing coarse time remaining ("3d 04h left", never a live tick — GitHub's camo proxy strips scripts and caches images server-side, so promising one would be false) and links through to the live countdown. create_badge returns both a Markdown and an HTML snippet, always with the image wrapped in that link — never a bare <img>, for the same backlink reason as the website embed. A label lands inside real Markdown here, not just HTML, so it also gets CommonMark-escaped (\, [, ]) against breaking ![alt](url) open, on top of the usual HTML-attribute escaping.

create_timer's fixed-instant calls (start_now, embed_on_website) and create_agenda also return an .ics calendar file in structuredContent.ics — hand-built RFC 5545 (no library), CRLF line endings, escaped per §3.3.11, folded at 75 octets per §3.1. A second implementation of the same writer lives in assets/app.js behind the board's own "Add to calendar" button; test/mcp-server.test.mjs runs a shared corpus through both and fails if they ever disagree, the same discipline as the duration grammar and the agenda hash codec.

Deliberately one self-contained file with no imports: Pages routes functions/mcp.js → /mcp, and keeping the logic in the same module means test/mcp-server.test.mjs exercises the exact bytes that deploy, with no build step and no second copy to drift. It re-implements parsePastedDuration() because a Worker can't import a browser script that touches the DOM — a drift risk that is covered by a test running a shared corpus through both implementations.

.github/workflows/deploy.yml builds dist/ with a deny-list rsync, so functions/ ships by default; a test asserts it is never added to that list, because doing so would take /mcp off the internet with nothing failing.

Phone control (opt-in, LIVE since 2026-07-26)

assets/realtime.js + control.html add an optional layer on top of the sync mechanic above: pause, ±1 min, stop, and a flash message pushed from a phone to whatever screen has the countdown open. It's entirely separate from (and never a dependency of) the link-is-the-timer mechanic.

Only the control link can drive it (since 2026-09-26). Starting a controlled countdown mints a secret key, which stays in the host tab and the control link, and a session id derived from it by SHA-256, which goes in the share link. functions/api/realtime-token.js hands a session id a watch-only Ably token and a key a publish token, and holds the only Ably key. Before that date the share link alone could pause or stop the room's screen. See docs/phone-control-setup.md for the model, the key rotation (done 2026-09-26, with steps to repeat it), and the known limitations (down-mode only, no presence indicator).

Clock correction (since 2026-09-26)

A shared link carries an absolute instant, so a device with a wrong clock used to show the wrong time left, and classroom and venue PCs are the ones that drift. assets/clock.js asks /api/now for the time on load, NTP-style (the midpoint of the fastest of two round trips). It corrects only when the error is clearly bigger than the measurement's own uncertainty, so well-synced devices are left alone. It caches the result for 10 minutes in sessionStorage. app.js reads time through clockNow() everywhere a countdown is measured or minted, and shows one line under the board when a correction of 2s or more is in effect. Offline, it falls back to the device clock, which is all it ever used before.

Adding a new programmatic landing page

The real growth engine (per vClock's model — see docs/monetization.md) is having many indexed pages, each targeting one specific search query, all funnelling into the same tool.

1. Open scripts/build-timer-pages.mjs.
2. Add a new entry to the PAGES list at the top — every field must be unique (title, meta description, intro paragraph). Duplicate content across pages is the most common reason these get filtered out of Google's index instead of ranked. Also file the slug in GROUPS, just above PAGES. The index rail renders from GROUPS, so an unfiled page would never appear in site navigation — the build refuses to run rather than let that ship silently.
3. Run:
   bash

   node scripts/build-timer-pages.mjs
   

   This regenerates every file in /timers/ plus sitemap.xml from the template, so editing shared structure only ever happens in one place.
4. Commit the new /timers/<slug>.html file and the updated sitemap.xml.

Layout

Redesigned July 2026. Until then every page was main.wrap at 1000px centred, with the board stacked under a hero — one skeleton across all 38 pages, which is what made the site read as templated.

The page is now an instrument panel: a .chassis spec strip across the top, then a .rig grid of two tracks — a fixed index rail listing all 29 timers under their GROUPS headings, and the working area. Nothing is centred; the grid places things. Hard corners throughout, hairline rules between cells, micro-labels in mono, and exactly one signal colour which means live — if the red is on the page, something is counting.

The one thing deliberately not flattened is the split-flap board. A departure board is dark with light flaps, and it is the most distinctive asset across all three of these sites, so it keeps its dark chassis while the page around it turns light. That inversion is the whole idea: the panel is quiet, the instrument mounted on it is the only thing competing for your eye. In CSS this is done by token scoping — :root aliases the old dark-surface names (--paper-text, --panel, --board-deep…) to panel values, and .board re-declares them dark for its own subtree.

Ads, and where they are not

One ad unit per page, and it sits below the setup panel — never between the board and its own controls, which is where it used to sit and what put the duration controls 282px below the fold. test/ad-placement.test.mjs fails if it moves back up, if a second unit appears, or if any ad code returns to 404.html.

?overlay=1 screens carry no ad code at all. That took three attempts and is worth reading before touching any of it: see docs/overlay-ads.md, and note that removing the <ins> and skipping the push() is not sufficient on its own — the AdSense library injects its own auto-ad <ins> afterwards.

Stopwatch laps

A count-up board grows a Lap button and a split list. Laps are recorded on the screen that pressed the button and stay there — the link carries one instant, and a lap happens after that instant, so there is nothing to encode. The page says so rather than implying laps are shared; every other promise this site makes about the link is literally true and this one could not be.

Splits are derived from the marks on every read rather than stored, so the list cannot disagree with itself. Pure functions (lapRows, fmtLap, lapExtremes) are exported and covered by test/laps.test.mjs; the click flow is covered cross-browser in e2e/overlay-and-laps.spec.mjs.

"Your time"

The board's ends at / started at line names the reader's own zone, and adds a day when the instant is not on their today. The end of a countdown was always an absolute instant rendered per-device — this just says so, which is the sentence that matters for the webinar, Zoom and study-group pages. localEndLabel is pure and takes now explicitly, so test/local-time.test.mjs can pin both sides of a midnight boundary without touching the clock.

The embed builder

The one feature here whose point is off-site. Width, height, board style and fixed-vs-fluid, producing a live-updating <iframe> snippet — now on the homepage too, which previously had no embed feature at all despite being 66% of pageviews.

Two things must not drift, both covered by test/embed-builder.test.mjs:

• the frame is served from /embed/, the only path _headers exempts from X-Frame-Options: DENY (the widget silently failed to load on every third-party site until that was found) and the only copy with no ad or analytics tags;
• the attribution <a> sits outside the iframe. A link inside a frame is attributed to the frame's own document, so an iframe alone earns no link back — and referring domains are the single metric that has never moved for this domain.

?style= on /embed/ applies a board style without writing to localStorage: the host page picked it, not the reader, and an embedded board must never change the style of the full site in the same browser.

The agenda run of show

/timers/agenda-timer renders a printable table of the running order — segment, length, and the wall-clock window each one occupies, in the reader's own timezone. Derived from the same segment list and the same boundaries() the timer itself uses, so the sheet and the clock cannot disagree; test/run-sheet.test.mjs asserts that property directly rather than just checking the numbers match. @media print drops the builder, nav and ad and leaves the table.

Icons

assets/icons/*.png are generated by scripts/build-icons.mjs from the same geometry as assets/favicon.svg, so the raster set cannot drift away from the vector mark. It is not part of the content build — run it by hand when the mark changes:

node scripts/build-icons.mjs

No dependencies: the rasteriser and the PNG encoder are both in that file, and node:zlib does the compression.

Two things it fixes, neither of which is visible on the site itself:

• Safari ignores an SVG apple-touch-icon, and every page pointed at the SVG — so "Add to Home Screen" on iOS put a screenshot of the page on the home screen. It is a 180px PNG now.
• manifest.json declared one SVG icon. Android's install flow wants a 192 and a 512 PNG, plus a maskable variant so the launcher can crop to its own shape. The maskable one is the same mark scaled to fit inside the guaranteed 40%-radius safe circle — test/icons.test.mjs samples the artwork and fails if anything but flat background falls outside it.

The six hand-written static pages (/about, /compare, …) carried neither the manifest nor a touch icon, so installing from them did nothing. They do now.

The feature inventory

FEATURES in scripts/build-timer-pages.mjs is the single list of what this site does. It renders into three places and they can never disagree:

• /features — the full grid, plus WebApplication.featureList and ItemList JSON-LD carrying the same names in the same order.
• the homepage — a compact named block, synced between <!-- HOME_FEATURES_START/END --> markers by the build. Do not hand-edit it.
• llms.txt — a flat, quotable ## Features section above the narrative.

Add a capability by adding one row to FEATURES and rebuilding. Two rules, both enforced by test/features-page.test.mjs:

1. Every entry is a named capability with a verb — "Phone control", not "the trade-off we made about servers". This exists because the homepage used to lead with three absences ("no viewer limit, no account, no paid tier") and bury the real features in a paragraph that opened by calling them "a few things that don't get much billing up top". A summariser can only enumerate what a page enumerates, and AI referral is this site's largest real channel. Absences go in FEATURE_NEVERS, after the capabilities — a feature name starting with "No" fails the test.
2. It must be true today. test/faq-claims.test.mjs fails on copy that promises a feature as future or denies one that has shipped.

Join codes (/j/<code>)

A five-character code a person can read out to a room — countlink.app/j/K3M7Q — because a #t=1788634982117 link cannot be spoken, and a projector cannot be copy-pasted from.

It needs no database: the code is the deadline, in Crockford base 32 (seconds since a fixed 2026 epoch). The alphabet omits I, L, O and U, so there is no spoken ambiguity, and decoding folds the confusions back anyway — someone who hears "oh" and types the letter still lands on the right countdown. Codes are case-insensitive and tolerate spaces and hyphens.

The codec exists twice on purpose: encodeJoinCode/decodeJoinCode in assets/app.js (mints it in the browser) and in functions/j/[code].js (resolves it at the edge). There is no build step here, so a shared module isn't available; test/join-code.test.mjs cross-checks the two over a fixed corpus, which is what makes the duplication safe. Change one and that test fails until you change the other.

Two documented trade-offs, both stated on /features rather than hidden: a code carries seconds, not milliseconds, so code-holders agree exactly with each other and can be up to half a second from someone holding the #t= link; and it carries no label, because a label cannot be made speakable.

Only down-mode countdowns get one — a count-up or interval link needs a direction flag a five-character code can't carry, and handing back a code that resolves to the wrong kind of timer is worse than offering none.

Comparison pages (/vs/<competitor>)

Four head-to-head pages, generated from scripts/comparisons.mjs. /compare is the hub and links all four; each links back and to its siblings. There is deliberately no /vs/ index — that would be a fifth URL doing /compare's job, on a domain whose measured problem is that Google won't spend crawl budget here.

These pages assert other companies' prices and limits, so the rules in that file's header are enforced by test/comparisons.test.mjs rather than left to discipline:

• Every figure is verified against the vendor's own pricing page and dated on the page, with a nofollow link to the source. A test fails the build once any verified date is more than six months old — so these cannot quietly rot into misinformation. Re-check the pricing pages and update the date when that fires.
• "What they do better" is mandatory, minimum 60 words. A comparison where the author wins every row is an advert and reads as one; this section is what makes the rest of the page believable, and it is what an assistant quotes.
• No adjectives about competitors. A slur regex fails the build. State what a product does and what it costs.
• Never their copy, screenshots or branding.

Getting new pages indexed

Two paths, and only one of them is automatable:

node scripts/submit-indexnow.mjs --dry-run   # see what would be sent
node scripts/submit-indexnow.mjs             # submit every sitemap URL

IndexNow reaches Bing, Yandex, Seznam and Naver. Google does not participate. Google's old google.com/ping?sitemap= endpoint was retired in 2023 and now returns 404 — do not add it back thinking it does something. For Google the entire path is: sitemap.xml is listed in robots.txt, the property is verified in Search Console, and Google re-reads the sitemap on its own schedule. Submission has never been this site's constraint; crawl budget is (42 of 45 URLs sat in "Discovered – currently not indexed" with 1 referring domain), which is why new pages are added sparingly and always wired into an existing hub rather than left as orphans.

The Google Indexing API is not an option here — it is contractually restricted to JobPosting and BroadcastEvent structured data. Don't suggest it for ordinary pages.

Tests

Two layers, run separately:

npm test          # node --test — pure logic, ~1s, zero dependencies
npm run test:e2e  # Playwright — 5 browser projects against the real dev server
npm run test:all  # both

node --test covers the duration model, hash parsing, phone-control maths and permissions (test/realtime.test.mjs: the SHA-256, the token endpoint's roles, the TokenRequest signature), clock correction, and the page/URL invariants. It stays dependency-free and fast, and it is what the build guard leans on.

The Playwright suite (e2e/) covers what pure tests structurally cannot: whether the settable board's interaction survives a different engine. It runs Chromium, Firefox, WebKit, and real device emulation for iPhone (WebKit) and Pixel (Chromium) — the last two matter because touch has no hover at all, so tap-to-reveal is the only way to reach the chevrons there.

E2E specs added 2026-09-26: phone-control (a host, a viewer in a separate browser context and a controller, over a stand-in Ably that enforces token capabilities), clock, offline (a real service worker through a real offline switch), qr (every QR decoded back with jsQR) and webmcp.

Two real bugs were invisible to Chromium alone and only surfaced once the suite ran cross-browser:

• the clipboard handler was bound to #tiles, which is the only place Chromium delivers a paste made over a non-editable element — Firefox and WebKit dispatch it at the document, so paste silently did nothing in both;
• .rig set align-items:start for the desktop grid, which carried into the mobile flex column and stopped .rig-main stretching, so the AdSense ins tag's negative margin pushed it ~36px wider than the viewport and clipped the board's right edge on phone widths. html{overflow-x:hidden} had been hiding the symptom.

Writing the suite also exposed that Esc did nothing: it re-read #customMin, which the board itself writes to on every edit, so "undo my rolling" restored exactly what you had just rolled. It now restores the last duration that came from outside the board.

The board is the input

As of August 2026 the split-flap board is not just a readout — on a board that isn't running, you set the countdown on the flaps themselves. This came out of watching a first-time visitor try to touch the digits and find nothing: the tiles are the largest, most button-like objects on the page (92x130px on desktop) and were completely inert, while the real duration controls sat 282px below the fold behind the ad slot. vClock and online-stopwatch.com both use read-only displays too, so this is a genuine differentiator rather than catch-up.

One rule governs it: settable when idle, sealed when live. setState() toggles .board.settable, and that is the only place the rule lives. A running or shared board has the controls removed from the DOM entirely — not hidden in CSS — because the product promise is that everyone opening a link sees the identical countdown, so a viewer must have nothing to press. Three independent guards enforce it (buildTiles() only builds controls when settable, setState() strips them on the way into a live state, and every CSS rule that reveals a control is gated behind .board.settable); test/settable-board.test.mjs fails if any of the three is removed.

The value model is one duration, held as total seconds — never three independent digit wheels. That is what gives carry and borrow: rolling seconds up from 59 adds a minute rather than wrapping and silently shortening the countdown by 59 seconds. It also means the hours pair can grow and retract on its own, so there is no "mode" for anyone to manage. The pure functions (clampTotalSeconds, fieldsFromTotal, parseKeypadDigits, bumpTotal, parsePastedDuration, needsHours) live in one block in app.js above the announcements section and are exported for the test runner.

Input paths: chevrons on hover/focus, arrow keys (shift = 10), typing like a microwave keypad (digits fill from the right; 9000 normalises to 1:30:00), scroll wheel, vertical drag on touch, and paste (1:30:00, 90m, bare 45 = minutes). A slim +hr ghost sits where the hours pair will appear; a zeroed hours field swaps its own down-chevron for − Hrs.

Two things that look like details and are not:

• Chevrons are absolutely positioned overlays so they never enter layout flow. .board reserves the tile row's height via --th before JS runs (a measured CLS fix); anything that pushed the row around on hover would hand that back. Measured CLS after the change is 0.
• touch-action is pan-y until a field is focused, then none. Claiming the vertical axis unconditionally means a swipe starting on the board — which fills most of a phone screen — doesn't scroll the page. Tap to engage, then drag.

Opted out entirely: days-mode boards (date targets like Christmas render one plain string, and a date picker is the right control for a date), count-up, interval and agenda boards, and any page with no #tiles.

Chrome sync. CountLink pre-dates the template engine, so index.html, about, how-it-works, compare and the three legal pages are real files rather than generated ones. Rather than retrofit them to a generator, the two blocks that must be identical everywhere — the chassis and the timer index — are generated in build-timer-pages.mjs and written into those files between CHROME_START/CHROME_END and INDEX_START/INDEX_END markers on every build. Don't hand-edit between the markers; a test compares each hand-written page's chassis against a generated one and fails if they drift.

Below 900px the index rail moves below the working area via flex order, so the board is still the first thing on the page on a phone. That is this site's one hard layout rule — you open it to hand a room a clock.

Deployment

Live at countlink.app since July 2026, on Cloudflare Pages — but not via Cloudflare's git-connected dashboard integration. .github/workflows/deploy.yml runs on every push to main: it rsyncs the repo into a dist/ staging copy with a DENY-list (everything public by default; scripts/, test/, e2e/, docs/, .claude/, package.json etc. excluded — see that workflow's own header comment for why deny-list over allow-list), guards that nothing private leaked in and that every sitemap URL has a real file, then deploys dist/ with wrangler pages deploy (direct-upload, not the dashboard integration). .github/workflows/test.yml runs node --test plus the Playwright suite across 5 browser projects on the same push, in parallel with the deploy — a flaky browser run can never block a content fix from shipping. See both workflow files' own comments before changing either.

One Pages secret lives outside the repo: ABLY_API_KEY (production), read by functions/api/realtime-token.js. Without it phone control fails quietly (the endpoint answers 503) and everything else is unaffected. Set or rotate it with npx wrangler pages secret put ABLY_API_KEY --project-name countlink; see docs/phone-control-setup.md.

To point this setup at a different domain: update SITE_URL in scripts/build-timer-pages.mjs and the canonical/og:url values in index.html, re-run the build script, add the new domain under Cloudflare Pages → Custom Domains, and add the CLOUDFLARE_API_TOKEN / CLOUDFLARE_ACCOUNT_ID repo secrets the deploy workflow expects.

Domain name research

Availability confirmed via direct registry RDAP on 2026-07-07 (Verisign for .com, Google Registry for .app, Identity Digital for .io, GoDaddy WHOIS for the rest); pricing confirmed via a live Porkbun quote the same day:

Recommendation: countlink.app over countlink.io. Both are equally modern and trustworthy-feeling for a web tool, .app enforces HTTPS by default (a small built-in security/trust signal), and at $14.93/yr renewal vs $51.80/yr for .io it's roughly $185 cheaper over 5 years for no real downside. Only reason to pick .io instead: if you specifically don't want to explain a newer TLD to a less tech-savvy audience — .io reads as slightly more conventional to some users, .app less universally recognized (yet). Skip countl.ink/count.link — cute wordplay, but harder to say aloud correctly and the premium pricing on count.link isn't worth it for the novelty.

Git / version control

Live GitHub repo at github.com/mrbrunocode/countlink, main as the default and only long-lived branch — every push to it triggers the deploy and test workflows above. Use HTTPS remotes, not SSH: there is no SSH key set up on the machines this gets worked on from, and gh repo create defaulting to a git@github.com: remote has silently left a repo pushless twice before (see the family-level CLAUDE.md for the fix).

Monetization

See docs/monetization.md for the full, ordered checklist (analytics → AdSense application → ads.txt → growing /timers/). Pro/Stripe is deliberately deferred, not part of the launch checklist — see that doc's Step 4 for why and when to revisit it.

SEO / backlink outreach

See docs/seo-outreach-plan.md for the full plan — designed to run agent-first with minimal check-ins, not as a manual checklist. Day to day, one command tells you everything:

node scripts/outreach-status.mjs             # what's done, what an agent can act on, what needs Bruno

After changing the pitch copy or target list in scripts/generate-submission-kit.mjs, re-sync the ledger (this never touches existing progress, only adds new targets):

node scripts/generate-submission-kit.mjs
node scripts/outreach-status.mjs sync