@swiftbrowser/web 0.1.0

package/src/landing.css

@@ -0,0 +1,261 @@
+/* Landing page (index.html). Light and dark follow the OS. */
+
+:root {
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui,
+    sans-serif;
+  --bg: #f2f2f7;
+  --card: #ffffff;
+  --fg: #1c1c1e;
+  --muted: #6e6e73;
+  --accent: #007aff;
+  --accent-fg: #ffffff;
+  --border: rgba(60, 60, 67, 0.18);
+  --qr-bg: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #000000;
+    --card: #1c1c1e;
+    --fg: #f2f2f7;
+    --muted: #98989f;
+    --accent: #0a84ff;
+    --border: rgba(84, 84, 88, 0.6);
+    --qr-bg: #ffffff;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
+    max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font);
+  font-size: 17px;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--accent);
+}
+
+code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.9em;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: rgba(120, 120, 128, 0.16);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.hero,
+main,
+.build-info {
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding-bottom: 24px;
+}
+
+.hero-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 13px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.hero h1 {
+  margin: 8px 0 0;
+  font-size: 34px;
+  line-height: 1.15;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.hero-lead {
+  margin: 0;
+  max-width: 60ch;
+  color: var(--muted);
+}
+
+/* App cards --------------------------------------------------------------- */
+
+.app-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
+  gap: 16px;
+}
+
+.app-card {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 16px;
+  background: var(--card);
+  box-shadow: 0 0 0 1px var(--border);
+}
+
+.app-qr {
+  flex: 0 0 auto;
+  width: 128px;
+  height: 128px;
+  padding: 6px;
+  border-radius: 10px;
+  background: var(--qr-bg);
+  box-shadow: 0 0 0 1px var(--border);
+  overflow: hidden;
+}
+
+.app-qr svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.app-qr--failed {
+  font-size: 11px;
+  word-break: break-all;
+  color: #1c1c1e;
+}
+
+.app-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.app-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.app-icon {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  border-radius: 9px;
+  box-shadow: 0 0 0 1px var(--border);
+  object-fit: cover;
+}
+
+.app-name {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.app-description {
+  margin: 2px 0 12px;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.app-open {
+  align-self: flex-start;
+  margin-top: auto;
+  padding: 8px 18px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: 600;
+  font-size: 15px;
+  text-decoration: none;
+}
+
+.app-open:hover {
+  filter: brightness(1.08);
+}
+
+.app-url {
+  margin-top: 8px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 11px;
+  color: var(--muted);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-empty {
+  color: var(--muted);
+}
+
+@media (max-width: 420px) {
+  .app-qr {
+    width: 104px;
+    height: 104px;
+  }
+}
+
+/* Phone help ------------------------------------------------------------- */
+
+.phone-help {
+  margin-top: 40px;
+  padding: 20px 20px 20px 16px;
+  border-radius: 16px;
+  background: var(--card);
+  box-shadow: 0 0 0 1px var(--border);
+}
+
+.phone-help h2 {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.phone-help ol {
+  margin: 0;
+  padding-left: 24px;
+}
+
+.phone-help li + li {
+  margin-top: 8px;
+}
+
+/* Build info ------------------------------------------------------------- */
+
+.build-info {
+  margin-top: 32px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.build-commit,
+.build-branch {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+}

package/src/landing.ts

@@ -0,0 +1,141 @@
+/**
+ * Landing page (`/`): one card per registered app with a link to
+ * `/app/?app=<name>` and a QR code of the absolute URL, plus the build info.
+ *
+ * The app list and the build info are injected at build time by `define` in
+ * node/config.ts (`__SB_APPS__`, `__SB_COMMIT__`, `__SB_BRANCH__`,
+ * `__SB_BUILT_AT__`; see src/vite-env.d.ts). The example apps' descriptions
+ * live in node/examples.ts.
+ */
+
+import { toString as qrToString } from 'qrcode';
+
+const REPO_URL = 'https://github.com/dabbott/SwiftBrowser';
+
+/** The card's subtitle: the spec's description, else a generic line. */
+export function describeApp(app: Pick<SBLandingApp, 'name' | 'description'>): string {
+  return app.description ?? `the ${app.name} app`;
+}
+
+/** Path of the app page for an example (relative, so links work on any host). */
+export function appPath(name: string): string {
+  return `/app/?app=${encodeURIComponent(name)}`;
+}
+
+/** Absolute URL a phone should open (the QR code's payload). */
+export function appUrl(name: string): string {
+  return `${location.origin}${appPath(name)}`;
+}
+
+function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  className?: string,
+  text?: string,
+): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+async function renderQr(container: HTMLElement, url: string): Promise<void> {
+  try {
+    // The SVG is generated from the URL (modules as a path), nothing is
+    // interpolated into the markup.
+    const svg = await qrToString(url, { type: 'svg', margin: 1, errorCorrectionLevel: 'M' });
+    container.innerHTML = svg;
+    const node = container.querySelector('svg');
+    if (node) {
+      node.setAttribute('role', 'img');
+      node.setAttribute('aria-label', `QR code for ${url}`);
+      node.removeAttribute('width');
+      node.removeAttribute('height');
+    }
+  } catch (error) {
+    console.error('[sb] could not render QR code', error);
+    container.textContent = url;
+    container.classList.add('app-qr--failed');
+  }
+}
+
+function appCard(app: SBLandingApp): HTMLLIElement {
+  const { name, displayName } = app;
+  const card = el('li', 'app-card');
+  card.dataset['app'] = name;
+
+  const qr = el('div', 'app-qr');
+  qr.title = appUrl(name);
+  void renderQr(qr, appUrl(name));
+
+  const body = el('div', 'app-body');
+  const heading = el('div', 'app-heading');
+  if (app.icon) {
+    const icon = el('img', 'app-icon');
+    icon.src = app.icon;
+    icon.alt = '';
+    icon.width = 40;
+    icon.height = 40;
+    heading.append(icon);
+  }
+  const title = el('h3', 'app-name', displayName);
+  heading.append(title);
+  const description = el('p', 'app-description', describeApp(app));
+  const open = el('a', 'app-open', 'Open');
+  open.href = appPath(name);
+  open.setAttribute('aria-label', `Open ${displayName}`);
+  const url = el('a', 'app-url', appUrl(name).replace(/^https?:\/\//, ''));
+  url.href = appPath(name);
+  url.setAttribute('aria-hidden', 'true');
+  url.tabIndex = -1;
+
+  body.append(heading, description, open, url);
+  card.append(qr, body);
+  return card;
+}
+
+function renderApps(): void {
+  const list = document.querySelector<HTMLUListElement>('#apps');
+  if (!list) return;
+  const apps = Array.from(__SB_APPS__);
+  if (apps.length === 0) {
+    list.replaceWith(el('p', 'app-empty', 'No apps were registered at build time.'));
+    return;
+  }
+  for (const app of apps) list.append(appCard(app));
+}
+
+function renderBuildInfo(): void {
+  const footer = document.querySelector<HTMLElement>('#build-info');
+  if (!footer) return;
+  footer.textContent = '';
+
+  const commit = __SB_COMMIT__;
+  const branch = __SB_BRANCH__;
+  const built = new Date(__SB_BUILT_AT__);
+
+  footer.append('Built from ');
+  const sha = commit === 'dev' ? el('span', 'build-commit', 'dev') : el('a', 'build-commit', commit.slice(0, 7));
+  sha.dataset['commit'] = commit;
+  if (sha instanceof HTMLAnchorElement) {
+    sha.href = `${REPO_URL}/commit/${commit}`;
+    sha.title = commit;
+  }
+  footer.append(sha);
+  if (branch) {
+    footer.append(' on ');
+    footer.append(el('span', 'build-branch', branch));
+  }
+  if (!Number.isNaN(built.getTime())) {
+    footer.append(' · ');
+    const time = el('time', 'build-date', built.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }));
+    time.dateTime = built.toISOString();
+    footer.append(time);
+  }
+  footer.append(' · ');
+  const repo = el('a', 'build-repo', 'dabbott/SwiftBrowser');
+  repo.href = REPO_URL;
+  footer.append(repo);
+}
+
+renderApps();
+renderBuildInfo();