Michilis/CashuMints.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ship LNURL mint pages, indexing UI, and reviews rewrite.

Browse Source 
Add lnurl list/detail routes, OG fixtures, i18n strings, and the write/
index client flows so the site surfaces the new mint type end to end.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
michilis
2026-08-22 03:44:43 +02:00
co-authored by Cursor
parent 2a9444942b
commit c74c7fc187
66 changed files with 7603 additions and 1241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/LanguageSwitcher.astro
+113 -101
View File
@@ -1,12 +1,17 @@
---
/**
* The language switcher, in two shapes.
* The language switcher. One control, two placements.
*
* `menu` is the header control: a compact button showing the current language's code,
* opening a searchable list. `inline` is the footer's plain row of links. Both
* are built from the same list and the same hrefs, because they are the same control
* and a reader who finds one and then the other should not have to work out whether
* they do the same thing.
* `bar` is the header's: a compact button showing the current language's code. `footer`
* is the Language column's: the same button, showing the language's full name, opening
* upward so the panel is never clipped off the bottom of the document. Same list, same
* hrefs, same markup, same script — the only differences are which label the trigger
* shows and which way the panel opens, because a reader who finds one and then the
* other should not have to work out whether they do the same thing.
*
* The footer used to carry a second, different control: every locale as a flat link,
* ~20 of them wrapped over two rows. That was not a switcher, it was a wall, and it
* grew by one row every time a language was added.
*
* Text, not flags, in both. A flag is a country: Spanish is not Spain, Dutch is not the
* Netherlands, and English belongs to nobody in particular. Each language is written in
@@ -15,22 +20,24 @@
* Every link points at this same page in that language, built from the unprefixed path,
* so this works identically on a mint page: /mint/kashu.me and /es/mint/kashu.me are
* the same mint. There is no "switch to Spanish and land on the home page" case, which
* is the usual failure of a switcher that only knows about the site root.
* is the usual failure of a switcher that only knows about the site root. They are real
* `<a href>` elements, so a crawler follows them and a reader with no JavaScript uses
* them.
*
* The header shape is a `<details>` rather than a scripted dropdown. It opens, closes
* and takes the keyboard with no JavaScript at all, which matters because the whole
* point of this control is being able to leave a page you cannot read. The script below
* only adds what `<details>` does not do by itself: closing on Escape and on a click
* elsewhere.
* The control is a `<details>` rather than a scripted dropdown. It opens, closes and
* takes the keyboard with no JavaScript at all, which matters because the whole point
* of this control is being able to leave a page you cannot read. The script below only
* adds what `<details>` does not do by itself: closing on Escape and on a click
* elsewhere, and filtering the list as you type.
*/
import { LOCALES, localePath, useI18n } from '../i18n';
import { LOCALES, localePath, localeInfo, useI18n } from '../i18n';
import { pageLocale } from '../i18n/paths';
interface Props {
/** `menu` is the header control; `inline` is the footer row. */
variant?: 'menu' | 'inline';
/** `bar` is the header control; `footer` is the one in the Language column. */
placement?: 'bar' | 'footer';
}
const { variant = 'inline' } = Astro.props;
const { placement = 'bar' } = Astro.props;
const { locale, path } = pageLocale(Astro);
const t = useI18n(locale);
@@ -43,76 +50,59 @@ const links = LOCALES.map((other) => ({
}));
/*
* Two letters in the header, because the full name of the current language is a word
* the reader already knows they are reading. The code is the locale's own, uppercased,
* so a fourth language needs nothing added here.
* The header shows two letters, because the full name of the current language is a word
* the reader already knows they are reading, and the header row is full. The footer
* column has the width for the name and no adjacent nav to crowd, and a column headed
* "Language" reads better with "Nederlands" under it than with "NL".
*/
const currentCode = locale.toUpperCase();
const trigger = placement === 'footer' ? localeInfo(locale).label : locale.toUpperCase();
/*
* The search field earns its place at 20-odd languages and is noise at three. It is
* the one part of this control that needs JavaScript, so it is also the one part that
* is allowed to be absent: every link is in the panel either way.
*/
const searchable = LOCALES.length > 8;
---
{
variant === 'menu' ? (
<details class="lang-menu" data-lang-menu>
<summary aria-haspopup="true">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="12" r="9" />
<path d="M3 12h18M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9Z" />
</svg>
{/* The code alone does not say what it is, so the label is in the tree for a
screen reader and out of the way for everyone else. */}
<span class="sr-only">{t('lang.label')}</span>
<span class="lang-code">{currentCode}</span>
<svg class="lang-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="m6 9 6 6 6-6" />
</svg>
</summary>
<details class={`lang-menu lang-${placement}`} data-lang-menu>
<summary aria-haspopup="true">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="12" r="9" />
<path d="M3 12h18M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9Z" />
</svg>
{/* The trigger label does not say what it is on its own, so the word is in the
accessibility tree and out of the way for everyone else. */}
<span class="sr-only">{t('lang.label')}</span>
<span class="lang-current">{trigger}</span>
<svg class="lang-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="m6 9 6 6 6-6" />
</svg>
</summary>
<div class="lang-panel">
<div class="lang-search">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
<input
type="search"
placeholder={`${t('lang.label')}…`}
aria-label={t('lang.switcher')}
autocomplete="off"
spellcheck="false"
data-lang-search
/>
</div>
<nav class="lang-list" aria-label={t('lang.switcher')}>
{
links.map((other) => (
<a
href={other.href}
hreflang={other.code}
lang={other.code}
aria-current={other.current ? 'true' : undefined}
data-lang-option
data-search={`${other.label} ${other.code}`}
>
<span>{other.label}</span>
<span class="lang-option-code">{other.code.toUpperCase()}</span>
{other.current && (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="m5 13 4 4L19 7" />
</svg>
)}
</a>
))
}
</nav>
<div class="lang-panel">
{searchable && (
<div class="lang-search">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
<input
type="search"
placeholder={`${t('lang.label')}…`}
aria-label={t('lang.switcher')}
autocomplete="off"
spellcheck="false"
data-lang-search
/>
</div>
</details>
) : (
<nav class="lang-switch" aria-label={t('lang.switcher')}>
)}
<nav class="lang-list" aria-label={t('lang.switcher')}>
{
/*
* The current language is still a link, and it goes where it says it goes.
* `aria-current` is what tells a screen reader it is where you already are, and
* the weight is what tells everyone else.
* `aria-current` is what tells a screen reader it is where you already are; the
* weight and the tick are what tell everyone else.
*/
links.map((other) => (
<a
@@ -120,18 +110,24 @@ const currentCode = locale.toUpperCase();
hreflang={other.code}
lang={other.code}
aria-current={other.current ? 'true' : undefined}
data-lang-option
data-search={`${other.label} ${other.code}`}
>
{other.label}
<span>{other.label}</span>
<span class="lang-option-code">{other.code.toUpperCase()}</span>
{other.current && (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="m5 13 4 4L19 7" />
</svg>
)}
</a>
))
}
</nav>
)
}
</div>
</details>
<style>
/* ---------- the header control ---------- */
.lang-menu { position: relative; flex-shrink: 0; }
.lang-menu summary {
@@ -148,14 +144,13 @@ const currentCode = locale.toUpperCase();
.lang-menu summary:hover { color: var(--text); background: var(--card2); }
.lang-menu[open] summary { color: var(--text); background: var(--card2); }
.lang-code { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
.lang-caret { color: var(--faint); transition: transform var(--dur-quick) var(--ease-out); }
.lang-menu[open] .lang-caret { transform: rotate(180deg); }
/* The same panel the account menu uses, so the two controls beside each other in the
header open into the same shape. */
.lang-panel {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
position: absolute; z-index: 60;
width: min(260px, calc(100vw - 24px));
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
padding: 6px;
@@ -181,11 +176,11 @@ const currentCode = locale.toUpperCase();
.lang-search input::-webkit-search-cancel-button { cursor: pointer; }
.lang-list {
max-height: min(360px, calc(100dvh - 150px));
margin-top: 6px; padding-right: 2px;
display: flex; flex-direction: column; gap: 2px;
overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.lang-search + .lang-list { margin-top: 6px; padding-right: 2px; }
.lang-list a {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px;
@@ -201,6 +196,11 @@ const currentCode = locale.toUpperCase();
}
.lang-list a svg { color: var(--amber); flex-shrink: 0; }
/* ---------- the header placement ---------- */
.lang-bar .lang-current { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
.lang-bar .lang-panel { top: calc(100% + 8px); right: 0; }
/*
* Narrow: the globe alone.
*
@@ -211,37 +211,49 @@ const currentCode = locale.toUpperCase();
* accessible name stays either way, because it was never the visible text.
*/
@media (max-width: 760px) {
.lang-menu summary { padding: 7px 8px; gap: 0; }
.lang-code,
.lang-caret { display: none; }
.lang-bar summary { padding: 7px 8px; gap: 0; }
.lang-bar .lang-current,
.lang-bar .lang-caret { display: none; }
}
@media (max-width: 420px) {
.lang-menu summary { padding: 6px 6px; }
.lang-bar summary { padding: 6px 6px; }
}
/* ---------- the footer row ---------- */
/* ---------- the footer placement ---------- */
.lang-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lang-switch a {
font-size: 12.5px; color: var(--faint);
transition: color var(--dur-quick);
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current] { color: var(--text); font-weight: 600; }
/*
* Aligned with the column's other text rather than inset by the trigger's padding,
* so the globe sits on the same vertical line as the "Language" heading above it and
* the links in the columns beside it.
*/
.lang-footer { display: inline-block; margin-inline-start: -10px; }
.lang-footer summary { font-size: 13.5px; }
.lang-footer .lang-current { font-weight: 500; }
/*
* Opens upward. The control is a few hundred pixels from the bottom of the document,
* so a panel hanging below it would be a scroll into empty space at best and clipped
* at worst. `inset-inline-start: 0` rather than `left`, because two of the shipped
* locales are right-to-left and the panel should hang from the trigger's leading
* edge in both directions.
*/
.lang-footer .lang-panel { bottom: calc(100% + 8px); inset-inline-start: 0; }
.lang-footer .lang-list { max-height: min(300px, calc(100dvh - 200px)); }
</style>
<script>
import { onReady } from '../scripts/reveal';
/**
* The two things `<details>` does not do on its own.
* The three things `<details>` does not do on its own.
*
* Everything else about this control (open, close, keyboard, focus) is the element's
* own behaviour and works with this script blocked, which is the point of using one.
*
* Attached to the document once rather than to the element, because the view
* transition router replaces the header on every navigation and a per-element
* listener would be re-bound, and leak, once per page visited.
* transition router replaces the header and the footer on every navigation and a
* per-element listener would be re-bound, and leak, once per page visited. One
* listener set serves both placements.
*/
let wired = false;