Source

// The public page at /<handle>. The inline script at the top of index.html already started loading
// it; this draws it without React or the Bounded client, so it opens fast on phones.
import { API_BASE, SITE_URL } from "../functions/lib/config";
import type { Page } from "../functions/lib/bio";
import { HOST, THEME_BG, pageHtml } from "./page";

export interface Loaded { ok: boolean; status: number; body: any }
declare global { interface Window { __bio?: { handle: string; data: Promise<Loaded> } } }

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
const fetchPage = (handle: string) =>
  fetch(`${API_BASE}/pages/${handle}`).then((r) => r.json().then((body) => ({ ok: r.ok, status: r.status, body })));

function setMeta(selector: string, attr: string, value: string) {
  document.querySelector(selector)?.setAttribute(attr, value);
}

function message(root: HTMLElement, html: string) {
  root.innerHTML = `<div class="bp bp-paper bp-filled"><div class="bp-inner bp-message">${html}</div></div>`;
}

export async function showPublic(handle: string, data: Promise<Loaded>) {
  const root = document.getElementById("page")!;
  let res = await data.catch(() => null);
  // A busy moment or a dropped connection: try twice more, without counting another view.
  for (let i = 1; i <= 2 && (!res || res.status === 429 || res.status >= 500); i++) {
    await sleep(800 * i);
    res = await fetchPage(handle).catch(() => null);
  }
  if (res?.status === 404) {
    document.title = "This page is free to claim | Bio";
    return message(root, `<p class="bp-host">${HOST}/<strong>${handle}</strong></p>
<h1 class="bp-name">This page is free to claim.</h1>
<p class="bp-bio">Make it yours in a minute: a photo, a short bio and all your links at one address. Free, with no sign-up.</p>
<ul class="bp-links"><li><a class="bp-link" href="/?claim=${handle}">Claim this page</a></li></ul>`);
  }
  if (!res?.ok) {
    return message(root, `<h1 class="bp-name">This page could not load.</h1>
<p class="bp-bio">Check your connection and try again.</p>
<ul class="bp-links"><li><a class="bp-link" href="">Try again</a></li></ul>`);
  }

  const page = res.body as Page;
  document.title = page.name;
  setMeta('meta[name="description"]', "content", page.bio || `${page.name} on Bio.`);
  setMeta('link[rel="canonical"]', "href", `${SITE_URL}/${handle}`);
  setMeta('meta[name="theme-color"]', "content", THEME_BG[page.theme] ?? THEME_BG.paper);
  document.documentElement.style.background = document.body.style.background = THEME_BG[page.theme] ?? THEME_BG.paper;
  root.innerHTML = pageHtml(page, handle);

  // Count a link's click on the way out. The browser follows the link right away; the count rides along.
  const count = (e: MouseEvent) => {
    const id = (e.target as Element).closest<HTMLAnchorElement>("a.bp-link[data-id]")?.dataset.id;
    if (id) fetch(`${API_BASE}/go/${handle}/${id}`, { keepalive: true, mode: "no-cors" }).catch(() => {});
  };
  root.addEventListener("click", count);
  root.addEventListener("auxclick", count);
}