Files
ipx/site/index.html
2026-10-16 21:06:44 +00:00

139 lines
7.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>iPX</title>
<meta name="description" content="iPX checks your podcasts, downloads new episodes and gives everyone at home an account of their own, on your own server. The successor to iPodderX, free and open source.">
<meta name="color-scheme" content="light">
<link rel="icon" href="/favicon.png">
<link rel="preload" href="/fonts/inter.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="/docs/">Docs</a>
<a href="https://directory.ipxreader.app">Directory</a>
<a class="src" href="https://git.sdf1.net/rays/ipx" title="Source code on git.sdf1.net"><img src="/gitea.svg" alt="Source code" width="28" height="28"></a>
</nav>
</header>
<main>
<section class="hero">
<h1>iPX</h1>
<p class="intro">iPX checks your podcasts, downloads new episodes, and gives everyone at home their own account to listen from in the browser. It runs on your own server.</p>
<p class="acts">
<a class="btn primary" 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>
</figure>
<!-- Each feature beside the part of the app that shows it, cut from a scratch iPX on public
podcasts, in a navy frame like the dial's. -->
<section class="does" aria-label="What it does">
<div class="feature">
<div class="say">
<h3>New episodes, ready to play</h3>
<p>iPX checks your podcasts through the day and downloads new episodes as they come out. Skip the ones you don't want by keyword, or leave out explicit ones. Old episodes are cleared to stay within the space you give it, but never one someone has pinned.</p>
</div>
<figure class="frame"><img class="cut" src="/shots/episodes.webp" width="904" height="283" loading="lazy"
alt="99% Invisible's episodes in a table with each one's size and date, and the downloaded one's file beside it, ready to play, save, share or delete."></figure>
</div>
<div class="feature">
<div class="say">
<h3>Pick up where you left off</h3>
<p>The player keeps your place in every episode, on every device.</p>
</div>
<figure class="frame"><img class="cut player" src="/shots/player.webp" width="950" height="80" loading="lazy"
alt="The player along the bottom of the page: the episode playing, back and forward, and how far in it is."></figure>
</div>
<!-- DeadAir: talk keeps its length, the quiet between it shrinks to a short pause, and the
episode ends sooner. CSS only; the page runs no script of its own. -->
<div class="feature">
<div class="say">
<h3>All talk, no dead air</h3>
<p>Radio has a name for silence on air: dead air. Turn on DeadAir for a show and its long silences shrink to a pause as short as you like. Everyone still talks at their own pace; the episode just ends sooner.</p>
</div>
<figure class="frame deadair" role="img" aria-label="A waveform whose silent gaps shrink to short pauses, so the episode ends sooner.">
<div class="wave" aria-hidden="true">
<span class="talk t1"></span><span class="hush"></span>
<span class="talk t2"></span><span class="hush"></span>
<span class="talk t3"></span><span class="hush"></span>
<span class="talk t4"></span><span class="hush"></span>
<span class="talk t5"></span><span class="hush"></span>
<span class="talk t6"></span>
</div>
</figure>
</div>
<div class="feature">
<div class="say">
<h3>Tune out the noise</h3>
<p>Your feeds bring in more than anyone has time for. A Signal listens across all of them for one subject: give it a name, the words to listen for, and a sentence saying what you mean if the words are not enough. What fits lands in a list of its own, starting with the last month, and it keeps listening. Signals need a key of your own from <a href="https://typesafe.ai">typesafe.ai</a>.</p>
</div>
<figure class="frame"><img class="cut" src="/shots/signals.webp" width="874" height="398" loading="lazy"
alt="A Signal called Space, picked out of the noise of eight feeds: episodes and posts about galaxies, Artemis II, Mars and a rocket launch from Hackaday, Universe Today, NASA's Houston We Have a Podcast and Ars Technica."></figure>
</div>
<div class="feature">
<div class="say">
<h3>See what others listen to</h3>
<p>iPX servers can share which podcasts their listeners follow, and the directory gathers them in one place. <a href="https://directory.ipxreader.app">Browse the directory</a> to find something new and subscribe in one click.</p>
</div>
<figure class="frame"><img class="cut half" src="/shots/directory.webp" width="700" height="133" loading="lazy"
alt="The directory's most subscribed shows, each with its cover and how many people subscribe."></figure>
</div>
<dl class="also">
<div><dt>BitTorrent too</dt>
<dd>Some shows publish their episodes as torrents. iPX downloads them like any other, shares them back for as long as you choose, and a slow one never holds up the rest.</dd></div>
<div><dt>Subscribe to a whole list</dt>
<dd>Some people publish lists of podcasts they recommend, as OPML. Give iPX a list's address and it keeps a folder of those shows up to date as the list changes. Your own subscriptions move in and out the same way.</dd></div>
<div><dt>Sign in your way</dt>
<dd>Everyone signs in with a password, or with the single sign-on you already use, Cloudflare Access or Authentik. An admin adds people and decides who else is one.</dd></div>
<div><dt>Blogs too</dt>
<dd>Any RSS or Atom feed works, so the blogs you read sit beside the shows you listen to, and iPX keeps track of what you have read.</dd></div>
</dl>
</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 that app rebuilt to run on your own server.</p>
</section>
</main>
<footer>
<p>iPX is free and open source under the MIT licence.</p>
</footer>
</body>
</html>