ipx/site/index.html

<!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/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="https://directory.ipxreader.app">Directory</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="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>

  <!-- The window sits in a navy panel, the dial's material, rising out of its bottom edge as if
       set into the radio; shown near its own size so its text can be read. -->
  <section class="shots" aria-labelledby="shots">
    <h2 id="shots">In the browser</h2>
    <p class="shotlede">Everyone signs in to a list of their own: feeds down the side, episodes in a table with each one's notes below, and the player along the bottom, as iPodderX laid them out.</p>
    <figure class="window">
      <img src="/shots/desktop.webp" width="2400" height="1500" loading="lazy"
        alt="iPX in a desktop browser: the feed list down the side, 99% Invisible's episodes in a table, the newest one's notes below it, and the player along the bottom.">
    </figure>
  </section>

  <section class="pocket" aria-labelledby="phone">
    <img src="/shots/phone.webp" width="600" height="1298" loading="lazy"
      alt="iPX on a phone: Ologies with Alie Ward and its latest episodes.">
    <div>
      <h2 id="phone">On your phone</h2>
      <p>Add it to your home screen and it opens like an app, with the same lists and the same place in each episode as on your computer.</p>
    </div>
  </section>

  <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 download on their own, 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>BitTorrent too</dt>
        <dd>A show published as a torrent downloads like any other. iPX joins the swarm, seeds back until the ratio or time you set, and gives up on one that stalls. A slow swarm never holds up the rest.</dd></div>
      <div><dt>Subscribe to a whole list</dt>
        <dd>Give iPX the address of an OPML list and it keeps a folder in step with it, as whoever keeps the list adds and drops shows. Your own subscriptions import and export as OPML too.</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>Sign in your way</dt>
        <dd>Each person signs in with a password, or Cloudflare Access or Authentik signs them in for you. 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, each with its own read and unread.</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 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.</p>
</footer>
</body>
</html>