From 9de1e78e85b79e51e8534b2316c5132579763dfe Mon Sep 17 00:00:00 2001 From: forzagreen Date: Fri, 16 Oct 2026 16:28:33 +0200 Subject: [PATCH] feat(website): tell returning visitors what is new, once MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A «الجديد» button in the header with a panel that opens by itself when there is news the browser has not seen yet, and closes into localStorage (nothing is sent anywhere). Two kinds of news: - dictionaries added since the last visit, detected from the dictionary ids built into every page (getDictionaryIndex(), one cheap query per build), so a new dictionary announces itself on the next deploy; - features, from the hand-written FEATURES list in src/lib/whatsNew.ts, meant for what a non-technical reader notices. The first entry is the page links to the archive.org scans, with a small CSS animation of a click on the page number opening the scanned page. A first visit records the state silently: everything is new to a first-time visitor. The button reopens the whole list at any time. Same mechanism as the one added to wikitermbase, with its own list. --- CLAUDE.md | 2 + website/src/components/Header.astro | 3 + website/src/components/WhatsNew.astro | 468 ++++++++++++++++++++++++++ website/src/lib/db.ts | 19 ++ website/src/lib/whatsNew.ts | 44 +++ 5 files changed, 536 insertions(+) create mode 100644 website/src/components/WhatsNew.astro create mode 100644 website/src/lib/whatsNew.ts diff --git a/CLAUDE.md b/CLAUDE.md index f8de90d..21130bd 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -69,6 +69,8 @@ Existing violations are recorded in [arabterm/scripts/validation_baseline.json]( [website/](website/) is an [Astro](https://astro.build/) static site (deployed to ) that reads `arabterm.db` at build time (the gh-pages workflow runs `make db` first, since the unpacked file is not in the checkout) via `better-sqlite3` and emits one HTML page per dictionary (paginated 1000 terms / page) plus a per-dict JSON download. It's a third derived view of the DB alongside the SQLite and MariaDB dumps — no JSON is committed. +The «الجديد» button in the header ([WhatsNew.astro](website/src/components/WhatsNew.astro)) tells returning visitors what is new, once: the panel opens by itself when there is unseen news and closing it marks the news seen, in `localStorage` (`whatsNew`: feature ids and largest dictionary id — nothing is sent anywhere). Dictionaries added since the last visit are detected from the dictionary ids built into every page (`getDictionaryIndex()` in `db.ts`), so a new dictionary announces itself on the next deploy. Features are the hand-written `FEATURES` list in [whatsNew.ts](website/src/lib/whatsNew.ts): add an entry (stable `id`, date, plain Arabic for a non-technical reader, optional `media` animation) only for something a visitor of the site notices — never dependency or build changes — and prune entries after a few months. A first visit records the state silently. The same mechanism exists in wikitermbase with its own list. + Legacy unprefixed URLs from the original Angular site (e.g. `/water_engineering/`) are preserved as static HTML redirects to the canonical `name_tech` URL (`/at_water_engineering/`). The legacy slug list lives in `LEGACY_SLUGS` in [website/src/lib/db.ts](website/src/lib/db.ts) — never remove a legacy slug from this list, even if its underlying dictionary changes. [`.github/workflows/gh-pages.yml`](.github/workflows/gh-pages.yml) runs `npm run build` inside `website/` on every push to `main` and uploads `website/dist/` to GitHub Pages. diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro index dd56319..ec89e07 100644 --- a/website/src/components/Header.astro +++ b/website/src/components/Header.astro @@ -1,4 +1,6 @@ --- +import WhatsNew from './WhatsNew.astro'; + const base = import.meta.env.BASE_URL; ---
@@ -11,6 +13,7 @@ const base = import.meta.env.BASE_URL; مسرد الويكي GitHub +
+ + +
+ + + diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts index 5e04891..2c86050 100644 --- a/website/src/lib/db.ts +++ b/website/src/lib/db.ts @@ -118,6 +118,25 @@ export function scanPageUrl( return n < 0 ? dict.archive_org_url : `${dict.archive_org_url}/page/n${n}/mode/1up`; } +export interface DictionaryIndexEntry { + id: number; + name_tech: string; + name_arabic: string; +} + +// Every dictionary by descending id, i.e. most recently added first, without +// the term counts: enough for the "what's new" panel, which every page +// carries. Computed once per build, so it costs nothing per page. +let _index: DictionaryIndexEntry[] | null = null; +export function getDictionaryIndex(): DictionaryIndexEntry[] { + if (!_index) { + _index = db() + .prepare('SELECT id, name_tech, name_arabic FROM dictionary ORDER BY id DESC') + .all() as DictionaryIndexEntry[]; + } + return _index; +} + export function getAllDictionaries(): Dictionary[] { const rows = db() .prepare(`${DICT_SELECT} GROUP BY d.id ORDER BY d.created_at DESC, d.id DESC`) diff --git a/website/src/lib/whatsNew.ts b/website/src/lib/whatsNew.ts new file mode 100644 index 0000000..34e1c9b --- /dev/null +++ b/website/src/lib/whatsNew.ts @@ -0,0 +1,44 @@ +// What returning visitors are told about in the «الجديد» panel of the header +// (components/WhatsNew.astro). Two kinds of news: +// +// * Features: FEATURES below, written by hand. Only put there what a reader +// of the site notices (a new link, a new column, a new page), in plain +// Arabic, no code or version talk. Newest first; drop an entry once it is a +// few months old, the list is meant to stay short. `media` names an +// optional animation of the feature, drawn by WhatsNew.astro. +// +// * Dictionaries: not listed here. The panel compares the dictionary ids +// built into the page with the largest one the visitor has seen, so a new +// dictionary announces itself with the next deploy, with no edit here. +// +// "Seen" lives in localStorage (same as the theme), so it is per browser: +// nothing is sent anywhere. A first visit records the current state +// silently (everything is new to a first-time visitor); from then on, unseen +// news opens the panel once, and closing it marks everything seen. +export interface Feature { + // Keep the ids stable: they are what the browser remembers having seen. + id: string; + date: string; // YYYY-MM-DD, shown as month and year + title: string; + body: string; + media?: 'page-link'; +} + +export const FEATURES: Feature[] = [ + { + id: 'page-links', + date: '2026-10-16', + title: 'رقم الصفحة يفتح القاموس المصوّر', + body: + 'في القواميس الورقية صار رقم الصفحة في جدول المصطلحات رابطًا: اضغط عليه لتفتح الصفحة نفسها من النسخة المصوّرة للقاموس على archive.org، فتتحقّق من المصطلح في مصدره مباشرة.', + media: 'page-link', + }, +]; + +// "أكتوبر 2026": Arabic month name, Western digits like the rest of the site. +export function formatMonth(isoDate: string): string { + const [year, month, day] = isoDate.split('-').map(Number); + return new Intl.DateTimeFormat('ar-u-nu-latn', { month: 'long', year: 'numeric' }).format( + new Date(year, month - 1, day) + ); +}