@axis-network/butter-col 0.0.0-stage → 0.1.0

package/site/app.js

@@ -0,0 +1,335 @@
+// butter-col frontend: a launcher plus an in-page browser around the
+// proxied site. Everything proxy-related goes through ButterController.
+import { ButterController } from "/butter/controller.mjs";
+
+const $ = (selector) => document.querySelector(selector);
+
+// ---- preferences (per browser, best effort) ----------------------------------
+
+const PREFS_KEY = "butter-col:frontend";
+const defaults = { searchEngine: "https://duckduckgo.com/?q=%s", theme: "system", recent: [] };
+
+function loadPrefs() {
+  try {
+    return { ...defaults, ...JSON.parse(localStorage.getItem(PREFS_KEY) || "{}") };
+  } catch {
+    return { ...defaults };
+  }
+}
+const prefs = loadPrefs();
+function savePrefs() {
+  try {
+    localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+  } catch {
+    // storage unavailable (private mode): preferences last for this visit only
+  }
+}
+
+function applyTheme() {
+  document.documentElement.dataset.theme = prefs.theme;
+}
+applyTheme();
+
+// ---- elements ---------------------------------------------------------------
+
+const home = $("#home");
+const browser = $("#browser");
+const frame = $("#frame");
+const homeForm = $("#home-form");
+const homeInput = $("#home-input");
+const homeNotice = $("#home-notice");
+const addressForm = $("#address-form");
+const addressInput = $("#address-input");
+const addressLock = $("#address-lock");
+const progress = $("#progress");
+const settings = $("#settings");
+const settingsNotice = $("#settings-notice");
+const transportSelect = $("#setting-transport");
+const transportName = $("#transport-name");
+
+function showNotice(element, text, kind = "error") {
+  element.textContent = text;
+  element.dataset.kind = kind;
+  element.hidden = !text;
+}
+
+// ---- butter-col ------------------------------------------------------------------
+
+const butter = new ButterController({ searchEngine: prefs.searchEngine });
+const ready = butter.init().then(refreshTransport, (err) => {
+  showNotice(homeNotice, explain(err));
+  homeForm.querySelector("button").disabled = true;
+  transportName.textContent = "nothing yet";
+  throw err;
+});
+
+function explain(err) {
+  const message = String((err && err.message) || err);
+  if (/no service workers/i.test(message)) {
+    return "This browser has service workers turned off, so butter-col can't run here. Private windows often turn them off; try a normal window.";
+  }
+  if (/HTTPS/i.test(message)) {
+    return "butter-col needs a secure connection. Open this page over https:// (or on localhost).";
+  }
+  return message;
+}
+
+async function refreshTransport() {
+  const { active, available } = await butter.getTransport();
+  transportName.textContent = active.name;
+  transportSelect.replaceChildren(
+    ...available.map((t) => {
+      const option = new Option(t.loaded ? t.name : `${t.name} (didn't load)`, t.name, false, t.name === active.name);
+      option.disabled = !t.loaded;
+      return option;
+    }),
+  );
+  transportSelect.disabled = available.length < 2;
+}
+
+// ---- recent sites ---------------------------------------------------------------
+
+function remember(url, title) {
+  let host;
+  try {
+    host = new URL(url).hostname;
+  } catch {
+    return;
+  }
+  prefs.recent = [{ url, title: title || host, host }, ...prefs.recent.filter((r) => r.url !== url)].slice(0, 8);
+  savePrefs();
+  renderRecent();
+}
+
+function renderRecent() {
+  const list = $("#recent-list");
+  list.replaceChildren(
+    ...prefs.recent.map((item) => {
+      const li = document.createElement("li");
+      const button = document.createElement("button");
+      button.type = "button";
+      button.addEventListener("click", () => open(item.url));
+      const badge = document.createElement("span");
+      badge.className = "recent-badge";
+      badge.textContent = item.host.replace(/^www\./, "").charAt(0) || "?";
+      const title = document.createElement("span");
+      title.className = "recent-title";
+      title.textContent = item.title;
+      const host = document.createElement("span");
+      host.className = "recent-host";
+      host.textContent = item.host;
+      button.append(badge, title, host);
+      li.append(button);
+      return li;
+    }),
+  );
+  $("#recent-empty").hidden = prefs.recent.length > 0;
+}
+renderRecent();
+
+// ---- browsing ---------------------------------------------------------------------
+
+let current = "";      // target URL currently shown in the frame
+let watcher = 0;
+
+function setLoading(loading) {
+  progress.dataset.state = loading ? "loading" : "done";
+}
+
+function showAddress(url) {
+  current = url;
+  if (document.activeElement !== addressInput) addressInput.value = url;
+  const insecure = url.startsWith("http:");
+  addressLock.toggleAttribute("data-insecure", insecure);
+  addressLock.setAttribute("aria-label", insecure ? "Not encrypted" : "Encrypted");
+}
+
+async function open(input) {
+  const value = String(input || "").trim();
+  if (!value) return;
+  try {
+    await ready;
+  } catch {
+    return;
+  }
+  const url = butter.resolveInput(value);
+  home.hidden = true;
+  browser.hidden = false;
+  showAddress(url);
+  setLoading(true);
+  frame.src = butter.encodeUrl(url);
+  history.replaceState(null, "", "#" + encodeURIComponent(url));
+  if (!watcher) watcher = setInterval(watchFrame, 500);
+}
+
+function goHome() {
+  clearInterval(watcher);
+  watcher = 0;
+  frame.src = "about:blank";
+  current = "";
+  browser.hidden = true;
+  home.hidden = false;
+  document.title = "butter-col";
+  history.replaceState(null, "", location.pathname + location.search);
+  homeInput.select();
+  homeInput.focus();
+}
+
+/** The proxied page's real URL, or null while it isn't readable. */
+function frameUrl() {
+  try {
+    const href = frame.contentWindow.location.href;
+    if (!href || href === "about:blank") return null;
+    const target = butter.decodeUrl(href);
+    return target === href ? null : target;
+  } catch {
+    return null;
+  }
+}
+
+// Single-page apps change their URL without loading: keep the address bar in step.
+function watchFrame() {
+  const url = frameUrl();
+  if (url && url !== current) {
+    showAddress(url);
+    history.replaceState(null, "", "#" + encodeURIComponent(url));
+  }
+}
+
+frame.addEventListener("load", () => {
+  setLoading(false);
+  const url = frameUrl();
+  if (!url) return;
+  showAddress(url);
+  let title = "";
+  try {
+    title = frame.contentDocument.title;
+    // Show the progress bar again as soon as the page starts leaving.
+    frame.contentWindow.addEventListener("pagehide", () => setLoading(true), { once: true });
+  } catch {
+    // not readable
+  }
+  document.title = title ? `${title} - butter-col` : "butter-col";
+  remember(url, title);
+});
+
+// ---- controls -----------------------------------------------------------------
+
+homeForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  open(homeInput.value);
+});
+
+addressForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  addressInput.blur();
+  open(addressInput.value);
+});
+addressInput.addEventListener("focus", () => addressInput.select());
+addressInput.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    addressInput.value = current;
+    addressInput.blur();
+  }
+});
+
+function openBlankTab() {
+  const tab = window.open("about:blank", "_blank");
+  if (!tab) {
+    showNotice(settingsNotice, "Your browser blocked the new tab. Allow pop-ups for this site and try again.");
+    return;
+  }
+  const doc = tab.document;
+  doc.title = "about:blank";
+  const style = doc.createElement("style");
+  style.textContent = "html,body{margin:0;height:100%;overflow:hidden}iframe{border:0;width:100%;height:100%}";
+  const embed = doc.createElement("iframe");
+  embed.src = location.href;
+  embed.allow = "fullscreen; clipboard-read; clipboard-write; autoplay; picture-in-picture";
+  doc.head.append(style);
+  doc.body.append(embed);
+  showNotice(settingsNotice, "Opened in a new about:blank tab.", "info");
+}
+
+const actions = {
+  back: () => frame.contentWindow?.history.back(),
+  forward: () => frame.contentWindow?.history.forward(),
+  reload: () => {
+    setLoading(true);
+    try {
+      frame.contentWindow.location.reload();
+    } catch {
+      frame.src = frame.src;
+    }
+  },
+  home: goHome,
+  fullscreen: () => frame.requestFullscreen?.().catch(() => {}),
+  popout: () => {
+    if (current) window.open(butter.encodeUrl(current), "_blank", "noopener");
+  },
+  settings: () => {
+    showNotice(settingsNotice, "");
+    refreshTransport().catch(() => {});
+    settings.showModal();
+  },
+  blank: openBlankTab,
+  "clear-recent": () => {
+    prefs.recent = [];
+    savePrefs();
+    renderRecent();
+    showNotice(settingsNotice, "Recent sites cleared.", "info");
+  },
+};
+
+document.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-action]");
+  if (button && actions[button.dataset.action]) actions[button.dataset.action]();
+});
+
+// Settings
+const searchSelect = $("#setting-search");
+const themeSelect = $("#setting-theme");
+searchSelect.value = prefs.searchEngine;
+themeSelect.value = prefs.theme;
+
+searchSelect.addEventListener("change", () => {
+  prefs.searchEngine = searchSelect.value;
+  butter.options.searchEngine = searchSelect.value;
+  savePrefs();
+});
+themeSelect.addEventListener("change", () => {
+  prefs.theme = themeSelect.value;
+  savePrefs();
+  applyTheme();
+});
+transportSelect.addEventListener("change", async () => {
+  try {
+    const active = await butter.setTransport(transportSelect.value);
+    transportName.textContent = active.name;
+    showNotice(settingsNotice, `Now browsing through ${active.name}. Pages already open switch when they reload.`, "info");
+  } catch (err) {
+    showNotice(settingsNotice, String((err && err.message) || err));
+    refreshTransport().catch(() => {});
+  }
+});
+
+// Keyboard: "/" focuses the search box at home; Ctrl/Cmd+L or F6 the address bar.
+document.addEventListener("keydown", (event) => {
+  const typing = event.target.closest?.("input, select, textarea");
+  if (!browser.hidden && (event.key === "F6" || ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "l"))) {
+    event.preventDefault();
+    addressInput.focus();
+  } else if (browser.hidden && event.key === "/" && !typing) {
+    event.preventDefault();
+    homeInput.focus();
+  }
+});
+
+// Reopen what was open before a reload (#<url>).
+if (location.hash.length > 1) {
+  try {
+    open(decodeURIComponent(location.hash.slice(1)));
+  } catch {
+    // malformed hash: stay home
+  }
+}

package/site/index.html

@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en" data-theme="system">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>butter-col</title>
+<meta name="description" content="Browse any site through butter-col.">
+<meta name="color-scheme" content="dark light">
+<link rel="icon" type="image/png" href="butter-col.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Fredoka:wght@500;600;700&display=swap">
+<link rel="stylesheet" href="app.css">
+</head>
+<body>
+
+<!-- Home: the launcher -->
+<main id="home" class="home">
+  <header class="home-bar">
+    <button class="icon-button" type="button" data-action="settings" aria-label="Settings" title="Settings">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>
+    </button>
+  </header>
+
+  <section class="hero" aria-labelledby="hero-title">
+    <h1 id="hero-title" class="visually-hidden">butter-col</h1>
+    <img class="hero-logo" src="butter-col.png" alt="butter-col" width="694" height="359">
+
+    <form class="stick" id="home-form" autocomplete="off" role="search">
+      <label class="visually-hidden" for="home-input">Search or type an address</label>
+      <input id="home-input" class="stick-input" type="text" inputmode="url" enterkeyhint="go" spellcheck="false"
+             placeholder="Search or type an address" autofocus>
+      <button class="stick-go" type="submit">Go</button>
+    </form>
+
+    <p class="transport-line">
+      Browsing through <strong id="transport-name">…</strong>
+      <button class="text-button" type="button" data-action="settings">Change</button>
+    </p>
+    <p class="notice" id="home-notice" role="alert" hidden></p>
+  </section>
+
+  <section class="recent" aria-labelledby="recent-title">
+    <h2 id="recent-title">Recent</h2>
+    <ol class="recent-list" id="recent-list"></ol>
+    <p class="recent-empty" id="recent-empty">Sites you visit show up here.</p>
+  </section>
+</main>
+
+<!-- Browser: the toolbar and the proxied page -->
+<div id="browser" class="browser" hidden>
+  <nav class="toolbar" aria-label="Page controls">
+    <button class="icon-button" type="button" data-action="back" aria-label="Back" title="Back">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
+    </button>
+    <button class="icon-button" type="button" data-action="forward" aria-label="Forward" title="Forward">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+    </button>
+    <button class="icon-button" type="button" data-action="reload" aria-label="Reload" title="Reload">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7"/><path d="M20 4v7h-7"/></svg>
+    </button>
+
+    <form class="address" id="address-form" autocomplete="off" role="search">
+      <label class="visually-hidden" for="address-input">Address</label>
+      <svg class="address-lock" id="address-lock" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
+      <input id="address-input" class="address-input" type="text" inputmode="url" enterkeyhint="go" spellcheck="false">
+    </form>
+
+    <button class="icon-button" type="button" data-action="home" aria-label="Home" title="Home">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11l8-7 8 7"/><path d="M6 10v10h12V10"/></svg>
+    </button>
+    <button class="icon-button" type="button" data-action="fullscreen" aria-label="Full screen" title="Full screen">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg>
+    </button>
+    <button class="icon-button" type="button" data-action="popout" aria-label="Open in a new tab" title="Open in a new tab">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg>
+    </button>
+    <button class="icon-button" type="button" data-action="settings" aria-label="Settings" title="Settings">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg>
+    </button>
+    <div class="progress" id="progress" aria-hidden="true"></div>
+  </nav>
+  <iframe id="frame" class="frame" title="Proxied page" allow="fullscreen; clipboard-read; clipboard-write; autoplay; picture-in-picture"></iframe>
+</div>
+
+<!-- Settings -->
+<dialog id="settings" class="settings" aria-labelledby="settings-title">
+  <form method="dialog" class="settings-body">
+    <header class="settings-head">
+      <h2 id="settings-title">Settings</h2>
+      <button class="icon-button" value="close" aria-label="Close settings" title="Close">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
+      </button>
+    </header>
+
+    <div class="field">
+      <label for="setting-transport">Transport</label>
+      <select id="setting-transport"></select>
+      <p class="hint" id="transport-hint">How pages reach the internet. Switching may sign you out of sites.</p>
+    </div>
+
+    <div class="field">
+      <label for="setting-search">Search with</label>
+      <select id="setting-search">
+        <option value="https://duckduckgo.com/?q=%s">DuckDuckGo</option>
+        <option value="https://www.google.com/search?q=%s">Google</option>
+        <option value="https://www.bing.com/search?q=%s">Bing</option>
+        <option value="https://search.brave.com/search?q=%s">Brave Search</option>
+        <option value="https://www.startpage.com/do/search?q=%s">Startpage</option>
+      </select>
+    </div>
+
+    <div class="field">
+      <label for="setting-theme">Theme</label>
+      <select id="setting-theme">
+        <option value="system">Match my device</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+      </select>
+    </div>
+
+    <div class="field">
+      <span class="field-label">Private tab</span>
+      <button class="secondary-button" type="button" data-action="blank">Open butter-col in an about:blank tab</button>
+      <p class="hint">The new tab's address stays about:blank, so the sites you browse there stay out of your history.</p>
+    </div>
+
+    <div class="field">
+      <span class="field-label">Recent sites</span>
+      <button class="secondary-button" type="button" data-action="clear-recent">Clear recent sites</button>
+    </div>
+
+    <p class="notice" id="settings-notice" role="status" hidden></p>
+  </form>
+</dialog>
+
+<script type="module" src="app.js"></script>
+</body>
+</html>