@cogenta/theme-canonical 1.1.2 → 1.3.3

package/src/render/term-archive.ts

@@ -1,21 +1,23 @@
 import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+import { arrowWords } from './arrow-link.js'
+import { formatEntryDate } from './dates.js'
 
 /**
  * The taxonomy-term archive (contract D `theme@1.3`).
  *
- * Built from this theme's *own* entry-card classes — the same `cg-entry`
- * markup `collectionList` already renders — rather than a new set of
- * archive-only classes: an archive of articles should look like a list of
- * articles on this theme, and reusing the classes is what guarantees that
- * without a second stylesheet to keep in step.
+ * A header in the page frame (the breadcrumb, the term as the page's title,
+ * the sub-terms), then the classified entries as this theme's index: the
+ * same `cg-collection`/`cg-entry` markup a `collectionList` block renders in
+ * its `list` layout, so an archive of articles reads exactly like a list of
+ * articles anywhere else on the site, from one set of rules.
  */
 export function renderTermArchive(input: TermArchiveInput): HtmlElement {
   const items = input.entries.map((entry) =>
     h(
       'li',
-      { class: 'cg-entry' },
+      { class: 'cg-entry', 'data-picture': 'false' },
       h(
-        'div',
+        'article',
         { class: 'cg-entry__body' },
         h(
           'h2',
@@ -29,7 +31,7 @@ export function renderTermArchive(input: TermArchiveInput): HtmlElement {
           : h(
               'time',
               { class: 'cg-entry__date', datetime: entry.publishedAt },
-              entry.publishedAt.slice(0, 10),
+              formatEntryDate(entry.publishedAt, input.locale),
             ),
         entry.summary === null ? null : h('p', { class: 'cg-entry__excerpt' }, entry.summary),
       ),
@@ -39,29 +41,41 @@ export function renderTermArchive(input: TermArchiveInput): HtmlElement {
   return h(
     'main',
     { class: 'cg-main cg-archive', id: 'cg-main' },
-    input.ancestors.length === 0
-      ? null
-      : h(
-          'nav',
-          { class: 'cg-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
-          h(
-            'ol',
-            {},
-            ...input.ancestors.map((link) => h('li', {}, h('a', { href: link.href }, link.label))),
+    h(
+      'div',
+      { class: 'cg-archive__head' },
+      input.ancestors.length === 0
+        ? null
+        : h(
+            'nav',
+            { class: 'cg-archive__breadcrumb', 'aria-label': input.labels.breadcrumb },
+            h(
+              'ol',
+              {},
+              ...input.ancestors.map((link) =>
+                h('li', {}, h('a', { href: link.href }, link.label)),
+              ),
+            ),
           ),
-        ),
-    h('h1', { class: 'cg-page__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))),
-        ),
-    items.length === 0
-      ? h('p', { class: 'cg-collection__empty' }, input.labels.empty)
-      : h('ul', { class: 'cg-collection__items' }, ...items),
-    renderPager(input),
+      h('h1', { class: 'cg-page__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)),
+            ),
+          ),
+    ),
+    h(
+      'section',
+      { class: 'cg-collection cg-archive__list', 'data-layout': 'list' },
+      items.length === 0
+        ? h('p', { class: 'cg-collection__empty' }, input.labels.empty)
+        : h('ul', { class: 'cg-collection__items' }, ...items),
+      renderPager(input),
+    ),
   )
 }
 
@@ -77,9 +91,17 @@ function renderPager(input: TermArchiveInput): HtmlElement | null {
     { class: 'cg-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: 'cg-arrow-link', rel: 'prev', href: input.page.previousHref },
+          arrowWords(input.labels.previous, 'back'),
+        ),
     input.page.nextHref === null
       ? null
-      : h('a', { rel: 'next', href: input.page.nextHref }, input.labels.next),
+      : h(
+          'a',
+          { class: 'cg-arrow-link', rel: 'next', href: input.page.nextHref },
+          arrowWords(input.labels.next),
+        ),
   )
 }

package/src/render/widget-areas.ts

@@ -0,0 +1,44 @@
+/**
+ * The widget areas this theme names (contract D `theme@1.6`).
+ *
+ * Exporting `widgetAreas` is what tells the host that this theme draws the
+ * footer columns (`footer-1`..`footer-4`) inside its own footer, where
+ * `renderChrome` places them between the footer menu and the legal line. The
+ * page areas (`content-before`, `content-after`, `sidebar`) are placed by the
+ * host in the one `cg-sidebar-layout` markup every theme styles; this theme
+ * sets it on its twelve-column grid in `styles/widgets.css`.
+ *
+ * A third-party theme can copy this file as it is: a theme that adds an area
+ * of its own lists it here too, and renders it itself with
+ * `renderWidgetArea` from `@cogenta/theme-kit`.
+ */
+export const widgetAreas: readonly {
+  readonly id: string
+  readonly label: string
+  readonly description?: string
+}[] = [
+  {
+    id: 'sidebar',
+    label: 'Sidebar',
+    description:
+      'Beside an entry, an archive or search results on a wide screen; under the content on a phone and on the home page.',
+  },
+  {
+    id: 'content-before',
+    label: 'Before the content',
+    description: 'At the top of the page, under the header.',
+  },
+  {
+    id: 'content-after',
+    label: 'After the content',
+    description: 'Under the page’s own content, before the comments.',
+  },
+  {
+    id: 'footer-1',
+    label: 'Footer, column 1',
+    description: 'In the footer, between the footer menu and the legal line.',
+  },
+  { id: 'footer-2', label: 'Footer, column 2' },
+  { id: 'footer-3', label: 'Footer, column 3' },
+  { id: 'footer-4', label: 'Footer, column 4' },
+]

package/src/styles/archive.css

@@ -1,40 +1,86 @@
 /*
- * The taxonomy-term archive (contract D `theme@1.3`).
- *
- * Only the three things an archive adds beyond what `collectionList` already
- * styles — a breadcrumb, a sub-term row, a prev/next pager. The entry list
- * itself reuses the `cg-entry`/`cg-collection__items` rules, on purpose: an
- * archive of articles must look like this theme's list of articles, and a
- * second set of card rules is exactly how those two drift apart.
+ * The taxonomy-term archive (contract D `theme@1.3`): a breadcrumb, the term
+ * as the page title, its sub-terms, then the entries as the index of
+ * `listings.css`, and a previous/next pager.
  */
 
-.cg-archive {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding: var(--cg-s10) var(--cg-gutter);
+.cg-archive__head {
+  padding-block: calc(var(--cg-section) * 0.6) calc(var(--cg-section) / 4);
+  padding-inline: var(--cg-inset);
 }
 
-.cg-archive__breadcrumb ol,
-.cg-archive__children {
+.cg-archive__head .cg-page__title {
+  padding: 0;
+}
+
+.cg-archive__breadcrumb ol {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: 0 0 var(--cg-s4);
+  gap: var(--cg-s1) var(--cg-s3);
+  margin: 0 0 var(--cg-s6);
   padding: 0;
   list-style: none;
+  color: var(--cg-ink-muted);
   font-size: var(--cg-text-sm);
 }
 
+.cg-archive__breadcrumb li:not(:last-child)::after {
+  content: "/" / "";
+  margin-inline-start: var(--cg-s3);
+}
+
+.cg-archive__breadcrumb a {
+  color: var(--cg-ink-muted);
+}
+
+.cg-archive__breadcrumb a:hover {
+  color: var(--cg-accent);
+}
+
 .cg-archive__children {
-  margin-block: var(--cg-s4) var(--cg-s8);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s1) var(--cg-s6);
+  margin: var(--cg-s8) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-archive__children a {
+  display: inline-block;
+  padding-block: var(--cg-s2);
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-medium);
+  text-decoration-color: var(--cg-underline);
+}
+
+.cg-archive__children a:hover {
+  color: var(--cg-accent);
+  text-decoration-color: currentColor;
+}
+
+.cg-archive__list {
+  display: grid;
+  grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+  column-gap: var(--cg-column-gap);
+  align-content: start;
+  padding-block: calc(var(--cg-section) / 4) calc(var(--cg-section) / 2);
+  padding-inline: var(--cg-inset);
+}
+
+.cg-archive__list > * {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
 }
 
 .cg-archive__pager {
   display: flex;
+  flex-wrap: wrap;
   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);
+  margin-block-start: var(--cg-s8);
+}
+
+.cg-archive__pager a[rel="next"] {
+  margin-inline-start: auto;
 }