@edoxen/browser 0.1.0

package/src/astro/components/PrevNextNav.astro

@@ -0,0 +1,62 @@
+---
+interface Props {
+  prev?: { urn: string; title: string }
+  next?: { urn: string; title: string }
+  basePath: string
+}
+const { prev, next, basePath } = Astro.props
+---
+
+{(prev || next) && (
+  <nav class="edoxen-prev-next" aria-label="Adjacent items">
+    <div class="edoxen-prev-next__cell">
+      {prev && (
+        <a href={`${basePath}/${encodeURIComponent(prev.urn)}`} rel="prev">
+          <span class="edoxen-prev-next__label">← Previous</span>
+          <span class="edoxen-prev-next__title">{prev.title}</span>
+        </a>
+      )}
+    </div>
+    <div class="edoxen-prev-next__cell edoxen-prev-next__cell--right">
+      {next && (
+        <a href={`${basePath}/${encodeURIComponent(next.urn)}`} rel="next">
+          <span class="edoxen-prev-next__label">Next →</span>
+          <span class="edoxen-prev-next__title">{next.title}</span>
+        </a>
+      )}
+    </div>
+  </nav>
+)}
+
+<style>
+.edoxen-prev-next {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--edoxen-color-border);
+}
+.edoxen-prev-next__cell--right {
+  text-align: right;
+}
+.edoxen-prev-next__cell a {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--edoxen-color-border);
+  border-radius: var(--edoxen-radius-sm);
+  background: var(--edoxen-color-surface);
+}
+.edoxen-prev-next__label {
+  font-size: 0.75rem;
+  color: var(--edoxen-color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.edoxen-prev-next__title {
+  font-weight: 500;
+  color: var(--edoxen-color-text);
+}
+</style>

package/src/astro/components/ReferenceDocuments.astro

@@ -0,0 +1,38 @@
+---
+import type { SourceUrl, Url } from '@edoxen/edoxen'
+
+interface Props {
+  sources?: readonly SourceUrl[]
+  urls?: readonly Url[]
+}
+const { sources, urls } = Astro.props
+const items: { href: string; label: string; kind?: string }[] = []
+for (const s of sources ?? []) {
+  items.push({ href: s.ref, label: s.format ?? 'document', kind: s.kind })
+}
+for (const u of urls ?? []) {
+  items.push({ href: u.ref, label: u.kind ?? 'document', kind: u.kind })
+}
+---
+
+{items.length > 0 && (
+  <ul class="edoxen-reference-docs">
+    {items.map((item) => (
+      <li>
+        <a href={item.href} rel="noopener">
+          {item.label}{item.kind && item.kind !== 'document' ? ` (${item.kind})` : ''}
+        </a>
+      </li>
+    ))}
+  </ul>
+)}
+
+<style>
+.edoxen-reference-docs {
+  list-style: square;
+  padding-left: 1.5rem;
+}
+.edoxen-reference-docs li {
+  margin: 0.25rem 0;
+}
+</style>

package/src/astro/components/UrnBar.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  urn: string
+  label?: string
+  copyable?: boolean
+}
+const { urn, label = 'URN', copyable = true } = Astro.props
+---
+
+<div class="edoxen-urn-bar">
+  <span class="edoxen-urn-bar__label">{label}</span>
+  <code class="edoxen-urn-bar__value">{urn}</code>
+  {copyable && <urn-copy data-text={urn} data-label={label}></urn-copy>}
+</div>
+
+<style>
+.edoxen-urn-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid var(--edoxen-color-border);
+  border-radius: var(--edoxen-radius-sm);
+  background: var(--edoxen-color-surface);
+  font-size: 0.85rem;
+}
+.edoxen-urn-bar__label {
+  color: var(--edoxen-color-muted);
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.05em;
+}
+.edoxen-urn-bar__value {
+  font-family: var(--edoxen-font-mono, ui-monospace, monospace);
+}
+.edoxen-urn-bar :global(.edoxen-urn-copy__button) {
+  border: 1px solid var(--edoxen-color-border);
+  background: var(--edoxen-color-background);
+  color: var(--edoxen-color-text);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--edoxen-radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.edoxen-urn-bar :global(.edoxen-urn-copy__button:hover) {
+  background: var(--edoxen-color-accent);
+  color: #fff;
+}
+</style>

package/src/astro/layouts/BaseLayout.astro

@@ -0,0 +1,79 @@
+---
+import type { EdoxenConfig } from '../../config/index.js'
+import { generateCssTokens } from '../../config/index.js'
+
+interface Props {
+  config: EdoxenConfig
+  title?: string
+  description?: string
+  lang?: string
+}
+
+const { config, title, description, lang = config.site.locale } = Astro.props
+const pageTitle = title ?? config.site.title
+const pageDescription = description ?? config.site.description
+const tokens = generateCssTokens(config.theme)
+const canonical = new URL(Astro.url.pathname, config.site.url).toString()
+---
+
+<!doctype html>
+<html lang={lang} data-theme={config.features.darkMode ? 'auto' : 'light'}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{pageTitle}</title>
+    <meta name="description" content={pageDescription} />
+    <link rel="canonical" href={canonical} />
+    {config.theme.logos.favicon && (
+      <link rel="icon" href={config.theme.logos.favicon} />
+    )}
+    <meta property="og:title" content={pageTitle} />
+    <meta property="og:description" content={pageDescription} />
+    <meta property="og:url" content={canonical} />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={pageTitle} />
+    <meta name="twitter:description" content={pageDescription} />
+    <style is:global set:html={tokens} />
+    <slot name="head" />
+  </head>
+  <body>
+    <header class="edoxen-header">
+      <a href="/" class="edoxen-header__brand">
+        {config.theme.logos.primary && (
+          <img src={config.theme.logos.primary} alt={config.site.title} />
+        )}
+        <span>{config.site.title}</span>
+      </a>
+      <nav class="edoxen-header__nav" aria-label="Primary">
+        {config.nav.map((item) => (
+          !item.locale || item.locale === lang
+            ? <a href={item.href}>{item.label}</a>
+            : null
+        ))}
+      </nav>
+      {config.features.darkMode && <theme-toggle></theme-toggle>}
+    </header>
+    <main class="edoxen-main">
+      <slot />
+    </main>
+    <footer class="edoxen-footer">
+      {config.theme.logos.footer && (
+        <img src={config.theme.logos.footer} alt="" />
+      )}
+      <ul class="edoxen-footer__social">
+        {config.social.map((s) => (
+          <li><a href={s.href}>{s.label}</a></li>
+        ))}
+      </ul>
+      <p>Powered by <a href="https://edoxen.github.io">Edoxen</a>.</p>
+    </footer>
+    <script>
+      import '../../islands/theme-toggle.ts'
+      import '../../islands/urn-copy.ts'
+      import '../../islands/search-filter.ts'
+      import '../../islands/section-tabs.ts'
+      import '../../islands/decade-scroller.ts'
+      import '../../islands/print-button.ts'
+    </script>
+  </body>
+</html>

package/src/astro/layouts/DecisionLayout.astro

@@ -0,0 +1,21 @@
+---
+import BaseLayout from './BaseLayout.astro'
+import type { EdoxenConfig } from '../../config/index.js'
+import type { DecisionListItem } from '../../data/index.js'
+
+interface Props {
+  config: EdoxenConfig
+  item: DecisionListItem
+}
+const { config, item } = Astro.props
+const title = `${item.title} — ${config.site.title}`
+---
+
+<BaseLayout config={config} title={title} description={item.kind}>
+  <article class="edoxen-decision">
+    <a href="/decisions">← Decisions</a>
+    <h1>{item.title}</h1>
+    <p><code>{item.urn}</code></p>
+    <slot />
+  </article>
+</BaseLayout>

package/src/astro/layouts/MeetingLayout.astro

@@ -0,0 +1,21 @@
+---
+import BaseLayout from './BaseLayout.astro'
+import type { EdoxenConfig } from '../../config/index.js'
+import type { MeetingListItem } from '../../data/index.js'
+
+interface Props {
+  config: EdoxenConfig
+  item: MeetingListItem
+}
+const { config, item } = Astro.props
+const title = `${item.title} — ${config.site.title}`
+---
+
+<BaseLayout config={config} title={title} description={item.identifier}>
+  <article class="edoxen-meeting">
+    <a href="/meetings">← Meetings</a>
+    <h1>{item.title}</h1>
+    {item.startDate && <p>{item.startDate}{item.endDate && ` – ${item.endDate}`}</p>}
+    <slot />
+  </article>
+</BaseLayout>

package/src/astro/pages/404.astro

@@ -0,0 +1,10 @@
+---
+import cfg from 'virtual:edoxen-config'
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout config={cfg} title={`Not found — ${cfg.site.title}`}>
+  <h1>404</h1>
+  <p>The page you requested does not exist.</p>
+  <p><a href="/">Return to {cfg.site.title}</a></p>
+</BaseLayout>

package/src/astro/pages/[lang]/about.astro

@@ -0,0 +1,65 @@
+---
+import cfg from 'virtual:edoxen-config'
+import payloads from 'virtual:edoxen-payloads'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+
+export function getStaticPaths() {
+  return cfg.locales
+    .filter((l) => (l.routePrefix ?? '') !== '')
+    .map((l) => ({ params: { lang: l.code } }))
+}
+
+const decisionCount = payloads.decisionsList.items.length
+const meetingCount = payloads.meetingsList.items.length
+---
+
+<BaseLayout config={cfg} title={`About — ${cfg.site.title}`}>
+  <h1>About</h1>
+
+  <section>
+    <h2>{cfg.site.title}</h2>
+    <p>{cfg.site.description}</p>
+    <dl class="edoxen-stats">
+      <div><dt>Decisions</dt><dd>{decisionCount}</dd></div>
+      <div><dt>Meetings</dt><dd>{meetingCount}</dd></div>
+    </dl>
+  </section>
+
+  <section>
+    <h2>Edoxen format</h2>
+    <p>
+      This site renders meeting and decision data using the
+      <a href="https://edoxen.github.io">Edoxen</a> information model — a
+      YAML-based schema for formal proceedings of standards bodies.
+    </p>
+  </section>
+
+  <section>
+    <h2>Using this site</h2>
+    <ul>
+      <li><strong>Decisions</strong> — browse the resolutions archive.</li>
+      <li><strong>Meetings</strong> — see meetings and their agendas, minutes, and adopted decisions.</li>
+      <li><strong>URNs</strong> — every entity has a stable URN for citation.</li>
+    </ul>
+  </section>
+</BaseLayout>
+
+<style>
+.edoxen-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin: 1rem 0 0;
+}
+.edoxen-stats dd {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.edoxen-stats dt {
+  font-size: 0.85rem;
+  color: var(--edoxen-color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+</style>

package/src/astro/pages/[lang]/decisions/[urn].astro

@@ -0,0 +1,126 @@
+---
+import cfg from 'virtual:edoxen-config'
+import payloads from 'virtual:edoxen-payloads'
+import DecisionLayout from '../../../layouts/DecisionLayout.astro'
+import UrnBar from '../../../components/UrnBar.astro'
+import BodyBadge from '../../../components/BodyBadge.astro'
+import LocaleTabs from '../../../components/LocaleTabs.astro'
+import { decisionJsonLd } from '../../../../seo/index.js'
+import { pickLocalizedValue, availableSpellings } from '../../../../i18n/index.js'
+
+export function getStaticPaths() {
+  const urns = Object.keys(payloads.decisionByUrn)
+  const nonDefault = cfg.locales.filter((l) => (l.routePrefix ?? '') !== '')
+  return urns.flatMap((urn) =>
+    nonDefault.map((loc) => ({
+      params: { lang: loc.code, urn },
+      props: { decision: payloads.decisionByUrn[urn] },
+    })),
+  )
+}
+
+interface Props {
+  decision: typeof payloads.decisionByUrn[string]
+}
+const { decision } = Astro.props
+const locale = Astro.params.lang ?? cfg.site.locale
+const title = pickLocalizedValue(decision.title, locale, decision.urn ?? '')
+const subject = pickLocalizedValue(decision.subject, locale)
+const considering = pickLocalizedValue(decision.considering, locale)
+const actions = decision.actions ?? []
+const considerations = decision.considerations ?? []
+const approvals = decision.approvals ?? []
+const titleSpellings = availableSpellings(decision.title)
+const jsonld = decisionJsonLd(decision, { siteUrl: cfg.site.url, siteTitle: cfg.site.title, defaultLocale: locale })
+---
+
+<DecisionLayout
+  config={cfg}
+  item={{
+    urn: decision.urn ?? '',
+    identifier: (decision.identifier[0]?.prefix ?? '') + '-' + (decision.identifier[0]?.number ?? ''),
+    title,
+    kind: decision.kind ?? '',
+    dates: (decision.dates ?? []).map((d) => ({ type: d.type ?? '', date: d.date ?? '' })),
+    bodyType: decision.body_type,
+  }}
+>
+  <script type="application/ld+json" set:html={JSON.stringify(jsonld)} is:inline />
+  <UrnBar urn={decision.urn ?? ''} />
+
+  {decision.body_type && <p><BodyBadge code={decision.body_type} /></p>}
+
+  {titleSpellings.length > 1 && <LocaleTabs spellings={titleSpellings} active={locale} field="title" />}
+
+  {subject && (
+    <section>
+      <h2>Subject</h2>
+      <p>{subject}</p>
+    </section>
+  )}
+
+  {considering && (
+    <section>
+      <h2>Considering</h2>
+      <p>{considering}</p>
+    </section>
+  )}
+
+  {considerations.length > 0 && (
+    <section>
+      <h2>Considerations</h2>
+      <ul>
+        {considerations.map((c) => (
+          <li>{c.kind}{c.references && c.references.length > 0 ? `: ${c.references.map((r) => r.urn).join(', ')}` : ''}</li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {actions.length > 0 && (
+    <section>
+      <h2>Actions</h2>
+      <ul>
+        {actions.map((a) => (
+          <li>
+            <strong>{a.type}</strong>
+            {a.message && <div>{pickLocalizedValue(a.message, locale)}</div>}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {approvals.length > 0 && (
+    <section>
+      <h2>Approvals</h2>
+      <ul>
+        {approvals.map((a) => (
+          <li>{a.degree}{a.body ? ` — ${a.body}` : ''}{a.date ? ` (${a.date})` : ''}</li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {(decision.dates ?? []).length > 0 && (
+    <section>
+      <h2>Dates</h2>
+      <ul>
+        {(decision.dates ?? []).map((d) => (
+          <li>{d.type}: {d.date}</li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {(decision.urls ?? []).length > 0 && (
+    <section>
+      <h2>Reference documents</h2>
+      <ul>
+        {(decision.urls ?? []).map((u) => (
+          <li><a href={u.ref}>{u.kind ?? 'document'}</a></li>
+        ))}
+      </ul>
+    </section>
+  )}
+</DecisionLayout>

package/src/astro/pages/[lang]/decisions/index.astro

@@ -0,0 +1,27 @@
+---
+import cfg from 'virtual:edoxen-config'
+import payloads from 'virtual:edoxen-payloads'
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import DecisionList from '../../../components/DecisionList.astro'
+
+export function getStaticPaths() {
+  return cfg.locales
+    .filter((l) => (l.routePrefix ?? '') !== '')
+    .map((l) => ({ params: { lang: l.code } }))
+}
+
+const lang = Astro.params.lang ?? cfg.site.locale
+const locEntry = cfg.locales.find((l) => l.code === lang)
+const basePath = locEntry?.routePrefix ? `${locEntry.routePrefix}/decisions` : '/decisions'
+const items = payloads.decisionsList.items
+const endpoint = `${cfg.site.basePath}data/decisions.json`.replace(/\/+/g, '/')
+---
+
+<BaseLayout config={cfg} lang={lang} title={`Decisions — ${cfg.site.title}`}>
+  <h1>Decisions</h1>
+
+  <search-filter data-endpoint={endpoint} data-base-path={basePath}></search-filter>
+  <noscript>
+    <DecisionList items={items} />
+  </noscript>
+</BaseLayout>

package/src/astro/pages/[lang]/index.astro

@@ -0,0 +1,50 @@
+---
+import cfg from 'virtual:edoxen-config'
+import payloads from 'virtual:edoxen-payloads'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+
+export function getStaticPaths() {
+  return cfg.locales
+    .filter((l) => (l.routePrefix ?? '') !== '')
+    .map((l) => ({ params: { lang: l.code } }))
+}
+
+const lang = Astro.params.lang ?? cfg.site.locale
+const locEntry = cfg.locales.find((l) => l.code === lang)
+const urlPrefix = locEntry?.routePrefix ?? ''
+const recentDecisions = payloads.decisionsList.items.slice(0, 5)
+const recentMeetings = payloads.meetingsList.items.slice(0, 3)
+---
+
+<BaseLayout config={cfg} lang={lang}>
+  <section>
+    <h1>{cfg.site.title}</h1>
+    <p>{cfg.site.description}</p>
+  </section>
+
+  <section>
+    <h2>Latest decisions</h2>
+    <ul>
+      {recentDecisions.map((d) => (
+        <li>
+          <a href={`${urlPrefix}/decisions/${encodeURIComponent(d.urn)}`}>{d.title}</a>
+          {d.bodyType && <span class="edoxen-badge">{d.bodyType}</span>}
+        </li>
+      ))}
+    </ul>
+  </section>
+
+  {recentMeetings.length > 0 && (
+    <section>
+      <h2>Recent meetings</h2>
+      <ul>
+        {recentMeetings.map((m) => (
+          <li>
+            <a href={`${urlPrefix}/meetings/${encodeURIComponent(m.urn)}`}>{m.title}</a>
+            {m.startDate && <span> — {m.startDate}</span>}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )}
+</BaseLayout>

package/src/astro/pages/[lang]/meetings/[urn].astro

@@ -0,0 +1,114 @@
+---
+import cfg from 'virtual:edoxen-config'
+import payloads from 'virtual:edoxen-payloads'
+import MeetingLayout from '../../../layouts/MeetingLayout.astro'
+import UrnBar from '../../../components/UrnBar.astro'
+import BodyBadge from '../../../components/BodyBadge.astro'
+import AgendaTable from '../../../components/AgendaTable.astro'
+import MinutesSection from '../../../components/MinutesSection.astro'
+import { meetingJsonLd } from '../../../../seo/index.js'
+import { pickLocalizedValue } from '../../../../i18n/index.js'
+
+export function getStaticPaths() {
+  const urns = Object.keys(payloads.meetingByUrn)
+  const nonDefault = cfg.locales.filter((l) => (l.routePrefix ?? '') !== '')
+  return urns.flatMap((urn) =>
+    nonDefault.map((loc) => ({
+      params: { lang: loc.code, urn },
+      props: { meeting: payloads.meetingByUrn[urn] },
+    })),
+  )
+}
+
+interface Props {
+  meeting: typeof payloads.meetingByUrn[string]
+}
+const { meeting } = Astro.props
+const locale = Astro.params.lang ?? cfg.site.locale
+const title = pickLocalizedValue(meeting.title, locale, meeting.urn ?? '')
+const officers = meeting.officers ?? []
+const agenda = meeting.agenda
+const minutes = meeting.minutes ?? []
+const linkedDecisions = (meeting.decisions ?? []).map((id) =>
+  payloads.decisionsList.items.find((d) =>
+    d.identifier === `${id.prefix}-${id.number}`
+  )
+).filter((d): d is NonNullable<typeof d> => d !== undefined)
+const jsonld = meetingJsonLd(meeting, { siteUrl: cfg.site.url, siteTitle: cfg.site.title, defaultLocale: locale })
+---
+
+<MeetingLayout
+  config={cfg}
+  item={{
+    urn: meeting.urn ?? '',
+    identifier: (meeting.identifier[0]?.prefix ?? '') + '-' + (meeting.identifier[0]?.number ?? ''),
+    title,
+    startDate: meeting.date_range?.start,
+    endDate: meeting.date_range?.end,
+    bodyType: meeting.body_type,
+    city: meeting.city,
+    countryCode: meeting.country_code,
+    status: meeting.status,
+  }}
+>
+  <script type="application/ld+json" set:html={JSON.stringify(jsonld)} is:inline />
+  <UrnBar urn={meeting.urn ?? ''} />
+
+  {meeting.body_type && <p><BodyBadge code={meeting.body_type} /></p>}
+
+  {meeting.city && (
+    <section>
+      <h2>Venue</h2>
+      <p>{meeting.city}{meeting.country_code ? `, ${meeting.country_code}` : ''}</p>
+    </section>
+  )}
+
+  {officers.length > 0 && (
+    <section>
+      <h2>Officers</h2>
+      <ul>
+        {officers.map((o) => (
+          <li>{o.role}{o.person?.name ? `: ${o.person.name}` : ''}</li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {agenda && agenda.items && agenda.items.length > 0 && (
+    <section>
+      <h2>Agenda</h2>
+      <AgendaTable items={agenda.items} locale={locale} />
+    </section>
+  )}
+
+  {minutes.length > 0 && (
+    <section>
+      <h2>Minutes</h2>
+      {minutes.map((m) => (
+        <MinutesSection minutes={m} locale={locale} />
+      ))}
+    </section>
+  )}
+
+  {linkedDecisions.length > 0 && (
+    <section>
+      <h2>Adopted decisions</h2>
+      <ul>
+        {linkedDecisions.map((d) => (
+          <li><a href={`/decisions/${encodeURIComponent(d.urn)}`}>{d.title}</a></li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {(meeting.source_urls ?? []).length > 0 && (
+    <section>
+      <h2>Source documents</h2>
+      <ul>
+        {(meeting.source_urls ?? []).map((s) => (
+          <li><a href={s.ref}>{s.format ?? 'document'}</a></li>
+        ))}
+      </ul>
+    </section>
+  )}
+</MeetingLayout>