ipxreader.app: a home page for iPX (#216)

A static page in site/, built into site/dist by site/build.sh with the logo and icon from web/,
for Cloudflare Pages. The hero's dial is the iPodderX logo's tuning scale at full size, its
stations shows from the directory; the needle sweeps once on load (not with reduced motion) and
lights the one it stops on. One typeface, Archivo, self-hosted, its width axis doing the work.
No script; _headers sets a CSP that allows only the site's own files.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

site/index.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>iPX, a podcatcher for the whole household</title>
+<meta name="description" content="iPX checks your feeds, downloads new episodes and gives everyone at home their own list, on your own server. The heir to iPodderX, free and open source.">
+<meta name="color-scheme" content="light">
+<link rel="icon" href="/favicon.png">
+<link rel="preload" href="/fonts/archivo.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/site.css">
+</head>
+<body>
+<header class="bar">
+  <a class="home" href="/"><img src="/logo.svg" alt="" width="36" height="36">iPX</a>
+  <nav aria-label="Elsewhere">
+    <a href="https://directory.ipxreader.app">Directory</a>
+    <a href="https://git.sdf1.net/rays/ipx">Source</a>
+  </nav>
+</header>
+
+<main>
+  <section class="hero">
+    <h1>iPX</h1>
+    <p class="lede">A podcatcher for the whole household, running on your own server.</p>
+    <p class="intro">It checks your feeds, downloads new episodes, and gives everyone at home a list of their own to listen from in the browser, all sharing one copy of each file.</p>
+    <p class="acts">
+      <a class="btn primary" href="#run">Run it on your server</a>
+      <a class="btn" href="https://directory.ipxreader.app">Browse the directory</a>
+    </p>
+  </section>
+
+  <!-- The iPodderX logo is a radio's tuning scale and needle. Here the scale is full size and its
+       stations are shows from the directory; the needle sweeps once and settles. -->
+  <figure class="dial" aria-label="A radio dial tuned across shows in the iPX directory">
+    <div class="scale"><div class="track">
+      <ol class="freq" aria-hidden="true">
+        <li>88</li><li>92</li><li>96</li><li>100</li><li>104</li><li>108</li>
+      </ol>
+      <ul class="stations">
+        <li>99% Invisible</li>
+        <li>Hackaday</li>
+        <li>Clarkesworld</li>
+        <li>Accidental Tech Podcast</li>
+        <li>Daring Fireball</li>
+        <li class="tuned">Ologies</li>
+        <li>Oxide and Friends</li>
+        <li>xkcd</li>
+        <li>The Sporkful</li>
+        <li>Acquired</li>
+        <li>Construction Physics</li>
+        <li>Dwarkesh Podcast</li>
+      </ul>
+      <span class="needle" aria-hidden="true"></span>
+    </div></div>
+    <figcaption>Some of what people listen to and read on iPX servers today.</figcaption>
+  </figure>
+
+  <section class="does" aria-labelledby="does">
+    <h2 id="does">What it does</h2>
+    <dl>
+      <div><dt>Everyone gets their own list</dt>
+        <dd>Each person subscribes, reads and listens at their own pace, and picks up where they left off on any device. However many of you want an episode, there is one copy on disk.</dd></div>
+      <div><dt>It does the fetching</dt>
+        <dd>Feeds are checked on a schedule and new episodes arrive over HTTP or BitTorrent, filtered by keyword, media type or explicit content. Old files are cleared to stay within the disk space you give it, never one somebody pinned.</dd></div>
+      <div><dt>DeadAir</dt>
+        <dd>Turn it on for a show and iPX plays it without its long silences, leaving the pause you choose. The original file stays as it is.</dd></div>
+      <div><dt>A shared directory</dt>
+        <dd>iPX servers can share the public shows their people follow. Browse it to find something new, and subscribe in one click from your own server.</dd></div>
+      <div><dt>On your phone</dt>
+        <dd>Add it to your home screen and it opens like an app, with the same lists and the same place in each episode.</dd></div>
+      <div><dt>Blogs too</dt>
+        <dd>Any RSS or Atom feed works, and an OPML list can be a subscription of its own that keeps a whole folder of feeds in step.</dd></div>
+    </dl>
+  </section>
+
+  <section class="run" id="run" aria-labelledby="run-h">
+    <h2 id="run-h">Run it</h2>
+    <p>You need a machine that stays on and Docker. These three steps start iPX with everything kept beside it in SQLite.</p>
+    <ol>
+      <li><p>Get the source.</p>
+        <pre><code>git clone https://git.sdf1.net/rays/ipx.git
+cd ipx</code></pre></li>
+      <li><p>Build iPX and its web page.</p>
+        <pre><code>docker build -t ipx .
+docker build -f Dockerfile.web -t ipx-web .</code></pre></li>
+      <li><p>Start them, then open port 8099 on that machine and sign in as <b>admin</b> with the password <b>ipodderx</b>. Change it in Settings straight away.</p>
+        <pre><code>docker compose up -d</code></pre></li>
+    </ol>
+    <p>The <a href="https://git.sdf1.net/rays/ipx#run-it">README</a> covers Postgres, signing in through Cloudflare Access or Authentik, and every setting.</p>
+  </section>
+
+  <section class="then" aria-labelledby="then">
+    <h2 id="then">Since 2004</h2>
+    <p>iPodderX was one of the first podcatchers, a Mac app by Ray Slakinski and August Trometer, from the year podcasts got their name. iPX is its engine rewritten in Rust for a server, with a page modelled on the original window: the feed list down the side, the episodes in a table, the player along the bottom.</p>
+  </section>
+</main>
+
+<footer>
+  <p>iPX is free and open source under the MIT licence. <a href="https://git.sdf1.net/rays/ipx">Read the source</a> or <a href="https://git.sdf1.net/rays/ipx/issues">report a problem</a>.</p>
+</footer>
+</body>
+</html>