From ada721fd6d7e8c1a151f8af8d8834e65fe5ce1aa Mon Sep 17 00:00:00 2001 From: Anas Rashid Date: Fri, 9 Oct 2026 15:56:56 +0200 Subject: [PATCH] =?UTF-8?q?Design=20system:=20colour=20tokens=20named=20by?= =?UTF-8?q?=20role=20(surfaces,=20text,=20link,=20accent,=20active,=20focu?= =?UTF-8?q?s,=20ok,=20danger),=20each=20palette=20written=20once=20with=20?= =?UTF-8?q?light-dark();=20radius,=20type=20and=20shadow=20scales;=20one?= =?UTF-8?q?=20base=20for=20every=20button,=20chip=20and=20tab=20and=20one?= =?UTF-8?q?=20for=20every=20text=20box;=20a=20/design=20reference=20page?= =?UTF-8?q?=20(dev=20only).=20Phones:=20the=20search=20box=20no=20longer?= =?UTF-8?q?=20overlaps=20the=20header=20icons=20or=20pushes=20the=20page?= =?UTF-8?q?=20sideways=20(its=20own=20row),=20=D8=AF=DB=8C=D9=88=D8=A7?= =?UTF-8?q?=D9=86=20clears=20it,=20poet=20cards=20keep=20whole=20names.=20?= =?UTF-8?q?Arrows=20instead=20of=20=D9=BE=DA=86=DA=BE=D9=84=D8=A7/=D8=A7?= =?UTF-8?q?=DA=AF=D9=84=D8=A7,=20an=20exit=20icon=20for=20full-screen=20PD?= =?UTF-8?q?Fs,=20an=20icon=20toolbar=20in=20the=20editor.=20Long=20half-li?= =?UTF-8?q?nes=20wrap=20centred?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- web/src/components/Icon.astro | 20 +- web/src/lib/pdfreader.ts | 2 +- web/src/pages/[...path].astro | 4 +- web/src/pages/admin/audit.astro | 5 +- web/src/pages/admin/index.astro | 5 +- web/src/pages/design.astro | 105 ++++++++ web/src/pages/ebook/[id].astro | 4 +- web/src/pages/mod/rev/[id].astro | 38 +-- web/src/pages/mod/site.astro | 6 +- web/src/pages/search.astro | 7 +- web/src/styles/global.css | 441 ++++++++++++++++--------------- 11 files changed, 389 insertions(+), 248 deletions(-) create mode 100644 web/src/pages/design.astro diff --git a/web/src/components/Icon.astro b/web/src/components/Icon.astro index 71611e9d..29459cf9 100644 --- a/web/src/components/Icon.astro +++ b/web/src/components/Icon.astro @@ -1,7 +1,7 @@ --- // Icons (Lucide, ISC licence; https://lucide.dev): drawn with currentColor, so they take the colour of their button // or link. Decorative: the button or link carries the words (aria-label/title, or its text). -const { name, size = 20 } = Astro.props as { name: keyof typeof PATHS; size?: number }; +const { name, size = 20, class: cls } = Astro.props as { name: keyof typeof PATHS; size?: number; class?: string }; const PATHS = { admin: '', edit: '', @@ -23,6 +23,7 @@ const PATHS = { undo: '', send: '', save: '', + exitfull: '', full: '', next: '', // points left: forward in a right-to-left page prev: '', @@ -34,6 +35,21 @@ const PATHS = { sun: '', moon: '', external: '', + // editor toolbar + couplet: '', + para: '', + h2: '', + h3: '', + dict: '', + note: '', + variant: '', + redo: '', + keyboard: '', + code: '', + up: '', + down: '', + top: '', + bottom: '', }; --- - + diff --git a/web/src/lib/pdfreader.ts b/web/src/lib/pdfreader.ts index 04c481ff..cf8e10fb 100644 --- a/web/src/lib/pdfreader.ts +++ b/web/src/lib/pdfreader.ts @@ -57,7 +57,7 @@ export async function pdfReader(root: HTMLElement) { const full = root.querySelector('.pdf-full')!; const toggle = () => (document.fullscreenElement ? document.exitFullscreen() : root.requestFullscreen()).catch(() => {}); full.onclick = toggle; - document.addEventListener('fullscreenchange', () => { full.title = document.fullscreenElement === root ? 'پوری اسکرین سے واپس (F)' : 'پوری اسکرین (F)'; show(page); }); + document.addEventListener('fullscreenchange', () => { const on = document.fullscreenElement === root; full.title = on ? 'پوری اسکرین سے واپس (F)' : 'پوری اسکرین (F)'; full.setAttribute('aria-label', on ? 'پوری اسکرین سے واپس' : 'پوری اسکرین'); show(page); }); // a click on the half the book turns towards goes forward pagesBox.onclick = (e) => { const left = e.clientX < pagesBox.getBoundingClientRect().left + pagesBox.clientWidth / 2; step(left === rtl ? 1 : -1); }; document.addEventListener('keydown', (e) => { diff --git a/web/src/pages/[...path].astro b/web/src/pages/[...path].astro index 73b476ee..819fe458 100644 --- a/web/src/pages/[...path].astro +++ b/web/src/pages/[...path].astro @@ -151,8 +151,8 @@ import Icon from '../components/Icon.astro';

کسی لفظ کو منتخب کریں تو اس کے معنی اور تلفظ ساتھ نظر آئیں گے۔

{page.divan && (

diff --git a/web/src/pages/admin/audit.astro b/web/src/pages/admin/audit.astro index 0d60edc3..804ebf26 100644 --- a/web/src/pages/admin/audit.astro +++ b/web/src/pages/admin/audit.astro @@ -1,6 +1,7 @@ --- // Admin: audit log of admin actions import Base from '../../layouts/Base.astro'; +import Icon from '../../components/Icon.astro'; import AdminNav from '../../components/AdminNav.astro'; import { asUser, COOKIE } from '../../lib/auth'; import { ud } from '../../lib/urdu'; @@ -38,9 +39,9 @@ const when = (d: string) => ud(new Date(d).toISOString().slice(0, 16).replace('T {pages > 1 && (

)} diff --git a/web/src/pages/admin/index.astro b/web/src/pages/admin/index.astro index 6b06abdf..df95a90d 100644 --- a/web/src/pages/admin/index.astro +++ b/web/src/pages/admin/index.astro @@ -1,6 +1,7 @@ --- // Admin: users. Password resets happen here on a reader's request (no email server yet). import Base from '../../layouts/Base.astro'; +import Icon from '../../components/Icon.astro'; import AdminNav from '../../components/AdminNav.astro'; import { asUser, COOKIE } from '../../lib/auth'; import { ud } from '../../lib/urdu'; @@ -92,9 +93,9 @@ const link = (n: number) => `/admin?q=${encodeURIComponent(q)}&page=${n}`; {pages > 1 && ( )} diff --git a/web/src/pages/design.astro b/web/src/pages/design.astro new file mode 100644 index 00000000..101d9c31 --- /dev/null +++ b/web/src/pages/design.astro @@ -0,0 +1,105 @@ +--- +// Design system reference (dev only): the real tokens and components from global.css, so it cannot drift. +// Switch palette, light/dark and font from the header's display settings. +import Base from '../layouts/Base.astro'; +import Icon from '../components/Icon.astro'; +if (import.meta.env.PROD) return new Response(null, { status: 404 }); +const colours = [ + ['surfaces', ['surface-page', 'surface-raised', 'surface-poem', 'surface-sunken']], + ['text and lines', ['text', 'text-muted', 'link', 'heading', 'border', 'line']], + ['brand and accent', ['brand', 'accent', 'accent-soft', 'active', 'focus']], + ['roles', ['action', 'action-ink', 'ok', 'danger']], +] as const; +const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl']; +const radii = ['sm', 'md', 'lg', 'pill']; +--- + +

ڈیزائن سسٹم

+

رنگ، خط اور روشنی اوپر کی ترتیبات سے بدلیں

+ +
+

رنگ

+ {colours.map(([group, names]) => ( +
+ {group} + {names.map((n) => --{n})} +
+ ))} + +

خط

+ {sizes.map((s) =>

--fs-{s} دل ہی تو ہے نہ سنگ و خشت درد سے بھر نہ آئے کیوں

)} + +

گولائی

+
{radii.map((r) => --r-{r})}
+ +

بٹن

+
+ + + + + + + + +
+
+ + + + + + +
+ +

ایڈیٹر

+ + +

چپس اور نشان

+

عشق ۱۲فراق ۴

+
+ + +
+

+ جمع شدہمنظور شدہ + شائع شدہواپس +

+ +

خانے

+ + +

کارڈ

+
دیوانِ غالب ۲۳۴خطوط
+
مرزا غالب۱۷۹۷ – ۱۸۶۹
+

بارہویں صدی ہجری

+ +

شعر

+
+

دل ہی تو ہے نہ سنگ و خشت درد سے بھر نہ آئے کیوں

روئیں گے ہم ہزار بار کوئی ہمیں ستائے کیوں

+

دیر نہیں حرم نہیں در نہیں آستاں نہیں

بیٹھے ہیں رہ گزر پہ ہم غالب ہمیں اٹھائے کیوں

+
+
+ +

تلاش

+
غزل ۱۲

دل ہی تو ہے نہ سنگ و خشت

+
۱۲۳
+
+ + + diff --git a/web/src/pages/ebook/[id].astro b/web/src/pages/ebook/[id].astro index 668f8e46..40fb9905 100644 --- a/web/src/pages/ebook/[id].astro +++ b/web/src/pages/ebook/[id].astro @@ -51,7 +51,7 @@ import Icon from '../../components/Icon.astro'; صفحہ از … - + {b.published && } @@ -64,7 +64,7 @@ import Icon from '../../components/Icon.astro'; {b.kind === 'epub' && ( <>
- + )}