@cogenta/theme-association 0.3.3 → 0.5.3

package/src/render/term-archive.ts

@@ -1,79 +1,102 @@
 import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+import { arrowWords } from './layout.js'
 
 /**
- * The taxonomy-term archive (contract D `theme@1.3`) — a card grid, the same
- * register the home page's "Upcoming events" `collectionList` uses: a
- * rounded, shadowed card per entry, with a big day/month badge when the
- * entry carries a publication date, title and summary underneath. There is
- * no `entryImage` here (`TermArchiveEntry` carries no image field), so the
- * card leans on the date badge and warm surface colour for shape instead of
- * a missing photo.
+ * The taxonomy-term archive (contract D `theme@1.3`), in the organisation's
+ * own register: a breadcrumb in small words, the term as the page title, its
+ * sub-terms as a row of links, then the classified entries as ruled rows of
+ * titles, dates and summaries, and a pager of two arrow links.
+ *
+ * `TermArchiveEntry` carries no picture and no event date, so an archive is
+ * an index, drawn like one, rather than a calendar with its days missing. A
+ * site that wants a calendar of one kind of event builds it from a
+ * `collectionList`, which carries both.
  */
-function dateBadge(publishedAt: string | null): HtmlElement | null {
-  if (publishedAt === null) return null
-  const date = new Date(publishedAt)
-  if (Number.isNaN(date.getTime())) return null
-  return h(
-    'time',
-    { class: 'cg-archive-card__date', datetime: publishedAt },
-    h('span', { class: 'cg-archive-card__day' }, String(date.getUTCDate())),
-    h(
-      'span',
-      { class: 'cg-archive-card__month' },
-      new Intl.DateTimeFormat('en', { month: 'short' }).format(date),
-    ),
-  )
+function formatDate(iso: string, locale: string): string {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(
+      new Date(iso),
+    )
+  } catch {
+    return iso
+  }
 }
 
 export function renderTermArchive(input: TermArchiveInput): HtmlElement {
-  const cards = input.entries.map((entry) =>
+  const rows = input.entries.map((entry) =>
     h(
       'li',
-      { class: 'cg-archive-card' },
-      dateBadge(entry.publishedAt),
+      { class: 'ca-index__item' },
       h(
-        'div',
-        { class: 'cg-archive-card__body' },
-        h(
-          'h2',
-          { class: 'cg-archive-card__title' },
-          entry.href === null
-            ? entry.title
-            : h('a', { class: 'cg-archive-card__link', href: entry.href }, entry.title),
-        ),
-        entry.summary === null
-          ? null
-          : h('p', { class: 'cg-archive-card__excerpt' }, entry.summary),
+        'h2',
+        { class: 'ca-index__title' },
+        entry.href === null
+          ? entry.title
+          : h('a', { class: 'ca-index__link', href: entry.href }, entry.title),
       ),
+      entry.publishedAt === null
+        ? null
+        : h(
+            'p',
+            { class: 'ca-index__date' },
+            h('time', { datetime: entry.publishedAt }, formatDate(entry.publishedAt, input.locale)),
+          ),
+      entry.summary === null ? null : h('p', { class: 'ca-index__text' }, entry.summary),
     ),
   )
 
   return h(
     'main',
-    { class: 'cg-main cg-archive', id: 'cg-main' },
-    input.ancestors.length === 0
+    { class: 'cg-main ca-main ca-archive', id: 'cg-main' },
+    h(
+      'header',
+      { class: 'ca-page-head' },
+      h(
+        'div',
+        { class: 'ca-container ca-page-head__inner' },
+        input.ancestors.length === 0
+          ? null
+          : h(
+              'nav',
+              { class: 'ca-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+              h(
+                'ol',
+                { class: 'ca-archive__trail' },
+                input.ancestors.map((link) => h('li', {}, h('a', { href: link.href }, link.label))),
+              ),
+            ),
+        h('h1', { class: 'ca-page-head__title' }, input.term.label),
+      ),
+    ),
+    input.children.length === 0
       ? null
       : h(
-          'nav',
-          { class: 'cg-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+          'div',
+          { class: 'ca-section ca-archive__children' },
           h(
-            'ol',
-            {},
-            ...input.ancestors.map((link) => h('li', {}, h('a', { href: link.href }, link.label))),
+            'div',
+            { class: 'ca-container' },
+            h(
+              'ul',
+              { class: 'ca-archive__terms', 'aria-label': input.labels.subterms },
+              input.children.map((child) =>
+                h('li', { class: 'ca-archive__term' }, h('a', { href: child.href }, child.label)),
+              ),
+            ),
           ),
         ),
-    h('h1', { class: 'cg-archive__title' }, input.term.label),
-    input.children.length === 0
-      ? null
-      : h(
-          'ul',
-          { class: 'cg-archive__children', 'aria-label': input.labels.subterms },
-          ...input.children.map((child) => h('li', {}, h('a', { href: child.href }, child.label))),
-        ),
-    cards.length === 0
-      ? h('p', { class: 'cg-archive__empty' }, input.labels.empty)
-      : h('ul', { class: 'cg-archive__grid' }, ...cards),
-    pager(input),
+    h(
+      'section',
+      { class: 'ca-section ca-list', 'data-shape': rows.length === 0 ? 'empty' : 'index' },
+      h(
+        'div',
+        { class: 'ca-container ca-list__inner' },
+        rows.length === 0
+          ? h('p', { class: 'ca-empty' }, input.labels.empty)
+          : h('ul', { class: 'ca-list__items ca-index' }, rows),
+        pager(input),
+      ),
+    ),
   )
 }
 
@@ -81,12 +104,25 @@ function pager(input: TermArchiveInput): HtmlElement | null {
   if (input.page.previousHref === null && input.page.nextHref === null) return null
   return h(
     'nav',
-    { class: 'cg-archive__pager', 'aria-label': input.labels.pagination },
+    { class: 'ca-archive__pager', 'aria-label': input.labels.pagination },
     input.page.previousHref === null
       ? null
-      : h('a', { rel: 'prev', href: input.page.previousHref }, input.labels.previous),
+      : h(
+          'a',
+          {
+            class: 'ca-arrow-link',
+            'data-direction': 'back',
+            rel: 'prev',
+            href: input.page.previousHref,
+          },
+          h('span', { class: 'ca-arrow-link__start' }, input.labels.previous),
+        ),
     input.page.nextHref === null
       ? null
-      : h('a', { rel: 'next', href: input.page.nextHref }, input.labels.next),
+      : h(
+          'a',
+          { class: 'ca-arrow-link', rel: 'next', href: input.page.nextHref },
+          arrowWords(input.labels.next),
+        ),
   )
 }

package/src/render/widget-areas.ts

@@ -0,0 +1,24 @@
+/**
+ * The widget areas this theme names (contract D `theme@1.6`). Declaring them
+ * is what tells the host this theme draws the footer columns inside its own
+ * green band; the page areas are placed by the host in the shared
+ * `cg-sidebar-layout` markup, which `styles/widgets.css` sets as the side
+ * column of a noticeboard: short labels, ruled lists, photographs, and the
+ * ask on the paper band.
+ */
+export const widgetAreas: readonly {
+  readonly id: string
+  readonly label: string
+  readonly description?: string
+}[] = [
+  {
+    id: 'sidebar',
+    label: 'Side column',
+    description: 'Beside an event, a programme and search results.',
+  },
+  {
+    id: 'content-after',
+    label: 'Under the page',
+    description: 'After an event, a programme or a page, before the comments.',
+  },
+]

package/src/styles/archive.css

@@ -1,129 +1,65 @@
 /*
- * The taxonomy-term archive (contract D `theme@1.3`) — a card grid in the
- * same warm, dated-card register the home page's "Upcoming events" block
- * uses, so a visitor who lands on a term archive from a search engine still
- * recognises the site.
+ * The taxonomy-term archive: a breadcrumb, the term, its sub-terms, the
+ * classified entries as an index, and a pager. Everything reads `tokens.css`.
  */
 
-.cg-archive {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding: var(--cg-s10) var(--cg-gutter);
-}
-
-.cg-archive__title {
-  margin: 0 0 var(--cg-s8);
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  text-wrap: balance;
-}
-
-.cg-archive__breadcrumb ol,
-.cg-archive__children {
+.ca-archive__trail {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: 0 0 var(--cg-s4);
-  padding: 0;
-  list-style: none;
-  font-size: var(--cg-text-sm);
-}
-
-.cg-archive__children {
-  margin-block: var(--cg-s4) var(--cg-s8);
-}
-
-.cg-archive__grid {
-  display: grid;
-  gap: var(--cg-s5);
-  grid-template-columns: 1fr;
+  gap: var(--ca-s1) var(--ca-s2);
   margin: 0;
   padding: 0;
   list-style: none;
+  font-size: var(--ca-text-caption);
 }
 
-@media (min-width: 46rem) {
-  .cg-archive__grid {
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-  }
-}
-
-.cg-archive-card {
-  display: flex;
-  gap: var(--cg-s5);
-  padding: var(--cg-s5);
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cogenta-shadow-sm);
+.ca-archive__trail li + li::before {
+  content: "/" / "";
+  margin-inline-end: var(--ca-s2);
+  color: var(--ca-ink-subtle);
 }
 
-.cg-archive-card__date {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  inline-size: 4rem;
-  block-size: 4rem;
-  border-radius: var(--cg-radius-md);
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
+.ca-archive__trail a {
+  color: var(--ca-ink-muted);
+  text-decoration-color: transparent;
 }
 
-.cg-archive-card__day {
-  font-family: var(--cg-font-display);
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-bold);
-  line-height: 1;
+.ca-archive__trail a:hover {
+  color: var(--ca-ink);
+  text-decoration-color: var(--ca-green);
 }
 
-.cg-archive-card__month {
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-bold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+.ca-archive__children {
+  padding-block: 0;
 }
 
-.cg-archive-card__body {
-  min-inline-size: 0;
-}
-
-.cg-archive-card__title {
+.ca-archive__terms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ca-s2) var(--ca-s6);
   margin: 0;
-  font-size: var(--cg-text-md);
-  line-height: var(--cg-leading-snug);
-}
-
-.cg-archive-card__link {
-  color: var(--cg-ink);
-  text-decoration: none;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-archive-card__link:hover {
-  color: var(--cg-accent);
+.ca-archive__term a {
+  font-weight: var(--ca-weight-semibold);
 }
 
-.cg-archive-card__excerpt {
-  margin: var(--cg-s1) 0 0;
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
+.ca-archive__pager {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--ca-s4);
+  margin-block-start: var(--ca-s10);
 }
 
-.cg-archive__empty {
-  padding: var(--cg-s10);
-  color: var(--cg-ink-muted);
-  text-align: center;
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-lg);
-}
+@media (min-width: 64rem) {
+  .ca-archive__breadcrumb {
+    grid-column: 1 / span 9;
+  }
 
-.cg-archive__pager {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--cg-s4);
-  margin-block-start: var(--cg-s10);
-  padding-block-start: var(--cg-s5);
-  border-block-start: 1px solid var(--cg-line-soft);
-  font-weight: var(--cg-weight-semibold);
+  .ca-archive__pager {
+    grid-column: 1 / span 8;
+  }
 }