@cogenta/theme-magazine 1.1.3 → 1.3.4

package/src/render/blocks/media-figure.ts

@@ -1,42 +1,58 @@
 import type { MediaFigureBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A plate, in the print sense: the picture runs large, and the caption sits
- * under a hairline rule set in small caps with the credit line trailing it —
- * the way a photo essay is captioned, rather than a card with a paragraph
- * under it.
+ * A photograph placed on the grid by its alignment, captioned the way a
+ * newspaper captions one: the caption in the interface face under the
+ * picture and the credit after it in small capitals, both starting on the
+ * picture's own left edge.
  *
- * `<figure>`/`<figcaption>` keep the caption announced as belonging to the
- * image; `align` stays a data attribute (contract B's intent, not a class),
- * so the skin — here, this theme — decides what `start`/`end`/`wide`/`full`
- * mean.
+ * - `center` (the default): the reading column.
+ * - `start` / `end`: half the page, from the left or to the right.
+ * - `wide`: ten columns, the width an article's lead photograph takes.
+ * - `full`: edge to edge, the caption returning to the grid.
  */
 export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext): HtmlElement {
   const ratio = aspectRatio(block.ratio)
+  const align = block.align ?? 'center'
   const hasCaption = block.caption !== undefined || block.credit !== undefined
-  return h(
-    'figure',
+  return section(
+    'div',
+    'mediaFigure',
+    'cg-figure',
     {
-      class: 'cg-block cg-plate',
-      'data-block': 'mediaFigure',
-      'data-align': block.align ?? 'center',
+      'data-align': align,
       style: ratio === undefined ? undefined : `--cg-ratio:${ratio}`,
     },
-    image(ctx, block.media, {
-      className: 'cg-plate__media',
-      sizes: '(min-width: 60rem) 48rem, 100vw',
-    }),
+    'figure',
+    h(
+      'div',
+      { class: 'cg-figure__frame' },
+      image(ctx, block.media, {
+        className: 'cg-figure__image',
+        sizes:
+          align === 'full'
+            ? '100vw'
+            : align === 'wide'
+              ? '(min-width: 64rem) 66rem, 100vw'
+              : '(min-width: 64rem) 40rem, 100vw',
+      }),
+    ),
     hasCaption
       ? h(
           'figcaption',
-          { class: 'cg-plate__caption' },
+          { class: 'cg-figure__caption' },
           block.caption === undefined
             ? null
-            : h('span', { class: 'cg-plate__text' }, block.caption),
+            : h(
+                'span',
+                { class: 'cg-figure__caption-text', 'data-field': 'caption' },
+                block.caption,
+              ),
           block.credit === undefined
             ? null
-            : h('span', { class: 'cg-plate__credit', 'data-field': 'credit' }, block.credit),
+            : h('span', { class: 'cg-figure__credit', 'data-field': 'credit' }, block.credit),
         )
       : null,
   )

package/src/render/blocks/pricing-table.ts

@@ -1,7 +1,6 @@
 import type { PricingTableBlock, PricingTier } from '@cogenta/blocks'
 import {
   actionLink,
-  blockHeadingTag,
   type HeadingTag,
   type HtmlElement,
   h,
@@ -9,67 +8,63 @@ import {
   nestedHeadingTag,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). A classified-ads rate card: tiers set side by
- * side and separated by the theme's one visible column rule (the same
- * device `hero` and `collectionList` use), rather than a set of raised
- * cards — a print page has no elevation to raise a card off of.
- *
- * `highlighted` is an editorial signal, not a colour: it becomes
- * `data-highlighted` for the stylesheet to pick up (an ink-reversed panel,
- * here) and `aria-current` so it is announced, not only shown.
+ * Subscription rates, set as the columns of a ruled table rather than as
+ * cards: each tier opens on a hairline, its name in small capitals, the price
+ * in the display face with tabular numerals and the interval after it, what
+ * it includes as a list divided by hairlines, and its action at the foot. The
+ * tier the editor highlighted opens on a heavy red rule instead, and its
+ * action is the filled one; every other tier's action is drawn as an outlined
+ * control in `blocks.css`, so the four actions line up as one row.
  */
 function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const highlighted = tier.highlighted === true
   return h(
     'li',
-    {
-      class: 'cg-ratecard__tier',
-      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
-      'aria-current': tier.highlighted === true ? 'true' : undefined,
-    },
-    heading(tag, { class: 'cg-ratecard__name' }, tier.name),
+    { class: 'cg-rates__tier', 'data-highlighted': highlighted ? 'true' : undefined },
+    heading(tag, { class: 'cg-rates__name' }, tier.name),
     h(
       'p',
-      { class: 'cg-ratecard__price' },
-      h('span', { class: 'cg-ratecard__amount' }, tier.price),
+      { class: 'cg-rates__price' },
+      h('span', { class: 'cg-rates__amount' }, tier.price),
       tier.interval === undefined
         ? null
-        : h('span', { class: 'cg-ratecard__interval' }, tier.interval),
+        : h('span', { class: 'cg-rates__interval' }, tier.interval),
     ),
     tier.features.length === 0
       ? null
       : h(
           'ul',
-          { class: 'cg-ratecard__features' },
-          tier.features.map((feature) => h('li', { class: 'cg-ratecard__feature' }, feature)),
+          { class: 'cg-rates__features' },
+          tier.features.map((feature) => h('li', { class: 'cg-rates__feature' }, feature)),
         ),
     tier.action === undefined
       ? null
       : h(
           'div',
-          { class: 'cg-ratecard__action' },
-          actionLink(ctx, { ...tier.action, emphasis: tier.action.emphasis ?? 'primary' }),
+          { class: 'cg-rates__action' },
+          actionLink(ctx, {
+            ...tier.action,
+            emphasis: tier.action.emphasis ?? (highlighted ? 'primary' : 'secondary'),
+          }),
         ),
   )
 }
 
 export function renderPricingTable(block: PricingTableBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const tierTag = nestedHeadingTag('pricingTable', hasTitle)
-  return h(
+  const tierTag = nestedHeadingTag('pricingTable', block.title !== undefined)
+  return section(
     'section',
-    { class: 'cg-block cg-ratecard', 'data-block': 'pricingTable' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('pricingTable') ?? 'h2',
-          { class: 'cg-ratecard__title', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'pricingTable',
+    'cg-rates',
+    { 'data-count': String(Math.min(block.tiers.length, 4)) },
+    'div',
+    sectionHead('pricingTable', block.title),
     h(
       'ul',
-      { class: 'cg-ratecard__tiers' },
+      { class: 'cg-rates__tiers' },
       block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
     ),
   )

package/src/render/blocks/prose.ts

@@ -1,22 +1,22 @@
 import type { ProseBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `prose` declares `headingLevel: 'none'` — it contributes no heading of its
- * own, and `renderRichText` (shared, `@cogenta/theme-kit`) is what actually
- * turns the document into markup, including its embedded figures
- * (`.cg-prose__figure`, a class name that module already fixes — this file's
- * own container class has to match it).
- *
- * The drop cap and the pull-quote treatment on a nested `<blockquote>` are
- * both pure CSS, keyed off `.cg-prose > :first-child` and `.cg-prose
- * blockquote` in `blocks.css` — nothing here has to know which paragraph
- * came first.
+ * Running text, in the reading column: Source Serif at the reading size and
+ * a measure of about 66 characters, subheads in the display face, a
+ * blockquote set as a pull quote, figures captioned. On an article the first
+ * paragraph of the first `prose` block may open on a drop cap (`article.css`,
+ * keyed on `data-opening`), and only where the browser can set a real
+ * initial letter.
  */
 export function renderProse(block: ProseBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'div',
-    { class: 'cg-block cg-prose', 'data-block': 'prose' },
-    renderRichText(ctx, block.body),
+    'prose',
+    'cg-prose',
+    {},
+    'div',
+    h('div', { class: 'cg-prose__body' }, renderRichText(ctx, block.body)),
   )
 }

package/src/render/blocks/quote.ts

@@ -1,25 +1,29 @@
 import type { QuoteBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * The pull quote — the one typographic gesture a magazine spread always
- * makes. Set large in the display serif, indented from a heavy left rule
- * rather than centred under a giant glyph, with the attribution trailing it
- * on its own line, joined by a typographic em-rule instead of a comma the
- * markup does not carry.
+ * A pull quote: a short red rule, the words in the display face at a large
+ * italic size, and the speaker in small capitals with their role after them.
+ * In an article it hangs to the left of the reading column; on any other page
+ * it takes the same columns as the text around it.
  *
- * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
- * pattern the HTML spec itself prescribes — the author's name sitting
- * outside the `<blockquote>` is what stops it from being claimed as part of
- * what was said.
+ * The avatar is decorative (the name is beside it in text), so it keeps the
+ * media library's own empty `alt`.
  */
 export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement {
-  const hasAttribution =
-    block.author !== undefined || block.role !== undefined || block.avatar !== undefined
-  return h(
+  const hasAttribution = block.author !== undefined || block.role !== undefined
+  return section(
+    'div',
+    'quote',
+    'cg-pullquote',
+    {},
     'figure',
-    { class: 'cg-block cg-pullquote', 'data-block': 'quote' },
-    h('blockquote', { class: 'cg-pullquote__text' }, h('p', { 'data-field': 'text' }, block.text)),
+    h(
+      'blockquote',
+      { class: 'cg-pullquote__quote' },
+      h('p', { class: 'cg-pullquote__text', 'data-field': 'text' }, block.text),
+    ),
     hasAttribution
       ? h(
           'figcaption',
@@ -30,16 +34,12 @@ export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement
                 className: 'cg-pullquote__avatar',
                 variant: { width: 96, height: 96, fit: 'cover' },
               }),
-          h(
-            'span',
-            { class: 'cg-pullquote__names' },
-            block.author === undefined
-              ? null
-              : h('span', { class: 'cg-pullquote__author', 'data-field': 'author' }, block.author),
-            block.role === undefined
-              ? null
-              : h('span', { class: 'cg-pullquote__role', 'data-field': 'role' }, block.role),
-          ),
+          block.author === undefined
+            ? null
+            : h('span', { class: 'cg-pullquote__author', 'data-field': 'author' }, block.author),
+          block.role === undefined
+            ? null
+            : h('span', { class: 'cg-pullquote__role', 'data-field': 'role' }, block.role),
         )
       : null,
   )

package/src/render/blocks/stat-counter.ts

@@ -1,39 +1,31 @@
 import type { StatCounterBlock, StatCounterItem } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import { type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). A circulation tally, set apart from `stats`'s own
- * `cg-figures` (which carries vertical column rules and an optional `unit`):
- * `statCounter` has no `unit`, so it is laid out as a single running line —
- * each figure and its label separated only by a shared baseline rule, the
- * way a masthead prints its circulation and edition counts along one strip.
+ * "By the numbers": a ruled table of figures down the page, each row a value
+ * in the display face on the left and what it counts on the right. Where
+ * `stats` sets figures side by side, this sets them as a list a reader runs
+ * down, which suits a longer set. It carries no unit, the narrower shape
+ * contract B gives it.
  */
 function renderItem(item: StatCounterItem): HtmlElement {
   return h(
     'div',
-    { class: 'cg-tally__item' },
-    h('dd', { class: 'cg-tally__value' }, item.value),
+    { class: 'cg-tally__row' },
     h('dt', { class: 'cg-tally__label' }, item.label),
+    h('dd', { class: 'cg-tally__value' }, item.value),
   )
 }
 
 export function renderStatCounter(block: StatCounterBlock, _ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-block cg-tally', 'data-block': 'statCounter' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('statCounter') ?? 'h2',
-          { class: 'cg-tally__title', 'data-field': 'title' },
-          block.title,
-        ),
-    h('dl', { class: 'cg-tally__items' }, block.stats.map(renderItem)),
+    'statCounter',
+    'cg-tally',
+    {},
+    'div',
+    sectionHead('statCounter', block.title),
+    h('dl', { class: 'cg-tally__rows' }, block.stats.map(renderItem)),
   )
 }

package/src/render/blocks/stats.ts

@@ -1,20 +1,13 @@
 import type { StatItem, StatsBlock } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import { type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * "By the numbers" — an infographic sidebar with a real newspaper
- * `column-rule` between figures, each set in the display serif with tabular
- * numerals so a column of changing digits never shifts width.
- *
- * A description list, as in the reference theme: each figure *describes* its
- * label, which is exactly what `<dt>`/`<dd>` mean, and it survives being read
- * linearly by anything that ignores the stylesheet.
+ * Figures in a row between two rules, the way a newspaper sets a fact box
+ * without the box: each value in the display face with lining tabular
+ * numerals, its unit smaller beside it, the label under it in the interface
+ * face, and a vertical hairline between figures. A description list, so
+ * each value is announced with its label.
  */
 function renderItem(item: StatItem): HtmlElement {
   return h(
@@ -24,23 +17,20 @@ function renderItem(item: StatItem): HtmlElement {
     h(
       'dd',
       { class: 'cg-figures__value' },
-      item.value,
+      h('span', { class: 'cg-figures__number' }, item.value),
       item.unit === undefined ? null : h('span', { class: 'cg-figures__unit' }, item.unit),
     ),
   )
 }
 
 export function renderStats(block: StatsBlock, _ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-block cg-figures', 'data-block': 'stats' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('stats') ?? 'h2',
-          { class: 'cg-figures__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'stats',
+    'cg-figures',
+    { 'data-count': String(Math.min(block.items.length, 4)) },
+    'div',
+    sectionHead('stats', block.title),
     h('dl', { class: 'cg-figures__items' }, block.items.map(renderItem)),
   )
 }

package/src/render/blocks/testimonial.ts

@@ -1,30 +1,25 @@
 import type { TestimonialBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). A reader's letter, not a pull quote: `quote`
- * already owns the theme's one "loud" typographic gesture (the giant quote
- * mark and heavy rule in `cg-pullquote`), so a testimonial reads instead as
- * a boxed letter-to-the-editor — a framed panel, the quote set in italic
- * serif at body size rather than blown up, and a byline row underneath a
- * hairline rule, the way a magazine runs its reader mail column.
- *
- * The quote is rich text (unlike `quote`'s plain-text `text`), so a
- * testimonial can carry a link or emphasis; `renderRichText` handles it the
- * same way `accordion`'s answers and `prose`'s body do.
- *
- * The avatar is decorative, exactly like `quote`'s own: the name sits right
- * beside it in text, so its media entity's alt text is expected to be empty.
+ * A letter from a reader, set as the letters page sets one: the words in the
+ * reading face one step above the text size, a hairline, and the writer's
+ * name in small capitals with where they write from. Quieter than `quote` on
+ * purpose: a pull quote is display, a letter is correspondence.
  */
 export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
   const { attribution } = block
-  return h(
+  return section(
+    'div',
+    'testimonial',
+    'cg-letter',
+    {},
     'figure',
-    { class: 'cg-block cg-letter', 'data-block': 'testimonial' },
     h('blockquote', { class: 'cg-letter__quote' }, renderRichText(ctx, block.quote)),
     h(
       'figcaption',
-      { class: 'cg-letter__byline' },
+      { class: 'cg-letter__attribution' },
       attribution.avatar === undefined
         ? null
         : image(ctx, attribution.avatar, {
@@ -33,7 +28,7 @@ export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext):
           }),
       h(
         'span',
-        { class: 'cg-letter__names' },
+        { class: 'cg-letter__who' },
         h('span', { class: 'cg-letter__name' }, attribution.name),
         attribution.role === undefined
           ? null