anas/divan
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Poet cards: bookmark in the top-left corner (saved cards keep their size); Hijri and Gregorian years on separate lines, more padding

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-09 01:02:28 +02:00
parent 20df27bb26
commit 6451b615bd
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/lib/urdu.ts
View File

@ -11,8 +11,11 @@ export const centuryName = (c: number | null) => (c ? `${ORDINALS[c] ?? ud(c)}
const span = (a: number | null, b: number | null, mark: string) =>
a || b ? `${a ? ud(a) : '؟'} – ${b ? ud(b) : '؟'} ${mark}` : '';
// Hijri and Gregorian (عیسوی): "۱۲۹۴ – ۱۳۵۷ ھ · ۱۸۷۷ – ۱۹۳۸ ء"
export const years = (p: { birth_year_ah: number | null; death_year_ah: number | null; birth_year_ce?: number | null; death_year_ce?: number | null }) =>
[span(p.birth_year_ah, p.death_year_ah, 'ھ'), span(p.birth_year_ce ?? null, p.death_year_ce ?? null, 'ء')].filter(Boolean).join(' · ');
type Years = { birth_year_ah: number | null; death_year_ah: number | null; birth_year_ce?: number | null; death_year_ce?: number | null };
// Hijri and Gregorian spans, each on its own (poet cards show them as two lines)
export const yearLines = (p: Years) =>
[span(p.birth_year_ah, p.death_year_ah, 'ھ'), span(p.birth_year_ce ?? null, p.death_year_ce ?? null, 'ء')].filter(Boolean) as string[];
export const years = (p: Years) => yearLines(p).join(' · ');
// search highlighting (same matching rules as the API's search)
export { highlighter } from '../../../api/src/urdu.ts';

6
web/src/pages/index.astro
View File

@ -2,7 +2,7 @@
import Base from '../layouts/Base.astro';
import { api } from '../lib/api';
import { asUser, COOKIE } from '../lib/auth';
import { centuryOf, centuryName, years, ud } from '../lib/urdu';
import { centuryOf, centuryName, yearLines, ud } from '../lib/urdu';
type Poet = { id: number; url: string; nickname: string; birth_year_ah: number | null; death_year_ah: number | null; pin_order: number | null };
const poets = (await api<Poet[]>('/api/poets')) ?? [];
@ -34,7 +34,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
<h2>مقبول شعرا</h2>
<div class="poets">
{pinned.map((p) => (
<a class={card(p)} href={p.url}>{p.nickname}<small>{years(p)}</small></a>
<a class={card(p)} href={p.url}>{p.nickname}{yearLines(p).map((y) => <small>{y}</small>)}</a>
))}
</div>
</section>
@ -47,7 +47,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
{list.map((p) => (
<a class={card(p)} href={p.url}>
{p.nickname}
<small>{years(p)}</small>
{yearLines(p).map((y) => <small>{y}</small>)}
</a>
))}
</div>

6
web/src/styles/global.css
View File

@ -64,10 +64,12 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
.poets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.poet-card {
min-width: 120px; text-align: center; background: var(--paper); border: 1.5px solid var(--border);
border-radius: 999px; padding: 2px 14px; color: var(--ink); transition: transform .25s;
border-radius: 999px; padding: 6px 26px 8px; color: var(--ink); transition: transform .25s; position: relative;
}
/* the bookmark sits in the card's top-left corner, so a saved poet's card keeps its size */
.poet-card.mark-bm::after { position: absolute; top: 12px; left: 18px; margin: 0; }
.poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); }
.poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.hero { text-align: center; }
.hero p { margin: 0; }