@druck-editorial/engine 0.1.1 → 0.1.2

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/package.json

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