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

Tags at the end of a page: «ٹیگ» at the start of the line, the tags following it on the same line and wrapping across the width when opened (a sample on /design)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-10 00:24:30 +02:00
parent faf8931f44
commit aa57dcd78c
3 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/TagsBox.astro
View File

@ -1,12 +1,14 @@
---
// a page's tags, folded away at the end of its content (#52): "ٹیگ" and how many; open to see the chips
import Tags from './Tags.astro';
// a page's tags at the end of its content (#52): «ٹیگ» and how many, at the start of the line; opened, the tags follow it
// on the same line and wrap across the content's width. A visually hidden checkbox holds open/closed (no script needed)
import { ud } from '../lib/urdu';
const { tags } = Astro.props as { tags: { type: string; name: string }[] };
const href = (t: { type: string; name: string }) => `/tag/${encodeURIComponent(t.type)}/${encodeURIComponent(t.name)}`;
---
{tags.length > 0 && (
<details class="tags-box">
<summary>ٹیگ <small class="muted">{ud(tags.length)}</small></summary>
<Tags tags={tags} />
</details>
<div class="tags-box">
<input type="checkbox" id="tags-open" class="sr-only" />
<label for="tags-open" class="tags-toggle">ٹیگ <small class="muted">{ud(tags.length)}</small></label>
{tags.map((t) => <a class="tag-chip" href={href(t)}><small>{t.type}</small> {t.name}</a>)}
</div>
)}

4
web/src/pages/design.astro
View File

@ -3,6 +3,7 @@
// Switch palette, light/dark and font from the header's display settings.
import Base from '../layouts/Base.astro';
import Icon from '../components/Icon.astro';
import TagsBox from '../components/TagsBox.astro';
if (import.meta.env.PROD) return new Response(null, { status: 404 });
const colours = [
['surfaces', ['surface-page', 'surface-raised', 'surface-poem', 'surface-sunken']],
@ -72,6 +73,9 @@ const radii = ['sm', 'md', 'lg', 'pill'];
<span class="status s-published">شائع شدہ</span><span class="status s-returned">واپس</span>
</p>
<h2>ٹیگ (صفحے کے آخر میں)</h2>
<TagsBox tags={['عشق', 'فراق', 'وصال', 'تصوف', 'شراب', 'بہار', 'خزاں', 'دل', 'حسن', 'وفا', 'جفا', 'تقدیر', 'دنیا', 'موت', 'زندگی', 'یاد'].map((name, i) => ({ type: i % 3 ? 'موضوع' : 'صنف', name }))} />
<h2>خانے</h2>
<form class="account-form" onsubmit="return false">
<label>نام <input value="مرزا غالب" /></label>

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

@ -912,15 +912,17 @@ p, li { text-wrap: pretty; }
.c-menu i { width: 17px; height: 17px; background-color: var(--text-muted); }
.c-menu .g-bm { --m: var(--bm-outline); } .c-menu [data-on] .g-bm { --m: var(--bm-filled); background-color: var(--active); }
.c-menu .g-nt { --m: var(--nt-outline); } .c-menu .g-sh { --m: var(--sh-mask); } .c-menu .g-dl { --m: var(--dl-mask); }
/* a page's tags, folded at the end of its content */
.tags-box { max-width: 760px; margin: 16px auto 10px; text-align: center; }
.tags-box > summary { display: inline-flex; align-items: center; gap: 6px; padding: 1px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
background: var(--surface-sunken); font: var(--fs-sm)/1.8 var(--font-ui); cursor: pointer; list-style: none; }
.tags-box > summary::-webkit-details-marker { display: none; }
.tags-box > summary::after { content: '⌄'; transition: transform .2s; }
.tags-box[open] > summary::after { transform: rotate(180deg); }
.tags-box > summary:hover { border-color: var(--active); color: var(--active); }
.tags-box .tag-chips { margin-top: 10px; }
/* a page's tags at the end of its content: «ٹیگ» at the start of the line; opened, the tags follow it and wrap across the width */
.tags-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 10px; }
.tags-box > .tag-chip { display: none; }
.tags-box > :checked ~ .tag-chip { display: inline-flex; animation: rise .2s ease-out both; }
.tags-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 1px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
background: var(--surface-sunken); font: var(--fs-sm)/1.8 var(--font-ui); cursor: pointer; user-select: none; }
.tags-toggle::after { content: '⌄'; transition: transform .2s; }
.tags-box > :checked + .tags-toggle { border-color: var(--active); color: var(--active); }
.tags-box > :checked + .tags-toggle::after { transform: rotate(-90deg); } /* points along the line, towards the tags */
.tags-toggle:hover { border-color: var(--active); color: var(--active); }
.tags-box > :focus-visible + .tags-toggle { outline: 2px solid var(--focus); outline-offset: 2px; }
/* how to use the site */
.help { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.help section { padding: 10px 16px 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-raised); }