From b4ef7b8ed15410a88059b97ee62f4aa3f4f28d71 Mon Sep 17 00:00:00 2001 From: m5r Date: Tue, 20 Oct 2026 14:57:27 +0200 Subject: [PATCH] website: plan records the approved look, three install tabs and phone screenshots --- website/PLAN.md | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/website/PLAN.md b/website/PLAN.md index 1701025..05a3c5c 100644 --- a/website/PLAN.md +++ b/website/PLAN.md @@ -1,6 +1,6 @@ # nxdns.sh — marketing and docs website plan -Agreed in an interview on 2026-08-15, revised on 2026-10-02 and 2026-10-19 (screenshots in, section order set, the personal story moved to the owner's blog). This directory will hold the site's source. +Agreed in an interview on 2026-08-15, revised on 2026-10-02, 2026-10-19 (screenshots in, section order set, the personal story moved to the owner's blog) and 2026-10-20 (install tabs, phone and light/dark screenshots). This directory will hold the site's source. ## Purpose @@ -21,8 +21,8 @@ Convince, then teach. A marketing front page sells the project; the docs sit one Four sections, in this order: -1. Hero: the README pitch — "A DNS sinkhole for your LAN. It blocks the names you do not want, and forwards the rest over an encrypted connection." — and a copyable install command in two tabs: Docker compose first, the signed tarball second. The registry allows anonymous pulls (verified 2026-10-02 against v0.0.21), so the Docker tab works without an account. -2. Screenshots of the web UI, taken from a running instance with realistic data: Overview, Activity (with a query's provenance), Clients, Diagnostics. +1. Hero: the README pitch — "A DNS sinkhole for your LAN. It blocks the names you do not want, and forwards the rest over an encrypted connection." — with the README's flow diagram animated. The install commands sit in their own section near the end, in three tabs: docker, tarball, nix. Each tab is a complete path or names the guide that finishes it; the docker tab writes the smallest config that starts, so nobody faces an empty file. Commands use no shell variables and plain `curl -O`. The registry allows anonymous pulls (verified 2026-10-02 against v0.0.21), so the Docker tab works without an account. The site goes live only with a release that contains aa8c9e2 (the compose file pins its own version, so the tab ends in a plain `docker compose up -d`) and f351469 (the `services.nxdns` NixOS module the nix tab uses): 0.0.23 or later. +2. Screenshots of the web UI, taken from a running instance with realistic data: Overview, Activity, Query detail, Clients, Diagnostics. Each comes in the admin UI's light and dark theme, behind a light/dark switch with light first. Phones get their own set, captured at a 390px viewport where the admin UI switches to its drawer layout, served through ``, so a phone shows readable screens instead of a shrunken desktop. All twenty images come from one session on the release the site launches with; the current set is 0.0.21 desktop-only. 3. Feature grid: filtering, config-as-code, DoH/DoT, per-client groups, metrics, query log. 4. Comparison table vs Pi-hole, AdGuard Home, Technitium — only to help people choose. Seven rows: how it ships; config as a file in git that the tool converges onto; encrypted upstreams built in; serves DoH/DoT to clients; signed, reproducible releases; DHCP server; DNSSEC validation. The last two are rows nxdns loses, kept because a table that only lists wins does not help anyone choose. Competitor cells were checked against Pi-hole 6.5 (FTL 6.8), AdGuard Home 0.107.79 and Technitium 15.6.2 on 2026-10-19. @@ -36,10 +36,16 @@ The pitch leads with what nxdns does, not with attacks on the incumbents. The pa ## Look -- Clean technical. Light default with a dark toggle. -- Orange/amber accent. -- Brand is the lowercase `nxdns` wordmark in a distinctive typeface. No drawn logo. -- Copy tone: the honest, direct voice the docs already use, about the tool. The personal story is the blog's. +Approved on 2026-10-20 from a local mock (concept 2), after one rejected direction that copied Wispr Flow's landing page too closely. The mock is the reference for the build. + +- Light only. No dark mode, no toggle. Warm paper, ink and amber: paper `#f5f2ea`, card `#fbf9f4`, ink `#1c1b18`, muted `#5f5b52`, amber `#f2a93b`, amber text `#a14d0a`. Every text pair passes 4.5:1. Two sections (screenshots, install) sit on rounded ink slabs. +- Type: Fraunces for headings and the wordmark, Figtree for body text, JetBrains Mono for labels and code. All three self-hosted and subset; no request leaves for Google Fonts. +- Brand is the lowercase `nxdns` wordmark in Fraunces with an amber `x`. No drawn logo. +- Section labels are dig-style comments: `;; ANSWER SECTION`, `;; VERIFY`, `;; FEATURES`. The footer ends with a zone-file line: `nxdns.sh. 3600 IN TXT "…"`. +- The hero is the README's flow diagram, animated: one query at a time travels from the devices to nxdns, a tag shows the decision, and the packet goes on to the upstream or the sinkhole and back. Slow enough to read. A still frame for `prefers-reduced-motion`. +- No illustrations, unless an image model makes them. +- Design fundamentals from the emil-design-engineering rules, not from any one site's look: no layout shift (tab panels share one grid cell), 44px tap targets, hover only under `(hover: hover)`, copy buttons on code, grey/black/white focus rings. +- Copy tone: the honest, direct voice the docs already use, about the tool. The personal story is the blog's. No personal email address on the site. ## Links @@ -47,5 +53,4 @@ Source links point to `git.mial.net/mokhtar/nxdns` only. No GitHub mirror. ## Open questions -1. Wordmark typeface — resolve in the design pass. -2. Re-check the comparison cells against the then-current competitor versions before publication. AdGuard Home had a 1.0 beta on 2026-09-30, so its cells are the most likely to move. +1. Re-check the comparison cells against the then-current competitor versions before publication. AdGuard Home had a 1.0 beta on 2026-09-30, so its cells are the most likely to move.