Focus Pages

Focus pages are business-specific PWA dashboards that live at talbotstevens.com/<brand>/focus (e.g., /sdc/focus, /mbr/focus). They show current mission statement, priorities, and status — designed for quick daily reference on phone, tablet, or desktop.

Why they exist

Each business has a “what am I actually working on right now?” view. The focus page is that view — a single screen with today’s priorities, always reachable as a home-screen PWA.

The pipeline

KB Focus.md (this vault)
  ↓  edited here — the SSOT
sites/<brand>/src/data/<brand>-focus.ts
  ↓  TypeScript data file; reads the KB file at build time
web-deploy script
  ↓  runs `pnpm build` in the monorepo, uploads to Cloudflare Pages
talbotstevens.com/<brand>/focus

Edit here, deploy with web-deploy — never edit the .ts file directly.

Content files (SSOT)

Business	KB file
Smart Debt Coach	D:\FSS\KB\SDC\_WorkingOn\Focus.md
myBetterRates	D:\FSS\KB\MBR\_WorkingOn\Focus.md

Each file has a YAML frontmatter block (title, subtitle, mission statement) and a Markdown body with prioritized task bullets. See the callout at the top of each file for the editing guide and deploy command.

YAML frontmatter schema

---
title: "Brand Name Focus"
subtitle: "Tagline or phase name"
mission: "The brand mission statement, 1-2 sentences"
updated: "YYYY-MM-DD"
---

Markdown body format

- **Top-level priority** — description
  - Sub-task or detail
  - Another sub-task
- **Second priority** — description

Bullets become styled items on the focus page. Nested bullets render as indented sub-items.

Deploy command

web-deploy <brand>-focus

Run from WSL. The web-deploy script handles pnpm build and Cloudflare Pages upload.

Favicons and PWA icons

Focus pages are installable PWAs. Icons are brand-specific:

Brand	Favicon glyph	Source
Smart Debt	Leaf + S	src/brand/sd/logos/svg-paths-base/sd-leaf-dot.svg
myBetterRates	Oval + $	src/brand/mbr/logos/svg-paths-base/mbr-dollar-dot.svg

Regenerate favicons with pnpm favicon:sd or pnpm favicon:mbr from the monorepo root. See scripts/generate-favicon.mjs for the full pipeline.

PWA icons (android-chrome, apple-touch) are generated separately via node sites/<brand>/scripts/generate-focus-icons.mjs — run this after favicon changes to keep PWA icons in sync.