@edoxen/browser 0.1.0

package/src/islands/search-filter-core.ts

@@ -0,0 +1,89 @@
+export interface SearchableItem {
+  readonly urn: string
+  readonly title: string
+  readonly identifier?: string
+  readonly bodyType?: string
+  readonly kind?: string
+  readonly year?: number
+}
+
+export interface FilterState {
+  readonly query: string
+  readonly bodies: ReadonlySet<string>
+  readonly kinds: ReadonlySet<string>
+  readonly years: ReadonlySet<number>
+}
+
+export const EMPTY_STATE: FilterState = {
+  query: '',
+  bodies: new Set(),
+  kinds: new Set(),
+  years: new Set(),
+}
+
+export function filterItems<T extends SearchableItem>(
+  items: readonly T[],
+  state: FilterState,
+): T[] {
+  const q = state.query.trim().toLowerCase()
+  return items.filter((item) => {
+    if (state.bodies.size > 0 && !state.bodies.has(item.bodyType ?? '')) return false
+    if (state.kinds.size > 0 && !state.kinds.has(item.kind ?? '')) return false
+    if (state.years.size > 0 && !state.years.has(item.year ?? -1)) return false
+    if (q) {
+      const hay = `${item.title} ${item.urn} ${item.identifier ?? ''}`.toLowerCase()
+      if (!hay.includes(q)) return false
+    }
+    return true
+  })
+}
+
+export interface FacetCounts {
+  readonly bodies: ReadonlyMap<string, number>
+  readonly kinds: ReadonlyMap<string, number>
+  readonly years: ReadonlyMap<number, number>
+}
+
+export function countFacets<T extends SearchableItem>(items: readonly T[]): FacetCounts {
+  const bodies = new Map<string, number>()
+  const kinds = new Map<string, number>()
+  const years = new Map<number, number>()
+  for (const item of items) {
+    if (item.bodyType) bodies.set(item.bodyType, (bodies.get(item.bodyType) ?? 0) + 1)
+    if (item.kind) kinds.set(item.kind, (kinds.get(item.kind) ?? 0) + 1)
+    if (typeof item.year === 'number') years.set(item.year, (years.get(item.year) ?? 0) + 1)
+  }
+  return { bodies, kinds, years }
+}
+
+export function toggle<K>(set: ReadonlySet<K>, key: K): Set<K> {
+  const next = new Set(set)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  return next
+}
+
+export function encodeState(state: FilterState): string {
+  const params = new URLSearchParams()
+  if (state.query) params.set('q', state.query)
+  if (state.bodies.size > 0) params.set('bodies', [...state.bodies].sort().join(','))
+  if (state.kinds.size > 0) params.set('kinds', [...state.kinds].sort().join(','))
+  if (state.years.size > 0) params.set('years', [...state.years].sort().map(String).join(','))
+  const s = params.toString()
+  return s ? `#${s}` : ''
+}
+
+export function decodeState(hash: string): FilterState {
+  const trimmed = hash.startsWith('#') ? hash.slice(1) : hash
+  if (!trimmed) return { ...EMPTY_STATE, bodies: new Set(), kinds: new Set(), years: new Set() }
+  const params = new URLSearchParams(trimmed)
+  const bodies = (params.get('bodies') ?? '').split(',').filter(Boolean)
+  const kinds = (params.get('kinds') ?? '').split(',').filter(Boolean)
+  const years = (params.get('years') ?? '').split(',').filter(Boolean).map(Number).filter(Number.isFinite)
+  return {
+    query: params.get('q') ?? '',
+    bodies: new Set(bodies),
+    kinds: new Set(kinds),
+    years: new Set(years),
+  }
+}

package/src/islands/search-filter.ts

@@ -0,0 +1,166 @@
+import {
+  type FilterState,
+  type SearchableItem,
+  EMPTY_STATE,
+  decodeState,
+  encodeState,
+  filterItems,
+  toggle,
+} from './search-filter-core.js'
+
+interface FetchResponse {
+  items: SearchableItem[]
+  facetBodies?: string[]
+  facetKinds?: string[]
+  facetYears?: number[]
+}
+
+function appendListItem(list: ParentNode, item: SearchableItem, basePath: string): void {
+  const li = document.createElement('li')
+  li.className = 'edoxen-search-filter__result'
+  const link = document.createElement('a')
+  link.href = `${basePath}/${encodeURIComponent(item.urn)}`
+  link.textContent = item.title || item.urn
+  li.appendChild(link)
+  if (item.bodyType) {
+    const badge = document.createElement('span')
+    badge.className = 'edoxen-badge'
+    badge.textContent = item.bodyType
+    li.appendChild(badge)
+  }
+  list.appendChild(li)
+}
+
+function makeFacetChip(label: string, count: number, active: boolean, onToggle: () => void): HTMLElement {
+  const btn = document.createElement('button')
+  btn.type = 'button'
+  btn.className = 'edoxen-search-filter__facet'
+  btn.setAttribute('aria-pressed', active ? 'true' : 'false')
+  btn.textContent = `${label} (${count})`
+  btn.addEventListener('click', onToggle)
+  return btn
+}
+
+class SearchFilter extends HTMLElement {
+  private items: SearchableItem[] = []
+  private state: FilterState = { ...EMPTY_STATE, bodies: new Set(), kinds: new Set(), years: new Set() }
+  private basePath = '/decisions'
+  private endpoint = '/data/decisions.json'
+
+  async connectedCallback(): Promise<void> {
+    this.endpoint = this.dataset.endpoint ?? this.endpoint
+    this.basePath = this.dataset.basePath ?? this.basePath
+    this.state = decodeState(window.location.hash)
+
+    this.renderShell()
+
+    if (this.dataset.items) {
+      this.handlePayload(JSON.parse(this.dataset.items) as FetchResponse)
+    } else {
+      try {
+        const res = await fetch(this.endpoint)
+        const payload = (await res.json()) as FetchResponse
+        this.handlePayload(payload)
+      } catch {
+        this.renderError(`Failed to load ${this.endpoint}`)
+      }
+    }
+  }
+
+  private handlePayload(payload: FetchResponse): void {
+    this.items = payload.items
+    this.render()
+  }
+
+  private renderShell(): void {
+    this.innerHTML = ''
+    const form = document.createElement('form')
+    form.className = 'edoxen-search-filter__form'
+    form.setAttribute('role', 'search')
+
+    const input = document.createElement('input')
+    input.type = 'search'
+    input.placeholder = 'Search…'
+    input.value = this.state.query
+    input.setAttribute('aria-label', 'Search decisions')
+    input.addEventListener('input', () => {
+      this.state = { ...this.state, query: input.value }
+      this.syncHash()
+      this.render()
+    })
+    form.appendChild(input)
+
+    const facets = document.createElement('div')
+    facets.className = 'edoxen-search-filter__facets'
+    facets.setAttribute('data-role', 'facets')
+    form.appendChild(facets)
+
+    const results = document.createElement('ul')
+    results.className = 'edoxen-search-filter__results'
+    results.setAttribute('data-role', 'results')
+    form.appendChild(results)
+
+    this.appendChild(form)
+  }
+
+  private render(): void {
+    const facetsEl = this.querySelector('[data-role="facets"]')
+    const resultsEl = this.querySelector('[data-role="results"]')
+    if (!facetsEl || !resultsEl) return
+
+    facetsEl.innerHTML = ''
+    const bodies = new Set<string>()
+    const kinds = new Set<string>()
+    const years = new Set<number>()
+    for (const item of this.items) {
+      if (item.bodyType) bodies.add(item.bodyType)
+      if (item.kind) kinds.add(item.kind)
+      if (typeof item.year === 'number') years.add(item.year)
+    }
+
+    for (const body of [...bodies].sort()) {
+      const chip = makeFacetChip(body, this.items.filter((i) => i.bodyType === body).length, this.state.bodies.has(body), () => {
+        this.state = { ...this.state, bodies: toggle(this.state.bodies, body) }
+        this.syncHash()
+        this.render()
+      })
+      facetsEl.appendChild(chip)
+    }
+    for (const kind of [...kinds].sort()) {
+      const chip = makeFacetChip(kind, this.items.filter((i) => i.kind === kind).length, this.state.kinds.has(kind), () => {
+        this.state = { ...this.state, kinds: toggle(this.state.kinds, kind) }
+        this.syncHash()
+        this.render()
+      })
+      facetsEl.appendChild(chip)
+    }
+
+    resultsEl.innerHTML = ''
+    const matches = filterItems(this.items, this.state)
+    if (matches.length === 0) {
+      const empty = document.createElement('li')
+      empty.className = 'edoxen-empty'
+      empty.textContent = 'No matches.'
+      resultsEl.appendChild(empty)
+      return
+    }
+    for (const item of matches) appendListItem(resultsEl, item, this.basePath)
+  }
+
+  private syncHash(): void {
+    const hash = encodeState(this.state)
+    if (hash !== window.location.hash) {
+      window.history.replaceState(null, '', hash || window.location.pathname)
+    }
+  }
+
+  private renderError(message: string): void {
+    this.innerHTML = ''
+    const p = document.createElement('p')
+    p.className = 'edoxen-search-filter__error'
+    p.textContent = message
+    this.appendChild(p)
+  }
+}
+
+customElements.define('search-filter', SearchFilter)

package/src/islands/section-tabs.ts

@@ -0,0 +1,35 @@
+class SectionTabs extends HTMLElement {
+  connectedCallback(): void {
+    const tabs = Array.from(this.querySelectorAll('[data-spelling]'))
+    if (tabs.length <= 1) return
+
+    const target = this.dataset.target
+    if (!target) return
+
+    tabs.forEach((tab) => {
+      const button = tab as HTMLButtonElement
+      if (button.tagName !== 'BUTTON') return
+      button.addEventListener('click', () => {
+        const spelling = button.dataset.spelling
+        if (!spelling) return
+
+        tabs.forEach((t) => {
+          const other = t as HTMLButtonElement
+          other.setAttribute('aria-pressed', other === button ? 'true' : 'false')
+        })
+
+        const blocks = document.querySelectorAll(`[data-tab-target="${target}"]`)
+        blocks.forEach((block) => {
+          const el = block as HTMLElement
+          const match = el.dataset.spelling === spelling
+          el.hidden = !match
+        })
+      })
+    })
+
+    const firstActive = tabs.find((t) => t.getAttribute('aria-pressed') === 'true') ?? tabs[0]
+    if (firstActive) (firstActive as HTMLButtonElement).click()
+  }
+}
+
+customElements.define('section-tabs', SectionTabs)

package/src/islands/theme-toggle.ts

@@ -0,0 +1,33 @@
+const STORAGE_KEY = 'edoxen-theme'
+const ATTR = 'data-theme'
+
+function applyTheme(next: 'light' | 'dark') {
+  document.documentElement.setAttribute(ATTR, next)
+}
+
+function preferredTheme(): 'light' | 'dark' {
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored === 'light' || stored === 'dark') return stored
+  return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+class ThemeToggle extends HTMLElement {
+  connectedCallback() {
+    const initial = preferredTheme()
+    applyTheme(initial)
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.setAttribute('aria-label', 'Toggle dark mode')
+    btn.textContent = initial === 'dark' ? '☀' : '☾'
+    btn.addEventListener('click', () => {
+      const current = document.documentElement.getAttribute(ATTR) === 'dark' ? 'dark' : 'light'
+      const next = current === 'dark' ? 'light' : 'dark'
+      applyTheme(next)
+      localStorage.setItem(STORAGE_KEY, next)
+      btn.textContent = next === 'dark' ? '☀' : '☾'
+    })
+    this.appendChild(btn)
+  }
+}
+
+customElements.define('theme-toggle', ThemeToggle)

package/src/islands/urn-copy.ts

@@ -0,0 +1,29 @@
+class UrnCopy extends HTMLElement {
+  connectedCallback() {
+    const text = this.dataset.text ?? this.textContent ?? ''
+    if (!text) return
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = 'edoxen-urn-copy__button'
+    btn.setAttribute('aria-label', `Copy ${this.dataset.label ?? 'URN'} to clipboard`)
+    btn.textContent = 'Copy'
+    btn.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(text)
+        btn.textContent = 'Copied'
+        setTimeout(() => {
+          btn.textContent = 'Copy'
+        }, 1500)
+      } catch {
+        btn.textContent = 'Press Ctrl+C'
+        setTimeout(() => {
+          btn.textContent = 'Copy'
+        }, 1500)
+      }
+    })
+    this.innerHTML = ''
+    this.appendChild(btn)
+  }
+}
+
+customElements.define('urn-copy', UrnCopy)

package/src/seo/index.spec.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+import type { Decision, Meeting } from '@edoxen/edoxen'
+
+import { decisionJsonLd, meetingJsonLd } from './index.js'
+
+const ctx = { siteUrl: 'https://example.org', siteTitle: 'X', defaultLocale: 'en' }
+
+const decision = {
+  identifier: [{ prefix: 'TEST', number: '1' }],
+  kind: 'resolution',
+  urn: 'urn:test:resolution:1',
+  body_type: 'committee',
+  doi: '10.63493/test',
+  dates: [
+    { type: 'effective', date: '2024-06-15' },
+    { type: 'published', date: '2024-06-20' },
+  ],
+  title: [{ spelling: 'eng', value: 'First test decision' }],
+  categories: ['Tests'],
+} as unknown as Decision
+
+const meeting = {
+  identifier: [{ prefix: 'TEST', number: '2024' }],
+  type: 'plenary',
+  urn: 'urn:test:meeting:2024',
+  body_type: 'committee',
+  status: 'completed',
+  date_range: { start: '2024-06-15', end: '2024-06-20' },
+  city: 'CNSHA',
+  country_code: 'DE',
+  title: [{ spelling: 'eng', value: '2024 Plenary' }],
+} as unknown as Meeting
+
+describe('decisionJsonLd', () => {
+  it('produces a Legislation document with the canonical URL', () => {
+    const jsonld = decisionJsonLd(decision, ctx)
+    expect(jsonld['@type']).toBe('Legislation')
+    expect(jsonld['@context']).toBe('https://schema.org')
+    expect(jsonld.name).toBe('First test decision')
+    expect(jsonld.identifier).toBe('urn:test:resolution:1')
+    expect(jsonld.url).toBe('https://example.org/decisions/urn%3Atest%3Aresolution%3A1')
+  })
+
+  it('links the DOI as sameAs', () => {
+    expect(decisionJsonLd(decision, ctx).sameAs).toBe('https://doi.org/10.63493/test')
+  })
+
+  it('exposes effective + published dates', () => {
+    const jsonld = decisionJsonLd(decision, ctx)
+    expect(jsonld.legislationDate).toBe('2024-06-15')
+    expect(jsonld.datePublished).toBe('2024-06-20')
+  })
+
+  it('emits undefined sameAs when no DOI', () => {
+    const noDoi = { ...decision, doi: undefined } as Decision
+    expect(decisionJsonLd(noDoi, ctx).sameAs).toBeUndefined()
+  })
+})
+
+describe('meetingJsonLd', () => {
+  it('produces an Event document with start/end dates', () => {
+    const jsonld = meetingJsonLd(meeting, ctx)
+    expect(jsonld['@type']).toBe('Event')
+    expect(jsonld.startDate).toBe('2024-06-15')
+    expect(jsonld.endDate).toBe('2024-06-20')
+    expect(jsonld.eventStatus).toBe('https://schema.org/EventCompleted')
+  })
+
+  it('includes a Place when city + country are present', () => {
+    const jsonld = meetingJsonLd(meeting, ctx)
+    expect(jsonld.location).toEqual({
+      '@type': 'Place',
+      address: { '@type': 'PostalAddress', addressCountry: 'DE' },
+    })
+  })
+})

package/src/seo/index.ts

@@ -0,0 +1,85 @@
+import type { Decision, Meeting, LocalizedString } from '@edoxen/edoxen'
+
+import type { DecisionListItem, MeetingListItem } from '../data/index.js'
+
+export interface SeoContext {
+  readonly siteUrl: string
+  readonly siteTitle: string
+  readonly defaultLocale: string
+}
+
+export interface JsonLd {
+  readonly '@context': 'https://schema.org'
+  readonly '@type': string
+  readonly [key: string]: unknown
+}
+
+function firstLocalizedValue(list: readonly LocalizedString[] | undefined, fallback: string): string {
+  return list?.[0]?.value ?? fallback
+}
+
+export function decisionJsonLd(decision: Decision, ctx: SeoContext): JsonLd {
+  const title = firstLocalizedValue(decision.title, decision.urn ?? '')
+  const url = `${ctx.siteUrl}/decisions/${encodeURIComponent(decision.urn ?? '')}`
+  const sameAs = decision.doi ? `https://doi.org/${decision.doi}` : undefined
+  const datePublished = (decision.dates ?? []).find((d) => d.type === 'published')?.date
+  const legislationDate = (decision.dates ?? []).find((d) => d.type === 'effective')?.date
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Legislation',
+    name: title,
+    identifier: decision.urn,
+    url,
+    sameAs,
+    datePublished,
+    legislationDate,
+    legislationPassedBy: decision.meeting?.venue ?? undefined,
+    keywords: (decision.categories ?? []).join(', ') || undefined,
+  }
+}
+
+export function decisionListItemJsonLd(item: DecisionListItem, ctx: SeoContext): JsonLd {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Legislation',
+    name: item.title,
+    identifier: item.urn,
+    url: `${ctx.siteUrl}/decisions/${encodeURIComponent(item.urn)}`,
+    legislationType: item.kind || undefined,
+  }
+}
+
+export function meetingJsonLd(meeting: Meeting, ctx: SeoContext): JsonLd {
+  const title = firstLocalizedValue(meeting.title, meeting.urn ?? '')
+  const url = `${ctx.siteUrl}/meetings/${encodeURIComponent(meeting.urn ?? '')}`
+  const eventStatus = meeting.status === 'completed'
+    ? 'https://schema.org/EventCompleted'
+    : 'https://schema.org/EventScheduled'
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Event',
+    name: title,
+    identifier: meeting.urn,
+    url,
+    startDate: meeting.date_range?.start,
+    endDate: meeting.date_range?.end,
+    eventStatus,
+    location: meeting.city
+      ? { '@type': 'Place', address: { '@type': 'PostalAddress', addressCountry: meeting.country_code } }
+      : undefined,
+  }
+}
+
+export function meetingListItemJsonLd(item: MeetingListItem, ctx: SeoContext): JsonLd {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Event',
+    name: item.title,
+    identifier: item.urn,
+    url: `${ctx.siteUrl}/meetings/${encodeURIComponent(item.urn)}`,
+    startDate: item.startDate,
+    endDate: item.endDate,
+  }
+}

package/src/virtual.d.ts

@@ -0,0 +1,11 @@
+declare module 'virtual:edoxen-config' {
+  import type { EdoxenConfig } from './config/index.js'
+  const config: EdoxenConfig
+  export default config
+}
+
+declare module 'virtual:edoxen-payloads' {
+  import type { PagePayloads } from './data/index.js'
+  const payloads: PagePayloads
+  export default payloads
+}

package/styles/base.css

@@ -0,0 +1,117 @@
+/* Edoxen base stylesheet — global defaults only.
+   Component styles live inside .astro files (Astro scopes them).
+   Every color, font, and radius goes through a --edoxen-* custom
+   property declared by `generateCssTokens` from config. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--edoxen-font-sans, system-ui, -apple-system, sans-serif);
+  color: var(--edoxen-color-text);
+  background: var(--edoxen-color-background);
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+a {
+  color: var(--edoxen-color-accent);
+  text-decoration: none;
+}
+
+a:hover,
+a:focus-visible {
+  text-decoration: underline;
+}
+
+.edoxen-header,
+.edoxen-main,
+.edoxen-footer {
+  width: 100%;
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 0 var(--edoxen-spacing-page, 1.5rem);
+}
+
+.edoxen-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--edoxen-color-border);
+}
+
+.edoxen-header__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--edoxen-color-text);
+  font-weight: 600;
+}
+
+.edoxen-header__brand img {
+  height: 2rem;
+  width: auto;
+}
+
+.edoxen-header__nav {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.edoxen-main {
+  flex: 1;
+  padding-top: 2rem;
+  padding-bottom: 3rem;
+}
+
+.edoxen-footer {
+  border-top: 1px solid var(--edoxen-color-border);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  color: var(--edoxen-color-muted);
+  font-size: 0.9rem;
+}
+
+.edoxen-footer__social {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.edoxen-badge {
+  display: inline-block;
+  padding: 0.15rem 0.55rem;
+  border-radius: var(--edoxen-radius-sm);
+  font-size: 0.8rem;
+  font-weight: 500;
+  background: var(--edoxen-color-muted);
+  color: #fff;
+}
+
+:root[data-theme="dark"] body {
+  background: var(--edoxen-color-background);
+}
+
+@media print {
+  .edoxen-header,
+  .edoxen-footer {
+    display: none;
+  }
+}