@druck-editorial/engine 0.1.1 → 0.2.0

package/dist/frontpage.d.ts

@@ -1,8 +1,19 @@
 import type { ArticleData, RenderOptions } from './types.js';
 export type FrontPageRowType = 'hero' | 'feature' | 'triple' | 'brief';
+export interface FrontPageItem extends ArticleData {
+    role: 'lead' | 'feature' | 'brief';
+    hasImage: boolean;
+}
 export interface FrontPageRow {
     type: FrontPageRowType;
-    items: ArticleData[];
+    items: FrontPageItem[];
 }
 export declare function buildFrontPage(items: ArticleData[]): FrontPageRow[];
+export type FrontPageComposer = (rows: FrontPageRow[], opts?: RenderOptions) => string;
+export interface FrontPagePartition {
+    lead?: FrontPageItem;
+    cells: FrontPageItem[];
+    brief: FrontPageItem[];
+}
+export declare function partitionRows(rows: FrontPageRow[]): FrontPagePartition;
 export declare function renderFrontPage(rows: FrontPageRow[], opts?: RenderOptions): string;

package/dist/frontpage.js

@@ -3,6 +3,15 @@
 import { escapeHtml, safeUrl } from './format.js';
 import { categoryClass, renderCard } from './render.js';
 const BRIEF_MAX = 5;
+const ROLE_BY_TYPE = {
+    hero: 'lead',
+    feature: 'feature',
+    triple: 'feature',
+    brief: 'brief',
+};
+function enrichItem(data, role) {
+    return { ...data, role, hasImage: Boolean(safeUrl(data.heroImage)) };
+}
 export function buildFrontPage(items) {
     if (!items.length)
         return [];
@@ -10,15 +19,20 @@ export function buildFrontPage(items) {
     const hotIdx = pool.findIndex((entry) => entry.hot);
     if (hotIdx > 0)
         pool.unshift(pool.splice(hotIdx, 1)[0]);
-    const rows = [{ type: 'hero', items: pool.splice(0, 1) }];
+    const raw = [
+        { type: 'hero', items: pool.splice(0, 1) },
+    ];
     if (pool.length >= 2)
-        rows.push({ type: 'feature', items: pool.splice(0, 2) });
+        raw.push({ type: 'feature', items: pool.splice(0, 2) });
     if (pool.length >= 3)
-        rows.push({ type: 'triple', items: pool.splice(0, 3) });
+        raw.push({ type: 'triple', items: pool.splice(0, 3) });
     const brief = pool.splice(0, BRIEF_MAX);
     if (brief.length)
-        rows.push({ type: 'brief', items: brief });
-    return rows;
+        raw.push({ type: 'brief', items: brief });
+    return raw.map((row) => ({
+        type: row.type,
+        items: row.items.map((data) => enrichItem(data, ROLE_BY_TYPE[row.type])),
+    }));
 }
 function renderHeroCard(data) {
     const href = safeUrl(data.shareUrl ?? '') || '#';
@@ -40,8 +54,9 @@ function renderBriefItem(data) {
         `<time>${escapeHtml(data.publishedAt)}</time>` +
         '</a></li>');
 }
-export function renderFrontPage(rows, opts) {
-    const rendered = rows.map((row) => {
+function composeClassic(rows, opts) {
+    return rows
+        .map((row) => {
         if (row.type === 'hero') {
             return `<div class="df-row df-row--hero">${renderHeroCard(row.items[0])}</div>`;
         }
@@ -52,6 +67,136 @@ export function renderFrontPage(rows, opts) {
         const cls = row.type === 'feature' ? 'df-row--feature' : 'df-row--triple';
         const cards = row.items.map((entry) => renderCard(entry, opts)).join('');
         return `<div class="df-row ${cls}">${cards}</div>`;
+    })
+        .join('');
+}
+export function partitionRows(rows) {
+    return {
+        lead: rows.find((r) => r.type === 'hero')?.items[0],
+        cells: rows.filter((r) => r.type === 'feature' || r.type === 'triple').flatMap((r) => r.items),
+        brief: rows.find((r) => r.type === 'brief')?.items ?? [],
+    };
+}
+function safeHref(item) {
+    return escapeHtml(safeUrl(item.shareUrl ?? '') || '#');
+}
+function safeImg(item) {
+    return escapeHtml(safeUrl(item.heroImage) || 'data:,');
+}
+function brutalistLead(item) {
+    const kicker = `${item.category}${item.hot ? ' / Hot' : ''}`;
+    return ('<div class="dfb-lead">' +
+        '<div class="dfb-head">' +
+        `<span class="dfb-kicker">${escapeHtml(kicker)}</span>` +
+        `<a class="dfb-title" href="${safeHref(item)}"><h2>${escapeHtml(item.title)}</h2></a>` +
+        '</div>' +
+        `<a class="dfb-img" href="${safeHref(item)}">` +
+        `<img src="${safeImg(item)}" alt="${escapeHtml(item.heroImageAlt ?? item.title)}" loading="lazy" width="1200" height="675">` +
+        '</a>' +
+        '</div>');
+}
+function brutalistCell(item, n) {
+    return (`<a class="dfb-cell" href="${safeHref(item)}">` +
+        `<span class="dfb-n">${String(n).padStart(2, '0')}</span>` +
+        `<span class="dfb-ck">${escapeHtml(item.category)}</span>` +
+        `<h3>${escapeHtml(item.title)}</h3>` +
+        '</a>');
+}
+function brutalistBriefItem(item) {
+    return (`<li><a href="${safeHref(item)}">` +
+        `<span class="dfb-bt">${escapeHtml(item.title)}</span>` +
+        `<time>${escapeHtml(item.publishedAt)}</time>` +
+        '</a></li>');
+}
+function composeBrutalist(rows, _opts) {
+    const { lead, cells, brief } = partitionRows(rows);
+    const parts = [
+        '<div class="dfb-mast"><span class="dfb-wm">Druck</span></div><div class="dfb-rule"></div>',
+    ];
+    if (lead)
+        parts.push(brutalistLead(lead));
+    if (cells.length) {
+        parts.push(`<div class="dfb-grid">${cells.map((c, i) => brutalistCell(c, i + 2)).join('')}</div>`);
+    }
+    if (brief.length) {
+        parts.push(`<ol class="dfb-brief">${brief.map(brutalistBriefItem).join('')}</ol>`);
+    }
+    return parts.join('');
+}
+function composeBroadsheet(rows, _opts) {
+    const { lead, cells, brief } = partitionRows(rows);
+    const parts = ['<div class="dfbr-mast">The Druck</div><div class="dfbr-rule"></div>'];
+    if (lead) {
+        parts.push(`<div class="dfbr-date">${escapeHtml(lead.publishedAt)}</div>`);
+        parts.push(`<a class="dfbr-leadtitle" href="${safeHref(lead)}"><h2>${escapeHtml(lead.title)}</h2></a>`);
+        parts.push(`<p class="dfbr-sub">${escapeHtml(lead.subtitle)}</p>`);
+    }
+    const stories = [...cells, ...brief];
+    if (stories.length) {
+        parts.push('<div class="dfbr-cols">' + stories.map((s, i) => `<div class="dfbr-story${i === 0 ? ' dfbr-drop' : ''}"><h3>${escapeHtml(s.category)}</h3>` +
+            `<a href="${safeHref(s)}"><b>${escapeHtml(s.title)}</b></a> ${escapeHtml(s.subtitle)}</div>`).join('') + '</div>');
+    }
+    return parts.join('');
+}
+function composeHeroBlocks(rows, prefix) {
+    const { lead, cells, brief } = partitionRows(rows);
+    const parts = [];
+    if (lead) {
+        parts.push(`<a class="${prefix}-hero" href="${safeHref(lead)}">` +
+            `<img src="${safeImg(lead)}" alt="${escapeHtml(lead.heroImageAlt ?? lead.title)}" loading="lazy" width="1600" height="900">` +
+            `<span class="${prefix}-scrim"></span>` +
+            `<span class="${prefix}-htext"><span class="${prefix}-kick">${escapeHtml(lead.category)}</span>` +
+            `<h2>${escapeHtml(lead.title)}</h2></span></a>`);
+    }
+    const stories = [...cells, ...brief].slice(0, 6);
+    if (stories.length) {
+        parts.push(`<div class="${prefix}-body">` + stories.map((s) => `<a class="${prefix}-story" href="${safeHref(s)}"><span class="${prefix}-k">${escapeHtml(s.category)}</span>` +
+            `<h3>${escapeHtml(s.title)}</h3><p>${escapeHtml(s.subtitle)}</p></a>`).join('') + '</div>');
+    }
+    return parts.join('');
+}
+function composeLuxury(rows, _opts) {
+    return composeHeroBlocks(rows, 'dflx');
+}
+function composeNoir(rows, _opts) {
+    return composeHeroBlocks(rows, 'dfnr');
+}
+function composeBento(rows, _opts) {
+    const { lead, cells, brief } = partitionRows(rows);
+    const tiles = [];
+    if (lead) {
+        tiles.push(`<a class="dfbn-tile dfbn-hero" href="${safeHref(lead)}">` +
+            `<img src="${safeImg(lead)}" alt="${escapeHtml(lead.heroImageAlt ?? lead.title)}" loading="lazy" width="1200" height="800">` +
+            '<span class="dfbn-ov"></span>' +
+            `<span class="dfbn-tag">${escapeHtml(lead.category)}</span>` +
+            `<h3>${escapeHtml(lead.title)}</h3></a>`);
+    }
+    cells.forEach((c) => {
+        const media = c.hasImage
+            ? `<img src="${safeImg(c)}" alt="${escapeHtml(c.heroImageAlt ?? c.title)}" loading="lazy" width="800" height="600"><span class="dfbn-ov"></span>`
+            : '';
+        tiles.push(`<a class="dfbn-tile${c.hasImage ? ' dfbn-img' : ''}" href="${safeHref(c)}">${media}` +
+            `<span class="dfbn-tag">${escapeHtml(c.category)}</span>` +
+            `<h4>${escapeHtml(c.title)}</h4></a>`);
+    });
+    brief.slice(0, 3).forEach((b) => {
+        tiles.push(`<a class="dfbn-tile dfbn-mini" href="${safeHref(b)}"><span class="dfbn-tag">${escapeHtml(b.category)}</span>` +
+            `<h4>${escapeHtml(b.title)}</h4></a>`);
     });
-    return `<div class="druck-front-page">${rendered.join('')}</div>`;
+    return `<div class="dfbn-head"><span class="dfbn-wm">Druck</span></div><div class="dfbn-grid">${tiles.join('')}</div>`;
+}
+const COMPOSERS = {
+    classic: composeClassic,
+    brutalist: composeBrutalist,
+    broadsheet: composeBroadsheet,
+    luxury: composeLuxury,
+    noir: composeNoir,
+    bento: composeBento,
+};
+export function renderFrontPage(rows, opts) {
+    const requested = opts?.look ?? 'classic';
+    const compose = COMPOSERS[requested] ?? composeClassic;
+    const look = COMPOSERS[requested] ? requested : 'classic';
+    const lookClass = look === 'classic' ? '' : ` druck-front-page--${look}`;
+    return `<div class="druck-front-page${lookClass}">${compose(rows, opts)}</div>`;
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export type { ArticleFormat, ArticleData, Category, Chapter, KeyPoint, StatAside, SourceQuote, Figure, KnowCard, RelatedArticle, WeeklyData, WeeklySection, WeeklySectionArticle, RenderOptions, } from './types.js';
+export type { ArticleFormat, ArticleData, Category, Chapter, KeyPoint, StatAside, SourceQuote, Figure, KnowCard, RelatedArticle, WeeklyData, WeeklySection, WeeklySectionArticle, RenderOptions, FrontPageLook, } from './types.js';
 export { renderArticle, renderCard } from './render.js';
 export { transformInlineBlocks, sanitizeInline, escapeHtml, safeUrl } from './format.js';
 export { buildFrontPage, renderFrontPage } from './frontpage.js';
-export type { FrontPageRow, FrontPageRowType } from './frontpage.js';
+export type { FrontPageRow, FrontPageRowType, FrontPageItem } from './frontpage.js';

package/dist/render.js

@@ -12,18 +12,19 @@ function titleWithAccent(title, accentWord) {
     const idx = safe.indexOf(safeWord);
     return safe.slice(0, idx) + `<em class="accent-word">${safeWord}</em>` + safe.slice(idx + safeWord.length);
 }
-function renderChapter(num, total, chapter) {
+function renderChapter(num, total, chapter, lang) {
     const titleHtml = titleWithAccent(chapter.title, chapter.titleAccentWord);
     const body = transformInlineBlocks(chapter.bodyHtml);
+    const labels = uiLabels(lang);
     return ('<section class="chapter-panel">' +
         '<div class="chapter-head">' +
-        `<div class="chapter-num">Chapter ${escapeHtml(String(num))} &middot; of ${String(total).padStart(2, '0')}</div>` +
+        `<div class="chapter-num">${labels.chapter} ${escapeHtml(String(num))} &middot; ${labels.chapterOf} ${String(total).padStart(2, '0')}</div>` +
         `<h2 class="chapter-title">${titleHtml}</h2>` +
         '</div>' +
         `<div class="chapter-body">${body}</div>` +
         '</section>');
 }
-function renderKeyPoints(points) {
+function renderKeyPoints(points, lang) {
     if (!points?.length)
         return '';
     const items = points
@@ -31,7 +32,7 @@ function renderKeyPoints(points) {
         .map((p, i) => `<div class="kp-item"><div class="n">${String(i + 1).padStart(2, '0')}</div><p>${escapeHtml(p.text)}</p></div>`)
         .join('');
     return ('<section class="key-points">' +
-        '<div class="lbl">Three things to know</div>' +
+        `<div class="lbl">${uiLabels(lang).threeThings}</div>` +
         `<div class="key-points-grid">${items}</div>` +
         '</section>');
 }
@@ -42,30 +43,60 @@ function renderKnowCard(items, label, kind) {
         `<ul>${lis || '<li>&mdash;</li>'}</ul>` +
         '</div>');
 }
-function renderKnowCards(known, unknown) {
+function renderKnowCards(known, unknown, lang) {
     const k = known?.items ?? [];
     const u = unknown?.items ?? [];
     if (!k.length && !u.length)
         return '';
+    const labels = uiLabels(lang);
     return ('<aside class="know-cards" role="note">' +
-        renderKnowCard(k, 'What we know', 'yes') +
-        renderKnowCard(u, "What we don't", 'no') +
+        renderKnowCard(k, labels.knowYes, 'yes') +
+        renderKnowCard(u, labels.knowNo, 'no') +
         '</aside>');
 }
-function renderEditorsNote(angle, sourceCount) {
+function renderEditorsNote(angle, sourceCount, lang) {
     if (!angle)
         return '';
-    const siteName = 'Druck';
+    const labels = uiLabels(lang);
     return ('<aside class="editors-note" role="note">' +
-        "<span class=\"lbl\">Editor's note</span> " +
-        `Written by ${siteName}'s editorial agent from <b>${sourceCount ?? 1} sources</b>. ` +
-        `<b>${siteName}'s angle:</b> ${escapeHtml(angle)}` +
+        `<span class="lbl">${labels.editorsNote}</span> ` +
+        `${labels.writtenBy(sourceCount ?? 1)} ` +
+        `<b>${labels.angle}</b> ${escapeHtml(angle)}` +
         '</aside>');
 }
-function renderShareBar(title, url) {
+const UI_LABELS = {
+    en: {
+        share: 'Share this story',
+        byEditorial: 'By Editorial',
+        chapter: 'Chapter',
+        chapterOf: 'of',
+        threeThings: 'Three things to know',
+        knowYes: 'What we know',
+        knowNo: "What we don't",
+        editorsNote: "Editor's note",
+        writtenBy: (n) => `Written by Druck's editorial agent from <b>${n} sources</b>.`,
+        angle: "Druck's angle:",
+    },
+    de: {
+        share: 'Diesen Artikel teilen',
+        byEditorial: 'Von der Redaktion',
+        chapter: 'Kapitel',
+        chapterOf: 'von',
+        threeThings: 'Drei Dinge vorab',
+        knowYes: 'Was wir wissen',
+        knowNo: 'Was wir nicht wissen',
+        editorsNote: 'Anmerkung der Redaktion',
+        writtenBy: (n) => `Von Drucks Redaktions-KI aus <b>${n} Quellen</b> geschrieben.`,
+        angle: 'Drucks Blickwinkel:',
+    },
+};
+function uiLabels(lang) {
+    return UI_LABELS[lang] ?? UI_LABELS.en;
+}
+function renderShareBar(title, url, lang) {
     const shareUrl = url ?? '#';
     return ('<div class="article-share-bar">' +
-        '<span class="article-share-bar-label">Share this story</span>' +
+        `<span class="article-share-bar-label">${uiLabels(lang).share}</span>` +
         '<div class="article-share-bar-actions">' +
         `<button class="share-btn-pill" data-share-button data-share-title="${escapeHtml(title)}" data-share-url="${escapeHtml(shareUrl)}" aria-label="Share article">` +
         '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
@@ -116,13 +147,13 @@ export function renderArticle(data, opts) {
 }
 function renderFeatureArticle(data, ctx) {
     const chaptersHtml = (data.chapters ?? [])
-        .map((ch, i) => renderChapter(i + 1, data.chapters.length, ch))
+        .map((ch, i) => renderChapter(i + 1, data.chapters.length, ch, ctx.lang))
         .join('');
     const bodyHtml = transformInlineBlocks(data.bodyHtml ?? chaptersHtml);
     const readingSpan = data.readingTime ? `<span>${escapeHtml(data.readingTime)}</span>` : '';
     const byline = data.byline
         ? `<span>${escapeHtml(data.byline.author)}</span><span>${escapeHtml(data.byline.date)}</span>${readingSpan}`
-        : `<span>By Editorial</span>${readingSpan}`;
+        : `<span>${uiLabels(ctx.lang).byEditorial}</span>${readingSpan}`;
     return (`<article class="article-shell ${ctx.catClass}">` +
         '<div class="article-progress" aria-hidden="true"><div class="fill"></div></div>' +
         '<header class="article-hero">' +
@@ -136,12 +167,12 @@ function renderFeatureArticle(data, ctx) {
         (data.heroImage
             ? `<figure class="article-hero-img"><img src="${escapeHtml(safeUrl(data.heroImage))}" alt="${escapeHtml(data.heroImageAlt ?? data.title)}" loading="eager" fetchpriority="high" width="${safeDimension(data.heroImageWidth, 1920)}" height="${safeDimension(data.heroImageHeight, 1080)}"></figure>`
             : '') +
-        renderEditorsNote(data.editorsNote, data.sourceCount) +
+        renderEditorsNote(data.editorsNote, data.sourceCount, ctx.lang) +
         `<div class="article-body">${bodyHtml}</div>` +
-        renderKeyPoints(data.keyPoints) +
-        renderKnowCards(data.known, data.unknown) +
+        renderKeyPoints(data.keyPoints, ctx.lang) +
+        renderKnowCards(data.known, data.unknown, ctx.lang) +
         renderRelated(data.related) +
-        renderShareBar(data.title, data.shareUrl) +
+        renderShareBar(data.title, data.shareUrl, ctx.lang) +
         '</article>');
 }
 function renderWireArticle(data, ctx) {
@@ -163,7 +194,7 @@ function renderWireArticle(data, ctx) {
             ? `<aside class="editors-note" role="note"><span class="lbl">Why it matters</span> ${escapeHtml(data.whyItMatters)}</aside>`
             : '') +
         renderRelated(data.related) +
-        renderShareBar(data.title, data.shareUrl) +
+        renderShareBar(data.title, data.shareUrl, ctx.lang) +
         '</article>');
 }
 export function renderCard(data, opts) {

package/dist/types.d.ts

@@ -99,6 +99,7 @@ export interface WeeklySectionArticle {
     image?: string;
     summary?: string;
 }
+export type FrontPageLook = 'classic' | 'broadsheet' | 'brutalist' | 'luxury' | 'noir' | 'bento';
 export interface RenderOptions {
     lang?: string;
     theme?: 'light' | 'dark';
@@ -107,4 +108,5 @@ export interface RenderOptions {
     siteUrl?: string;
     canonicalUrl?: string;
     ogImageUrl?: string;
+    look?: FrontPageLook;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@druck-editorial/engine",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Editorial rendering engine: structured article JSON in, magazine-quality pages out.",
   "author": "Artem Iagovdik <artyom.yagovdik@gmail.com>",
   "license": "MIT",