@cogenta/theme-magazine 1.1.3 → 1.3.4

package/src/render/story.ts

@@ -0,0 +1,139 @@
+import {
+  type ContentEntry,
+  entryDate,
+  entryExcerpt,
+  entryHref,
+  entryImage,
+  entryTitle,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type ImageSource,
+  type RenderContext,
+  renderImageSource,
+  type TermArchiveEntry,
+} from '@cogenta/theme-kit'
+import { entryKicker, shortDate } from './layout.js'
+
+/**
+ * One story as a listing sets it: a kicker, a headline, a standfirst, a date
+ * and, where the slot allows, a photograph. The front page, the rails, the
+ * opinion strip, the ranked list and the section front all build their rows
+ * from this one unit, so a kicker or a headline reads the same wherever the
+ * reader meets it. Which parts show, and at what size, is the slot's choice
+ * (`StoryOptions`) and the stylesheet's.
+ *
+ * The headline is the one link. The photograph links to the same place but
+ * is taken out of the tab order and hidden from assistive technology, so a
+ * keyboard or screen-reader user meets each story once.
+ */
+
+export interface Story {
+  readonly href: string | null
+  readonly title: string
+  readonly kicker?: string
+  readonly standfirst?: string
+  readonly date?: { readonly iso: string; readonly label: string }
+  readonly image?: ImageSource
+}
+
+export interface StoryOptions {
+  readonly tag: HeadingTag
+  /** A modifier, `cg-story--<variant>`: `lead`, `brief`, `secondary`, `rail`, `column`, `ranked`. */
+  readonly variant: string
+  readonly image?: boolean
+  readonly standfirst?: boolean
+  readonly date?: boolean
+  readonly sizes?: string
+  readonly loading?: 'eager' | 'lazy'
+  readonly numeral?: string
+}
+
+/** A `ContentEntry` as a story: every field read through the shared entry helpers, never assumed. */
+export function storyFromEntry(entry: ContentEntry, ctx: RenderContext, imageWidth: number): Story {
+  const iso = entryDate(entry)
+  const label = iso === undefined ? null : shortDate(iso, ctx.locale)
+  const kicker = entryKicker(entry)
+  const standfirst = entryExcerpt(entry)
+  const image = entryImage(entry, ctx, {
+    width: imageWidth,
+    height: Math.round((imageWidth * 2) / 3),
+    fit: 'cover',
+  })
+  return {
+    href: entryHref(entry, ctx),
+    title: entryTitle(entry, ctx),
+    ...(kicker === undefined ? {} : { kicker }),
+    ...(standfirst === undefined ? {} : { standfirst }),
+    ...(iso === undefined || label === null ? {} : { date: { iso, label } }),
+    ...(image === undefined || image.kind !== 'image' ? {} : { image }),
+  }
+}
+
+/** A term archive row as a story. `TermArchiveEntry` carries no picture and no kicker, so neither is invented. */
+export function storyFromArchive(entry: TermArchiveEntry, locale: string): Story {
+  const label = entry.publishedAt === null ? null : shortDate(entry.publishedAt, locale)
+  return {
+    href: entry.href,
+    title: entry.title,
+    ...(entry.summary === null ? {} : { standfirst: entry.summary }),
+    ...(entry.publishedAt === null || label === null
+      ? {}
+      : { date: { iso: entry.publishedAt, label } }),
+  }
+}
+
+export function renderStory(story: Story, options: StoryOptions): HtmlElement {
+  const imageOptions = {
+    className: 'cg-story__image',
+    ...(options.sizes === undefined ? {} : { sizes: options.sizes }),
+    ...(options.loading === undefined ? {} : { loading: options.loading }),
+  }
+  const showImage = options.image === true && story.image !== undefined
+  const titleNode =
+    story.href === null
+      ? story.title
+      : h('a', { class: 'cg-story__link', href: story.href }, story.title)
+
+  return h(
+    'article',
+    {
+      class: `cg-story cg-story--${options.variant}`,
+      'data-media': showImage ? 'image' : 'none',
+    },
+    showImage && story.image !== undefined
+      ? story.href === null
+        ? h('div', { class: 'cg-story__media' }, renderImageSource(story.image, imageOptions))
+        : h(
+            'a',
+            {
+              class: 'cg-story__media',
+              href: story.href,
+              tabindex: '-1',
+              'aria-hidden': 'true',
+            },
+            renderImageSource(story.image, imageOptions),
+          )
+      : null,
+    h(
+      'div',
+      { class: 'cg-story__body' },
+      options.numeral === undefined
+        ? null
+        : h('span', { class: 'cg-story__numeral', 'aria-hidden': 'true' }, options.numeral),
+      story.kicker === undefined ? null : h('p', { class: 'cg-story__kicker' }, story.kicker),
+      heading(options.tag, { class: 'cg-story__title' }, titleNode),
+      options.standfirst === true && story.standfirst !== undefined
+        ? h('p', { class: 'cg-story__standfirst' }, story.standfirst)
+        : null,
+      options.date === true && story.date !== undefined
+        ? h(
+            'p',
+            { class: 'cg-story__meta' },
+            h('time', { datetime: story.date.iso }, story.date.label),
+          )
+        : null,
+    ),
+  )
+}

package/src/render/term-archive.ts

@@ -1,75 +1,120 @@
 import { type HtmlElement, h, type TermArchiveInput } from '@cogenta/theme-kit'
+import { renderStory, storyFromArchive } from './story.js'
 
 /**
- * The taxonomy-term archive (contract D `theme@1.3`), as a section front.
+ * The taxonomy-term archive (contract D `theme@1.3`), set as a section front.
  *
- * A magazine's archive is a section page, so it is built from the same
- * `cg-issue__row` rows `collectionList` already sets here — a contents strip,
- * not a card grid — under a section head that names the taxonomy as a kicker
- * and the term as the section title. Reusing the block's classes is what
- * keeps the two looking like the same publication without a second
- * stylesheet.
+ * The term is the page's title, very large on a double rule, under the
+ * taxonomy's name as a kicker. Its stories follow the front page's own
+ * composition: the newest as the lead across eight columns, the next three
+ * as briefs behind a vertical rule, and the rest in a row of three divided by
+ * hairlines. `TermArchiveEntry` carries no picture and no kicker, so a
+ * section front is set entirely in type, which is how a newspaper's inside
+ * section pages read anyway.
+ *
+ * Every visible word that is not content comes from `input.labels`, already
+ * in the page's language.
  */
+const BRIEFS = 3
+
 export function renderTermArchive(input: TermArchiveInput): HtmlElement {
-  const rows = input.entries.map((entry, index) =>
+  const stories = input.entries.map((entry) => storyFromArchive(entry, input.locale))
+  const [lead, ...others] = stories
+  const briefs = others.slice(0, BRIEFS)
+  const more = others.slice(BRIEFS)
+
+  return h(
+    'main',
+    { class: 'cg-main cg-archive', id: 'cg-main' },
     h(
-      'li',
-      { class: 'cg-issue__row' },
+      'header',
+      { class: 'cg-archive__head' },
       h(
-        'span',
-        { class: 'cg-issue__row-number', 'aria-hidden': 'true' },
-        String(index + 1).padStart(2, '0'),
+        'div',
+        { class: 'cg-container cg-archive__head-inner' },
+        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('p', { class: 'cg-archive__kicker' }, input.taxonomyName),
+        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))),
+            ),
       ),
+    ),
+    h(
+      'section',
+      { class: 'cg-section cg-listing', 'data-form': 'archive' },
       h(
         'div',
-        { class: 'cg-issue__row-body' },
-        h(
-          'h2',
-          { class: 'cg-issue__row-title' },
-          entry.href === null
-            ? entry.title
-            : h('a', { class: 'cg-issue__link', href: entry.href }, entry.title),
-        ),
-        entry.publishedAt === null
-          ? null
+        { class: 'cg-container cg-listing__inner' },
+        lead === undefined
+          ? h('p', { class: 'cg-empty' }, input.labels.empty)
           : h(
-              'time',
-              { class: 'cg-issue__row-date', datetime: entry.publishedAt },
-              entry.publishedAt.slice(0, 10),
+              'div',
+              {
+                class: 'cg-front',
+                'data-briefs': String(briefs.length),
+                'data-more': String(more.length),
+              },
+              h(
+                'div',
+                { class: 'cg-front__lead' },
+                renderStory(lead, { tag: 'h2', variant: 'lead', standfirst: true, date: true }),
+              ),
+              briefs.length === 0
+                ? null
+                : h(
+                    'ul',
+                    { class: 'cg-front__briefs' },
+                    briefs.map((story) =>
+                      h(
+                        'li',
+                        { class: 'cg-front__brief' },
+                        renderStory(story, {
+                          tag: 'h2',
+                          variant: 'brief',
+                          standfirst: true,
+                          date: true,
+                        }),
+                      ),
+                    ),
+                  ),
+              more.length === 0
+                ? null
+                : h(
+                    'ul',
+                    { class: 'cg-front__more' },
+                    more.map((story) =>
+                      h(
+                        'li',
+                        { class: 'cg-front__item' },
+                        renderStory(story, {
+                          tag: 'h2',
+                          variant: 'secondary',
+                          standfirst: true,
+                          date: true,
+                        }),
+                      ),
+                    ),
+                  ),
             ),
-        entry.summary === null ? null : h('p', { class: 'cg-issue__lead-excerpt' }, entry.summary),
+        pager(input),
       ),
     ),
   )
-
-  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((l) => h('li', {}, h('a', { href: l.href }, l.label))),
-          ),
-        ),
-    h('p', { class: 'cg-issue__kicker' }, input.taxonomyName),
-    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((c) => h('li', {}, h('a', { href: c.href }, c.label))),
-        ),
-    rows.length === 0
-      ? h('p', { class: 'cg-issue__empty' }, input.labels.empty)
-      : h('ul', { class: 'cg-issue__rest' }, ...rows),
-    pager(input),
-  )
 }
 
 function pager(input: TermArchiveInput): HtmlElement | null {
@@ -79,9 +124,17 @@ function pager(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-archive__pager-link', rel: 'prev', href: input.page.previousHref },
+          input.labels.previous,
+        ),
     input.page.nextHref === null
       ? null
-      : h('a', { rel: 'next', href: input.page.nextHref }, input.labels.next),
+      : h(
+          'a',
+          { class: 'cg-archive__pager-link', rel: 'next', href: input.page.nextHref },
+          input.labels.next,
+        ),
   )
 }

package/src/render/widget-areas.ts

@@ -0,0 +1,22 @@
+/**
+ * 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
+ * colophon; the page areas are placed by the host in the shared
+ * `cg-sidebar-layout` markup, which `styles/widgets.css` sets as a rail.
+ */
+export const widgetAreas: readonly {
+  readonly id: string
+  readonly label: string
+  readonly description?: string
+}[] = [
+  {
+    id: 'sidebar',
+    label: 'Rail',
+    description: 'Beside stories, section fronts and search results.',
+  },
+  {
+    id: 'content-after',
+    label: 'Under the story',
+    description: 'After an article or a page, before the comments.',
+  },
+]

package/src/styles/archive.css

@@ -1,40 +1,137 @@
 /*
- * 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, set as a section front: the term very large on a
+ * double rule, then the front page's own composition in type alone
+ * (`stories.css`, `.cg-front`), with a row of three instead of four because
+ * no photograph holds the columns apart.
  */
 
-.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.55) 0;
+}
+
+.cg-archive__head-inner {
+  position: relative;
+  row-gap: var(--cg-s2);
+  padding-block-end: var(--cg-s5);
+}
+
+/* The double rule under the section's name: a hairline over a heavy rule. */
+.cg-archive__head-inner::after {
+  content: "";
+  position: absolute;
+  inset-inline: var(--cg-gutter);
+  inset-block-end: 0;
+  block-size: calc(var(--cg-rule-heavy) + var(--cg-rule-strong) + var(--cg-rule));
+  border-block-start: var(--cg-rule) solid var(--cg-line-ink);
+  border-block-end: var(--cg-rule-heavy) solid var(--cg-line-ink);
+}
+
+.cg-archive__kicker {
+  margin: 0;
+  color: var(--cg-accent);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-label);
+  font-weight: var(--cg-weight-bold);
+  letter-spacing: var(--cg-tracking-caps);
+  text-transform: uppercase;
+}
+
+.cg-archive__title {
+  padding-block-end: var(--cg-s3);
+  font-size: var(--cg-size-nameplate);
+  font-weight: var(--cg-weight-bold);
+  line-height: 1;
+  letter-spacing: -0.018em;
 }
 
 .cg-archive__breadcrumb ol,
 .cg-archive__children {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: 0 0 var(--cg-s4);
+  gap: var(--cg-s1) var(--cg-s5);
+  margin: 0;
   padding: 0;
   list-style: none;
+  font-family: var(--cg-font-ui);
   font-size: var(--cg-text-sm);
 }
 
+.cg-archive__breadcrumb li + li::before {
+  content: "/";
+  margin-inline-end: var(--cg-s5);
+  color: var(--cg-ink-subtle);
+}
+
+.cg-archive__breadcrumb a,
+.cg-archive__children a {
+  color: var(--cg-ink-muted);
+  text-decoration-color: transparent;
+}
+
+.cg-archive__breadcrumb a:hover,
+.cg-archive__children a:hover {
+  color: var(--cg-ink);
+  text-decoration-color: currentColor;
+}
+
 .cg-archive__children {
-  margin-block: var(--cg-s4) var(--cg-s8);
+  padding-block-end: var(--cg-s3);
+  font-weight: var(--cg-weight-semibold);
+}
+
+/* A section front sets every story in type: the lead's headline takes the
+   size a photograph would otherwise have given it. */
+.cg-archive .cg-story--lead .cg-story__title {
+  font-size: var(--cg-size-headline);
+}
+
+.cg-archive .cg-story--lead .cg-story__standfirst {
+  font-size: var(--cg-size-standfirst);
+  font-style: italic;
+  color: var(--cg-ink);
+}
+
+.cg-archive .cg-story--secondary .cg-story__title {
+  font-size: var(--cg-size-brief);
+}
+
+@media (min-width: 64rem) {
+  .cg-archive .cg-front__more {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cg-archive .cg-front__item:nth-child(4n + 1)::before {
+    content: "";
+  }
+
+  .cg-archive .cg-front__item:nth-child(3n + 1)::before {
+    content: none;
+  }
 }
 
 .cg-archive__pager {
   display: flex;
   justify-content: space-between;
-  gap: var(--cg-s4);
+  gap: var(--cg-s6);
   margin-block-start: var(--cg-s10);
-  padding-block-start: var(--cg-s5);
-  border-block-start: 1px solid var(--cg-rule-soft);
+  padding-block-start: var(--cg-s4);
+  border-block-start: var(--cg-rule) solid var(--cg-line-ink);
+}
+
+.cg-archive__pager-link {
+  color: var(--cg-ink);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-ui);
   font-weight: var(--cg-weight-semibold);
+  text-decoration-color: var(--cg-line-strong);
+  text-underline-offset: 0.3em;
+}
+
+.cg-archive__pager-link[rel="next"] {
+  margin-inline-start: auto;
+}
+
+.cg-archive__pager-link:hover {
+  color: var(--cg-accent);
+  text-decoration-color: currentColor;
 }