commit 31e9a708cca019086da228346e8763401f8ec4f1 Author: sam Date: Tue Sep 8 17:11:21 2026 +1000 Kontra: GOTH app (Go+templ+htmx+Tailwind tokens), markdown content, Decap admin, media shortcodes. Phase 3 build complete + verified locally. diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f27bfe6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# Go build artifacts +app/bin/ +app/kontra-bin +# Obsidian cache (content repo may be opened as a vault) +.obsidian/ +app/src/*_templ.go diff --git a/.pi/agent-memory/image-maker/MEMORY.md b/.pi/agent-memory/image-maker/MEMORY.md new file mode 100644 index 0000000..b25cec9 --- /dev/null +++ b/.pi/agent-memory/image-maker/MEMORY.md @@ -0,0 +1,20 @@ +# Image Maker Memory — Kontra Day + +## Overview +I generate UI design mockup images for the Kontra Day news-opinion site via the OpenRouter image API. + +## Workflow +- Get API key: `source ~/.config/environment.d/10-secrets.conf` (env var `OPENROUTER_API_KEY`) +- Model used: `openai/gpt-5-image-mini` +- Call format: `curl .../chat/completions` with `{"model": ..., "messages":[{"role":"user","content":"Generate image: "}]}` +- Image returned as base64 in `choices[0].message.images[0].image_url.url` (data URI). Decode and save as PNG. + +## Notes +- Output comes back as square 1024x1024 even when a wider aspect is requested. Don't expect strict size matching. +- See `skills/design-explore/SKILL.md` for the full mockup-generating workflow and the Kontra Day design system. + +## Kontra Day Design System (design tokens to embed in prompts) +- Palette: canvas `#fbf9f3` (warm newsprint off-white), wells `#f0eee8`/`#eae8e2`, hairlines `#e4e2dd`, ink `#1b1c18` (soft charcoal, NOT pure black), muted `#444748`, faint `#747878`, vermilion `#ad3222`, dark inverse `#1c1b1b` + white text. +- Typography: Newsreader (masthead/headlines), Literata (body 17-19px, lh ~1.6), Work Sans (UI labels/caps). +- Shape: 0px radius everywhere, flat + hairline rules, no shadows/gradients. +- Spacing: 8px grid; content column max 42rem centered. diff --git a/.pi/memory-vault/packs/kontra-day/00-system/pi-agent/memory-manifest.md b/.pi/memory-vault/packs/kontra-day/00-system/pi-agent/memory-manifest.md new file mode 100644 index 0000000..ed00965 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/00-system/pi-agent/memory-manifest.md @@ -0,0 +1,20 @@ +--- +type: system +id: system.kontra-day.memory-manifest +title: Kontra Day Memory Manifest +status: active +source_of_truth: true +freshness: current +last_reviewed: 2026-09-08 +tags: + - agent-memory/system + - pack/kontra-day +--- + +# Kontra Day Memory Manifest + +This pack stores safe durable context generated from `/home/sam/home_network/web_sites/kontra_day`. + +## Retrieval Protocol + +See [[packs/kontra-day/00-system/pi-agent/retrieval-protocol|Retrieval Protocol]] and [[packs/kontra-day/00-system/pi-agent/resource-map|Resource Map]]. diff --git a/.pi/memory-vault/packs/kontra-day/20-context/access.md b/.pi/memory-vault/packs/kontra-day/20-context/access.md new file mode 100644 index 0000000..d0353b6 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/20-context/access.md @@ -0,0 +1,102 @@ +--- +type: context +id: context.kontra-day.access +title: access +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/context + - autolearn + - rich-discovery + - repo/access +--- + +# access + +## Rich discovery update (2026-09-08 02:23:28) + +Great questions — let me answer each properly, because they cut right to the architecture. + +## 1. GOTTH + `.md` files — yes, this is a strong fit + +Go + templ + htmx + Alpine + Tailwind, with Goldmark (Go's CommonMark renderer) turning your `.md` into HTML at request time, is one of the best "text-first news site" stacks you can pick right now: + +- **One static binary** — build once, copy to `.13`, done. No Node, no PHP runtime, no container even needed. +- **Server-rendered HTML** — SEO-friendly by default (great Lighthouse), fast. +- **templ** gives type-safe components; **htmx** gives interactivity (paging, filters, comment forms later) without a JS framework; **Alpine** for small client bits. +- **Content = files** — your Obsidian/editor workflow stays; go can even re-render on file change in dev. +- Cost: the **admin is DIY** — auth, CRUD, media browser are all code you write. And per-request markdown parsing is fine at this scale (cache rendered HTML if you care). + +## 2. Laravel as the "orchestrator" — honest answer: it's the wrong tool *for that role* + +Laravel is excellent at **being a web app** (Blade+htmx admin, auth, queues, and — importantly — a genuinely great **mail system** for that email phase later). But you're proposing it as a **publish-state manager** perched over Go: + +- You'd run **two servers** (Go on :80, Laravel admin on :8080) both touching the same `.md` files and a shared DB. Every publish toggle, front-page order, archive move = a DB write Laravel makes and Go reads. +- That works, but it's **redundant** — Go can own a small SQLite `publish` table itself, with an htmx admin page inside the same binary. One language, one process, zero sync. + +So the real fork is: + +| Path | Architecture | When to pick | +|---|---|---| +| **A. All Go** | Go serves site + a minimal htmx admin page managing publish/front-page/archive in SQLite. `.md` = content truth. | You want the leanest thing. Email later = Go mail libs, or hand off to n8n/Postfix on your network. | +| **B. Laravel owns it all** | Blade + htmx admin, Laravel serves pages, S3 media via its filesystem driver, Mailables for email later. Drop Go. | You want Laravel's admin/mail/ecosystem and don't mind PHP runtime. | +| **C. Go site + headless admin** | Go serves; **PocketBase (already on .13)** is the admin/publish/media store. | You want a browser admin *without* writing one. | +| **D. Go + Laravel, loosely coupled** | Go serves; Laravel admin only writes publish-state to a **shared SQLite file** + edits `.md` on disk. | You specifically want Laravel's admin UX and Go's front. Viable, but it's path A with extra running parts. | + +"Is Laravel good for this?" — good at admin, great at email, overkill as a proxy. **"Other PHP?"** — Symfony (bulkier), Slim (micro), WordPress (off-the-shelf but you'd be fighting it). If PHP is the choice, Laravel+Filament is the right one. + +## 3. Garage S3 media + `.md` coordination under Laravel + +- **Showing media in admin**: Laravel has a first-class **S3 filesystem driver** — configure a `garage` disk (endpoint, keys, bucket) and the admin lists objects and renders thumbnails. Public reads via a **Caddy/nginx route** (`/media/*` → bucket) rather than exposing Garage's own port; private buckets can use presigned URLs. +- **Coordination with `.md`**: the cleanest pattern is **shortcodes, not raw URLs**. In your file you write `{{media:cover}}` or `{{vimeo:12345}}`; the renderer (Go or Laravel) resolves the slug to the actual S3 URL at render time. That way you can **rename/migrate media later without touching every article** — plain URLs pasted into `.md` freeze the path forever. Upload flow: admin uploads to bucket → returns URL → editor pastes it in the `.md`. Simple and inspectable. + +## 4. Is markdown good? And what's the "scientific" one? + +- **Yes — Markdown (GFM/CommonMark) + front-matter is ideal** for text news/opinion with links, images, embeds. +- Variants, in case the name escapes you: **MDX** (JSX components inside markdown), **AsciiDoc** (more structure — tables, includes; great for docs, overkill here), **Org-mode**, reStructuredText. +- **The new scientific one is almost certainly Typst** (2023) — a modern typesetting language with gorgeous math, designed for **documents/PDF**. You *can* render it to SVG for web, but for a news site it's the wrong tool. +- **If you meant LSP** (Language Server Protocol) — that's an *editor autocomplete standard*, not a format; ignore it here. +- For the odd formula: keep markdown and add **KaTeX/MathML** via `$...$` in Goldmark's math extension. You get scientific notation with zero new language. + +## 5. My recommendation + +**Path A — all Go** (templ + htmx + Alpine + Tailwind), `.md` files as content, SQLite publish-state with a small htmx admin for live/front-page/archive, `{{media:...}}` shortcodes resolved to Garage S3. Deploy = one binary behind Caddy on `.13`. Email phase later = Go mail lib or n8n handoff — revisit then, when requirements are real. + +Want me to draft **PLAN.md** on Path A — or would you rather spec out Path B (Laravel-everything) or Path C (Go + PocketBase) instead? + +## Source paths observed + +- `home/sam/home_network/web_sites/kontra_day/.pi` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system/pi-agent` +- `home/sam/home_network/web_sites/kontra_day/.pi/tasks` +- `home/sam/.agents` +- `extensions/pi-config/index.ts` +- `extensions/ask-user-question/index.ts` +- `sys/firmware/efi/efivars` +- `publish/front-page/archive` +- `admin/mail/ecosystem` +- `admin/publish/media` +- `live/front-page/archive` + +## Evidence + +- Confidence: 84% +- Reason: Update component/repository context with detailed discovered structure and configuration + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28|Rich discovery: access 2026-09-08 02:23:28]] +- context: [[packs/kontra-day/20-context/access|access]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|access deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|access repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/20-context/files.md b/.pi/memory-vault/packs/kontra-day/20-context/files.md new file mode 100644 index 0000000..f5bddc9 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/20-context/files.md @@ -0,0 +1,85 @@ +--- +type: context +id: context.kontra-day.files +title: files +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/context + - autolearn + - rich-discovery + - repo/files +--- + +# files + +## Rich discovery update (2026-09-08 03:36:06) + +Great — this is the model clicking into place. Short version: **the folder on disk is the website. Everything else is just an editor on top of it.** Here's each question answered. + +## The mental model + +``` + content/ (single git repo, remote = Gitea on your network) + │ + ┌───────┼───────────┬────────────────┐ + │ │ │ │ +Neovim Obsidian Decap (web) Go binary +(files) (vault) (admin.domain) (renders on request) + │ │ │ │ + └───────┴───────────┴────────────────┘ + all write the SAME .md files +``` + +- **Neovim**: edit a file → save → Go already sees it. The site *always* reflects the working tree — so nothing ever goes stale. +- **Obsidian**: the same folder opens as a vault (it's plain markdown ✓), with Gitea as its git remote, exactly as you use it today. +- **Decap**: a browser UI over the *same files* — click collection → articles, edit fields as forms, markdown body editor; on save it commits to git. No duplication, no import/export. +- **Go binary**: renders markdown → HTML **per request**. It never "re-outputs" a static build, because there's no build step to run. (Optional in-memory cache later if you want it snappier.) Optional niceties: `published: false` front-matter → hidden from public, visible as preview on `admin.kontra.day`; `publish_at: 2026-…` → scheduled go-live. + +## "Editing in Neovim — will Decap/Obsidian sync?" +Almost. Everything reads the working tree, so Neovim saves are instantly live either way. The one wrinkle: **Decap shows committed state**, so an uncommitted Neovim edit may not show in the Decap UI until someone commits. Fix = a tiny **file-watcher** (inotify/systemd Path unit) on `content/` that autocommits to git on any change from any editor. Then: *any* editor → autocommit → Gitea push → Decap in sync → Go serves. That one script is the "sync" you're imagining, and it's ~10 lines. + +## "How are templates created for the GOTH stack? Can we design them?" +Yes — this is exactly **Phase Two** of your AGENT.md, and it's data + code: + +| Template | What it's made of | +|---|---| +| `home` (front page composition) | templ component + editable blocks list | +| `article` / `opinion` / `photo-essay` / `video` | templ component, chosen per page in front-matter | +| `subject-index` (each subject area) | templ component + subject setting | +| `archive`, `about`, 404 | templ components | +| Look & feel | Tailwind + CSS design-token variables (`--accent` etc.) | + +Flow: we list the template set → I design 2–3 looks (demos/images) → you approve → they get built as `.templ` components in the binary, themed with tokens so colours/subject accents are admin-editable data, not code. + +--- + +The architecture is now concrete enough to write down. Per your AGENT.md Phase One, next step is **PLAN.md + Vikunja/Outline entries** documenting this decision set. Want me to draft PLAN.md and register the phase tasks now — or do you want to change anything in this model first? + +## Source paths observed + +- `www.wisp.blog/compare/winter/keystatic` +- `github.com/wintercms/winter` +- `plugins/winter/demo` +- `www.luckymedia.dev/insights/decap-cms` +- `users/roles/auth` +- `slug/meta/sitemap/RSS` + +## Evidence + +- Confidence: 84% +- Reason: Update component/repository context with detailed discovered structure and configuration + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06|Rich discovery: files 2026-09-08 03:36:06]] +- context: [[packs/kontra-day/20-context/files|files]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|files deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|files repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/20-context/getdesign-md.md b/.pi/memory-vault/packs/kontra-day/20-context/getdesign-md.md new file mode 100644 index 0000000..347dfd0 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/20-context/getdesign-md.md @@ -0,0 +1,74 @@ +--- +type: context +id: context.kontra-day.getdesign-md +title: getdesign.md +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/context + - autolearn + - rich-discovery + - repo/getdesign-md +--- + +# getdesign.md + +## Rich discovery update (2026-09-08 05:34:12) + +Skill active — and let me answer your Stitch workflow question with verified facts, because it determines how we run Phase Two. + +## What Google Stitch can actually export (as of the latest updates) +| Export | Works? | Note | +|---|---|---| +| **Copy code / download** (HTML/CSS/**Tailwind**) | ✅ Yes | Its core output. Real components, not images — and Tailwind is exactly our stack. | +| **To Figma** | ⚠️ Flaky | Direct Stitch→Figma has been unreliable/long-queued (known bug threads); an MCP route exists. Not dependable. | +| **To Google AI Studio** | ✅ Yes (Stitch 2.0+) | Can push designs into AI Studio projects. | +| **Project brief / DESIGN.md** | ❌ No direct feature | Doesn't produce one — **but this is what I do for you**: I write the DESIGN.md (tokens + brief) from your Stitch panels, and that's what `design-build` consumes later. | + +## What I'd actually recommend for Kontra Day +Stitch's real value here is **visual exploration + a Tailwind reference**. The practical pipeline: + +1. **You keep designing panels in Stitch** → screenshot what you like. +2. **I turn the approved panels into a `DESIGN.md`** — exact palette, typography, spacing, radius + a written identity brief (the "project brief" you mentioned, as the file format this workflow already uses). +3. **I generate alternative directions** via this skill's `image-maker` so you can compare. +4. **Build** uses the tokens + Stitch's Tailwind export as reference → real templ components. (Stitch's HTML won't drop straight into templ, but it's a strong visual contract.) + +So: **yes — copy the Tailwind code and/or push to AI Studio, but treat both as reference; the lasting artifact is DESIGN.md.** Figma isn't worth the friction for a solo project unless you like working there. + +## Fonts & readability (your instinct is right to think about this) +For a news-opinion site, the classic readable pairing: +- **Headlines**: a strong serif or display face (e.g. Newsreader, Source Serif, Playfair) at large weight +- **Body**: a humanist sans or print-style serif at 17–18px, ~65–75 chars/line, 1.5–1.65 line height — this is the actual readability driver, more than the font choice itself +- Self-host the fonts (no Google CDN at runtime — performance + privacy), using variable fonts where possible +- Typography choices go into DESIGN.md as tokens, so colours/fonts stay data-driven per our plan + +So how do you want to start? + + +[tool:ask_user_question] + +## Source paths observed + +- `getdesign.md/apple/design-md` +- `github.com/VoltAgent/awesome-design-md` +- `justinmckelvey.com/blog/google-stitch-vs-figma` +- `HTML/CSS/Tailwind` + +## Evidence + +- Confidence: 84% +- Reason: Update component/repository context with detailed discovered structure and configuration + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12|Rich discovery: getdesign.md 2026-09-08 05:34:12]] +- context: [[packs/kontra-day/20-context/getdesign-md|getdesign.md]] +- runbook: [[packs/kontra-day/70-runbooks/getdesign-md-deployment-operations|getdesign.md deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|getdesign.md repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/20-context/individually.md b/.pi/memory-vault/packs/kontra-day/20-context/individually.md new file mode 100644 index 0000000..af9948c --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/20-context/individually.md @@ -0,0 +1,95 @@ +--- +type: context +id: context.kontra-day.individually +title: individually +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/context + - autolearn + - rich-discovery + - repo/individually +--- + +# individually + +## Rich discovery update (2026-09-08 03:44:05) + +Confirmed the full topology. Here's the storage/sync reality and the plan for it. + +## The actual topology (verified) +| Machine | Role | Relevant bits | +|---|---|---| +| **.27** (this) | Main dev, Obsidian + Neovim live here | Obsidian vault at `/home/sam/obsidian/` | +| **.13** | **Web host, always-on** | Sites in `/var/www/`, runs PocketBase, Caddy sits *upstream* | +| **.35** | Gitea (Docker, web :3001, SSH :2222) + Caddy reverse proxy | `gitea.lab.audasmedia.com.au` | +| Garage S3 | media bucket — need to confirm which host | (Phase One item) | + +## Where things should live — the key decision +The mistake to avoid: **coupling the live site to .27** (your dev machine). So: + +- **Gitea repo on .35 = the single source of truth** for content (`.md` + config + media references). This is the "origin". +- **.27** = authoring clients (Obsidian vault + Neovim) — it's a *clone* of that repo, pushes to .35. +- **.13** = the always-on production clone at `/var/www/kontra_day/`, which the Go binary serves. +- **Caddy on .35** routes `kontra.day` → Go on .13, `admin.kontra.day` → Decap on .13. +- **Garage S3** = media objects, referenced from `.md` via `{{media:...}}` shortcodes. + +## How sync actually works (this is the part that matters) +``` +Editor on .27 Gitea on .35 Production on .13 +Neovim / Obsidian ──push──▶ origin ──webhook/poll──▶ git pull + (clone) ▲ │ + │ ▼ +Decap (admin.kontra.day) ──commit──┘ Go binary renders .md → HTML +``` +- **Any change from any editor** (Neovim save, Obsidian sync, Decap save) lands on Gitea, then auto-deploys to .13 via **webhook + systemd Path watcher** that runs `git pull`. +- **.13 never needs your .27** — it pulls straight from Gitea. Your dev machine can be off and the site stays live. ✅ this addresses exactly your concern. +- **No build step**: Go re-renders `.md` → HTML per request (with an optional cache), so a pull = instant content update. +- This is a strict upgrade over the current **manual lsyncd .27→.13** pattern — you'd retire that for this site (same wiring though: systemd on .13). + +## Things that *must* be decided/verified in Phase One +1. **Which host runs Garage S3** (needs confirming — it's not in the skill list yet). +2. **Where the Go binary + Decap run on .13** — as a systemd service (`users` group, `/var/www/kontra_day` per the existing perms note) or Docker. +3. **Caddy config** — which Caddy instance (skill says Caddy is on .35) owns the `kontra.day`/`admin.kontra.day` vhosts, and how it upstreams to .13. +4. **Obsidian vault wiring** — make `/home/sam/obsidian/.../kontra_day` a git clone of the Gitea repo (Obsidian already git-links to Gitea, so this is a natural fit). +5. **Deploy trigger** — Gitea webhook → .13 vs. a simple systemd timer `git pull` every 30s (fewer moving parts, good enough). + +## Recommendation +**Gitea (.35) as origin → .13 always-on clone as live → .27 clients as editors.** That keeps production decoupled from your dev box, gives you history/rollback on every `.md`, and matches the Gitea/Obsidian habits you already have. + +Want me to fold this into **PLAN.md** now (with the open questions marked), and register the Phase One tasks in Vikunja/Outline? + +## Source paths observed + +- `2222/sam/pi-config.git` +- `.pi/agent/settings.json` +- `home/sam/.agents` +- `gitea.lab.audasmedia.com.au/sam/pi-config` +- `sys/firmware/efi/efivars` +- `.config/lsyncd/lsyncd.conf.lua` +- `zola/sprinkler/public` +- `.config/environment.d/10-secrets.conf` +- `.27/.13/.51` +- `Gitea/Obsidian/Caddy` +- `home/sam/obsidian` +- `var/www/kontra_day` +- `home/sam/obsidian/.../kontra_day` + +## Evidence + +- Confidence: 84% +- Reason: Update component/repository context with detailed discovered structure and configuration + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05|Rich discovery: individually 2026-09-08 03:44:05]] +- context: [[packs/kontra-day/20-context/individually|individually]] +- runbook: [[packs/kontra-day/70-runbooks/individually-deployment-operations|individually deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|individually repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/20-context/kontra-day-stack-decisions-storage-topology.md b/.pi/memory-vault/packs/kontra-day/20-context/kontra-day-stack-decisions-storage-topology.md new file mode 100644 index 0000000..7fe02ea --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/20-context/kontra-day-stack-decisions-storage-topology.md @@ -0,0 +1,55 @@ +--- +type: context +id: context.kontra-day.kontra-day-stack-decisions-storage-topology +title: Kontra Day — stack decisions + storage topology +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/context + - kontra-day + - goth + - golang + - htmx + - decap + - garage-s3 + - gitea + - topology +--- + +# Kontra Day — stack decisions + storage topology + +# Kontra Day (news-opinion site) — Phase One decisions + +## Stack (decided with user) +- **Go + templ + htmx + Alpine + Tailwind** ("GOTH") — single static binary, server-rendered (SEO). +- **Content = Markdown (.md) + front-matter** (Goldmark/CommonMark in Go). Author in Neovim/Obsidian. +- **Admin = Decap CMS** at `admin.kontra.day` — free browser UI that edits the SAME .md files and commits to git. No custom admin. +- **Media = Garage S3** (on .13) via `{{media:...}}` shortcodes resolved at render time. +- **Templates**: templ components chosen per page (front-matter `template:`) → page → subject (`_subject.yaml`) → site (`config/site.yaml`) → theme fallback. Front page = `home` template driven by editable blocks list (`config/frontpage.yaml`). Colours = CSS design tokens (per-subject accent), not code. +- **Deploy = git push → auto-pull on .13** (no build step; Go renders on request). Obsidian git-sync plugin on .27. + +## Verified topology (from system-architect skill + Obsidian notes) +- **.27** sam-4screen-desktop (192.168.20.27): dev box, Obsidian vault at `/home/sam/obsidian/`, Neovim. +- **.13** nixos-desktop (192.168.20.13): web host, always-on. Sites in `/var/www/` (NixOS `users` group). Docker: Garage S3 (.13:3900 s3 / :3902 admin, `/home/sam/deployment/garage/`, s3 root `s3.lab.audasmedia.com.au`), Outline (:3000, uses Garage S3), PocketBase, family-home-lab stack. +- **.35** sam-ubuntu1 (192.168.20.35): Gitea Docker (web :3001, SSH :2222, `gitea.lab.audasmedia.com.au` = origin) + **Caddy master reverse proxy** (`/Docker/Containers/caddy/`). +- **.23** file-server (192.168.20.23): NFS backup target. +- Go binary + site content run at `/var/www/kontra_day` on .13. Content origin = Gitea repo (proposed `sam/kontra-day-content`), production clone on .13, authoring clone on .27 (Obsidian vault subfolder). + +## Notes / gotchas +- Vikunja API at `vikunja.lab.audasmedia.com.au/api/v1`; Outline at `outline.lab.audasmedia.com.au/api` (endpoints POST; public endpoint 502s intermittently — retry, or hit container directly at .13:3000). Tokens in `~/.config/environment.d/10-secrets.conf`. Vikunja task-list response is a plain JSON array (not `{"tasks":[]}`). +- Vikunja project id 10 = "Kontra Day" (tasks 118-126). Outline collection `7e85478e-8445-4b3b-b0d5-2032309981c4` = "Kontra Day", doc `b74f3299...` = "Phase One — PLAN". +- PLAN.md lives at `/home/sam/home_network/web_sites/kontra_day/PLAN.md`. +- AGENT.md phases: 1 planning → 2 design → 3 build/test → 4 live (system-architect skill) → 5 email+DNS (Website Host Migration plan) → 6 console+backups → 7 marketing. + + +## Evidence + +- Confidence: 100% +- Reason: Manual memctx_save + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] diff --git a/.pi/memory-vault/packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns.md b/.pi/memory-vault/packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns.md new file mode 100644 index 0000000..92affdd --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns.md @@ -0,0 +1,308 @@ +--- +type: observation +id: observation.kontra-day.access-repository-structure-and-configuration-patterns +title: access repository structure and configuration patterns +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/observation + - autolearn + - rich-discovery + - repo/access +--- + +# access repository structure and configuration patterns + +## Structural/configuration observations (2026-09-08 02:23:28) + +Great questions — let me answer each properly, because they cut right to the architecture. + +## 1. GOTTH + `.md` files — yes, this is a strong fit + +Go + templ + htmx + Alpine + Tailwind, with Goldmark (Go's CommonMark renderer) turning your `.md` into HTML at request time, is one of the best "text-first news site" stacks you can pick right now: + +- **One static binary** — build once, copy to `.13`, done. No Node, no PHP runtime, no container even needed. +- **Server-rendered HTML** — SEO-friendly by default (great Lighthouse), fast. +- **templ** gives type-safe components; **htmx** gives interactivity (paging, filters, comment forms later) without a JS framework; **Alpine** for small client bits. +- **Content = files** — your Obsidian/editor workflow stays; go can even re-render on file change in dev. +- Cost: the **admin is DIY** — auth, CRUD, media browser are all code you write. And per-request markdown parsing is fine at this scale (cache rendered HTML if you care). + +## 2. Laravel as the "orchestrator" — honest answer: it's the wrong tool *for that role* + +Laravel is excellent at **being a web app** (Blade+htmx admin, auth, queues, and — importantly — a genuinely great **mail system** for that email phase later). But you're proposing it as a **publish-state manager** perched over Go: + +- You'd run **two servers** (Go on :80, Laravel admin on :8080) both touching the same `.md` files and a shared DB. Every publish toggle, front-page order, archive move = a DB write Laravel makes and Go reads. +- That works, but it's **redundant** — Go can own a small SQLite `publish` table itself, with an htmx admin page inside the same binary. One language, one process, zero sync. + +So the real fork is: + +| Path | Architecture | When to pick | +|---|---|---| +| **A. All Go** | Go serves site + a minimal htmx admin page managing publish/front-page/archive in SQLite. `.md` = content truth. | You want the leanest thing. Email later = Go mail libs, or hand off to n8n/Postfix on your network. | +| **B. Laravel owns it all** | Blade + htmx admin, Laravel serves pages, S3 media via its filesystem driver, Mailables for email later. Drop Go. | You want Laravel's admin/mail/ecosystem and don't mind PHP runtime. | +| **C. Go site + headless admin** | Go serves; **PocketBase (already on .13)** is the admin/publish/media store. | You want a browser admin *without* writing one. | +| **D. Go + Laravel, loosely coupled** | Go serves; Laravel admin only writes publish-state to a **shared SQLite file** + edits `.md` on disk. | You specifically want Laravel's admin UX and Go's front. Viable, but it's path A with extra running parts. | + +"Is Laravel good for this?" — good at admin, great at email, overkill as a proxy. **"Other PHP?"** — Symfony (bulkier), Slim (micro), WordPress (off-the-shelf but you'd be fighting it). If PHP is the choice, Laravel+Filament is the right one. + +## 3. Garage S3 media + `.md` coordination under Laravel + +- **Showing media in admin**: Laravel has a first-class **S3 filesystem driver** — configure a `garage` disk (endpoint, keys, bucket) and the admin lists objects and renders thumbnails. Public reads via a **Caddy/nginx route** (`/media/*` → bucket) rather than exposing Garage's own port; private buckets can use presigned URLs. +- **Coordination with `.md`**: the cleanest pattern is **shortcodes, not raw URLs**. In your file you write `{{media:cover}}` or `{{vimeo:12345}}`; the renderer (Go or Laravel) resolves the slug to the actual S3 URL at render time. That way you can **rename/migrate media later without touching every article** — plain URLs pasted into `.md` freeze the path forever. Upload flow: admin uploads to bucket → returns URL → editor pastes it in the `.md`. Simple and inspectable. + +## 4. Is markdown good? And what's the "scientific" one? + +- **Yes — Markdown (GFM/CommonMark) + front-matter is ideal** for text news/opinion with links, images, embeds. +- Variants, in case the name escapes you: **MDX** (JSX components inside markdown), **AsciiDoc** (more structure — tables, includes; great for docs, overkill here), **Org-mode**, reStructuredText. +- **The new scientific one is almost certainly Typst** (2023) — a modern typesetting language with gorgeous math, designed for **documents/PDF**. You *can* render it to SVG for web, but for a news site it's the wrong tool. +- **If you meant LSP** (Language Server Protocol) — that's an *editor autocomplete standard*, not a format; ignore it here. +- For the odd formula: keep markdown and add **KaTeX/MathML** via `$...$` in Goldmark's math extension. You get scientific notation with zero new language. + +## 5. My recommendation + +**Path A — all Go** (templ + htmx + Alpine + Tailwind), `.md` files as content, SQLite publish-state with a small htmx admin for live/front-page/archive, `{{media:...}}` shortcodes resolved to Garage S3. Deploy = one binary behind Caddy on `.13`. Email phase later = Go mail lib or n8n handoff — revisit then, when requirements are real. + +Want me to draft **PLAN.md** on Path A — or would you rather spec out Path B (Laravel-everything) or Path C (Go + PocketBase) instead? + +## Source paths observed + +- `home/sam/home_network/web_sites/kontra_day/.pi` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system/pi-agent` +- `home/sam/home_network/web_sites/kontra_day/.pi/tasks` +- `home/sam/.agents` +- `extensions/pi-config/index.ts` +- `extensions/ask-user-question/index.ts` +- `sys/firmware/efi/efivars` +- `publish/front-page/archive` +- `admin/mail/ecosystem` +- `admin/publish/media` +- `live/front-page/archive` + +## Evidence + +- Confidence: 82% +- Reason: Captured factual repo structure/configuration patterns from rich discovery + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28|Rich discovery: access 2026-09-08 02:23:28]] +- context: [[packs/kontra-day/20-context/access|access]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|access deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|access repository structure and configuration patterns]] + + +--- + +## Update (2026-09-08 03:36:06) + +## Structural/configuration observations (2026-09-08 03:36:06) + +Great — this is the model clicking into place. Short version: **the folder on disk is the website. Everything else is just an editor on top of it.** Here's each question answered. + +## The mental model + +``` + content/ (single git repo, remote = Gitea on your network) + │ + ┌───────┼───────────┬────────────────┐ + │ │ │ │ +Neovim Obsidian Decap (web) Go binary +(files) (vault) (admin.domain) (renders on request) + │ │ │ │ + └───────┴───────────┴────────────────┘ + all write the SAME .md files +``` + +- **Neovim**: edit a file → save → Go already sees it. The site *always* reflects the working tree — so nothing ever goes stale. +- **Obsidian**: the same folder opens as a vault (it's plain markdown ✓), with Gitea as its git remote, exactly as you use it today. +- **Decap**: a browser UI over the *same files* — click collection → articles, edit fields as forms, markdown body editor; on save it commits to git. No duplication, no import/export. +- **Go binary**: renders markdown → HTML **per request**. It never "re-outputs" a static build, because there's no build step to run. (Optional in-memory cache later if you want it snappier.) Optional niceties: `published: false` front-matter → hidden from public, visible as preview on `admin.kontra.day`; `publish_at: 2026-…` → scheduled go-live. + +## "Editing in Neovim — will Decap/Obsidian sync?" +Almost. Everything reads the working tree, so Neovim saves are instantly live either way. The one wrinkle: **Decap shows committed state**, so an uncommitted Neovim edit may not show in the Decap UI until someone commits. Fix = a tiny **file-watcher** (inotify/systemd Path unit) on `content/` that autocommits to git on any change from any editor. Then: *any* editor → autocommit → Gitea push → Decap in sync → Go serves. That one script is the "sync" you're imagining, and it's ~10 lines. + +## "How are templates created for the GOTH stack? Can we design them?" +Yes — this is exactly **Phase Two** of your AGENT.md, and it's data + code: + +| Template | What it's made of | +|---|---| +| `home` (front page composition) | templ component + editable blocks list | +| `article` / `opinion` / `photo-essay` / `video` | templ component, chosen per page in front-matter | +| `subject-index` (each subject area) | templ component + subject setting | +| `archive`, `about`, 404 | templ components | +| Look & feel | Tailwind + CSS design-token variables (`--accent` etc.) | + +Flow: we list the template set → I design 2–3 looks (demos/images) → you approve → they get built as `.templ` components in the binary, themed with tokens so colours/subject accents are admin-editable data, not code. + +--- + +The architecture is now concrete enough to write down. Per your AGENT.md Phase One, next step is **PLAN.md + Vikunja/Outline entries** documenting this decision set. Want me to draft PLAN.md and register the phase tasks now — or do you want to change anything in this model first? + +## Source paths observed + +- `www.wisp.blog/compare/winter/keystatic` +- `github.com/wintercms/winter` +- `plugins/winter/demo` +- `www.luckymedia.dev/insights/decap-cms` +- `users/roles/auth` +- `slug/meta/sitemap/RSS` + +## Evidence + +- Confidence: 82% +- Reason: Captured factual repo structure/configuration patterns from rich discovery + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06|Rich discovery: files 2026-09-08 03:36:06]] +- context: [[packs/kontra-day/20-context/files|files]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|files deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|files repository structure and configuration patterns]] + + +--- + +## Update (2026-09-08 03:44:05) + +## Structural/configuration observations (2026-09-08 03:44:05) + +Confirmed the full topology. Here's the storage/sync reality and the plan for it. + +## The actual topology (verified) +| Machine | Role | Relevant bits | +|---|---|---| +| **.27** (this) | Main dev, Obsidian + Neovim live here | Obsidian vault at `/home/sam/obsidian/` | +| **.13** | **Web host, always-on** | Sites in `/var/www/`, runs PocketBase, Caddy sits *upstream* | +| **.35** | Gitea (Docker, web :3001, SSH :2222) + Caddy reverse proxy | `gitea.lab.audasmedia.com.au` | +| Garage S3 | media bucket — need to confirm which host | (Phase One item) | + +## Where things should live — the key decision +The mistake to avoid: **coupling the live site to .27** (your dev machine). So: + +- **Gitea repo on .35 = the single source of truth** for content (`.md` + config + media references). This is the "origin". +- **.27** = authoring clients (Obsidian vault + Neovim) — it's a *clone* of that repo, pushes to .35. +- **.13** = the always-on production clone at `/var/www/kontra_day/`, which the Go binary serves. +- **Caddy on .35** routes `kontra.day` → Go on .13, `admin.kontra.day` → Decap on .13. +- **Garage S3** = media objects, referenced from `.md` via `{{media:...}}` shortcodes. + +## How sync actually works (this is the part that matters) +``` +Editor on .27 Gitea on .35 Production on .13 +Neovim / Obsidian ──push──▶ origin ──webhook/poll──▶ git pull + (clone) ▲ │ + │ ▼ +Decap (admin.kontra.day) ──commit──┘ Go binary renders .md → HTML +``` +- **Any change from any editor** (Neovim save, Obsidian sync, Decap save) lands on Gitea, then auto-deploys to .13 via **webhook + systemd Path watcher** that runs `git pull`. +- **.13 never needs your .27** — it pulls straight from Gitea. Your dev machine can be off and the site stays live. ✅ this addresses exactly your concern. +- **No build step**: Go re-renders `.md` → HTML per request (with an optional cache), so a pull = instant content update. +- This is a strict upgrade over the current **manual lsyncd .27→.13** pattern — you'd retire that for this site (same wiring though: systemd on .13). + +## Things that *must* be decided/verified in Phase One +1. **Which host runs Garage S3** (needs confirming — it's not in the skill list yet). +2. **Where the Go binary + Decap run on .13** — as a systemd service (`users` group, `/var/www/kontra_day` per the existing perms note) or Docker. +3. **Caddy config** — which Caddy instance (skill says Caddy is on .35) owns the `kontra.day`/`admin.kontra.day` vhosts, and how it upstreams to .13. +4. **Obsidian vault wiring** — make `/home/sam/obsidian/.../kontra_day` a git clone of the Gitea repo (Obsidian already git-links to Gitea, so this is a natural fit). +5. **Deploy trigger** — Gitea webhook → .13 vs. a simple systemd timer `git pull` every 30s (fewer moving parts, good enough). + +## Recommendation +**Gitea (.35) as origin → .13 always-on clone as live → .27 clients as editors.** That keeps production decoupled from your dev box, gives you history/rollback on every `.md`, and matches the Gitea/Obsidian habits you already have. + +Want me to fold this into **PLAN.md** now (with the open questions marked), and register the Phase One tasks in Vikunja/Outline? + +## Source paths observed + +- `2222/sam/pi-config.git` +- `.pi/agent/settings.json` +- `home/sam/.agents` +- `gitea.lab.audasmedia.com.au/sam/pi-config` +- `sys/firmware/efi/efivars` +- `.config/lsyncd/lsyncd.conf.lua` +- `zola/sprinkler/public` +- `.config/environment.d/10-secrets.conf` +- `.27/.13/.51` +- `Gitea/Obsidian/Caddy` +- `home/sam/obsidian` +- `var/www/kontra_day` +- `home/sam/obsidian/.../kontra_day` + +## Evidence + +- Confidence: 82% +- Reason: Captured factual repo structure/configuration patterns from rich discovery + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05|Rich discovery: individually 2026-09-08 03:44:05]] +- context: [[packs/kontra-day/20-context/individually|individually]] +- runbook: [[packs/kontra-day/70-runbooks/individually-deployment-operations|individually deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|individually repository structure and configuration patterns]] + + +--- + +## Update (2026-09-08 05:34:12) + +## Structural/configuration observations (2026-09-08 05:34:12) + +Skill active — and let me answer your Stitch workflow question with verified facts, because it determines how we run Phase Two. + +## What Google Stitch can actually export (as of the latest updates) +| Export | Works? | Note | +|---|---|---| +| **Copy code / download** (HTML/CSS/**Tailwind**) | ✅ Yes | Its core output. Real components, not images — and Tailwind is exactly our stack. | +| **To Figma** | ⚠️ Flaky | Direct Stitch→Figma has been unreliable/long-queued (known bug threads); an MCP route exists. Not dependable. | +| **To Google AI Studio** | ✅ Yes (Stitch 2.0+) | Can push designs into AI Studio projects. | +| **Project brief / DESIGN.md** | ❌ No direct feature | Doesn't produce one — **but this is what I do for you**: I write the DESIGN.md (tokens + brief) from your Stitch panels, and that's what `design-build` consumes later. | + +## What I'd actually recommend for Kontra Day +Stitch's real value here is **visual exploration + a Tailwind reference**. The practical pipeline: + +1. **You keep designing panels in Stitch** → screenshot what you like. +2. **I turn the approved panels into a `DESIGN.md`** — exact palette, typography, spacing, radius + a written identity brief (the "project brief" you mentioned, as the file format this workflow already uses). +3. **I generate alternative directions** via this skill's `image-maker` so you can compare. +4. **Build** uses the tokens + Stitch's Tailwind export as reference → real templ components. (Stitch's HTML won't drop straight into templ, but it's a strong visual contract.) + +So: **yes — copy the Tailwind code and/or push to AI Studio, but treat both as reference; the lasting artifact is DESIGN.md.** Figma isn't worth the friction for a solo project unless you like working there. + +## Fonts & readability (your instinct is right to think about this) +For a news-opinion site, the classic readable pairing: +- **Headlines**: a strong serif or display face (e.g. Newsreader, Source Serif, Playfair) at large weight +- **Body**: a humanist sans or print-style serif at 17–18px, ~65–75 chars/line, 1.5–1.65 line height — this is the actual readability driver, more than the font choice itself +- Self-host the fonts (no Google CDN at runtime — performance + privacy), using variable fonts where possible +- Typography choices go into DESIGN.md as tokens, so colours/fonts stay data-driven per our plan + +So how do you want to start? + + +[tool:ask_user_question] + +## Source paths observed + +- `getdesign.md/apple/design-md` +- `github.com/VoltAgent/awesome-design-md` +- `justinmckelvey.com/blog/google-stitch-vs-figma` +- `HTML/CSS/Tailwind` + +## Evidence + +- Confidence: 82% +- Reason: Captured factual repo structure/configuration patterns from rich discovery + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12|Rich discovery: getdesign.md 2026-09-08 05:34:12]] +- context: [[packs/kontra-day/20-context/getdesign-md|getdesign.md]] +- runbook: [[packs/kontra-day/70-runbooks/getdesign-md-deployment-operations|getdesign.md deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|getdesign.md repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/70-runbooks/access-deployment-operations.md b/.pi/memory-vault/packs/kontra-day/70-runbooks/access-deployment-operations.md new file mode 100644 index 0000000..50beb62 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/70-runbooks/access-deployment-operations.md @@ -0,0 +1,171 @@ +--- +type: runbook +id: runbook.kontra-day.access-deployment-operations +title: access deployment operations +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/runbook + - autolearn + - rich-discovery + - deployment-runbook +--- + +# access deployment operations + +## Deployment/runbook details discovered (2026-09-08 02:23:28) + +Great questions — let me answer each properly, because they cut right to the architecture. + +## 1. GOTTH + `.md` files — yes, this is a strong fit + +Go + templ + htmx + Alpine + Tailwind, with Goldmark (Go's CommonMark renderer) turning your `.md` into HTML at request time, is one of the best "text-first news site" stacks you can pick right now: + +- **One static binary** — build once, copy to `.13`, done. No Node, no PHP runtime, no container even needed. +- **Server-rendered HTML** — SEO-friendly by default (great Lighthouse), fast. +- **templ** gives type-safe components; **htmx** gives interactivity (paging, filters, comment forms later) without a JS framework; **Alpine** for small client bits. +- **Content = files** — your Obsidian/editor workflow stays; go can even re-render on file change in dev. +- Cost: the **admin is DIY** — auth, CRUD, media browser are all code you write. And per-request markdown parsing is fine at this scale (cache rendered HTML if you care). + +## 2. Laravel as the "orchestrator" — honest answer: it's the wrong tool *for that role* + +Laravel is excellent at **being a web app** (Blade+htmx admin, auth, queues, and — importantly — a genuinely great **mail system** for that email phase later). But you're proposing it as a **publish-state manager** perched over Go: + +- You'd run **two servers** (Go on :80, Laravel admin on :8080) both touching the same `.md` files and a shared DB. Every publish toggle, front-page order, archive move = a DB write Laravel makes and Go reads. +- That works, but it's **redundant** — Go can own a small SQLite `publish` table itself, with an htmx admin page inside the same binary. One language, one process, zero sync. + +So the real fork is: + +| Path | Architecture | When to pick | +|---|---|---| +| **A. All Go** | Go serves site + a minimal htmx admin page managing publish/front-page/archive in SQLite. `.md` = content truth. | You want the leanest thing. Email later = Go mail libs, or hand off to n8n/Postfix on your network. | +| **B. Laravel owns it all** | Blade + htmx admin, Laravel serves pages, S3 media via its filesystem driver, Mailables for email later. Drop Go. | You want Laravel's admin/mail/ecosystem and don't mind PHP runtime. | +| **C. Go site + headless admin** | Go serves; **PocketBase (already on .13)** is the admin/publish/media store. | You want a browser admin *without* writing one. | +| **D. Go + Laravel, loosely coupled** | Go serves; Laravel admin only writes publish-state to a **shared SQLite file** + edits `.md` on disk. | You specifically want Laravel's admin UX and Go's front. Viable, but it's path A with extra running parts. | + +"Is Laravel good for this?" — good at admin, great at email, overkill as a proxy. **"Other PHP?"** — Symfony (bulkier), Slim (micro), WordPress (off-the-shelf but you'd be fighting it). If PHP is the choice, Laravel+Filament is the right one. + +## 3. Garage S3 media + `.md` coordination under Laravel + +- **Showing media in admin**: Laravel has a first-class **S3 filesystem driver** — configure a `garage` disk (endpoint, keys, bucket) and the admin lists objects and renders thumbnails. Public reads via a **Caddy/nginx route** (`/media/*` → bucket) rather than exposing Garage's own port; private buckets can use presigned URLs. +- **Coordination with `.md`**: the cleanest pattern is **shortcodes, not raw URLs**. In your file you write `{{media:cover}}` or `{{vimeo:12345}}`; the renderer (Go or Laravel) resolves the slug to the actual S3 URL at render time. That way you can **rename/migrate media later without touching every article** — plain URLs pasted into `.md` freeze the path forever. Upload flow: admin uploads to bucket → returns URL → editor pastes it in the `.md`. Simple and inspectable. + +## 4. Is markdown good? And what's the "scientific" one? + +- **Yes — Markdown (GFM/CommonMark) + front-matter is ideal** for text news/opinion with links, images, embeds. +- Variants, in case the name escapes you: **MDX** (JSX components inside markdown), **AsciiDoc** (more structure — tables, includes; great for docs, overkill here), **Org-mode**, reStructuredText. +- **The new scientific one is almost certainly Typst** (2023) — a modern typesetting language with gorgeous math, designed for **documents/PDF**. You *can* render it to SVG for web, but for a news site it's the wrong tool. +- **If you meant LSP** (Language Server Protocol) — that's an *editor autocomplete standard*, not a format; ignore it here. +- For the odd formula: keep markdown and add **KaTeX/MathML** via `$...$` in Goldmark's math extension. You get scientific notation with zero new language. + +## 5. My recommendation + +**Path A — all Go** (templ + htmx + Alpine + Tailwind), `.md` files as content, SQLite publish-state with a small htmx admin for live/front-page/archive, `{{media:...}}` shortcodes resolved to Garage S3. Deploy = one binary behind Caddy on `.13`. Email phase later = Go mail lib or n8n handoff — revisit then, when requirements are real. + +Want me to draft **PLAN.md** on Path A — or would you rather spec out Path B (Laravel-everything) or Path C (Go + PocketBase) instead? + +## Source paths observed + +- `home/sam/home_network/web_sites/kontra_day/.pi` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system/pi-agent` +- `home/sam/home_network/web_sites/kontra_day/.pi/tasks` +- `home/sam/.agents` +- `extensions/pi-config/index.ts` +- `extensions/ask-user-question/index.ts` +- `sys/firmware/efi/efivars` +- `publish/front-page/archive` +- `admin/mail/ecosystem` +- `admin/publish/media` +- `live/front-page/archive` + +## Evidence + +- Confidence: 83% +- Reason: Extracted repeatable deploy/configuration procedure from rich discovery + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28|Rich discovery: access 2026-09-08 02:23:28]] +- context: [[packs/kontra-day/20-context/access|access]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|access deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|access repository structure and configuration patterns]] + + +--- + +## Update (2026-09-08 03:36:06) + +## Deployment/runbook details discovered (2026-09-08 03:36:06) + +Great — this is the model clicking into place. Short version: **the folder on disk is the website. Everything else is just an editor on top of it.** Here's each question answered. + +## The mental model + +``` + content/ (single git repo, remote = Gitea on your network) + │ + ┌───────┼───────────┬────────────────┐ + │ │ │ │ +Neovim Obsidian Decap (web) Go binary +(files) (vault) (admin.domain) (renders on request) + │ │ │ │ + └───────┴───────────┴────────────────┘ + all write the SAME .md files +``` + +- **Neovim**: edit a file → save → Go already sees it. The site *always* reflects the working tree — so nothing ever goes stale. +- **Obsidian**: the same folder opens as a vault (it's plain markdown ✓), with Gitea as its git remote, exactly as you use it today. +- **Decap**: a browser UI over the *same files* — click collection → articles, edit fields as forms, markdown body editor; on save it commits to git. No duplication, no import/export. +- **Go binary**: renders markdown → HTML **per request**. It never "re-outputs" a static build, because there's no build step to run. (Optional in-memory cache later if you want it snappier.) Optional niceties: `published: false` front-matter → hidden from public, visible as preview on `admin.kontra.day`; `publish_at: 2026-…` → scheduled go-live. + +## "Editing in Neovim — will Decap/Obsidian sync?" +Almost. Everything reads the working tree, so Neovim saves are instantly live either way. The one wrinkle: **Decap shows committed state**, so an uncommitted Neovim edit may not show in the Decap UI until someone commits. Fix = a tiny **file-watcher** (inotify/systemd Path unit) on `content/` that autocommits to git on any change from any editor. Then: *any* editor → autocommit → Gitea push → Decap in sync → Go serves. That one script is the "sync" you're imagining, and it's ~10 lines. + +## "How are templates created for the GOTH stack? Can we design them?" +Yes — this is exactly **Phase Two** of your AGENT.md, and it's data + code: + +| Template | What it's made of | +|---|---| +| `home` (front page composition) | templ component + editable blocks list | +| `article` / `opinion` / `photo-essay` / `video` | templ component, chosen per page in front-matter | +| `subject-index` (each subject area) | templ component + subject setting | +| `archive`, `about`, 404 | templ components | +| Look & feel | Tailwind + CSS design-token variables (`--accent` etc.) | + +Flow: we list the template set → I design 2–3 looks (demos/images) → you approve → they get built as `.templ` components in the binary, themed with tokens so colours/subject accents are admin-editable data, not code. + +--- + +The architecture is now concrete enough to write down. Per your AGENT.md Phase One, next step is **PLAN.md + Vikunja/Outline entries** documenting this decision set. Want me to draft PLAN.md and register the phase tasks now — or do you want to change anything in this model first? + +## Source paths observed + +- `www.wisp.blog/compare/winter/keystatic` +- `github.com/wintercms/winter` +- `plugins/winter/demo` +- `www.luckymedia.dev/insights/decap-cms` +- `users/roles/auth` +- `slug/meta/sitemap/RSS` + +## Evidence + +- Confidence: 83% +- Reason: Extracted repeatable deploy/configuration procedure from rich discovery + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06|Rich discovery: files 2026-09-08 03:36:06]] +- context: [[packs/kontra-day/20-context/files|files]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|files deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|files repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/70-runbooks/getdesign-md-deployment-operations.md b/.pi/memory-vault/packs/kontra-day/70-runbooks/getdesign-md-deployment-operations.md new file mode 100644 index 0000000..e2ac6f8 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/70-runbooks/getdesign-md-deployment-operations.md @@ -0,0 +1,74 @@ +--- +type: runbook +id: runbook.kontra-day.getdesign-md-deployment-operations +title: getdesign.md deployment operations +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/runbook + - autolearn + - rich-discovery + - deployment-runbook +--- + +# getdesign.md deployment operations + +## Deployment/runbook details discovered (2026-09-08 05:34:12) + +Skill active — and let me answer your Stitch workflow question with verified facts, because it determines how we run Phase Two. + +## What Google Stitch can actually export (as of the latest updates) +| Export | Works? | Note | +|---|---|---| +| **Copy code / download** (HTML/CSS/**Tailwind**) | ✅ Yes | Its core output. Real components, not images — and Tailwind is exactly our stack. | +| **To Figma** | ⚠️ Flaky | Direct Stitch→Figma has been unreliable/long-queued (known bug threads); an MCP route exists. Not dependable. | +| **To Google AI Studio** | ✅ Yes (Stitch 2.0+) | Can push designs into AI Studio projects. | +| **Project brief / DESIGN.md** | ❌ No direct feature | Doesn't produce one — **but this is what I do for you**: I write the DESIGN.md (tokens + brief) from your Stitch panels, and that's what `design-build` consumes later. | + +## What I'd actually recommend for Kontra Day +Stitch's real value here is **visual exploration + a Tailwind reference**. The practical pipeline: + +1. **You keep designing panels in Stitch** → screenshot what you like. +2. **I turn the approved panels into a `DESIGN.md`** — exact palette, typography, spacing, radius + a written identity brief (the "project brief" you mentioned, as the file format this workflow already uses). +3. **I generate alternative directions** via this skill's `image-maker` so you can compare. +4. **Build** uses the tokens + Stitch's Tailwind export as reference → real templ components. (Stitch's HTML won't drop straight into templ, but it's a strong visual contract.) + +So: **yes — copy the Tailwind code and/or push to AI Studio, but treat both as reference; the lasting artifact is DESIGN.md.** Figma isn't worth the friction for a solo project unless you like working there. + +## Fonts & readability (your instinct is right to think about this) +For a news-opinion site, the classic readable pairing: +- **Headlines**: a strong serif or display face (e.g. Newsreader, Source Serif, Playfair) at large weight +- **Body**: a humanist sans or print-style serif at 17–18px, ~65–75 chars/line, 1.5–1.65 line height — this is the actual readability driver, more than the font choice itself +- Self-host the fonts (no Google CDN at runtime — performance + privacy), using variable fonts where possible +- Typography choices go into DESIGN.md as tokens, so colours/fonts stay data-driven per our plan + +So how do you want to start? + + +[tool:ask_user_question] + +## Source paths observed + +- `getdesign.md/apple/design-md` +- `github.com/VoltAgent/awesome-design-md` +- `justinmckelvey.com/blog/google-stitch-vs-figma` +- `HTML/CSS/Tailwind` + +## Evidence + +- Confidence: 83% +- Reason: Extracted repeatable deploy/configuration procedure from rich discovery + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12|Rich discovery: getdesign.md 2026-09-08 05:34:12]] +- context: [[packs/kontra-day/20-context/getdesign-md|getdesign.md]] +- runbook: [[packs/kontra-day/70-runbooks/getdesign-md-deployment-operations|getdesign.md deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|getdesign.md repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/70-runbooks/individually-deployment-operations.md b/.pi/memory-vault/packs/kontra-day/70-runbooks/individually-deployment-operations.md new file mode 100644 index 0000000..1e9f68c --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/70-runbooks/individually-deployment-operations.md @@ -0,0 +1,95 @@ +--- +type: runbook +id: runbook.kontra-day.individually-deployment-operations +title: individually deployment operations +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/runbook + - autolearn + - rich-discovery + - deployment-runbook +--- + +# individually deployment operations + +## Deployment/runbook details discovered (2026-09-08 03:44:05) + +Confirmed the full topology. Here's the storage/sync reality and the plan for it. + +## The actual topology (verified) +| Machine | Role | Relevant bits | +|---|---|---| +| **.27** (this) | Main dev, Obsidian + Neovim live here | Obsidian vault at `/home/sam/obsidian/` | +| **.13** | **Web host, always-on** | Sites in `/var/www/`, runs PocketBase, Caddy sits *upstream* | +| **.35** | Gitea (Docker, web :3001, SSH :2222) + Caddy reverse proxy | `gitea.lab.audasmedia.com.au` | +| Garage S3 | media bucket — need to confirm which host | (Phase One item) | + +## Where things should live — the key decision +The mistake to avoid: **coupling the live site to .27** (your dev machine). So: + +- **Gitea repo on .35 = the single source of truth** for content (`.md` + config + media references). This is the "origin". +- **.27** = authoring clients (Obsidian vault + Neovim) — it's a *clone* of that repo, pushes to .35. +- **.13** = the always-on production clone at `/var/www/kontra_day/`, which the Go binary serves. +- **Caddy on .35** routes `kontra.day` → Go on .13, `admin.kontra.day` → Decap on .13. +- **Garage S3** = media objects, referenced from `.md` via `{{media:...}}` shortcodes. + +## How sync actually works (this is the part that matters) +``` +Editor on .27 Gitea on .35 Production on .13 +Neovim / Obsidian ──push──▶ origin ──webhook/poll──▶ git pull + (clone) ▲ │ + │ ▼ +Decap (admin.kontra.day) ──commit──┘ Go binary renders .md → HTML +``` +- **Any change from any editor** (Neovim save, Obsidian sync, Decap save) lands on Gitea, then auto-deploys to .13 via **webhook + systemd Path watcher** that runs `git pull`. +- **.13 never needs your .27** — it pulls straight from Gitea. Your dev machine can be off and the site stays live. ✅ this addresses exactly your concern. +- **No build step**: Go re-renders `.md` → HTML per request (with an optional cache), so a pull = instant content update. +- This is a strict upgrade over the current **manual lsyncd .27→.13** pattern — you'd retire that for this site (same wiring though: systemd on .13). + +## Things that *must* be decided/verified in Phase One +1. **Which host runs Garage S3** (needs confirming — it's not in the skill list yet). +2. **Where the Go binary + Decap run on .13** — as a systemd service (`users` group, `/var/www/kontra_day` per the existing perms note) or Docker. +3. **Caddy config** — which Caddy instance (skill says Caddy is on .35) owns the `kontra.day`/`admin.kontra.day` vhosts, and how it upstreams to .13. +4. **Obsidian vault wiring** — make `/home/sam/obsidian/.../kontra_day` a git clone of the Gitea repo (Obsidian already git-links to Gitea, so this is a natural fit). +5. **Deploy trigger** — Gitea webhook → .13 vs. a simple systemd timer `git pull` every 30s (fewer moving parts, good enough). + +## Recommendation +**Gitea (.35) as origin → .13 always-on clone as live → .27 clients as editors.** That keeps production decoupled from your dev box, gives you history/rollback on every `.md`, and matches the Gitea/Obsidian habits you already have. + +Want me to fold this into **PLAN.md** now (with the open questions marked), and register the Phase One tasks in Vikunja/Outline? + +## Source paths observed + +- `2222/sam/pi-config.git` +- `.pi/agent/settings.json` +- `home/sam/.agents` +- `gitea.lab.audasmedia.com.au/sam/pi-config` +- `sys/firmware/efi/efivars` +- `.config/lsyncd/lsyncd.conf.lua` +- `zola/sprinkler/public` +- `.config/environment.d/10-secrets.conf` +- `.27/.13/.51` +- `Gitea/Obsidian/Caddy` +- `home/sam/obsidian` +- `var/www/kontra_day` +- `home/sam/obsidian/.../kontra_day` + +## Evidence + +- Confidence: 83% +- Reason: Extracted repeatable deploy/configuration procedure from rich discovery + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05|Rich discovery: individually 2026-09-08 03:44:05]] +- context: [[packs/kontra-day/20-context/individually|individually]] +- runbook: [[packs/kontra-day/70-runbooks/individually-deployment-operations|individually deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|individually repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28.md b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28.md new file mode 100644 index 0000000..a56cb0d --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28.md @@ -0,0 +1,105 @@ +--- +type: session +id: session.kontra-day.rich-discovery-access-2026-09-08-02-23-28 +title: Rich discovery: access 2026-09-08 02:23:28 +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/session + - autolearn + - rich-discovery + - repo/access +--- + +# Rich discovery: access 2026-09-08 02:23:28 + +Sanitized rich discovery snapshot captured automatically from the completed turn. + + +## Source paths observed + +- `home/sam/home_network/web_sites/kontra_day/.pi` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system` +- `home/sam/home_network/web_sites/kontra_day/.pi/memory-vault/packs/kontra-day/00-system/pi-agent` +- `home/sam/home_network/web_sites/kontra_day/.pi/tasks` +- `home/sam/.agents` +- `extensions/pi-config/index.ts` +- `extensions/ask-user-question/index.ts` +- `sys/firmware/efi/efivars` +- `publish/front-page/archive` +- `admin/mail/ecosystem` +- `admin/publish/media` +- `live/front-page/archive` + +## Final answer snapshot + +Great questions — let me answer each properly, because they cut right to the architecture. + +## 1. GOTTH + `.md` files — yes, this is a strong fit + +Go + templ + htmx + Alpine + Tailwind, with Goldmark (Go's CommonMark renderer) turning your `.md` into HTML at request time, is one of the best "text-first news site" stacks you can pick right now: + +- **One static binary** — build once, copy to `.13`, done. No Node, no PHP runtime, no container even needed. +- **Server-rendered HTML** — SEO-friendly by default (great Lighthouse), fast. +- **templ** gives type-safe components; **htmx** gives interactivity (paging, filters, comment forms later) without a JS framework; **Alpine** for small client bits. +- **Content = files** — your Obsidian/editor workflow stays; go can even re-render on file change in dev. +- Cost: the **admin is DIY** — auth, CRUD, media browser are all code you write. And per-request markdown parsing is fine at this scale (cache rendered HTML if you care). + +## 2. Laravel as the "orchestrator" — honest answer: it's the wrong tool *for that role* + +Laravel is excellent at **being a web app** (Blade+htmx admin, auth, queues, and — importantly — a genuinely great **mail system** for that email phase later). But you're proposing it as a **publish-state manager** perched over Go: + +- You'd run **two servers** (Go on :80, Laravel admin on :8080) both touching the same `.md` files and a shared DB. Every publish toggle, front-page order, archive move = a DB write Laravel makes and Go reads. +- That works, but it's **redundant** — Go can own a small SQLite `publish` table itself, with an htmx admin page inside the same binary. One language, one process, zero sync. + +So the real fork is: + +| Path | Architecture | When to pick | +|---|---|---| +| **A. All Go** | Go serves site + a minimal htmx admin page managing publish/front-page/archive in SQLite. `.md` = content truth. | You want the leanest thing. Email later = Go mail libs, or hand off to n8n/Postfix on your network. | +| **B. Laravel owns it all** | Blade + htmx admin, Laravel serves pages, S3 media via its filesystem driver, Mailables for email later. Drop Go. | You want Laravel's admin/mail/ecosystem and don't mind PHP runtime. | +| **C. Go site + headless admin** | Go serves; **PocketBase (already on .13)** is the admin/publish/media store. | You want a browser admin *without* writing one. | +| **D. Go + Laravel, loosely coupled** | Go serves; Laravel admin only writes publish-state to a **shared SQLite file** + edits `.md` on disk. | You specifically want Laravel's admin UX and Go's front. Viable, but it's path A with extra running parts. | + +"Is Laravel good for this?" — good at admin, great at email, overkill as a proxy. **"Other PHP?"** — Symfony (bulkier), Slim (micro), WordPress (off-the-shelf but you'd be fighting it). If PHP is the choice, Laravel+Filament is the right one. + +## 3. Garage S3 media + `.md` coordination under Laravel + +- **Showing media in admin**: Laravel has a first-class **S3 filesystem driver** — configure a `garage` disk (endpoint, keys, bucket) and the admin lists objects and renders thumbnails. Public reads via a **Caddy/nginx route** (`/media/*` → bucket) rather than exposing Garage's own port; private buckets can use presigned URLs. +- **Coordination with `.md`**: the cleanest pattern is **shortcodes, not raw URLs**. In your file you write `{{media:cover}}` or `{{vimeo:12345}}`; the renderer (Go or Laravel) resolves the slug to the actual S3 URL at render time. That way you can **rename/migrate media later without touching every article** — plain URLs pasted into `.md` freeze the path forever. Upload flow: admin uploads to bucket → returns URL → editor pastes it in the `.md`. Simple and inspectable. + +## 4. Is markdown good? And what's the "scientific" one? + +- **Yes — Markdown (GFM/CommonMark) + front-matter is ideal** for text news/opinion with links, images, embeds. +- Variants, in case the name escapes you: **MDX** (JSX components inside markdown), **AsciiDoc** (more structure — tables, includes; great for docs, overkill here), **Org-mode**, reStructuredText. +- **The new scientific one is almost certainly Typst** (2023) — a modern typesetting language with gorgeous math, designed for **documents/PDF**. You *can* render it to SVG for web, but for a news site it's the wrong tool. +- **If you meant LSP** (Language Server Protocol) — that's an *editor autocomplete standard*, not a format; ignore it here. +- For the odd formula: keep markdown and add **KaTeX/MathML** via `$...$` in Goldmark's math extension. You get scientific notation with zero new language. + +## 5. My recommendation + +**Path A — all Go** (templ + htmx + Alpine + Tailwind), `.md` files as content, SQLite publish-state with a small htmx admin for live/front-page/archive, `{{media:...}}` shortcodes resolved to Garage S3. Deploy = one binary behind Caddy on `.13`. Email phase later = Go mail lib or n8n handoff — revisit then, when requirements are real. + +Want me to draft **PLAN.md** on Path A — or would you rather spec out Path B (Laravel-everything) or Path C (Go + PocketBase) instead? + +## Evidence + +- Confidence: 86% +- Reason: Preserve full sanitized discovery detail from a rich investigation turn + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-access-2026-09-08-02-23-28|Rich discovery: access 2026-09-08 02:23:28]] +- context: [[packs/kontra-day/20-context/access|access]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|access deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|access repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06.md b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06.md new file mode 100644 index 0000000..691da91 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06.md @@ -0,0 +1,88 @@ +--- +type: session +id: session.kontra-day.rich-discovery-files-2026-09-08-03-36-06 +title: Rich discovery: files 2026-09-08 03:36:06 +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/session + - autolearn + - rich-discovery + - repo/files +--- + +# Rich discovery: files 2026-09-08 03:36:06 + +Sanitized rich discovery snapshot captured automatically from the completed turn. + + +## Source paths observed + +- `www.wisp.blog/compare/winter/keystatic` +- `github.com/wintercms/winter` +- `plugins/winter/demo` +- `www.luckymedia.dev/insights/decap-cms` +- `users/roles/auth` +- `slug/meta/sitemap/RSS` + +## Final answer snapshot + +Great — this is the model clicking into place. Short version: **the folder on disk is the website. Everything else is just an editor on top of it.** Here's each question answered. + +## The mental model + +``` + content/ (single git repo, remote = Gitea on your network) + │ + ┌───────┼───────────┬────────────────┐ + │ │ │ │ +Neovim Obsidian Decap (web) Go binary +(files) (vault) (admin.domain) (renders on request) + │ │ │ │ + └───────┴───────────┴────────────────┘ + all write the SAME .md files +``` + +- **Neovim**: edit a file → save → Go already sees it. The site *always* reflects the working tree — so nothing ever goes stale. +- **Obsidian**: the same folder opens as a vault (it's plain markdown ✓), with Gitea as its git remote, exactly as you use it today. +- **Decap**: a browser UI over the *same files* — click collection → articles, edit fields as forms, markdown body editor; on save it commits to git. No duplication, no import/export. +- **Go binary**: renders markdown → HTML **per request**. It never "re-outputs" a static build, because there's no build step to run. (Optional in-memory cache later if you want it snappier.) Optional niceties: `published: false` front-matter → hidden from public, visible as preview on `admin.kontra.day`; `publish_at: 2026-…` → scheduled go-live. + +## "Editing in Neovim — will Decap/Obsidian sync?" +Almost. Everything reads the working tree, so Neovim saves are instantly live either way. The one wrinkle: **Decap shows committed state**, so an uncommitted Neovim edit may not show in the Decap UI until someone commits. Fix = a tiny **file-watcher** (inotify/systemd Path unit) on `content/` that autocommits to git on any change from any editor. Then: *any* editor → autocommit → Gitea push → Decap in sync → Go serves. That one script is the "sync" you're imagining, and it's ~10 lines. + +## "How are templates created for the GOTH stack? Can we design them?" +Yes — this is exactly **Phase Two** of your AGENT.md, and it's data + code: + +| Template | What it's made of | +|---|---| +| `home` (front page composition) | templ component + editable blocks list | +| `article` / `opinion` / `photo-essay` / `video` | templ component, chosen per page in front-matter | +| `subject-index` (each subject area) | templ component + subject setting | +| `archive`, `about`, 404 | templ components | +| Look & feel | Tailwind + CSS design-token variables (`--accent` etc.) | + +Flow: we list the template set → I design 2–3 looks (demos/images) → you approve → they get built as `.templ` components in the binary, themed with tokens so colours/subject accents are admin-editable data, not code. + +--- + +The architecture is now concrete enough to write down. Per your AGENT.md Phase One, next step is **PLAN.md + Vikunja/Outline entries** documenting this decision set. Want me to draft PLAN.md and register the phase tasks now — or do you want to change anything in this model first? + +## Evidence + +- Confidence: 86% +- Reason: Preserve full sanitized discovery detail from a rich investigation turn + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-files-2026-09-08-03-36-06|Rich discovery: files 2026-09-08 03:36:06]] +- context: [[packs/kontra-day/20-context/files|files]] +- runbook: [[packs/kontra-day/70-runbooks/access-deployment-operations|files deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|files repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12.md b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12.md new file mode 100644 index 0000000..2655d85 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12.md @@ -0,0 +1,77 @@ +--- +type: session +id: session.kontra-day.rich-discovery-getdesign-md-2026-09-08-05-34-12 +title: Rich discovery: getdesign.md 2026-09-08 05:34:12 +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/session + - autolearn + - rich-discovery + - repo/getdesign-md +--- + +# Rich discovery: getdesign.md 2026-09-08 05:34:12 + +Sanitized rich discovery snapshot captured automatically from the completed turn. + + +## Source paths observed + +- `getdesign.md/apple/design-md` +- `github.com/VoltAgent/awesome-design-md` +- `justinmckelvey.com/blog/google-stitch-vs-figma` +- `HTML/CSS/Tailwind` + +## Final answer snapshot + +Skill active — and let me answer your Stitch workflow question with verified facts, because it determines how we run Phase Two. + +## What Google Stitch can actually export (as of the latest updates) +| Export | Works? | Note | +|---|---|---| +| **Copy code / download** (HTML/CSS/**Tailwind**) | ✅ Yes | Its core output. Real components, not images — and Tailwind is exactly our stack. | +| **To Figma** | ⚠️ Flaky | Direct Stitch→Figma has been unreliable/long-queued (known bug threads); an MCP route exists. Not dependable. | +| **To Google AI Studio** | ✅ Yes (Stitch 2.0+) | Can push designs into AI Studio projects. | +| **Project brief / DESIGN.md** | ❌ No direct feature | Doesn't produce one — **but this is what I do for you**: I write the DESIGN.md (tokens + brief) from your Stitch panels, and that's what `design-build` consumes later. | + +## What I'd actually recommend for Kontra Day +Stitch's real value here is **visual exploration + a Tailwind reference**. The practical pipeline: + +1. **You keep designing panels in Stitch** → screenshot what you like. +2. **I turn the approved panels into a `DESIGN.md`** — exact palette, typography, spacing, radius + a written identity brief (the "project brief" you mentioned, as the file format this workflow already uses). +3. **I generate alternative directions** via this skill's `image-maker` so you can compare. +4. **Build** uses the tokens + Stitch's Tailwind export as reference → real templ components. (Stitch's HTML won't drop straight into templ, but it's a strong visual contract.) + +So: **yes — copy the Tailwind code and/or push to AI Studio, but treat both as reference; the lasting artifact is DESIGN.md.** Figma isn't worth the friction for a solo project unless you like working there. + +## Fonts & readability (your instinct is right to think about this) +For a news-opinion site, the classic readable pairing: +- **Headlines**: a strong serif or display face (e.g. Newsreader, Source Serif, Playfair) at large weight +- **Body**: a humanist sans or print-style serif at 17–18px, ~65–75 chars/line, 1.5–1.65 line height — this is the actual readability driver, more than the font choice itself +- Self-host the fonts (no Google CDN at runtime — performance + privacy), using variable fonts where possible +- Typography choices go into DESIGN.md as tokens, so colours/fonts stay data-driven per our plan + +So how do you want to start? + + +[tool:ask_user_question] + +## Evidence + +- Confidence: 86% +- Reason: Preserve full sanitized discovery detail from a rich investigation turn + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12|Rich discovery: getdesign.md 2026-09-08 05:34:12]] +- context: [[packs/kontra-day/20-context/getdesign-md|getdesign.md]] +- runbook: [[packs/kontra-day/70-runbooks/getdesign-md-deployment-operations|getdesign.md deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|getdesign.md repository structure and configuration patterns]] diff --git a/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05.md b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05.md new file mode 100644 index 0000000..9e812e9 --- /dev/null +++ b/.pi/memory-vault/packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05.md @@ -0,0 +1,98 @@ +--- +type: session +id: session.kontra-day.rich-discovery-individually-2026-09-08-03-44-05 +title: Rich discovery: individually 2026-09-08 03:44:05 +status: active +source_of_truth: false +freshness: current +last_reviewed: 2026-09-08 +tags: + - pack/kontra-day + - agent-memory/session + - autolearn + - rich-discovery + - repo/individually +--- + +# Rich discovery: individually 2026-09-08 03:44:05 + +Sanitized rich discovery snapshot captured automatically from the completed turn. + + +## Source paths observed + +- `2222/sam/pi-config.git` +- `.pi/agent/settings.json` +- `home/sam/.agents` +- `gitea.lab.audasmedia.com.au/sam/pi-config` +- `sys/firmware/efi/efivars` +- `.config/lsyncd/lsyncd.conf.lua` +- `zola/sprinkler/public` +- `.config/environment.d/10-secrets.conf` +- `.27/.13/.51` +- `Gitea/Obsidian/Caddy` +- `home/sam/obsidian` +- `var/www/kontra_day` +- `home/sam/obsidian/.../kontra_day` + +## Final answer snapshot + +Confirmed the full topology. Here's the storage/sync reality and the plan for it. + +## The actual topology (verified) +| Machine | Role | Relevant bits | +|---|---|---| +| **.27** (this) | Main dev, Obsidian + Neovim live here | Obsidian vault at `/home/sam/obsidian/` | +| **.13** | **Web host, always-on** | Sites in `/var/www/`, runs PocketBase, Caddy sits *upstream* | +| **.35** | Gitea (Docker, web :3001, SSH :2222) + Caddy reverse proxy | `gitea.lab.audasmedia.com.au` | +| Garage S3 | media bucket — need to confirm which host | (Phase One item) | + +## Where things should live — the key decision +The mistake to avoid: **coupling the live site to .27** (your dev machine). So: + +- **Gitea repo on .35 = the single source of truth** for content (`.md` + config + media references). This is the "origin". +- **.27** = authoring clients (Obsidian vault + Neovim) — it's a *clone* of that repo, pushes to .35. +- **.13** = the always-on production clone at `/var/www/kontra_day/`, which the Go binary serves. +- **Caddy on .35** routes `kontra.day` → Go on .13, `admin.kontra.day` → Decap on .13. +- **Garage S3** = media objects, referenced from `.md` via `{{media:...}}` shortcodes. + +## How sync actually works (this is the part that matters) +``` +Editor on .27 Gitea on .35 Production on .13 +Neovim / Obsidian ──push──▶ origin ──webhook/poll──▶ git pull + (clone) ▲ │ + │ ▼ +Decap (admin.kontra.day) ──commit──┘ Go binary renders .md → HTML +``` +- **Any change from any editor** (Neovim save, Obsidian sync, Decap save) lands on Gitea, then auto-deploys to .13 via **webhook + systemd Path watcher** that runs `git pull`. +- **.13 never needs your .27** — it pulls straight from Gitea. Your dev machine can be off and the site stays live. ✅ this addresses exactly your concern. +- **No build step**: Go re-renders `.md` → HTML per request (with an optional cache), so a pull = instant content update. +- This is a strict upgrade over the current **manual lsyncd .27→.13** pattern — you'd retire that for this site (same wiring though: systemd on .13). + +## Things that *must* be decided/verified in Phase One +1. **Which host runs Garage S3** (needs confirming — it's not in the skill list yet). +2. **Where the Go binary + Decap run on .13** — as a systemd service (`users` group, `/var/www/kontra_day` per the existing perms note) or Docker. +3. **Caddy config** — which Caddy instance (skill says Caddy is on .35) owns the `kontra.day`/`admin.kontra.day` vhosts, and how it upstreams to .13. +4. **Obsidian vault wiring** — make `/home/sam/obsidian/.../kontra_day` a git clone of the Gitea repo (Obsidian already git-links to Gitea, so this is a natural fit). +5. **Deploy trigger** — Gitea webhook → .13 vs. a simple systemd timer `git pull` every 30s (fewer moving parts, good enough). + +## Recommendation +**Gitea (.35) as origin → .13 always-on clone as live → .27 clients as editors.** That keeps production decoupled from your dev box, gives you history/rollback on every `.md`, and matches the Gitea/Obsidian habits you already have. + +Want me to fold this into **PLAN.md** now (with the open questions marked), and register the Phase One tasks in Vikunja/Outline? + +## Evidence + +- Confidence: 86% +- Reason: Preserve full sanitized discovery detail from a rich investigation turn + +## Related + +- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]] + +## Related learned memories + +- session: [[packs/kontra-day/80-sessions/rich-discovery-individually-2026-09-08-03-44-05|Rich discovery: individually 2026-09-08 03:44:05]] +- context: [[packs/kontra-day/20-context/individually|individually]] +- runbook: [[packs/kontra-day/70-runbooks/individually-deployment-operations|individually deployment operations]] +- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|individually repository structure and configuration patterns]] diff --git a/.pi/settings.json b/.pi/settings.json new file mode 100644 index 0000000..3555173 --- /dev/null +++ b/.pi/settings.json @@ -0,0 +1,17 @@ +{ + "packages": [ + { + "source": "/home/sam/.agents", + "extensions": [ + "extensions/pi-config/index.ts", + "extensions/ask-user-question/index.ts" + ], + "skills": [ + "skills/obsidian-cli", + "skills/npm-security", + "skills/system-architect", + "skills/design-explore" + ] + } + ] +} diff --git a/.pi/tasks/tasks-01a07ea3-75ad-74d9-8e69-e303d98c7c6f.json b/.pi/tasks/tasks-01a07ea3-75ad-74d9-8e69-e303d98c7c6f.json new file mode 100644 index 0000000..95e9168 --- /dev/null +++ b/.pi/tasks/tasks-01a07ea3-75ad-74d9-8e69-e303d98c7c6f.json @@ -0,0 +1,89 @@ +{ + "nextId": 8, + "tasks": [ + { + "id": "1", + "subject": "Update DESIGN.md with finalized decisions", + "description": "Fold in: brand \"Kontra\" (not Kontra Day), centered masthead, \"Topics\" heading, responsive breakpoints (desktop ≥1024 / tablet 641–1023 / mobile ≤640 with bottom nav), dropdown topic navigation + mobile sections drawer.", + "status": "completed", + "activeForm": "Updating DESIGN.md", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933269, + "updatedAt": 1788848992737 + }, + { + "id": "2", + "subject": "Scaffold Go app (templ + htmx + Tailwind)", + "description": "Go project in /home/sam/home_network/web_sites/kontra_day: go.mod, templ templates, server (likely http (stdlib) or a minimal router), Goldmark for Markdown, YAML parsing for front-matter, static asset serving (kontra.css + fonts). Single static binary goal.", + "status": "completed", + "activeForm": "Scaffolding Go app", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933269, + "updatedAt": 1788851338939 + }, + { + "id": "3", + "subject": "Implement templates from DESIGN.md", + "description": "templ components: base layout, masthead (centered brand, meta line, desktop ribbon with topic dropdowns), mobile bottom nav + sections drawer, home (lead stack, Topics grid, Latest feed), subject index, article (header, hero plate, body, pull quote, field notes, save module, related, newsletter), site footer. Wire kontra.css design tokens.", + "status": "completed", + "activeForm": "Implementing templates", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933270, + "updatedAt": 1788851338939 + }, + { + "id": "4", + "subject": "Content model + loader (markdown + front-matter)", + "description": "Load .md content files with front-matter (title, author, date, tags, template, subject, image, excerpt, published, publish_at), subjects/_subject.yaml config, config/site.yaml, config/frontpage.yaml (template resolution page→subject→site→fallback). Goldmark rendering, {{media:...}} shortcode resolution.", + "status": "completed", + "activeForm": "Building content model", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933270, + "updatedAt": 1788851338940 + }, + { + "id": "5", + "subject": "Media: Garage S3 shortcodes + /media route", + "description": "Resolve {{media:...}} to Garage S3 URLs (bucket kontra-day on .13:3900), serve /media/* via Caddy. Shortcode defs: media, video (vimeo etc).", + "status": "completed", + "activeForm": "Wiring media shortcodes", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933270, + "updatedAt": 1788851426829 + }, + { + "id": "6", + "subject": "Admin: Decap CMS at admin.kontra", + "description": "Decap CMS (netlify-cms fork) config: collections for articles/subjects/pages, git backend to Gitea repo, media library pointing at Garage S3 (or local folder fallback). Serve at admin.kontra (subdomain).", + "status": "completed", + "activeForm": "Configuring Decap admin", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933270, + "updatedAt": 1788851471050 + }, + { + "id": "7", + "subject": "Deploy: Gitea repo + .13 systemd + timer", + "description": "Create Gitea repos (kontra content + maybe app), push, production clone at /var/www/kontra on .13, systemd service running the Go binary, 30s git pull timer, Caddy routes (kontra + admin.kontra) via .35 master proxy. Obsidian separate vault at /home/sam/obsidian/kontra/ = content repo.", + "status": "in_progress", + "activeForm": "Setting up deploy", + "metadata": {}, + "blocks": [], + "blockedBy": [], + "createdAt": 1788848933270, + "updatedAt": 1788851471051 + } + ] +} \ No newline at end of file diff --git a/AGENT.md b/AGENT.md new file mode 100644 index 0000000..55afd12 --- /dev/null +++ b/AGENT.md @@ -0,0 +1,41 @@ +## Overview +News-opinion website. With admin. +Will be hosted on 192.168.20.13 +Simple layout with subject areas in navigation. +Pages will be mainly text with some images, links, video. +Admin add, remove, change pages etc +Write pages in basic .md format (or other format suitable for this - offer suggestions). + +## Phase One. Planning +Explore best options for tech stack. +I like the idea of htmx front end with database for admin. +Possible laravel admin interface. Possible off the shelf admin. +Possible Index.js or React. +Garage S3 buckets for storage and links +SEO friendly + +Possible flows. Edit static files in folders. Admin creates folders, files - how to manage this. Major question. + +Create PLAN.md with decisions +Add, Edit, Update Vikunja and Outline with objectives, plan, tasks, configs, etc + + + + +## Phase Two. Design +Create options for designs of front end and admin +Approve design and create demonstration images and templates + +## Phase Three. Build and test. + +## Phase Four. Create Live. +- See system-architect skill when ready. +## Phase Five. Link email and DNS +- See WEbsite Host MIgration plan when ready. +## Phase Six. Integration +- Integrate with console +- Integrate with backups + +## Phase Seven. Marketing. +- Populate website +- Marketing diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..221c954 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,175 @@ +--- +type: design-system +name: Kontra — Broadsheet Editorial +version: 1.0.0 +status: approved 2026-09-08 +source: + stitch-panel: "The Gazette — Tides of the Outer Reach" + stitch-export-html: "Image 2.html" + stitch-export-design-md: "Image 3.markdown" +audience: desktop + mobile news-opinion site (Kontra) +--- + +# Kontra — DESIGN.md (Broadsheet Editorial) + +> Adopted 2026-09-08 from Google Stitch "Broadsheet Editorial" panel. +> **Finalized 2026-09-08:** brand is **Kontra** (not "Kontra Day"); centered masthead; +> "Topics" heading; responsive (≥1024 / 641–1023 / ≤640) with dropdown topic nav +> + mobile sections drawer. Clickable prototype: `prototype/index.html`, +> `prototype/article.html`, tokens in `prototype/assets/kontra.css`. +> Palette + typography reconciled to the *rendered* Stitch export (Image 2.html) — +> the DESIGN.md export used slightly different hexes (e.g. `#F8F6F0` vs `#fbf9f3`); +> the rendered HTML is what you actually saw, so it wins. Differences noted inline. + +## Identity + +A tactile, deliberate reading environment inspired by physical print journalism +and high-grade editorial typography. Intellectual, trustworthy, measured, authorial. +Ultra-clean editorial minimalism: structure from hairline rules, typographic scale, +and whitespace — **not** shadows, rounded containers, or neon accents. +Rejects app-clutter (FABs, heavy shadows, dense cards). + +**Kontra adaptation:** from a mobile-first Stitch panel, we built a **desktop-first** +site: front page with lead stack + Topics grid + Latest feed, subject indexes, +wider measures. Tokens carry over; the desktop layout is finalized in §Layout. + +## Palette + +Base is **warm newsprint**, ink is **soft charcoal**, accent is **editorial vermilion**. +No pure black-on-white (optical glare). + +| Token | Value (rendered) | Role | +|---|---|---| +| `--canvas` | `#fbf9f3` | Base page background (newsprint) | +| `--canvas-bright` | `#ffffff` | Cards/forms on dark wells; bright surfaces | +| `--surface` | `#f0eee8` | Secondary canvas: section wells, meta blocks | +| `--surface-hi` | `#eae8e2` | Tertiary wells, footer sections | +| `--surface-highest` | `#e4e2dd` | Hairline borders, dividers (also `#e4e2dd`) | +| `--ink` | `#1b1c18` | Primary text (soft charcoal, not black) | +| `--ink-muted` | `#444748` | Byline, captions, secondary metadata | +| `--ink-faint` | `#747878` | Timestamps, reading time, tertiary | +| `--accent` | `#ad3222` | **Editorial vermilion**: breaking tags, section headers, links, active states, numerals | +| `--accent-deep` | `#8b190d` | Accent hover/pressed states (from secondary-fixed-variant) | +| `--accent-soft` | `#ffdad4` | Accent tint wells, selection bg | +| `--on-accent-soft` | `#400100` | Text on accent-soft (selection) | +| `--ink-inverse` | `#1c1b1b` | Dark solid: primary buttons, masthead icon well | +| `--on-ink-inverse` | `#ffffff` | Text/icon on ink-inverse | +| `--outline` | `#c4c7c7` | Subtle separators, placeholder | +| `--hairline` | `#e4e2dd` | 1px rules (same as surface-highest) | +| `--scrim` | `rgba(26,26,26,0.4)` | Warm charcoal scrim for modals/drawers | + +### Notes +- Default button: `--ink-inverse` bg, `--on-ink-inverse` text; hover → `--accent`. +- Focus: hairline transitions `--hairline` → `--ink`, **no glow/shadow**. +- Selection: `bg #ffdad4`, text `#400100`. + +## Typography + +| Token | Family | Size | Weight | Line | Track | +|---|---|---|---|---|---| +| `--font-display` | **Newsreader** (serif) | — | — | — | — | +| `--font-body` | **Literata** (serif, print) | — | — | — | — | +| `--font-ui` | **Work Sans** (sans) | — | — | — | — | +| `masthead` | Newsreader | 38px (mob 30px) | 700 | 1.16 (44px) | -3% | +| `headline-xl` | Newsreader | 32px (mob 28px) | 600 | 1.19 (38px) | -2% | +| `headline-lg` | Newsreader | 24px | 600 | 1.25 | -1% | +| `headline-md` | Newsreader | 20px | 500 | 1.3 | 0 | +| `headline-sm` | Newsreader | 18px | 600 | 1.33 | 0 | +| `body-lead` | Literata | 19px | 400 | 1.58 (30px) | -0.5% | +| `body-md` | Literata | 17px | 400 | 1.65 (28px) | 0 | +| `body-sm` | Literata | 14px | 400 | 1.57 (22px) | 0 | +| `quote` | Newsreader *italic* | 21–22px | 400 | 1.45 | -1% | +| `label-caps` | Work Sans | 11px | 600 | 16px | +12% (uppercase) | +| `label-meta` | Work Sans | 12px | 500 | 18px | +2% | +| `label-ui` | Work Sans | 14px | 500 | 20px | +1% | + +### Rules +- **Body measure ≤ 68ch** (`max-width: 65ch`); content column `42rem` max. +- **Italic serif reserved**: book titles, direct quotes, editorial side notes only. +- Section lead-ins: `label-caps` in `--accent` above headline. +- Headlines: Newsreader, tight tracking, no hyphenation; keep 2-line constraint on feeds. +- **Hierarchy (approved tweak)**: sub-headings in feeds/subject boxes render **one step smaller** than the box's primary headline, and decks one step smaller again — so the leading story reads clearly above the secondary tiers. +- Fonts self-hosted (woff2) — not Google CDN at runtime (page 3 of plan). + +## Spacing / Grid + +- Baseline: **8px** grid. Vertical rhythm via `--space-md` (16px) / `--space-lg` (24px) / `--space-xl` (32px). +- Gutter: mobile `20px` (1.25rem); tablet/desktop scales to `24–32px`. +- **Content column**: centered `max-width: 42rem` (672px) for article body. +- Front page: two/three-tier column grid (12-col on ≥1024px) — see Desktop Extension. +- Line length hard cap: `65ch` body. + +## Shape / Elevation + +- **0px radius everywhere** (buttons, cards, inputs, chips, image frames). Sharp right angles only. +- Circular allowed **only** for: author avatars, audio scrubbers. +- **No drop shadows, no blur-layered elevation.** Depth is planar + hairlines. +- Modals/drawers: solid sheet, 1px `--ink` border, `--scrim` backup. Sticky masthead: hairline bottom border only. + +## Components + +### Masthead (sticky top) +- Meta line: date • edition (label-caps, `--ink-muted`), edition flag (label-caps, `--accent`). +- Brand row: masthead title (Newsreader, `--ink`) + search icon + avatar circle (`--ink-inverse`). +- Section ribbon: horizontal scroll, label-caps `--ink-muted`; active = `--ink` + 2px bottom rule; accent section (`--accent`). +- Border-bottom hairline; `bg --canvas/95` + `backdrop-blur-md` (only blur allowed). + +### Bottom nav (mobile) +- Fixed bar, 4 items (Edition / Sections / Reader Mode / Saved), icon + 11px label, hairline top border. (Desktop: replaced by persistent top nav.) + +### Article header +- Section tag chip (`--accent` label-caps + 4px dot) → `headline-xl` → byline (`--ink` label-meta) → desk • dateline • read time (`--ink-faint`). Hairline under meta. + +### Hero plate / figure +- Full-bleed image, max-h 72vh; **grayscale + slightly boosted contrast** (Stitch used `contrast-108`, true B&W look). +- Figcaption: `Fig. N` label-caps `--ink` + plate/credit `--ink-faint`; 1-2 line description `body-sm` `--ink-muted`. Hairline frame. + +### Pull quote +- `--surface` well, `4px` left rule `--accent`, giant serif opening quote (`--accent`, 38px, opacity-80), Newsreader italic `quote` text, cite in `--accent` label-caps with hairline above. Sharp corners. + +### Photo strip / field notes +- Section header: `label-caps` `--ink` + small icon; "X of Y" `--ink-faint`. +- Grid (1-col mobile, 2-col tablet+). Figures: `--surface` well, 1px hairline frame, 3:2 image, `--accent` label-caps fig caption + body-sm description. + +### Feed list (related / subject index) +- Stacked rows divided by hairlines. Each: section tag (`--accent` label-caps), **primary headline (`headline-sm`, 17–18px)**, **sub-headline one step smaller (`headline-sm` 16px)**, deck `body-sm` 13px `--ink-muted`, byline+read time `label-meta` `--ink-faint`. Thumb 3:2 or 16:9 with hairline frame. Hover: row/hairline shifts `--ink-faint`; headline → `--accent`. +- Rows are touch-friendly (min 44px). + +### Subject grid boxes (front page) +- Approved: lower boxes titled **World / Politics / Culture / Tech etc.** (subject names). Each box: subject title (`label-caps` `--accent`), latest story **headline 17px** (`headline-sm`), sub-headline 16px, deck 13px, byline. Subject titles stay full strength; story sub-headings step down in size to differentiate tiers. + +### Buttons +- Primary: solid `--ink-inverse`, `label-ui` `--on-ink-inverse`, 0px, min-h 42–44px, hover → `--accent`. Include uppercase `label-caps` style for action labels. +- Secondary: 1px `--ink` border, `--ink` label; press = 10% `--ink` tint. +- Text links: 1px underline 3px below baseline, `--accent` or `--ink-faint`. + +### Forms +- Underline or 1px bordered box (`--hairline`); focus border → `--ink` (no glow). Placeholder `--ink-faint` in Literata. Sharp corners. + +### Newsletter / save modules +- `--surface` or white card, hairline border, `label-caps` `--accent` title, icon, body-sm copy, inline form (input + primary button). HTMX `hx-post` swap-outerHTML. + +## Layout (finalized 2026-09-08) + +Brand: **Kontra** (centered masthead). Home section heading: **Topics** (not "By Subject"). + +1. **Front page** (home template): + - **Lead stack**: featured article (hero plate + headline-xl + deck) 2fr + right rail of `headline-md` secondary stories 1fr. + - **Topics grid**: 4 subject boxes (World / Politics / Culture / Tech) — kicker `--accent` label-caps, 17px s-head, 16px s-sub, byline, "More X →". 4-col desktop → 2-col tablet → 1-col mobile. **Approved.** + - **Latest feed**: 2-col article rows (kicker + headline + sub + meta) → 1-col mobile. +2. **Subject index page**: section masthead (`--accent` label-caps + Newsreader title) + lead featured + feed. +3. **Article**: centered 42rem column; hero plate full-bleed to column edge; pull quotes and photo strips within measure; sticky masthead. +4. **Nav**: desktop/tablet persistent top ribbon with **hover dropdowns** per topic (2–3 active stories + "All X →"); mobile ≤640 fixed bottom nav (Edition / Sections / Reader / Saved) where Sections opens a **full-screen drawer** (`

`-based, no JS). +5. **Responsive breakpoints**: **≥1024px** 12-col grid / lead+rail; **641–1023px** single-column, 42rem, ribbon scrolls, topics 2-col; **≤640px** single column, topics 1-col, bottom nav replaces ribbon. + +Reference implementation: `prototype/` (index.html, article.html, assets/kontra.css). + +## Token wiring (for the theme) + +- Implement as CSS custom properties on `:root` (the design-token layer). +- Subject accent overrides: each subject sets `--accent`-derived token(s) via a data attribute / + config (per plan: `subjects//_subject.yaml` → design tokens, admin-editable values, not code). + +--- + +*Source: Stitch panel "The Gazette — Tides of the Outer Reach" (design.png), export Image 2.html, Image 3.markdown.* \ No newline at end of file diff --git a/PLAN.md b/PLAN.md new file mode 100644 index 0000000..4e06516 --- /dev/null +++ b/PLAN.md @@ -0,0 +1,168 @@ +# Kontra Day — Phase One Plan + +## 1. Goal + +A news-opinion website ("Kontra Day") with an admin panel. Pages are mainly text with images, links, video. Subject areas in navigation. Admin can add/remove/change pages, set subject areas, control what's on the front page, and edit media. Hosted on the home network (192.168.20.13), exposed via Caddy. SEO-friendly. + +## 2. Decisions (from conversation) + +| Decision | Choice | Why | +|---|---|---| +| **Stack** | **Go + templ + htmx + Alpine + Tailwind** ("GOTH") | Single static binary, server-rendered (SEO), no runtime deps. htmx for interactivity. | +| **Content format** | **Markdown (.md) + front-matter** | You write in never loses portability. Obsidian/Neovim native. Render via Goldmark (Go's CommonMark lib). | +| **Admin** | **Decap CMS** (at `admin.kontra.day`) | Free, open-source, browser-based UI that edits the same `.md` files directly and commits to git. No custom admin to build/maintain. | +| **Content source of truth** | **Git repo on Gitea (.35)** | History, rollback, multi-editor sync, off-site backup path. Matches your Gitea/Obsidian habits. | +| **Templates** | **templ components** chosen per page (front-matter `template:`) | See §6 — page-level → subject-level → site-level → theme fallback. | +| **Media** | **Garage S3 (on .13)** referenced via `{{media:...}}` shortcodes | Rename/migrate media without touching every article. | +| **Colours** | **CSS design tokens** (CSS custom properties), admin-editable values, not code | Per-subject accent colours as data, no template edits. | +| **Deploy** | **Git push → systemd timer `git pull` every 30s on .13** (no build step; Go renders on request) | Instant content updates; .27 can be offline. Timer chosen over webhook (fewer moving parts). | +| **Email phase (V)** | Revisit later — Go mail libs or hand off to network tooling | Defer until requirements are real. | + +## 3. Topology (verified) + +| Machine | IP | Role | Relevant bits | +|---|---|---|---| +| **.27** sam-4screen-desktop | 192.168.20.27 | Dev box — Neovim + Obsidian | Obsidian vault at `/home/sam/obsidian/` | +| **.13** nixos-desktop | 192.168.20.13 | **Web host, always-on** | Sites in `/var/www/`. Runs: Docker (Garage S3, Outline, PocketBase, family-home-lab stack), cluster of websites. Go binary + site lives here. | +| **.35** sam-ubuntu1 | 192.168.20.35 | Docker server | **Gitea** (web :3001, SSH :2222) = repo origin. **Caddy master reverse proxy** (`/Docker/Containers/caddy/`). Multiple other containers. | +| **.23** file-server | 192.168.20.23 | NFS file server | Backup target (via `.35` `/mnt/nfs_usb_3tb`). | +| **Garage S3** | — | Object storage **on .13** | S3 API `.13:3900`, admin `.13:3902`, `s3.lab.audasmedia.com.au`. Web UI intended at `garage-ui.lab.audasmedia.com.au`. | + +### Key service locations (verified from notes) + +| Service | Where | Note | +|---|---|---| +| **Gitea** | Docker on **.35** (`gitea-server-1`) | web `.35:3001`, SSH `.35:2222`, `gitea.lab.audasmedia.com.au` | +| **Caddy (master proxy)** | Docker on **.35** | Caddyfile in `/Docker/Containers/caddy/`. Routes `*.lab.audasmedia.com.au` + `kontra.day` | +| **Garage S3** | Docker on **.13** | `/home/sam/deployment/garage/`. Buckets per user + `shared-media`. v1.0.0 | +| **Outline** | Docker on **.13:3000** | `outline.lab.audasmedia.com.au`. Uses Garage S3 storage. REST API + MCP | +| **Vikunja** | vikunja.lab.audasmedia.com.au | Tasks + kanban. REST API `.../api/v1`. Token in `~/.config/environment.d/10-secrets.conf` | +| **Web files** | `.13:/var/www/` | NixOS `users` group → new folders need `sudo chown -R sam:users /var/www/` | + +## 4. File / storage layout + +### 4.1 Content repo (single git repo, origin on Gitea .35) + +Proposed repo: `sam/kontra-day-content` on Gitea. + +``` +kontra-day-content/ +├── config/ +│ ├── site.yaml # site name, default template, nav, SEO defaults +│ ├── templates.yaml # template list +│ └── frontpage.yaml # front-page composition (blocks, order, featured) +├── subjects/ # one dir per subject area +│ ├── politics/ +│ │ ├── _subject.yaml # name, slug, template default, accent colour +│ │ └── post-1.md +│ └── tech/ +│ ├── _subject.yaml +│ └── article-2.md +├── articles/ # (optional flat pool w/ subject in front-matter) +├── pages/ # standalone pages (about, contact, 404) +└── media/ # (optional local fallback; primary = Garage S3) +``` + +Front-matter per page: +```yaml +--- +title: My Opinion Piece +author: Sam +date: 2026-01-01 +tags: [politics, tech] +template: article # which template +subject: politics # which subject area +image: {{media:cover.jpg}} +excerpt: A short summary... +published: true +publish_at: 2026-01-01 # optional scheduled publish +--- +Body markdown here... +``` + +### 4.2 Distribution of copies + +| Machine | Role | Path | +|---|---|---| +| **.35** (Gitea) | **Origin** — single source of truth | `sam/kontra-day-content` | +| **.13** (web host) | **Production clone** the Go binary serves | `/var/www/kontra_day/` | +| **.27** (dev) | **Authoring clone** — Obsidian vault + Neovim | `/home/sam/obsidian/kontra_day/` (separate small vault) | + +- **Obsidian (DECIDED: option b)**: the content repo folder is a **separate small Obsidian vault** at `/home/sam/obsidian/kontra_day/`. It IS the `kontra-day-content` git repo → clean git-sync + deploy; main vault untouched. Obsidian's **git-sync plugin** pushes to Gitea automatically. User switches vaults in Obsidian when writing. +- **.13 never depends on .27** — it pulls from Gitea. Dev box can be offline; site stays live. + +### 4.3 Sync / deploy flow + +``` +Editor on .27 Gitea on .35 Production on .13 +Neovim / Obsidian ──push──▶ origin ──webhook/poll──▶ git pull + (clone) ▲ │ + │ ▼ +Decap (admin.kontra.day) ──commit──┘ Go binary renders .md → HTML +``` + +- **Trigger** (DECIDED): **systemd timer `git pull` every 30s on .13**. No webhook. +- **Obsidian git-sync** plugin auto-syncs (commit+push) on .27 (separate kontra_day vault). Neovim saves → auto-commit via small file-watcher if desired. + +## 5. Media (Garage S3, on .13) + +- **Bucket**: Garage on `.13` (S3 API `.13:3900`, admin `.13:3902`). **New dedicated bucket `kontra-day`** (DECIDED) — **do NOT rename/repurpose `shared-media`** (other systems depend on it). New bucket gets its own access keys; media isolated, independently wiped/backed up. +- **Access**: public reads via **Caddy route** (`/media/*` → bucket) rather than exposing Garage's port; private buckets can use presigned URLs. S3 root domain `.s3.lab.audasmedia.com.au`. +- **Admin shows media from Garage**: **Decap CMS media library** (DECIDED). +- **Shortcodes in .md**: `{{media:cover.jpg}}`, `{{vimeo:12345}}` → renderer resolves slug → actual URL at render time. Rename/migrate media without touching articles. +- **Reference notes**: [[Garage Web UI — handoff]] (web UI at `garage-ui.lab.audasmedia.com.au`, `khairul169/garage-webui` matching Garage v1.x), credentials in `.env` (admin token `GARAGE_ADMIN_TOKEN`). + +## 6. Templates & design control (where template choice lives) + +Resolution order: **page front-matter → subject `_subject.yaml` → site config → theme fallback**. + +| Level | Field | Stored in | +|---|---|---| +| Page | `template: article` | front-matter | +| Subject | `template: photo-essay` (default for its pages) | `subjects/x/_subject.yaml` | +| Site | default template | `config/site.yaml` | +| Fallback | base template | theme folder | + +- **Front page**: a special `home` template whose *composition* (blocks list: which subjects, order, featured stories) is an editable config (`config/frontpage.yaml`) — admin reorders/feeds blocks without touching code. +- **Colours**: CSS custom properties (design tokens like `--accent`). Per-subject overrides via a data attribute. Admin edits token *values*, never templates. +- **New templates = code = a deploy step** (fine; Phase 3). + +## 7. Deploy config notes + +- **Go binary runs in `/var/www/kontra_day` on .13** (per user decision). +- **Caddy on .35 is the master reverse proxy.** It routes `kontra.day` → `.13` Go binary, `admin.kontra.day` → Decap on `.13`. +- **.13 Nix config note**: The user indicated a note needs adding to `home.nix` or `configuration.nix` on .13 for Caddy/site serving. (Likely a Caddyfile or reverse-proxy snippet on .13 to serve `/var/www/kontra_day`; the exact Nix file — `configuration.nix` for services vs `home.nix` — to be confirmed when the .13 Caddy/Nix layout is inspected in Phase 3.) +- Permissions (.13): web folders use NixOS `users` group — new folders need `sudo chown -R sam:users /var/www/kontra_day`. +- Current sites deploy via manual lsyncd .27→.13; this site uses git-based deploy instead (see §4.3). Retire lsyncd for this site. + +## 8. Phase One deliverables (this plan + tasks) + +- [ ] This PLAN.md (decisions, topology, file layout) +- [ ] Register tasks in **Vikunja** (projects, stages) and **Outline** (docs) — see PHASE ONE section +- [ ] Confirm open items: exact Caddy/Nix file on .13, webhook vs timer, Decap media library approach, Garage bucket name +- [ ] Phase 2 (design) kickoff when approved + +## 9. Phases (from AGENT.md) + +1. **Phase One — Planning**: tech stack, content model, admin, storage layout ✅ (this file) +2. **Phase Two — Design**: front-end + admin design options, demo images/templates +3. **Phase Three — Build & test**: Go binary, templates, Decap admin, media, deploy +4. **Phase Four — Create Live**: see system-architect skill when ready +5. **Phase Five — Link email & DNS**: see Website Host Migration plan when ready +6. **Phase Six — Integration**: console, backups +7. **Phase Seven — Marketing**: populate website, marketing + +## 10. Decisions & remaining open items + +### Decided (confirmed) +- Garage bucket: **new dedicated `kontra-day`** (shared-media untouched) +- Deploy trigger: **systemd timer `git pull` every 30s** on .13 +- Admin media: **Decap CMS media library** +- Obsidian: **separate small vault** `/home/sam/obsidian/kontra_day/` = the content repo + +### Remaining open items +- Exact Nix file on .13 for Caddy/site (configuration.nix vs home.nix) — inspect in Phase 3 +- Whether to auto-commit Neovim saves via file-watcher (vs rely on git-sync in Obsidian + timer on .13) + +--- +*Cross-references: AGENT.md; Obsidian notes: Garage Web UI — handoff, Backup Architecture — Offsite to AWS S3, Filesystem Drive Map, Dev-Ops Tooling — Mermaid/Archify/Vikunja/Outline, Docker Containers.* \ No newline at end of file diff --git a/app/.gitignore b/app/.gitignore new file mode 100644 index 0000000..ae3c172 --- /dev/null +++ b/app/.gitignore @@ -0,0 +1 @@ +/bin/ diff --git a/app/build.sh b/app/build.sh new file mode 100755 index 0000000..33de734 --- /dev/null +++ b/app/build.sh @@ -0,0 +1,10 @@ +#!/usr/bin/env bash +# Build the single static Kontra binary. +# Requires: golang (go), templ CLI (~/go/bin/templ) on PATH. +set -euo pipefail +cd "$(dirname "$0")" +export PATH="$HOME/go/bin:$PATH" +templ generate +cd src +go build -o ../kontra-bin . +echo "built: $(pwd)/../kontra-bin" diff --git a/app/go.mod b/app/go.mod new file mode 100644 index 0000000..db4a282 --- /dev/null +++ b/app/go.mod @@ -0,0 +1,9 @@ +module day + +go 1.26 + +require ( + github.com/a-h/templ v0.3.1020 + github.com/goccy/go-yaml v1.19.2 + github.com/yuin/goldmark v1.8.6 +) diff --git a/app/go.sum b/app/go.sum new file mode 100644 index 0000000..7a84557 --- /dev/null +++ b/app/go.sum @@ -0,0 +1,6 @@ +github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw= +github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM= +github.com/goccy/go-yaml v1.19.2 h1:PmFC1S6h8ljIz6gMRBopkjP1TVT7xuwrButHID66PoM= +github.com/goccy/go-yaml v1.19.2/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA= +github.com/yuin/goldmark v1.8.6 h1:d0VcaP1sx9GkFVkoW+KtggpGi2KZ965i14b0+bDQST4= +github.com/yuin/goldmark v1.8.6/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg= diff --git a/app/src/content.go b/app/src/content.go new file mode 100644 index 0000000..1c45198 --- /dev/null +++ b/app/src/content.go @@ -0,0 +1,411 @@ +// Kontra — content: load markdown + front-matter into memory. + +package main + +import ( + "bytes" + "log" + "os" + "path" + "slices" + "strings" + + "github.com/goccy/go-yaml" + "github.com/yuin/goldmark" + "github.com/yuin/goldmark/extension" + "github.com/yuin/goldmark/renderer/html" +) + +// FrontMatter fields parsed from the --- block of each .md file. +type FrontMatter struct { + Title string + Author string + Date string + Tags []string + Kicker string + Template string + Subject string + Image string + Excerpt string + Published bool `yaml:"published"` + Featured bool `yaml:"featured"` + Index int `yaml:"index"` + body string `yaml:"-"` +} + +// Article is one rendered markdown file. +type Article struct { + Slug string + FM FrontMatter + Subject string // resolved subject slug ("" if none) + BodyHTML string // rendered HTML (after shortcode resolution) + RelPath string +} + +// Subject is one topic area. +type Subject struct { + Slug string + Name string + Template string + Color string + Articles []*Article +} + +// NavItem is one top-ribbon entry. +type NavItem struct { + Label string + Slug string +} + +// SiteConfig is the site-wide defaults. +type SiteConfig struct { + Name string + Tagline string + DefaultTemplate string + Subjects []NavItem // nav ribbon order + Nav []NavItem // nav ribbon order (alias) +} + +// Content holds everything loaded at startup. +type Content struct { + Root string + Site SiteConfig + Subjects []*Subject + Articles []*Article + Pages []*Article + MD goldmark.Markdown + MediaBase string // e.g. https://media.kontra/day or /media +} + +// NewContent loads all content from root. +func NewContent(root, mediaBase string) (*Content, error) { + c := &Content{Root: root, MediaBase: mediaBase} + c.MD = goldmark.New( + goldmark.WithExtensions(extension.GFM), + goldmark.WithRendererOptions(html.WithUnsafe(), html.WithHardWraps()), + ) + if err := c.load(); err != nil { + return nil, err + } + return c, nil +} + +// load walks the content dir: config/, subjects/, pages/. +func (c *Content) load() error { + if err := c.loadSiteConfig(); err != nil { + return err + } + subjDir := path.Join(c.Root, "subjects") + if entries, err := os.ReadDir(subjDir); err == nil { + for _, e := range entries { + if !e.IsDir() || strings.HasPrefix(e.Name(), ".") { + continue + } + if s, err := c.loadSubject(e.Name()); err == nil { + c.Subjects = append(c.Subjects, s) + } else { + log.Printf("subject %s: %v", e.Name(), err) + } + } + } + // standalone pages + if err := c.loadFilesUnder(path.Join(c.Root, "pages"), &c.Pages); err != nil { + log.Printf("pages: %v", err) + } + return nil +} + +// loadSiteConfig reads config/site.yaml if present, else defaults. +func (c *Content) loadSiteConfig() error { + p := path.Join(c.Root, "config", "site.yaml") + if data, err := os.ReadFile(p); err == nil { + var cfg SiteConfig + if err := yaml.Unmarshal(data, &cfg); err != nil { + return err + } + c.Site = cfg + } else { + c.Site = SiteConfig{Name: "Kontra", Tagline: "A daily broadsheet.", DefaultTemplate: "article"} + } + if c.Site.Name == "" { + c.Site.Name = "Kontra" + } + if c.Site.DefaultTemplate == "" { + c.Site.DefaultTemplate = "article" + } + return nil +} + +// loadSubject loads subjects// + its articles. +func (c *Content) loadSubject(slug string) (*Subject, error) { + dir := path.Join(c.Root, "subjects", slug) + s := &Subject{Slug: slug, Template: "article"} + if data, err := os.ReadFile(path.Join(dir, "_subject.yaml")); err == nil { + var sc struct { + Name string + Template string + Color string + } + if err := yaml.Unmarshal(data, &sc); err == nil { + s.Name = sc.Name + s.Template = sc.Template + s.Color = sc.Color + } + } + if s.Name == "" { + s.Name = strings.Title(slug) + } + if err := c.loadFilesUnder(dir, &s.Articles); err != nil { + return nil, err + } + for _, a := range s.Articles { + a.Subject = slug + c.Articles = append(c.Articles, a) + } + return s, nil +} + +// loadFilesUnder loads every *.md directly under dir (non-recursive; skips _*). +func (c *Content) loadFilesUnder(dir string, out *[]*Article) error { + entries, err := os.ReadDir(dir) + if err != nil { + return err + } + for _, e := range entries { + name := e.Name() + if e.IsDir() || !strings.HasSuffix(name, ".md") || strings.HasPrefix(name, "_") { + continue + } + if a, err := c.loadFile(path.Join(dir, name)); err == nil { + *out = append(*out, a) + } else { + log.Printf("article %s: %v", name, err) + } + } + return nil +} + +// loadFile parses one .md file: front matter + body, renders HTML. +func (c *Content) loadFile(full string) (*Article, error) { + data, err := os.ReadFile(full) + if err != nil { + return nil, err + } + body := strings.Builder{} + body.Write(data) + text := body.String() + + fm, bodyText, ok := parseFrontMatter(text) + if !ok { + fm = FrontMatter{} + bodyText = text + } + a := &Article{ + Slug: slugOf(full), + FM: fm, + RelPath: full, + } + + // resolve {{media:...}} and {{embed:...}} shortcodes in the SOURCE first, + // so they also work inside markdown links ![...]({{media:x}}) + bodyText = resolveShortcodes(bodyText, c.MediaBase) + + // render markdown -> html + a.BodyHTML, err = c.renderMarkdown(bodyText) + if err != nil { + return nil, err + } + return a, nil +} + +// renderMarkdown converts markdown bytes to HTML string. +func (c *Content) renderMarkdown(md string) (string, error) { + var buf bytes.Buffer + if err := c.MD.Convert(bytes.NewBuffer([]byte(md)).Bytes(), &buf); err != nil { + return "", err + } + return buf.String(), nil +} + +// findSubject returns the subject with the given slug, or nil. +func (c *Content) findSubject(slug string) *Subject { + for _, s := range c.Subjects { + if s.Slug == slug { + return s + } + } + return nil +} + +// findArticle returns the article with the given slug, or nil. +func (c *Content) findArticle(slug string) *Article { + for _, a := range c.Articles { + if a.Slug == slug { + return a + } + } + return nil +} + +// findArticlesBySubject returns articles in a subject, newest first. +func (c *Content) findArticlesBySubject(slug string) []*Article { + var out []*Article + for _, a := range c.Articles { + if a.Subject == slug { + out = append(out, a) + } + } + return out +} + +// latest returns up to n articles across all subjects, newest first. +func (c *Content) latest(n int) []*Article { + out := c.Articles + sortArticles(out) + if len(out) > n { + out = out[:n] + } + return out +} + +// featured returns the first article marked featured. +func (c *Content) featured() *Article { + for _, a := range c.Articles { + if a.FM.Featured { + return a + } + } + return nil +} + +// --- helpers --- + +// parseFrontMatter splits "---\n...yaml...\n---\nbody" into (fm, body, ok). +func parseFrontMatter(text string) (FrontMatter, string, bool) { + if !strings.HasPrefix(text, "---\n") { + return FrontMatter{}, text, false + } + rest := text[4:] + idx := strings.Index(rest, "\n---") + if idx < 0 { + return FrontMatter{}, text, false + } + yamlText := rest[:idx] + body := rest[idx+4:] + var fm FrontMatter + if err := yaml.Unmarshal([]byte(yamlText), &fm); err != nil { + return FrontMatter{}, text, false + } + return fm, body, true +} + +// slugOf derives a slug from a file path: dir/file.md -> file +func slugOf(full string) string { + base := path.Base(full) + base = strings.TrimSuffix(base, ".md") + return base +} + +// resolveShortcodes replaces {{media:name}} with base/name and +// {{embed:vimeo:}} with a lazy video embed. +func resolveShortcodes(html, base string) string { + html = resolveMedia(html, base) + html = resolveEmbeds(html) + return html +} + +// resolveMedia replaces {{media:name}} with base/name. +func resolveMedia(html, base string) string { + var b strings.Builder + start := 0 + for { + i := strings.Index(html[start:], "{{media:") + if i < 0 { + b.WriteString(html[start:]) + break + } + pos := start + i + b.WriteString(html[start:pos]) + after := pos + len("{{media:") + j := strings.Index(html[after:], "}}") + if j < 0 { + b.WriteString(html[pos:]) + break + } + name := html[after:after+j] + b.WriteString(base + "/" + name) + start = after + j + 2 + } + return b.String() +} + +// resolveEmbeds converts {{embed:vimeo:}} into a responsive video iframe. +func resolveEmbeds(html string) string { + const src = "{{embed:vimeo:" + var b strings.Builder + start := 0 + for { + i := strings.Index(html[start:], src) + if i < 0 { + b.WriteString(html[start:]) + break + } + pos := start + i + b.WriteString(html[start:pos]) + after := pos + len(src) + j := strings.Index(html[after:], "}}") + if j < 0 { + b.WriteString(html[pos:]) + break + } + id := html[after:after+j] + b.WriteString(`

`) + start = after + j + 2 + } + return b.String() +} + +// viewData builds the render data for a page. +func (c *Content) viewData() *ViewData { + latest := c.latest(6) + featured := c.featured() + var rail []*Article + for _, a := range latest { + if a != featured { + rail = append(rail, a) + if len(rail) >= 3 { + break + } + } + } + return &ViewData{ + Site: c.Site, + Subjects: c.Subjects, + Featured: featured, + Rail: rail, + Latest: latest, + } +} + +// sortArticles sorts newest first by Date (string compare: ISO dates sort lexically). +func sortArticles(a []*Article) { + slices.SortFunc(a, func(x, y *Article) int { + return strings.Compare(y.FM.Date, x.FM.Date) + }) +} + +// firstArticles returns up to n articles (safe slice: golang slices panic if end > len). +func firstArticles(a []*Article, n int) []*Article { + if len(a) > n { + return a[:n] + } + return a +} + +// firstSubjects returns up to n subjects (safe slice). +func firstSubjects(s []*Subject, n int) []*Subject { + if len(s) > n { + return s[:n] + } + return s +} \ No newline at end of file diff --git a/app/src/main.go b/app/src/main.go new file mode 100644 index 0000000..2d95ab6 --- /dev/null +++ b/app/src/main.go @@ -0,0 +1,57 @@ +// Kontra — news-opinion site. Single static binary. +// Serves markdown content as HTML per request (GOTH stack). + +package main + +import ( + "embed" + "log" + "net/http" + "os" +) + +// bundled static assets + admin UI (served under /web/) +//go:embed web +var web embed.FS + +func main() { + root := os.Getenv("KONTRA_CONTENT") + if root == "" { + root = "content" + } + + mediaBase := os.Getenv("KONTRA_MEDIA") + if mediaBase == "" { + mediaBase = "/media" + } + + c, err := NewContent(root, mediaBase) + if err != nil { + log.Fatalf("failed to load content from %s: %v", root, err) + } + log.Printf("loaded %d articles across %d subjects", len(c.Articles), len(c.Subjects)) + + s := NewSite(c) + + // Routes — register specific paths BEFORE the catch-all. + http.HandleFunc("/subjects/{slug}", func(w http.ResponseWriter, r *http.Request) { + s.subject(w, r, r.PathValue("slug")) + }) + http.HandleFunc("/articles/{slug}", func(w http.ResponseWriter, r *http.Request) { + s.article(w, r, r.PathValue("slug")) + }) + http.Handle("/web/", http.FileServerFS(web)) + http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { + s.home(w, r) + }) + + port := os.Getenv("PORT") + if port == "" { + port = "8080" + } + addr := ":" + port + log.Printf("Kontra listening on %s (content: %s)", addr, root) + if err := http.ListenAndServe(addr, nil); err != nil { + log.Fatalf("server error: %v", err) + } +} \ No newline at end of file diff --git a/app/src/server.go b/app/src/server.go new file mode 100644 index 0000000..55b556a --- /dev/null +++ b/app/src/server.go @@ -0,0 +1,59 @@ +// Kontra — routing + handlers. + +package main + +import ( + "net/http" + + "github.com/a-h/templ" +) + +// Site routes requests to content renderers. +type Site struct { + Content *Content +} + +// home renders the front page. +func (s *Site) home(w http.ResponseWriter, r *http.Request) { + c := s.Content + page := Page{Title: c.Site.Name, Slug: "front-page", ActiveSubject: ""} + data := c.viewData() + data.Subject = nil + data.Article = nil + templ.Handler(PageView(page, data)).ServeHTTP(w, r) +} + +// subject renders one subject index page. +func (s *Site) subject(w http.ResponseWriter, r *http.Request, slug string) { + c := s.Content + subj := c.findSubject(slug) + if subj == nil { + http.Error(w, "Subject not found", http.StatusNotFound) + return + } + page := Page{Title: subj.Name, Slug: "subject", ActiveSubject: slug} + data := c.viewData() + data.Subject = subj + data.Article = nil + templ.Handler(PageView(page, data)).ServeHTTP(w, r) +} + +// article renders a single article. +func (s *Site) article(w http.ResponseWriter, r *http.Request, slug string) { + c := s.Content + a := c.findArticle(slug) + if a == nil { + http.Error(w, "Article not found", http.StatusNotFound) + return + } + page := Page{Title: a.FM.Title, Slug: "article", ActiveSubject: a.Subject} + data := c.viewData() + data.Subject = nil + data.Article = a + data.Related = c.findArticlesBySubject(a.Subject) + templ.Handler(PageView(page, data)).ServeHTTP(w, r) +} + +func NewSite(c *Content) *Site { + return &Site{Content: c} +} \ No newline at end of file diff --git a/app/src/templates.templ b/app/src/templates.templ new file mode 100644 index 0000000..fc89718 --- /dev/null +++ b/app/src/templates.templ @@ -0,0 +1,302 @@ +package main + +import ( + "strconv" + "strings" +) + +// Page is the shell info for every page. +type Page struct { + Title string + Slug string + ActiveSubject string +} + +// ViewData carries everything a page render needs. +type ViewData struct { + Site SiteConfig + Subjects []*Subject + Featured *Article + Rail []*Article + Latest []*Article + Subject *Subject // set on subject pages + Article *Article // set on article pages + Related []*Article +} + +templ PageView(page Page, data *ViewData) { + + + + + + { page.Title } + + + + @Masthead(page, data) +

+ if data.Subject != nil { + @SubjectIndexContent(data.Subject) + } else if data.Article != nil { + @ArticleContent(data.Article, data) + } else { + @HomeContent(data) + } +

+ @MobileNav(page, data) + @SiteFooter(data) + + +} + +// Masthead: meta line, centered brand, ribbon with dropdowns. +templ Masthead(page Page, data *ViewData) { + +} + +templ MobileNav(page Page, data *ViewData) { + +} + +templ SiteFooter(data *ViewData) { + +} + +templ FeedRow(a *Article) { + + if a.FM.Kicker != "" { + { a.FM.Kicker } + } else { + Kontra + } + { a.FM.Title } + { a.FM.Excerpt } + By { a.FM.Author } • { a.FM.Date } + +} + +templ SubjectBox(s *Subject) { +

+ { s.Name } + if len(s.Articles) > 0 { + { s.Articles[0].FM.Title } + { s.Articles[0].FM.Excerpt } + By { s.Articles[0].FM.Author } + } + More { s.Name } +

+} + +templ HomeContent(data *ViewData) { +

+ @LeadStory(data.Featured) +

+ +

Topics

+ for _, s := range firstSubjects(data.Subjects, 4) { + @SubjectBox(s) + } +

+ +

Latest

+ for _, a := range data.Latest { + @FeedRow(a) + } +

+} + +templ LeadStory(a *Article) { + if a != nil { + if a.FM.Kicker != "" { +

{ a.FM.Kicker }

+ } else { +

World Dispatch

+ } +

+ { a.FM.Title } +

{ a.FM.Excerpt }

+ if a.FM.Image != "" { +

+ Fig. 1 + Plate No. 12-A • { a.FM.Author } / Kontra +

+ } +

By { a.FM.Author } • { a.FM.Date }

+ } +} + +templ RailStories(rail []*Article) { + for _, a := range rail { + + if a.FM.Kicker != "" { + { a.FM.Kicker } + } else { + Kontra + } + { a.FM.Title } + By { a.FM.Author } + + } +} + +templ SubjectIndexContent(s *Subject) { +

Topic

{ s.Name }

{ strconv.FormatInt(int64(len(s.Articles)), 10) } stories

+ for _, a := range s.Articles { + @FeedRow(a) + } +

+} + +templ ArticleContent(a *Article, data *ViewData) { +

+ if a.FM.Kicker != "" { +

{ a.FM.Kicker }

+ } else { +

Kontra

+ } +

{ a.FM.Title }

{ a.FM.Excerpt }

+ By { a.FM.Author } · { strings.ToUpper(a.Subject) } · { a.FM.Date } +

+ + if a.FM.Image != "" { +

+ } + +

+ @templ.Raw(a.BodyHTML) +

+ +

Dispatch Status

Filed • { a.FM.Date }

+ +

+ + +} + +templ NewsletterCard() { + +} + +templ AdminRedirect() { + + +} \ No newline at end of file diff --git a/app/src/web/admin/config.yml b/app/src/web/admin/config.yml new file mode 100644 index 0000000..310d370 --- /dev/null +++ b/app/src/web/admin/config.yml @@ -0,0 +1,83 @@ +# Kontra Admin — Decap CMS +# Serves the same content repo that the Go binary renders. +# Editor saves -> git commit -> Gitea push -> 30s timer on .13 pulls -> site live. + +backend: + name: git-gateway + branch: main + # Uses the "Decap CMS" OAuth / git-gateway app on Gitea. + # Swap to name: github / gitlab / gitea and a token if you prefer PAT-based. + +local_backend: false + +# Media goes to Garage S3 via shortcode at render time; Decap just stores the +# object key inside the .md. If you instead want files committed to the repo, +# point media_folder at content/media and public_folder at /media. +media_folder: "" # no local uploads by default +public_folder: "" +media_library: + name: "" + config: {} + +# ------------------------------------------------------------------ +# Collections +# ------------------------------------------------------------------ +collections: + - name: articles + label: Articles + label_singular: Article + folder: content/subjects + create: true + slug: "{{slug}}" + path: "{{slug}}/{{slug}}" + sortable_fields: [date, title] + fields: + - { name: title, label: Title, widget: string } + - { name: author, label: Author, widget: string } + - { name: date, label: Date, widget: datetime, format: YYYY-MM-DD, date_format: YYYY-MM-DD, time_format: false } + - { name: kicker, label: Kicker (section tag), widget: string, required: false } + - { name: template, label: Template, widget: string, default: article } + - { name: subject, label: Subject, widget: relation, collection: subjects, value_field: slug, search_fields: [name], display_fields: [name] } + - { name: image, label: Cover image, widget: image, required: false } + - { name: excerpt, label: Excerpt / deck, widget: text, required: false } + - { name: tags, label: Tags, widget: list, allow_add: true, required: false } + - { name: featured, label: Featured on front page, widget: boolean, default: false } + - { name: published, label: Published, widget: boolean, default: true } + - { name: body, label: Body, widget: markdown } + + - name: subjects + label: Subjects + label_singular: Subject + folder: content/subjects + create: true + slug: "{{slug}}" + path: "{{slug}}/_subject" + identifier_field: slug + fields: + - { name: name, label: Name, widget: string } + - { name: template, label: Default template, widget: string, default: article, required: false } + - { name: color, label: Accent color, widget: string, required: false } + + - name: pages + label: Pages + label_singular: Page + folder: content/pages + create: true + slug: "{{slug}}" + fields: + - { name: title, label: Title, widget: string } + - { name: author, label: Author, widget: string, required: false } + - { name: date, label: Date, widget: datetime, format: YYYY-MM-DD, date_format: YYYY-MM-DD, time_format: false } + - { name: template, label: Template, widget: string, default: article, required: false } + - { name: body, label: Body, widget: markdown } + +# ------------------------------------------------------------------ +# Editor settings +# ------------------------------------------------------------------ +editor: + preview: false + frame: false + +publish_mode: editorial_workflow + +show_preview_links: false \ No newline at end of file diff --git a/app/src/web/admin/index.html b/app/src/web/admin/index.html new file mode 100644 index 0000000..5fc9f9c --- /dev/null +++ b/app/src/web/admin/index.html @@ -0,0 +1,17 @@ + + + + + + Kontra — Admin + + + + + + + \ No newline at end of file diff --git a/app/src/web/assets/kontra.css b/app/src/web/assets/kontra.css new file mode 100644 index 0000000..f93013b --- /dev/null +++ b/app/src/web/assets/kontra.css @@ -0,0 +1,329 @@ +/* ============================================================ + Kontra — Broadsheet Editorial (prototype tokens + layout) + Source: DESIGN.md. CSS custom properties = design tokens. + Responsive: desktop ≥1024 / tablet 641–1023 / mobile ≤640. + ============================================================ */ +:root { + --canvas: #fbf9f3; + --canvas-bright: #ffffff; + --surface: #f0eee8; + --surface-hi: #eae8e2; + --surface-highest: #e4e2dd; + --ink: #1b1c18; + --ink-muted: #444748; + --ink-faint: #747878; + --accent: #ad3222; + --accent-deep: #8b190d; + --accent-soft: #ffdad4; + --on-accent-soft: #400100; + --ink-inverse: #1c1b1b; + --on-ink-inverse: #ffffff; + --outline: #c4c7c7; + --hairline: #e4e2dd; + --scrim: rgba(26, 26, 26, 0.4); + + --font-display: 'Newsreader', Garamond, Georgia, serif; + --font-body: 'Literata', Georgia, 'Times New Roman', serif; + --font-ui: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; + + --space-2xs: 4px; + --space-xs: 8px; + --space-sm: 12px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 32px; + --space-2xl: 48px; + --content-max: 42rem; + --gutter: 24px; + --gutter-mobile: 20px; +} + +html { -webkit-font-smoothing: antialiased; } +body { + margin: 0; + background: var(--canvas); + color: var(--ink); + font-family: var(--font-body); + overscroll-behavior-y: none; +} + +/* ---------- Type ---------- */ +.font-display { font-family: var(--font-display); } +.font-body { font-family: var(--font-body); } +.font-ui { font-family: var(--font-ui); } + +.display-masthead { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; } +.headline-xl { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.22; letter-spacing: -0.02em; } +.headline-lg { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.26; letter-spacing: -0.01em; } +.headline-md { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.3; } +.headline-sm { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.33; } +.headline-sub { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.33; } +.body-lead { font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.58; letter-spacing: -0.005em; } +.body-md { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.65; } +.body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.57; } +.quote-display { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.45; letter-spacing: -0.01em; } +.label-caps { font-family: var(--font-ui); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; } +.label-meta { font-family: var(--font-ui); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.02em; } +.label-ui { font-family: var(--font-ui); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; } + +/* ---------- Layout shell ---------- */ +.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } +.content-column { max-width: var(--content-max); margin-left: auto; margin-right: auto; } + +@media (max-width: 640px) { + .container { padding: 0 var(--gutter-mobile); } +} + +/* ---------- Hairlines ---------- */ +.hairline-t { border-top: 1px solid var(--hairline); } +.hairline-b { border-bottom: 1px solid var(--hairline); } +.hairline-y { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } + +/* ---------- Buttons / forms ---------- */ +.btn-primary { + font-family: var(--font-ui); font-weight: 600; font-size: 12px; + letter-spacing: 0.12em; text-transform: uppercase; + background: var(--ink-inverse); color: var(--on-ink-inverse); + border: none; border-radius: 0; min-height: 42px; padding: 0 16px; + transition: background 150ms; cursor: pointer; +} +.btn-primary:hover { background: var(--accent); } +.btn-primary:active { transform: scale(0.97); } + +.btn-secondary { + font-family: var(--font-ui); font-weight: 600; font-size: 12px; + letter-spacing: 0.12em; text-transform: uppercase; + background: transparent; color: var(--ink); + border: 1px solid var(--ink); border-radius: 0; min-height: 42px; padding: 0 16px; + transition: background 150ms; cursor: pointer; +} +.btn-secondary:active { background: rgba(27,28,24,0.1); } + +.field { + font-family: var(--font-body); font-size: 13px; color: var(--ink); + background: var(--surface); border: 1px solid var(--hairline); border-radius: 0; + padding: 8px 14px; min-height: 40px; +} +.field:focus { border-color: var(--ink); background: var(--canvas-bright); outline: none; } +.field::placeholder { color: var(--ink-faint); } + +/* ---------- Figures ---------- */ +figure.plate { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } +figure.plate img { display: block; width: 100%; filter: grayscale(1) contrast(1.08); } +figure.gridplate { background: var(--surface); border: 1px solid var(--hairline); } +figure.gridplate img { display: block; width: 100%; aspect-ratio: 3/2; filter: grayscale(1) contrast(1.05); } + +.pullquote { background: var(--surface); border-left: 4px solid var(--accent); padding: 24px; border-radius: 0; } +.pullquote .mark { font-family: var(--font-display); color: var(--accent); font-size: 38px; line-height: 1; opacity: 0.8; } + +/* Selection */ +::selection { background: var(--accent-soft); color: var(--on-accent-soft); } + +/* ============================================================ + MASTHEAD (centered brand + dropdown ribbon) + ============================================================ */ +.masthead { + position: sticky; top: 0; z-index: 50; + background: var(--canvas); + border-bottom: 1px solid var(--hairline); +} + +.meta-line { + display: flex; justify-content: space-between; align-items: center; + font-family: var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; font-weight: 600; + color: var(--ink-muted); + border-bottom: 1px solid var(--hairline); padding-bottom: 6px; +} +.meta-line .edition { color: var(--accent); } + +/* Centered brand: left spacer mirrors the right icon cluster for optical centering */ +.brand-row { + display: grid; + grid-template-columns: 52px 1fr 52px; + align-items: center; + padding: 10px 0; +} +.brand-row .brand { + text-align: center; +} +.brand-row .brand a { text-decoration: none; color: var(--ink); } +.brand-tools { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } +.brand-tools a { color: var(--ink-muted); text-decoration: none; } +.brand-avatar { + width: 32px; height: 32px; border-radius: 50%; + background: var(--ink-inverse); color: #fff; + display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; +} + +/* Ribbon + dropdowns (desktop/tablet) */ +.ribbon { + display: flex; align-items: stretch; gap: 0; + border-top: 1px solid var(--hairline); + position: relative; + font-family: var(--font-ui); +} +.ribbon .nav-item { + position: relative; + padding: 10px 18px 11px; +} +.ribbon .nav-item > a { + font-family: var(--font-ui); font-weight: 600; font-size: 11px; + letter-spacing: 0.12em; text-transform: uppercase; + color: var(--ink-muted); text-decoration: none; + display: inline-block; white-space: nowrap; + border-bottom: 2px solid transparent; padding-bottom: 1px; +} +.ribbon .nav-item.active > a { color: var(--ink); border-bottom-color: var(--ink); } +.ribbon .nav-item.accent > a { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); } +.ribbon .nav-item > a:hover { color: var(--ink); } + +.nav-drop { + position: absolute; top: 100%; left: 0; min-width: 300px; + background: var(--canvas); + border: 1px solid var(--hairline); + box-shadow: none; + padding: 14px 16px; + display: none; + z-index: 60; +} +.nav-item:hover .nav-drop, +.nav-item:focus-within .nav-drop { display: block; } +.nav-drop .drop-kicker { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 8px; } +.nav-drop .drop-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); margin-top: 2px; } +.nav-drop .drop-item { display: block; text-decoration: none; padding: 8px 12px; } +.nav-drop .drop-item:hover .drop-title { color: var(--accent); } +.nav-drop .drop-item + .drop-item { border-top: 1px solid var(--hairline); } +.nav-drop .drop-all { + display: block; margin-top: 10px; padding: 8px 12px; + font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; + color: var(--ink); text-decoration: none; + border-top: 1px solid var(--hairline); +} +.nav-drop .drop-all:hover { color: var(--accent); } + +/* ============================================================ + FRONT PAGE GRIDS (responsive) + ============================================================ */ + +/* Lead stack: 2fr hero + 1fr rail on desktop; stacks below */ +.lead-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; padding: 32px 0 0; } +@media (max-width: 1023px) { + .lead-grid { grid-template-columns: 1fr; padding-top: 24px; } +} +@media (max-width: 640px) { .lead-grid { padding-top: 16px; } } + +/* Subject grid: 4 cols → 2 cols (tablet) → 1 col (mobile) */ +.subject-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } +@media (max-width: 1023px) { .subject-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } +@media (max-width: 640px) { .subject-grid { grid-template-columns: 1fr; gap: 16px; } } + +.subject-box { border: 1px solid var(--hairline); padding: 16px; } +.subject-box .kicker { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.subject-box .s-head { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.33; color: var(--ink); text-decoration: none; margin-top: 10px; } +.subject-box .s-sub { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink-muted); text-decoration: none; margin-top: 6px; } +.subject-box .s-by { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-top: 8px; } +.subject-box .s-more { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; margin-top: 10px; } +.subject-box .s-more::after { content: ' →'; } +.subject-box .s-more:hover { color: var(--accent); } + +/* Latest feed: 2 cols → 1 col */ +.latest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } +@media (max-width: 1023px) { .latest-grid { grid-template-columns: 1fr; gap: 20px; } } + +.feed-row { display: block; text-decoration: none; padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } +.feed-row .f-kicker { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.feed-row .f-head { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.33; color: var(--ink); margin-top: 8px; } +.feed-row .f-sub { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink-muted); margin-top: 5px; } +.feed-row .f-meta { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-top: 8px; } +.feed-row:hover .f-head { color: var(--accent); } + +/* ============================================================ + MOBILE BOTTOM NAV (≤640 only) + ============================================================ */ +.bottom-nav { + position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; + background: var(--canvas); + border-top: 1px solid var(--hairline); + display: none; +} +.bottom-nav-inner { + display: flex; justify-content: space-around; align-items: center; + min-height: 60px; + font-family: var(--font-ui); +} +.bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; color: var(--ink-muted); text-decoration: none; font-size: 10px; letter-spacing: 0.04em; } +.bn-item .ic { font-size: 20px; } +.bn-item.active { color: var(--ink); } +.bn-item.active .ic { color: var(--accent); } + +/* Sections drawer via

*/ +.bn-sections { position: relative; flex: 1; } +.bn-sections summary { + display: flex; flex-direction: column; align-items: center; gap: 2px; + color: var(--ink-muted); list-style: none; cursor: pointer; + font-size: 10px; letter-spacing: 0.04em; +} +.bn-sections summary::-webkit-details-marker { display: none; } +.bn-sections summary .ic { font-size: 20px; color: var(--ink-muted); } +.sections-drawer { + position: fixed; left: 0; right: 0; bottom: 60px; + max-height: 60vh; overflow-y: auto; + background: var(--canvas); + border-top: 1px solid var(--hairline); + display: none; +} +.bn-sections[open] .sections-drawer { display: block; } +.sections-drawer a { + display: flex; align-items: center; justify-content: space-between; + padding: 14px 20px; + font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; + color: var(--ink); text-decoration: none; +} +.sections-drawer a + a { border-top: 1px solid var(--hairline); } +.sections-drawer .dr-all { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } +.sections-drawer a::after { content: '›'; color: var(--ink-muted); } + +@media (max-width: 640px) { + .bottom-nav { display: block; } + /* keep body from hiding behind the fixed bar */ + main, footer { padding-bottom: 72px; } +} + +/* ============================================================ + ARTICLE + ============================================================ */ +.article-header { padding: 32px 0 0; } +.article-header .kicker { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.article-header h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0 10px; } +.article-header .deck { font-family: var(--font-body); font-size: 14px; line-height: 1.57; color: var(--ink-muted); margin: 0 0 12px; } +.article-header .meta { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); padding: 10px 0; border-bottom: 1px solid var(--hairline); } +.article-header .meta strong { color: var(--ink); font-weight: 600; } + +.field-notes { margin: 36px 0; } +.field-notes .fn-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--hairline); padding: 0 0 8px; } +.field-notes .fn-head .l { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } +.field-notes .fn-head .r { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); } +.field-notes .fn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 16px; } +@media (max-width: 640px) { .field-notes .fn-grid { grid-template-columns: 1fr; } } +.field-notes figcaption { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-muted); padding: 10px 12px; background: var(--surface); } +.field-notes figcaption .cap-kicker { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } + +.save-module { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } +.save-module .l .t { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } +.save-module .l .s { font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--ink); } + +.related { background: var(--surface-hi); padding: 40px 24px; margin-top: 40px; } +.related .r-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding: 0 0 8px; } +.related .r-head .l { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.related .r-head .r { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); } + +.newsletter-card { background: var(--canvas-bright); border: 1px solid var(--hairline); padding: 20px; margin-top: 24px; } +.newsletter-card .t { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.newsletter-card p { font-family: var(--font-body); font-size: 14px; line-height: 1.57; color: var(--ink-muted); margin: 10px 0; } +.newsletter-card form { display: flex; gap: 8px; } +.newsletter-card .field { flex: 1; } + +.site-footer { padding: 40px 0; border-top: 1px solid var(--hairline); text-align: center; } +.site-footer .t { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.03em; color: var(--ink); } +.site-footer .tag { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-top: 8px; } +.site-footer .copy { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 16px; } \ No newline at end of file diff --git a/content/config/site.yaml b/content/config/site.yaml new file mode 100644 index 0000000..3cef328 --- /dev/null +++ b/content/config/site.yaml @@ -0,0 +1,25 @@ +name: Kontra +tagline: A daily broadsheet for the wide world. Independent • Printed in your browser. +defaulttemplate: article +subjects: + - label: World + slug: world + - label: Politics + slug: politics + - label: Culture + slug: culture + - label: Tech + slug: tech + - label: Business + slug: business +nav: + - label: World + slug: world + - label: Politics + slug: politics + - label: Culture + slug: culture + - label: Tech + slug: tech + - label: Business + slug: business \ No newline at end of file diff --git a/content/pages/about.md b/content/pages/about.md new file mode 100644 index 0000000..7837fa7 --- /dev/null +++ b/content/pages/about.md @@ -0,0 +1,8 @@ +--- +title: About +author: Kontra +date: 2026-09-01 +template: article +--- + +Kontra is an independent news-opinion publication. We believe in measured, deliberate journalism served in a typeface you can read. diff --git a/content/subjects/culture/_subject.yaml b/content/subjects/culture/_subject.yaml new file mode 100644 index 0000000..28e3d7a --- /dev/null +++ b/content/subjects/culture/_subject.yaml @@ -0,0 +1,3 @@ +name: Culture +template: article +color: "#ad3222" diff --git a/content/subjects/culture/micro-press.md b/content/subjects/culture/micro-press.md new file mode 100644 index 0000000..9df980d --- /dev/null +++ b/content/subjects/culture/micro-press.md @@ -0,0 +1,13 @@ +--- +title: A Micro-Press Keeps the Long Essay Alive at 16 Pages +author: S. Grey +date: 2026-09-05 +kicker: Books +subject: culture +template: article +excerpt: Paper, price of ink, and why short-run still sells. +--- + +Paper, price of ink, and why short-run still sells. The micro-press prints a single essay a month, in an edition of four hundred, and has never once gone into a second printing. + +Its publisher's theory is simple: scarcity is a feature, not a bug, when the writing is good. diff --git a/content/subjects/politics/_subject.yaml b/content/subjects/politics/_subject.yaml new file mode 100644 index 0000000..851e7a8 --- /dev/null +++ b/content/subjects/politics/_subject.yaml @@ -0,0 +1,3 @@ +name: Politics +template: article +color: "#ad3222" diff --git a/content/subjects/politics/primary-crowd.md b/content/subjects/politics/primary-crowd.md new file mode 100644 index 0000000..957f729 --- /dev/null +++ b/content/subjects/politics/primary-crowd.md @@ -0,0 +1,13 @@ +--- +title: The Two-Party Primary That Never Had a Crowd +author: P. Vela +date: 2026-09-07 +kicker: Politics +subject: politics +template: article +excerpt: Voter lists up, enthusiasm down — how the ground shifted anyway. +--- + +Voter lists up, enthusiasm down — how the ground shifted anyway. The primaries drew record registrations but the smallest crowds in memory, and both outcomes are true at once. + +Organizers blame the calendar; political scientists blame the weather; the poll workers blame their feet. Nobody is entirely wrong. diff --git a/content/subjects/tech/_subject.yaml b/content/subjects/tech/_subject.yaml new file mode 100644 index 0000000..7336292 --- /dev/null +++ b/content/subjects/tech/_subject.yaml @@ -0,0 +1,3 @@ +name: Tech +template: article +color: "#ad3222" diff --git a/content/subjects/tech/local-ai-box.md b/content/subjects/tech/local-ai-box.md new file mode 100644 index 0000000..8ed627b --- /dev/null +++ b/content/subjects/tech/local-ai-box.md @@ -0,0 +1,13 @@ +--- +title: The Local AI Box That Runs Entirely on a Tennis Ball +author: J. Quin +date: 2026-09-04 +kicker: Tech +subject: tech +template: article +excerpt: A one-RPi coop build, and what it does better than cloud. +--- + +A one-RPi coop build, and what it does better than cloud. In a converted radio shack, a cooperative runs a small language model on hardware the size of a paperback — deliberately, and on purpose. + +It does less, but it does it privately, and the members own the whole stack. That, its operators argue, is the point. diff --git a/content/subjects/world/_subject.yaml b/content/subjects/world/_subject.yaml new file mode 100644 index 0000000..74bbf00 --- /dev/null +++ b/content/subjects/world/_subject.yaml @@ -0,0 +1,3 @@ +name: World +template: article +color: "#ad3222" \ No newline at end of file diff --git a/content/subjects/world/river-border.md b/content/subjects/world/river-border.md new file mode 100644 index 0000000..a68ab68 --- /dev/null +++ b/content/subjects/world/river-border.md @@ -0,0 +1,13 @@ +--- +title: The River Border Nobody Can Agree Where It Is +author: N. Harlow +date: 2026-09-06 +kicker: World +subject: world +template: article +excerpt: Two towns, one floodplain, and a surveyor's error from 1893. +--- + +Two towns, one floodplain, and a surveyor's error from 1893 have kept a border in dispute for more than a century. Neither side will yield the mudflats, and both claim the weir as their own. + +The original boundary stone was placed on a bank that has since migrated sixty yards downstream. Every spring, the river moves it again — and every summer, the argument resumes. \ No newline at end of file diff --git a/content/subjects/world/southern-harbor.md b/content/subjects/world/southern-harbor.md new file mode 100644 index 0000000..db82bd6 --- /dev/null +++ b/content/subjects/world/southern-harbor.md @@ -0,0 +1,27 @@ +--- +title: The Quiet Reshaping of the Southern Harbor +author: M. Kestrel +date: 2026-09-08 +kicker: World Dispatch +subject: world +template: article +featured: true +image: https://picsum.photos/seed/harbor1/1400/800 +excerpt: After decades of decline, the docklands cooperative is being rebuilt from the waterline up — and the tide of labour is turning with it. +--- + +Before the lighthouse beam cuts clean through the channel mist, the smell of damp pine and brine settles into the stones. For three centuries, the tidal basin has kept the same tempo: boats lurching over black water with diesel thrums, their gunwales caked in white rime, unloading timber and cold silver mackerel while the town above still sleeps behind shuttered granite facades. + +> The ocean takes everything you give it and asks for another hour. If the tide leaves you high, you scrape hulls; if it surges, you pray the knots hold. +> +> — Marcel Gouëlou, 42 years shipwright & seine netting foreman + +Yet the men and women working these slips are acutely aware of the narrowing wake behind them. Modern mechanized refrigeration terminals forty leagues south have hollowed out the regional cooperative. Here, where hand-mended nets dry on weathered oak bollards and weights are tallied in battered tin notebooks, maritime trade remains tactile, punishing, and inextricably tied to the low spring tides. + +By noon, the diesel fumes thin out, replaced by steam whistling from the fishermen's canteen on Rue des Cordiers. Copper pots boil potatoes alongside salted hake. Here, the talk shifts from tonnage to fuel subsidies, offshore regulations, and the young people who prefer train commutes to the city over seventy-hour sea weeks. + +Still, as evening pulls the waters outward into the English Channel, the moorings creak in unison. The old fleet may be diminishing in number, but those remaining harbour stones bear the polish of generations who knew how to listen to the tide long before the radar could tell them what was coming. + +![Morning trawlers]({{media:harbor.jpg}}) + +{{embed:vimeo:76979871}} \ No newline at end of file diff --git a/prototype/article.html b/prototype/article.html new file mode 100644 index 0000000..f1addd4 --- /dev/null +++ b/prototype/article.html @@ -0,0 +1,228 @@ + + + + + +Kontra — The Quiet Reshaping of the Southern Harbor + + + + + + + + + + + +

+ +

+ + +

World Dispatch • Southern Port Desk

The Quiet Reshaping of the Southern Harbor: How Old Wharves Found New Hands

After decades of decline, the docklands cooperative is being rebuilt from the waterline up — and the tide of labour is turning with it.

By M. Kestrel · Harbor Desk · Saint-Malo Port, Brittany · 6 min read

+ + +

Fog over the harbour at dawn — + Fig. 1 Morning trawlers returning to the basin under heavy October fog. + Plate No. 12-A • M. Kestrel / Kontra +

+ + +

Before the lighthouse beam cuts clean through the channel mist, the smell of damp pine and brine settles into the stones. For three centuries, the tidal basin has kept the same tempo: boats lurching over black water with diesel thrums, their gunwales caked in white rime, unloading timber and cold silver mackerel while the town above still sleeps behind shuttered granite facades.

+ +

Yet the men and women working these slips are acutely aware of the narrowing wake behind them. Modern mechanized refrigeration terminals forty leagues south have hollowed out the regional cooperative. Here, where hand-mended nets dry on weathered oak bollards and weights are tallied in battered tin notebooks, maritime trade remains tactile, punishing, and inextricably tied to the low spring tides.

+ +

Sitting in the coop office on a Tuesday, the new harbour-mistress, Elena Voss, lays three charts flat: one of the old auction floor, one of the cold store, and one of a ten-year forecast showing the pier's fresh tenants — a rope-maker, a sail loft, a small brewery that ages stout in seawater — none of them fishing. "We stopped pretending the town could live on the herring alone," she says. "The question was whether the harbour itself could live."

+ + + + +

By noon, the diesel fumes thin out, replaced by steam whistling from the fishermen's canteen on Rue des Cordiers. Copper pots boil potatoes alongside salted hake. Here, the talk shifts from tonnage to fuel subsidies, offshore regulations, and the young people who prefer train commutes to the city over seventy-hour sea weeks.

Still, as evening pulls the waters outward into the English Channel, the moorings creak in unison. The old fleet may be diminishing in number, but those remaining harbour stones bear the polish of generations who knew how to listen to the tide long before the radar could tell them what was coming.

+ + +

+ Field Notes & Plate Studies + 2 of 8 Archival Exposures +

Net menders on the pier — Fig. 2 • Netting Repair Slip
Seine menders splicing weathered nylon cord at low ebb.

Calloused hands splicing rope — Fig. 3 • The Weaver's Knot
Hands of Émile Laurent, 68. A three-strand tuck unchanged since the 1890s.

+ + +

Dispatch Status

Filed from Southern Harbor Wharf

+ +

+ + + + +

+ + + + + + + + + \ No newline at end of file diff --git a/prototype/assets/kontra.css b/prototype/assets/kontra.css new file mode 100644 index 0000000..f93013b --- /dev/null +++ b/prototype/assets/kontra.css @@ -0,0 +1,329 @@ +/* ============================================================ + Kontra — Broadsheet Editorial (prototype tokens + layout) + Source: DESIGN.md. CSS custom properties = design tokens. + Responsive: desktop ≥1024 / tablet 641–1023 / mobile ≤640. + ============================================================ */ +:root { + --canvas: #fbf9f3; + --canvas-bright: #ffffff; + --surface: #f0eee8; + --surface-hi: #eae8e2; + --surface-highest: #e4e2dd; + --ink: #1b1c18; + --ink-muted: #444748; + --ink-faint: #747878; + --accent: #ad3222; + --accent-deep: #8b190d; + --accent-soft: #ffdad4; + --on-accent-soft: #400100; + --ink-inverse: #1c1b1b; + --on-ink-inverse: #ffffff; + --outline: #c4c7c7; + --hairline: #e4e2dd; + --scrim: rgba(26, 26, 26, 0.4); + + --font-display: 'Newsreader', Garamond, Georgia, serif; + --font-body: 'Literata', Georgia, 'Times New Roman', serif; + --font-ui: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; + + --space-2xs: 4px; + --space-xs: 8px; + --space-sm: 12px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 32px; + --space-2xl: 48px; + --content-max: 42rem; + --gutter: 24px; + --gutter-mobile: 20px; +} + +html { -webkit-font-smoothing: antialiased; } +body { + margin: 0; + background: var(--canvas); + color: var(--ink); + font-family: var(--font-body); + overscroll-behavior-y: none; +} + +/* ---------- Type ---------- */ +.font-display { font-family: var(--font-display); } +.font-body { font-family: var(--font-body); } +.font-ui { font-family: var(--font-ui); } + +.display-masthead { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; } +.headline-xl { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.22; letter-spacing: -0.02em; } +.headline-lg { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.26; letter-spacing: -0.01em; } +.headline-md { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.3; } +.headline-sm { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.33; } +.headline-sub { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.33; } +.body-lead { font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.58; letter-spacing: -0.005em; } +.body-md { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.65; } +.body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.57; } +.quote-display { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.45; letter-spacing: -0.01em; } +.label-caps { font-family: var(--font-ui); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; } +.label-meta { font-family: var(--font-ui); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.02em; } +.label-ui { font-family: var(--font-ui); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; } + +/* ---------- Layout shell ---------- */ +.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } +.content-column { max-width: var(--content-max); margin-left: auto; margin-right: auto; } + +@media (max-width: 640px) { + .container { padding: 0 var(--gutter-mobile); } +} + +/* ---------- Hairlines ---------- */ +.hairline-t { border-top: 1px solid var(--hairline); } +.hairline-b { border-bottom: 1px solid var(--hairline); } +.hairline-y { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } + +/* ---------- Buttons / forms ---------- */ +.btn-primary { + font-family: var(--font-ui); font-weight: 600; font-size: 12px; + letter-spacing: 0.12em; text-transform: uppercase; + background: var(--ink-inverse); color: var(--on-ink-inverse); + border: none; border-radius: 0; min-height: 42px; padding: 0 16px; + transition: background 150ms; cursor: pointer; +} +.btn-primary:hover { background: var(--accent); } +.btn-primary:active { transform: scale(0.97); } + +.btn-secondary { + font-family: var(--font-ui); font-weight: 600; font-size: 12px; + letter-spacing: 0.12em; text-transform: uppercase; + background: transparent; color: var(--ink); + border: 1px solid var(--ink); border-radius: 0; min-height: 42px; padding: 0 16px; + transition: background 150ms; cursor: pointer; +} +.btn-secondary:active { background: rgba(27,28,24,0.1); } + +.field { + font-family: var(--font-body); font-size: 13px; color: var(--ink); + background: var(--surface); border: 1px solid var(--hairline); border-radius: 0; + padding: 8px 14px; min-height: 40px; +} +.field:focus { border-color: var(--ink); background: var(--canvas-bright); outline: none; } +.field::placeholder { color: var(--ink-faint); } + +/* ---------- Figures ---------- */ +figure.plate { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } +figure.plate img { display: block; width: 100%; filter: grayscale(1) contrast(1.08); } +figure.gridplate { background: var(--surface); border: 1px solid var(--hairline); } +figure.gridplate img { display: block; width: 100%; aspect-ratio: 3/2; filter: grayscale(1) contrast(1.05); } + +.pullquote { background: var(--surface); border-left: 4px solid var(--accent); padding: 24px; border-radius: 0; } +.pullquote .mark { font-family: var(--font-display); color: var(--accent); font-size: 38px; line-height: 1; opacity: 0.8; } + +/* Selection */ +::selection { background: var(--accent-soft); color: var(--on-accent-soft); } + +/* ============================================================ + MASTHEAD (centered brand + dropdown ribbon) + ============================================================ */ +.masthead { + position: sticky; top: 0; z-index: 50; + background: var(--canvas); + border-bottom: 1px solid var(--hairline); +} + +.meta-line { + display: flex; justify-content: space-between; align-items: center; + font-family: var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; font-weight: 600; + color: var(--ink-muted); + border-bottom: 1px solid var(--hairline); padding-bottom: 6px; +} +.meta-line .edition { color: var(--accent); } + +/* Centered brand: left spacer mirrors the right icon cluster for optical centering */ +.brand-row { + display: grid; + grid-template-columns: 52px 1fr 52px; + align-items: center; + padding: 10px 0; +} +.brand-row .brand { + text-align: center; +} +.brand-row .brand a { text-decoration: none; color: var(--ink); } +.brand-tools { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } +.brand-tools a { color: var(--ink-muted); text-decoration: none; } +.brand-avatar { + width: 32px; height: 32px; border-radius: 50%; + background: var(--ink-inverse); color: #fff; + display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; +} + +/* Ribbon + dropdowns (desktop/tablet) */ +.ribbon { + display: flex; align-items: stretch; gap: 0; + border-top: 1px solid var(--hairline); + position: relative; + font-family: var(--font-ui); +} +.ribbon .nav-item { + position: relative; + padding: 10px 18px 11px; +} +.ribbon .nav-item > a { + font-family: var(--font-ui); font-weight: 600; font-size: 11px; + letter-spacing: 0.12em; text-transform: uppercase; + color: var(--ink-muted); text-decoration: none; + display: inline-block; white-space: nowrap; + border-bottom: 2px solid transparent; padding-bottom: 1px; +} +.ribbon .nav-item.active > a { color: var(--ink); border-bottom-color: var(--ink); } +.ribbon .nav-item.accent > a { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); } +.ribbon .nav-item > a:hover { color: var(--ink); } + +.nav-drop { + position: absolute; top: 100%; left: 0; min-width: 300px; + background: var(--canvas); + border: 1px solid var(--hairline); + box-shadow: none; + padding: 14px 16px; + display: none; + z-index: 60; +} +.nav-item:hover .nav-drop, +.nav-item:focus-within .nav-drop { display: block; } +.nav-drop .drop-kicker { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 8px; } +.nav-drop .drop-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); margin-top: 2px; } +.nav-drop .drop-item { display: block; text-decoration: none; padding: 8px 12px; } +.nav-drop .drop-item:hover .drop-title { color: var(--accent); } +.nav-drop .drop-item + .drop-item { border-top: 1px solid var(--hairline); } +.nav-drop .drop-all { + display: block; margin-top: 10px; padding: 8px 12px; + font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; + color: var(--ink); text-decoration: none; + border-top: 1px solid var(--hairline); +} +.nav-drop .drop-all:hover { color: var(--accent); } + +/* ============================================================ + FRONT PAGE GRIDS (responsive) + ============================================================ */ + +/* Lead stack: 2fr hero + 1fr rail on desktop; stacks below */ +.lead-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; padding: 32px 0 0; } +@media (max-width: 1023px) { + .lead-grid { grid-template-columns: 1fr; padding-top: 24px; } +} +@media (max-width: 640px) { .lead-grid { padding-top: 16px; } } + +/* Subject grid: 4 cols → 2 cols (tablet) → 1 col (mobile) */ +.subject-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } +@media (max-width: 1023px) { .subject-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } +@media (max-width: 640px) { .subject-grid { grid-template-columns: 1fr; gap: 16px; } } + +.subject-box { border: 1px solid var(--hairline); padding: 16px; } +.subject-box .kicker { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.subject-box .s-head { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.33; color: var(--ink); text-decoration: none; margin-top: 10px; } +.subject-box .s-sub { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink-muted); text-decoration: none; margin-top: 6px; } +.subject-box .s-by { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-top: 8px; } +.subject-box .s-more { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; margin-top: 10px; } +.subject-box .s-more::after { content: ' →'; } +.subject-box .s-more:hover { color: var(--accent); } + +/* Latest feed: 2 cols → 1 col */ +.latest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } +@media (max-width: 1023px) { .latest-grid { grid-template-columns: 1fr; gap: 20px; } } + +.feed-row { display: block; text-decoration: none; padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } +.feed-row .f-kicker { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } +.feed-row .f-head { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.33; color: var(--ink); margin-top: 8px; } +.feed-row .f-sub { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink-muted); margin-top: 5px; } +.feed-row .f-meta { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-top: 8px; } +.feed-row:hover .f-head { color: var(--accent); } + +/* ============================================================ + MOBILE BOTTOM NAV (≤640 only) + ============================================================ */ +.bottom-nav { + position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; + background: var(--canvas); + border-top: 1px solid var(--hairline); + display: none; +} +.bottom-nav-inner { + display: flex; justify-content: space-around; align-items: center; + min-height: 60px; + font-family: var(--font-ui); +} +.bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; color: var(--ink-muted); text-decoration: none; font-size: 10px; letter-spacing: 0.04em; } +.bn-item .ic { font-size: 20px; } +.bn-item.active { color: var(--ink); } +.bn-item.active .ic { color: var(--accent); } + +/* Sections drawer via

+ + +

+ +

World Dispatch

The Quiet Reshaping of the Southern Harbor: How Old Wharves Found New Hands

After decades of decline, the docklands cooperative is being rebuilt from the waterline up — and the tide of labour is turning with it.

+ +

Harbour at dawn — + Fig. 1 + Plate No. 12-A • A. Voss / Kontra +

By M. Kestrel • Harbor Desk • 6 min read

+ + +

Topics

+ +

+ World + Arctic Council Opens Its Least-Read Agenda in a Decade + A modest, dry procedural document — and its one buried line + By N. Harlow + More World +

+ +

+ Politics + The Two-Party Primary That Never Had a Crowd + Voter lists up, enthusiasm down — how the ground shifted anyway + By P. Vela + More Politics +

+ +

+ Culture + A Micro-Press Keeps the Long Essay Alive at 16 Pages + Paper, price of ink, and why short-run still sells + By S. Grey + More Culture +

+ +

+ Tech + The Local AI Box That Runs Entirely on a Tennis Ball + A one-RPi coop build, and what it does better than cloud + By J. Quin + More Tech +

+ +

+ + +

Latest

+ + + Business + The Corner Bank That Trades in Hours, Not Percent + A cooperative credit union turns time-banking into a real line of credit. + By R. Hale • 5 min read + + + + Opinion + Why I'm Done Arguing About the Font + A designer's confession: the real argument was never about the pixels. + By I. Marlow • 4 min read + + + + World + The River Border Nobody Can Agree Where It Is + Two towns, one floodplain, and a surveyor's error from 1893. + By N. Harlow • 7 min read + + + + Culture + Notes from a Darkroom That Still Develops Film + Silver halide survives — barely — in one municipal basement. + By L. Arden • 3 min read + + +

+ +

+ + + + + + + + + + + \ No newline at end of file