npm - fedipod-bb - Versions diffs - 0.2.0 - Mend

fedipod-bb 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/site/index.html ADDED Viewed

@@ -0,0 +1,301 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'self'; form-action 'self'">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>FediPod-BB</title>
+<link rel="icon" href="/icons/forum.svg" type="image/svg+xml">
+<link rel="stylesheet" href="/bb/tokens.css">
+<style>
+  /* The site's shared tokens are in tokens.css (web/admin/tokens.css): the
+     palette, the 20px base and the family. Only this page's layout is here. */
+  /* The page is at least the window, less a rem, so the footer sits at the
+     bottom of a short page and below the content of a long one. */
+  body { font: 1rem/1.55 var(--font); background: var(--bg); color: var(--fg); max-width: 58rem;
+    margin: 1.5rem auto; padding: 0 1rem 1rem; min-height: calc(100vh - 1rem);
+    display: flex; flex-direction: column; box-sizing: border-box; }
+  main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+  /* Reading is a column; an index is a table and wants the width. */
+  main > h1, article.post, section.reply, .topline { max-width: 44rem; }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  h1, h2 { color: var(--heading); }
+  header.top { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .35rem; }
+  header.top h1 { font-size: 1.4rem; margin: 0; }
+  header.top a { color: var(--heading); text-decoration: none; }
+  #mods-line { margin: .15rem 0 .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
+  #mods-acts { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
+  #mods-acts button { flex: 0 0 auto; font-size: 16px; font-weight: 600; background: var(--bg); color: var(--accent);
+    border: 1px solid var(--field-border); border-radius: 1rem; padding: .25rem .9rem; cursor: pointer; }
+  #mods-acts button:hover { background: var(--field-bg); }
+  /* The box search opens into keeps to the row rather than pushing the rest
+     of it onto a second line. */
+  #mods-acts input[type=text] { width: 11rem; max-width: 30vw; }
+  #mods-line .lead { color: var(--heading); font-weight: 600; }
+  #mods-line a { color: var(--accent); text-decoration: underline; }
+  header.top .who { margin-left: auto; display: flex; gap: .6rem; align-items: baseline; }
+  header.top .who #who-name { color: var(--heading); }
+  header.top .who button { font-weight: 600; background: var(--btn); color: var(--btn-text);
+    border: 1px solid var(--btn); border-radius: .4rem; padding: .3rem .7rem; cursor: pointer; }
+  header.top .who button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
+  nav.crumbs { color: var(--sub); margin: 0 0 1rem; }
+  nav.crumbs a { color: var(--accent); }
+  .dim { color: var(--sub); }
+  .hint { color: var(--sub); }
+  .topline { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
+  .topline h1 { margin: 0; }
+  /* The same button as the ones on a post: what it opens is the same box. */
+  .topline button, p.chips button.new { flex: 0 0 auto; font-size: 16px; font-weight: 600;
+    padding: .3rem .8rem; border-radius: .3rem; background: transparent; color: var(--accent);
+    border: 1px solid var(--line); }
+  .topline button:hover, p.chips button.new:hover { background: var(--field-bg); }
+  /* The row's own controls sit together at its right end, whatever the
+     categories in front of them do. */
+  p.chips .rowend { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
+  p.chips .rowend button.new { margin-left: 0; }
+  p.chips button.new { margin-left: auto; }
+  input[type=file] { font: inherit; font-size: 16px; }
+  .filelabel { font-weight: 600; }
+  p.empty.row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
+  p.empty.row button.new { margin-left: 0; }
+  /* The category chips are links: each one is an address for that view. */
+  a.chip { font-size: 16px; font-weight: 600; padding: .25rem .8rem; border-radius: 1rem;
+    border: 1px solid var(--line); color: var(--accent); text-decoration: none; }
+  a.chip:hover { background: var(--field-bg); text-decoration: none; }
+  a.chip.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
+  /* The index scrolls, not the page: the window keeps its header, its
+     categories and its footer while a long list moves under them. */
+  .scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
+  table.index thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
+  table.index { border-collapse: collapse; width: 100%; font-size: 1rem; table-layout: auto; }
+  /* A rem of air at both ends of every row, so no word sits on an edge. */
+  /* A heading that sorts is a button, and looks like the heading it is. */
+  table.index th button.sort { font: inherit; font-size: inherit; font-weight: 600; color: var(--sub);
+    background: none; border: none; padding: 0; cursor: pointer; }
+  table.index th button.sort:hover { color: var(--accent); text-decoration: underline; }
+  table.index th { text-align: left; font-weight: 600; color: var(--sub); padding: .4rem .7rem;
+    border-bottom: 1px solid var(--line); white-space: nowrap; }
+  table.index td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
+  table.index th:first-child, table.index td:first-child { padding-left: 1rem; }
+  table.index th:last-child, table.index td:last-child { padding-right: 1rem; }
+  /* Every other row on a ground of its own, so a long line is easy to follow
+     across to its date. */
+  table.index tbody tr:nth-child(even) { background: var(--stripe); }
+  /* A pinned topic is marked with an emoji: a star across the whole forum, a
+     pin within one category. The label is there for anyone not reading by eye. */
+  .pin { font-size: 1.05rem; line-height: 1; }
+  /* The topic takes the room; the rest are as wide as their words and no wider. */
+  table.index td:first-child, table.index th:first-child { width: 100%; font-weight: 600; }
+  table.index td:not(:first-child), table.index th:not(:first-child) { white-space: nowrap; }
+  table.index td:last-child, table.index th:last-child { text-align: right; }
+  /* A handle can run as long as the name of the topic itself. The column it is
+     in keeps to its width, the name takes the rest, and the whole handle is
+     still there to read on the cell. */
+  table.index td .who { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
+    white-space: nowrap; vertical-align: bottom; }
+  ul.list { list-style: none; padding: 0; margin: 0; }
+  ul.list li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
+  /* A list of things to change is not a list of things to read: no rules
+     between the rows, and each row stays one row. */
+  ul.list.bare li { border-bottom: none; padding: .35rem 0; }
+  /* A settings row stays one row: the field gives up width, the buttons and
+     the handle keep theirs. */
+  ul.list.bare .row, section.reply .row.oneline { margin: .2rem 0; flex-wrap: nowrap; align-items: center; }
+  ul.list.bare .row input[type=text], section.reply .row.oneline input[type=text] {
+    width: auto; flex: 1 1 8rem; min-width: 5rem; }
+  ul.list.bare .row .dim, section.reply .row.oneline .dim { white-space: nowrap; }
+  ul.list.bare .row button, section.reply .row.oneline button { flex: 0 0 auto; }
+  ul.list li .title { font-weight: 700; font-size: 1.15rem; color: var(--heading); }
+  ul.list li .meta { color: var(--sub); }
+  article.post { padding: 1rem 1.1rem; margin: .8rem 0; border: 1px solid var(--line); border-radius: .4rem; background: var(--bg); }
+  article.post .who { color: var(--sub); font-size: 16px; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
+  article.post .who .when { margin-left: auto; display: flex; gap: .6rem; }
+  article.post .acts { display: flex; gap: .5rem; margin-top: .7rem; justify-content: flex-end; }
+  p.chips { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
+  button.chip { font: inherit; font-size: 16px; padding: .25rem .8rem; border-radius: 1rem;
+    border: 1px solid var(--line); background: transparent; color: var(--accent); font-weight: 600; }
+  button.chip:hover { background: var(--field-bg); }
+  button.chip.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
+  .acts.mod { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
+  .acts.mod button { font-size: 16px; font-weight: 600; padding: .3rem .8rem; border-radius: .3rem;
+    background: transparent; color: var(--accent); border: 1px solid var(--line); }
+  .acts.mod button:hover { background: var(--field-bg); }
+  /* The two that cannot be undone by pressing them again: closing a topic and
+     deleting one. Marked so a moderator's eye catches them before the click,
+     not after — they sit together at the end of the row for the same reason. */
+  .acts.mod button.grave { border-color: var(--danger); color: var(--danger); }
+  .acts.mod button.grave:hover { background: var(--danger); color: var(--btn-text); border-color: var(--danger); }
+  article.post .acts button { font-size: 16px; font-weight: 600; padding: .3rem .8rem; border-radius: .3rem;
+    background: transparent; color: var(--accent); border: 1px solid var(--line); }
+  article.post .acts button:hover { background: var(--field-bg); }
+  /* The vote you cast, told apart from the one you did not by more than
+     colour: it is filled, and its border is the accent rather than the
+     divider line. */
+  article.post .acts button.voted { background: var(--field-bg); border-color: var(--accent); color: var(--fg); }
+  .votes { color: var(--fg); font-weight: 600; }
+  article.post .who b { color: var(--fg); }
+  /* A post's title and its words are one thing: half a line between them,
+     and the browser's own heading margins do not get a say. */
+  article.post h2 { font-size: 1.25rem; margin: 1rem 0 0; }
+  article.post h2 + .body { margin-top: .3rem; }
+  article.post .body { margin-top: .4rem; overflow-wrap: anywhere; }
+  article.post .body > :first-child { margin-top: 0; }
+  article.post .body > :last-child { margin-bottom: 0; }
+  article.post.waiting { background: var(--surface); border: 1px solid var(--line); border-radius: .4rem; padding: 1rem; }
+  article.post.gone .body { color: var(--sub); font-style: italic; }
+  article.post.picked { border-color: var(--accent); border-width: 2px; }
+  /* A reply sits under what it answers, with a line back to it. */
+  .nest { margin-left: calc(var(--depth) * 1.4rem); border-left: 2px solid var(--line); padding-left: .8rem; }
+  @media (max-width: 40rem) { .nest { margin-left: calc(var(--depth) * .5rem); } }
+  article.post .body img { max-width: 100%; height: auto; border-radius: .3rem; margin: .4rem 0; }
+  article.post .body pre { overflow-x: auto; background: var(--field-bg); padding: .7rem .8rem; border-radius: .3rem; }
+  article.post .body code { background: var(--field-bg); padding: .05em .35em; border-radius: .2rem; }
+  article.post .body blockquote { margin: .5rem 0; padding-left: .8rem; border-left: 3px solid var(--line); color: var(--sub); }
+  ul.list li span.title { font-weight: 700; font-size: 1.15rem; color: var(--heading); }
+  /* A box in front of the page can be moved: its heading is the handle, so
+     a reader who needs to see what is behind it drags it aside. */
+  dialog h2 { cursor: grab; touch-action: none; }
+  dialog h2:active { cursor: grabbing; }
+  dialog.moved { margin: 0; position: fixed; }
+  dialog { border: 2px solid var(--dialog-edge); border-radius: .5rem; padding: 0; background: var(--bg); color: var(--fg);
+    width: min(38rem, calc(100vw - 2rem)); box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .35); }
+  dialog::backdrop { background: rgba(0, 0, 0, .45); }
+  /* What came of pressing a button in a panel, where the button is. */
+  #panel-err.said, p.said { color: var(--ok); }
+  /* The settings panels put a label, its field and the buttons side by side,
+     which needs more width than a reply box does. */
+  #panel { width: min(48rem, calc(100vw - 2rem)); }
+  section.reply { padding: 1.1rem 1.2rem; background: var(--surface); }
+  section.reply h2 { margin-top: 0; }
+  ul.list li article.post { margin: .6rem 0 .2rem; }
+  ul.list li article.post .body { max-height: 12rem; overflow: hidden; }
+  section.reply h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
+  textarea, input[type=text] { font: inherit; padding: .55rem .6rem; box-sizing: border-box; border: 1px solid var(--field-border); border-radius: .3rem; background: var(--field-bg); color: var(--field-text); }
+  textarea { width: 100%; min-height: 6rem; }
+  input[type=text] { width: 18rem; max-width: 100%; }
+  ::placeholder { color: var(--sub); opacity: 1; }
+  textarea:focus, input:focus, button:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
+  button { font: inherit; font-weight: 600; padding: .6rem 1.3rem; border-radius: .4rem; border: 1px solid var(--btn); background: var(--btn); color: var(--btn-text); cursor: pointer; }
+  button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
+  button.primary { font-weight: 700; }
+  button.link { background: none; border: none; color: var(--accent); font-weight: normal; padding: 0 .2rem; }
+  button.plain { background: transparent; color: var(--accent); border-color: var(--line); }
+  button.plain:hover { background: var(--field-bg); }
+  button[disabled] { opacity: .5; cursor: not-allowed; }
+  a.big { display: inline-block; font-weight: 700; padding: .7rem 1.3rem; border-radius: .4rem; background: var(--btn); color: var(--btn-text); text-decoration: none; }
+  a.big:hover { background: var(--btn-hover); }
+  .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
+  #signin-handle, #fedi-handle { flex: 1 1 20rem; width: auto; }
+  /* What has arrived since this reader last opened the topic. A WORD, not a
+     colour: a reader who cannot tell the green apart still reads "New". */
+  .badge { display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.3;
+    padding: .1rem .55rem; margin-left: .5rem; border-radius: 1rem;
+    background: var(--btn); color: var(--btn-text); }
+  /* Off the page until a keyboard reaches it, then the first thing on it. */
+  .skip { position: absolute; left: -9999px; }
+  .skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--btn); color: var(--btn-text);
+    padding: .6rem 1rem; border-radius: .4rem; text-decoration: none; }
+  /* Said to a screen reader and not shown: state the page already makes plain
+     some other way — what is loading, how much arrived, that a link was copied. */
+  .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap; border: 0; }
+  section.reply label[for=reply-text] { display: block; margin: .7rem 0 .3rem; }
+  .err { color: var(--err); }
+  .err:empty { display: none; }
+  [hidden] { display: none !important; }
+  code { background: var(--field-bg); color: var(--field-text); padding: .05em .35em; border-radius: .2rem; }
+  p.empty { color: var(--sub); }
+  /* At the foot of the page, centred, clear of whatever is above it. */
+  footer.foot { margin: 1rem auto 0; color: var(--sub); font-size: 16px; text-align: center; }
+</style>
+</head>
+<body>
+<a class="skip" href="#main">Skip to content</a>
+<header class="top">
+  <h1><a id="forum-link" href="#/">Forum</a></h1>
+  <span class="who">
+    <span id="who-name"></span>
+    <button id="who-act">Sign in</button>
+  </span>
+</header>
+<p class="dim" id="mods-line"><span id="mods-who"></span><span id="mods-acts"></span></p>
+<nav class="crumbs" id="crumbs" aria-label="Breadcrumb"></nav>
+<p class="vh" id="say" role="status" aria-live="polite"></p>
+<main id="main" tabindex="-1">
+  <p class="dim">Loading…</p>
+</main>
+<p class="row" id="reply-row" hidden><button id="reply-open" class="primary">Reply</button></p>
+<dialog id="panel" aria-labelledby="panel-title">
+<section class="reply">
+  <h2 id="panel-title">Settings</h2>
+  <div id="panel-body"></div>
+  <p class="err" id="panel-err" role="alert"></p>
+  <p class="row"><button id="panel-close" class="plain">Close</button></p>
+</section>
+</dialog>
+<!-- Signing in on its own, for any action that needs an account rather than
+     only for writing. Whatever the reader was trying to do is remembered and
+     carried out once they are back. -->
+<dialog id="signin-dlg" aria-labelledby="signin-title">
+<section class="reply">
+  <h2 id="signin-title">Sign in</h2>
+  <p class="hint" id="signin-why" role="status"></p>
+  <label for="signin-handle">Your handle or WebID</label>
+  <div class="row">
+    <input type="text" id="signin-handle" placeholder="@you@server or @you@pod or your WebID" autocomplete="off">
+    <button id="signin-go" class="primary">Sign in</button>
+  </div>
+  <p class="hint" id="signin-note" role="status"></p>
+  <p class="hint">You can participate if you have a pod or a Fediverse account.
+  If you have only one or neither, a FediPod account will give you both.</p>
+  <p class="row"><a class="big" href="/new-account">Get a FediPod account</a></p>
+  <div class="row"><button id="signin-cancel" class="plain">Cancel</button></div>
+</section>
+</dialog>
+<dialog id="reply-dlg" aria-labelledby="reply-title">
+<section class="reply" id="reply">
+  <h2 id="reply-title">Reply</h2>
+  <div id="reply-signed-out">
+    <label for="fedi-handle">Your handle or WebID</label>
+    <div class="row">
+      <input type="text" id="fedi-handle" placeholder="@you@server or @you@pod or your WebID" autocomplete="off">
+      <button id="fedi-login">Sign in</button>
+    </div>
+    <p class="hint" id="fedi-note" role="status"></p>
+    <p class="hint">You can participate if you have a pod or a Fediverse account.
+    If you have only one or neither, a FediPod account will give you both.</p>
+    <p class="row"><a id="fedipod-signup" class="big" href="/new-account">Get a FediPod account</a></p>
+  </div>
+  <div id="reply-signed-in" hidden>
+    <p class="hint">Posting as <b id="reply-as"></b> <button id="masto-logout" class="link">Sign out</button></p>
+    <div class="row" id="topic-title-row" hidden>
+      <label for="topic-title">Topic name</label>
+      <input type="text" id="topic-title" placeholder="What this topic is about" autocomplete="off">
+    </div>
+    <label for="reply-text" id="reply-text-label">Your reply</label>
+    <textarea id="reply-text" placeholder="Write your reply"></textarea>
+    <p class="row">
+      <label class="filelabel" for="reply-image">Add an image</label>
+      <input type="file" id="reply-image" accept="image/*">
+      <span class="hint" id="reply-image-said"></span>
+    </p>
+    <div class="row">
+      <button id="reply-cancel" class="plain">Cancel</button>
+      <button id="reply-send" class="primary">Post reply</button>
+    </div>
+  </div>
+  <p class="hint" id="reply-private" hidden></p>
+  <p class="err" id="reply-err" role="alert"></p>
+</section>
+</dialog>
+<footer class="foot">
+  Powered by <a href="https://github.com/jeff-zucker/FediPod" rel="noopener">FediPod-BB</a>.
+  This site adheres to the <a href="https://solidproject.org/code_of_conduct" rel="noopener">Solid Code of Conduct</a>;
+  please use the report button as needed.
+</footer>
+<script type="module" src="/bb/bb.js"></script>
+</body>
+</html>

package/site/markdown.mjs ADDED Viewed

Binary file

package/site/masto.mjs ADDED Viewed

@@ -0,0 +1,179 @@
+// masto.mjs — replying from a Mastodon account, in the browser: the same
+// OAuth steps the FediPod agent takes for a connected account (register an
+// app on the reader's server, send them to approve it, exchange the code),
+// then posting through that server's API. The token stays in this browser
+// and goes nowhere else.
+const SCOPES = 'read:accounts read:search write:statuses';
+const CLIENT_NAME = 'FediPod-BB';
+const STATE_TTL_MS = 10 * 60_000;
+export const cleanHost = (s) => {
+  const h = String(s || '').trim().replace(/^https?:\/\//u, '').replace(/\/.*$/u, '').toLowerCase();
+  return /^[a-z0-9.-]+\.[a-z0-9-]+(:\d+)?$/u.test(h) ? h : null;
+};
+// The server in a Fediverse handle: @you@host, you@host, or the address of a
+// profile page there.
+export const hostOfHandle = (s) => {
+  const t = String(s || '').trim();
+  const m = /^@?[^@\s/]+@([^@\s/]+)$/u.exec(t);
+  return cleanHost(m ? m[1] : t);
+};
+// The actor id behind a Fediverse handle, asked of the handle's own server:
+// WebFinger is answered from any origin (RFC 7033), so the page may ask it
+// directly. An address typed in full is already an actor id.
+export async function actorOfHandle(input, f = globalThis.fetch.bind(globalThis)) {
+  const typed = String(input || '').trim();
+  if (/^https?:\/\//u.test(typed)) return typed;
+  const host = hostOfHandle(typed);
+  const name = typed.replace(/^@/u, '').split('@')[0];
+  if (!host || !name || name === host) throw new Error('a handle looks like @you@their.server');
+  const at = `@${name}@${host}`;
+  const r = await f(`https://${host}/.well-known/webfinger?resource=${encodeURIComponent(`acct:${name}@${host}`)}`,
+    { headers: { accept: 'application/jrd+json, application/json' } }).catch(() => null);
+  if (!r?.ok) throw new Error(`${host} does not know ${at}`);
+  const jrd = await r.json().catch(() => null);
+  const self = (jrd?.links || []).find(l => l.rel === 'self' && /activity\+json|ld\+json/u.test(l.type || ''));
+  if (!self?.href) throw new Error(`${host} did not say where ${at} lives`);
+  return self.href;
+}
+// What a reader's server speaks — asked of the Gateway, not of the server:
+// a page may not probe a stranger's server from the browser. 'mastodon-api'
+// (Mastodon, Pleroma, Akkoma, GoToSocial, a FediPod agent) signs in here;
+// 'lemmy' takes part by its community address; 'fedipod' is an account at
+// this Gateway, whose client is the FediPod app.
+export async function serverKind(host, front, f = globalThis.fetch.bind(globalThis), handle = '') {
+  try {
+    const q = `host=${encodeURIComponent(host)}${handle ? `&handle=${encodeURIComponent(handle)}` : ''}`;
+    const r = await f(`${front}/api/server?${q}`, { headers: { accept: 'application/json' } });
+    if (!r.ok) return { kind: 'unknown', host };
+    return await r.json();
+  } catch { return { kind: 'unknown', host }; }
+}
+export class MastoLogin {
+  // `storage` is localStorage-shaped; `fetch` is the page's.
+  constructor({ fetch: f = globalThis.fetch.bind(globalThis), storage, redirectUri }) {
+    this.fetch = f;
+    this.storage = storage;
+    this.redirectUri = redirectUri;
+  }
+  _read(k) { try { return JSON.parse(this.storage.getItem('bb:' + k) || 'null'); } catch { return null; } }
+  _write(k, v) { this.storage.setItem('bb:' + k, JSON.stringify(v)); }
+  _drop(k) { this.storage.removeItem('bb:' + k); }
+  account() { return this._read('account'); }
+  signOut() { this._drop('account'); }
+  async _json(res, host) {
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(body.error_description || body.error || `${host} answered ${res.status}`);
+    return body;
+  }
+  async appFor(host) {
+    const apps = this._read('apps') || {};
+    const known = apps[host];
+    if (known?.redirectUri === this.redirectUri && known.clientId) return known;
+    const res = await this.fetch(`https://${host}/api/v1/apps`, {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ client_name: CLIENT_NAME, redirect_uris: this.redirectUri, scopes: SCOPES, website: 'https://github.com/jeff-zucker/FediPod' }),
+    });
+    const body = await this._json(res, host);
+    if (!body.client_id || !body.client_secret) throw new Error(`${host} registered no client`);
+    const app = { host, redirectUri: this.redirectUri, clientId: body.client_id, clientSecret: body.client_secret };
+    this._write('apps', { ...apps, [host]: app });
+    return app;
+  }
+  // Where to send the reader. The state is single-use and short-lived, so a
+  // code handed back to this page by anyone else binds nothing.
+  async begin(hostInput) {
+    const host = cleanHost(hostInput);
+    if (!host) throw new Error('that is not a server address');
+    const app = await this.appFor(host);
+    const bytes = new Uint8Array(24);
+    globalThis.crypto.getRandomValues(bytes);
+    const state = [...bytes].map(b => b.toString(16).padStart(2, '0')).join('');
+    this._write('pending', { state, host, at: Date.now() });
+    const u = new URL(`https://${host}/oauth/authorize`);
+    u.searchParams.set('client_id', app.clientId);
+    u.searchParams.set('redirect_uri', this.redirectUri);
+    u.searchParams.set('response_type', 'code');
+    u.searchParams.set('scope', SCOPES);
+    u.searchParams.set('state', state);
+    return u.href;
+  }
+  // The code comes back: exchange it, ask who this is, and only then keep it.
+  async complete({ state, code }) {
+    const pend = this._read('pending');
+    this._drop('pending');
+    if (!pend || pend.state !== state || Date.now() - pend.at > STATE_TTL_MS) throw new Error('that sign-in has expired — start again');
+    const { host } = pend;
+    const app = await this.appFor(host);
+    const res = await this.fetch(`https://${host}/oauth/token`, {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ grant_type: 'authorization_code', code, redirect_uri: this.redirectUri,
+        client_id: app.clientId, client_secret: app.clientSecret, scope: SCOPES }),
+    });
+    const tok = await this._json(res, host);
+    if (!tok.access_token) throw new Error(`${host} returned no token`);
+    const me = await this._json(await this.fetch(`https://${host}/api/v1/accounts/verify_credentials`,
+      { headers: { authorization: `Bearer ${tok.access_token}` } }), host);
+    const account = { host, token: tok.access_token, handle: `@${me.username}@${host}`, name: me.display_name || me.username, url: me.url || null };
+    this._write('account', account);
+    return account;
+  }
+  // The id a post has on the reader's own server, found by its address.
+  async statusIdFor(url) {
+    const a = this.account();
+    if (!a) throw new Error('not signed in');
+    const u = new URL(`https://${a.host}/api/v2/search`);
+    u.searchParams.set('q', url); u.searchParams.set('resolve', 'true'); u.searchParams.set('type', 'statuses'); u.searchParams.set('limit', '1');
+    const body = await this._json(await this.fetch(u.href, { headers: { authorization: `Bearer ${a.token}` } }), a.host);
+    return body.statuses?.[0]?.id || null;
+  }
+  // Post from the reader's account: the category is named so it receives
+  // the post; a reply names the post it answers by its id on that server.
+  async edit({ url, text }) {
+    const a = this.account();
+    if (!a) throw new Error('not signed in');
+    const id = await this.statusIdFor(url);
+    if (!id) throw new Error(`${a.host} could not find that post`);
+    return this._json(await this.fetch(`https://${a.host}/api/v1/statuses/${id}`, {
+      method: 'PUT', headers: { 'content-type': 'application/json', authorization: `Bearer ${a.token}` },
+      body: JSON.stringify({ status: text }),
+    }));
+  }
+  async remove({ url }) {
+    const a = this.account();
+    if (!a) throw new Error('not signed in');
+    const id = await this.statusIdFor(url);
+    if (!id) throw new Error(`${a.host} could not find that post`);
+    return this._json(await this.fetch(`https://${a.host}/api/v1/statuses/${id}`, {
+      method: 'DELETE', headers: { authorization: `Bearer ${a.token}` },
+    }));
+  }
+  async post({ text, mention, inReplyToUrl = null }) {
+    const a = this.account();
+    if (!a) throw new Error('not signed in');
+    const status = mention && !text.includes(mention) ? `${mention} ${text}` : text;
+    const inReplyTo = inReplyToUrl ? await this.statusIdFor(inReplyToUrl) : null;
+    if (inReplyToUrl && !inReplyTo) throw new Error(`${a.host} could not find the post you are answering`);
+    const body = { status, visibility: 'public', ...(inReplyTo ? { in_reply_to_id: inReplyTo } : {}) };
+    const made = await this._json(await this.fetch(`https://${a.host}/api/v1/statuses`, {
+      method: 'POST', headers: { 'content-type': 'application/json', authorization: `Bearer ${a.token}` },
+      body: JSON.stringify(body),
+    }), a.host);
+    return { id: made.id, url: made.url || made.uri || null, uri: made.uri || null };
+  }
+}

package/site/mine.mjs ADDED Viewed

@@ -0,0 +1,48 @@
+// mine.mjs — what a reader keeps for themselves: the categories they have
+// joined and the posts they saved. Both live in this browser under the
+// account that is signed in, because a public forum has nowhere to write
+// "Mei saved this" and no business writing it. Nothing here is sent
+// anywhere; a reader on another machine starts with an empty list.
+const KEY = (who, what) => `bb:${what}:${who || 'anon'}`;
+const read = (storage, who, what) => {
+  try { const v = JSON.parse(storage.getItem(KEY(who, what)) || '[]'); return Array.isArray(v) ? v : []; }
+  catch { return []; }
+};
+const write = (storage, who, what, list) => {
+  try { storage.setItem(KEY(who, what), JSON.stringify(list.slice(0, 500))); } catch { /* full or blocked */ }
+};
+export function mine({ storage, who }) {
+  return {
+    // Categories this reader has joined from here. The forum's own followers
+    // list is the truth; this is what this browser asked for, so the page can
+    // show Join or Leave without reading a collection per category.
+    joined: () => read(storage, who, 'joined'),
+    isJoined: (id) => read(storage, who, 'joined').includes(id),
+    join: (id) => write(storage, who, 'joined', [...new Set([...read(storage, who, 'joined'), id])]),
+    leave: (id) => write(storage, who, 'joined', read(storage, who, 'joined').filter(x => x !== id)),
+    // Which way this reader voted on a post. The forum's count is the truth;
+    // this is only so the buttons can show which one is theirs. A post is
+    // remembered in one list or the other, never both.
+    votedOn: (id) => (read(storage, who, 'liked').includes(id) ? 'up'
+      : read(storage, who, 'disliked').includes(id) ? 'down' : 'none'),
+    isLiked: (id) => read(storage, who, 'liked').includes(id),
+    vote: (id, way) => {
+      write(storage, who, 'liked', way === 'up'
+        ? [...new Set([...read(storage, who, 'liked'), id])]
+        : read(storage, who, 'liked').filter(x => x !== id));
+      write(storage, who, 'disliked', way === 'down'
+        ? [...new Set([...read(storage, who, 'disliked'), id])]
+        : read(storage, who, 'disliked').filter(x => x !== id));
+    },
+    // Posts kept to come back to.
+    saved: () => read(storage, who, 'saved'),
+    isSaved: (id) => read(storage, who, 'saved').some(x => x.id === id),
+    save: (entry) => write(storage, who, 'saved', [entry, ...read(storage, who, 'saved').filter(x => x.id !== entry.id)]),
+    unsave: (id) => write(storage, who, 'saved', read(storage, who, 'saved').filter(x => x.id !== id)),
+  };
+}

package/site/oidc-session.mjs ADDED Viewed

@@ -0,0 +1,6 @@
+// oidc-session.mjs — signing in to a pod: the session library bound to the
+// FediPod app's database and client name, so the app and the forum on one
+// site share one session.
+import { solidOidcSession } from 'fediverse-session/oidc-session.mjs';
+export const { beginLogin, completeLogin, getSession, signOut } = solidOidcSession({ dbName: 'fedipod-oidc', clientName: 'FediPod' });