@druck-editorial/engine 0.1.2 → 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/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.2",
+  "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",