import { hash, normalize } from "./utils";
import type { Options, Item, Result } from "./types";

type Status = "idle" | "pending" | "done";

const config: Options = {
  retries: 3,
  timeout: 8_000,
  cache: new Map(),
};

export function clamp(n: number, lo: number, hi: number) {
  return Math.max(lo, Math.min(hi, n));
}

export const slugify = (s: string) =>
  s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");

async function load(key: string): Promise<Result> {
  const cached = config.cache.get(key);
  if (cached !== undefined) return cached;
  const res = await fetch("/api/items/" + key);
  if (!res.ok) throw new Error("status " + res.status);
  const data = await res.json();
  config.cache.set(key, data);
  return data;
}

function reducer(state, action) {
  switch (action.type) {
    case "load":  return { ...state, status: "pending" };
    case "ready": return { ...state, status: "done", data: action.payload };
    case "reset": return initial;
    default:        return state;
  }
}

for (const item of items) {
  if (!item.active) continue;
  totals[item.kind] = (totals[item.kind] ?? 0) + item.value;
}

const visible = items
  .filter((it) => it.visible)
  .sort((a, b) => a.order - b.order);

interface Item {
  id: string;
  kind: "row" | "card" | "tile";
  order: number;
  active: boolean;
}

export function debounce(fn, ms = 120) {
  let id;
  return (...args) => {
    if (id) clearTimeout(id);
    id = setTimeout(() => fn(...args), ms);
  };
}

// sort by display order, then by id
items.sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.card[data-state="active"] { border-color: var(--accent); }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

<section class="grid">
  <article class="card" data-id={id}>
    <header>{title}</header>
    <p>{summary}</p>
  </article>
</section>

class Store {
  private state = initial;
  subscribe(fn) {
    this.listeners.add(fn);
    return () => this.listeners.delete(fn);
  }
}

import { hash, normalize } from "./utils";
import type { Options, Item, Result } from "./types";

type Status = "idle" | "pending" | "done";

const config: Options = {
  retries: 3,
  timeout: 8_000,
  cache: new Map(),
};

export function clamp(n: number, lo: number, hi: number) {
  return Math.max(lo, Math.min(hi, n));
}

export const slugify = (s: string) =>
  s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");

async function load(key: string): Promise<Result> {
  const cached = config.cache.get(key);
  if (cached !== undefined) return cached;
  const res = await fetch("/api/items/" + key);
  if (!res.ok) throw new Error("status " + res.status);
  const data = await res.json();
  config.cache.set(key, data);
  return data;
}

function reducer(state, action) {
  switch (action.type) {
    case "load":  return { ...state, status: "pending" };
    case "ready": return { ...state, status: "done", data: action.payload };
    case "reset": return initial;
    default:        return state;
  }
}

for (const item of items) {
  if (!item.active) continue;
  totals[item.kind] = (totals[item.kind] ?? 0) + item.value;
}

const visible = items
  .filter((it) => it.visible)
  .sort((a, b) => a.order - b.order);

interface Item {
  id: string;
  kind: "row" | "card" | "tile";
  order: number;
  active: boolean;
}

export function debounce(fn, ms = 120) {
  let id;
  return (...args) => {
    if (id) clearTimeout(id);
    id = setTimeout(() => fn(...args), ms);
  };
}

// sort by display order, then by id
items.sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.card[data-state="active"] { border-color: var(--accent); }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

<section class="grid">
  <article class="card" data-id={id}>
    <header>{title}</header>
    <p>{summary}</p>
  </article>
</section>

class Store {
  private state = initial;
  subscribe(fn) {
    this.listeners.add(fn);
    return () => this.listeners.delete(fn);
  }
}

Build

Make your website do the work.

Most websites just sit there and email twice a year. Yours can do the work — take a first step from a visitor, let a customer check where things stand, answer the question they’d otherwise call to ask.

Book a call Read the thinking →

Four kinds of work

Four kinds of work a website can do.

Sorted by what a customer actually came to do. Most working sites do two or three of these. A few do all four.

Start something

Let them take the first step right now.

A small tool on the page — a calculator, a quick quiz, a configurator — something a half-interested visitor can actually use. They do one small thing, and now they’ve started.

Why starting makes people finish →

Check on an account

Let them see where things stand.

A private place where a customer can check their own status, paperwork, or progress, any hour of the day — instead of calling to ask.

Why customers prefer to check in themselves →

Look something up

Have the answer waiting before they call.

The questions you answer over and over, written down once on your site and easy to find — so a customer reads the answer that fits before they pick up the phone.

Answers your customers can find themselves →

Get advice & intelligence

Show them the whole picture.

A live view or running summary the customer keeps coming back to — a picture of their situation, kept current, that they can’t get anywhere else. The kind of thing they check again next week.

Insight that used to be out of reach →

Within reach now

The tools big companies built are open to you now.

The cost of running this kind of website has dropped sharply. The building blocks now come ready to use.

See what's now reachable →

Recently shipped

A live platform for a southwestern-Ontario fuel distributor — three working tools, primary-source data, no subscription stack.

Read the case study →