Files
antisocial/src/render/index-page.ts
T
thatguygriffandClaude Opus 5 abf8ec317c
CI / Typecheck, test, build (pull_request) Successful in 28s
Let the "Open on" button choose a browser
The StopTheMadness rules are indiscriminate, which is the point, but they
catch the link on the way back out as well: in the browser they are
installed in, "Open on <platform>" redirects straight back here. The one
button meant to reach the app is the one that cannot.

Handing the address to a different browser is the way past it, and the only
way to do that from a page is that browser's own URL scheme. `/` gets a
picker for which one; the choice lives in that browser's localStorage,
because which browsers are installed is a fact about the device and the
phone's answer is not the Mac's.

The scheme table is its own module so a test can pin it -- every browser
spells it differently, and Edge differs between macOS and iOS. Firefox has
no scheme on macOS, so it is only offered on iOS, and an unknown or
schemeless choice keeps the plain link rather than producing a dead one.
The markup still carries the plain https address and the script swaps it
afterwards, so nothing changes without JavaScript. Once a browser is
chosen the button says which, since a scheme for a browser that is not
installed opens nothing and the tap would otherwise be silent.

Closes #7

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01KF5YF3iZVKbezwALap8LYd
2026-08-29 19:36:00 -03:00

45 lines
1.5 KiB
TypeScript

import { config } from '../config.ts';
import type { PlatformSpec } from '../platforms/types.ts';
import { html } from './html.ts';
import { badge, layout } from './layout.ts';
/**
* There is no useful landing page for a redirect target, so this is the
* reference card instead: which prefixes exist, and the rewrite rules to
* paste into StopTheMadness.
*/
export function renderIndex(platforms: readonly PlatformSpec[]): string {
const origin = config.publicOrigin;
const body = html`<article class="post post--index">
<h1 class="index__title">antisocial</h1>
<p class="index__lede">
Point StopTheMadness at these and shared links open here instead of in an app.
</p>
<table class="index__table">
<thead>
<tr><th>Platform</th><th>Matches</th><th>Rewrites to</th></tr>
</thead>
<tbody>
${platforms.map(
(p) => html`<tr>
<td>${badge(p.id, p.label)}</td>
<td><code>${p.canonicalHost}</code></td>
<td><code>${origin}/${p.prefix}/…</code></td>
</tr>`,
)}
</tbody>
</table>
<section class="picker" hidden>
<label class="picker__label" for="open-in">Open original links in</label>
<select class="picker__select" id="open-in"></select>
<p class="picker__note">
The rewrite rules catch the original link too, so in Safari “Open on …” comes
straight back here. Another browser is a way out of that. Kept on this device.
</p>
</section>
</article>`;
return layout('antisocial', body);
}