@druck-editorial/engine 0.1.0 → 0.1.1

package/dist/format.d.ts

@@ -1,5 +1,5 @@
 declare function escapeHtml(s: string): string;
 declare function sanitizeInline(html: string): string;
 declare function transformInlineBlocks(bodyHtml: string): string;
-declare function safeUrl(url: string): string;
+declare function safeUrl(url: string | undefined): string;
 export { escapeHtml, sanitizeInline, transformInlineBlocks, safeUrl };

package/dist/format.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Artem Iagovdik <artyom.yagovdik@gmail.com>
 const INLINE_ALLOWED_TAGS = new Set(['strong', 'em', 'b', 'i', 'span', 'a']);
 const INLINE_ALLOWED_ATTRS = {
     a: new Set(['href']),
@@ -76,11 +78,40 @@ function sanitizeInline(html) {
 const STAT_RE = /<aside\s+data-stat="(?<value>[^"]+)">(?<label>.*?)<\/aside>/gis;
 const QUOTE_RE = /<blockquote\s+(?:data-source="(?<src>[^"]*)"\s*)?(?:data-source-url="(?<url>[^"]*)"\s*)?(?:data-attr="(?<attr>[^"]*)"\s*)?>(?<text>.*?)<\/blockquote>/gis;
 const TAG_STRIP_RE = /<[^>]+>/g;
+const SCRIPT_RE = /<script\b[^>]*>[\s\S]*?<\/script\s*>/gi;
+const SCRIPT_OPEN_RE = /<script\b[^>]*>/gi;
+const ON_ATTR_RE = /[\s/]+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi;
+const URL_ATTR_RE = /[\s/]+(?:href|src|xlink:href|formaction|poster)\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+const DANGEROUS_SCHEME_RE = /^(?:javascript|vbscript|data)\s*:/i;
+const DANGEROUS_TAG_RE = /<\/?(?:script|style|iframe|object|embed|form|input|button|textarea|select|meta|link|base|svg|math)\b[^>]*>/gi;
+function fromCodePoint(code) {
+    return code >= 0 && code <= 0x10ffff ? String.fromCodePoint(code) : '';
+}
+function decodeEntities(value) {
+    return value
+        .replace(/&#x([0-9a-f]+);?/gi, (_m, hex) => fromCodePoint(parseInt(hex, 16)))
+        .replace(/&#(\d+);?/g, (_m, dec) => fromCodePoint(parseInt(dec, 10)));
+}
+function stripDangerousUrlAttrs(html) {
+    return html.replace(URL_ATTR_RE, (match, doubleQuoted, singleQuoted) => {
+        const raw = doubleQuoted ?? singleQuoted ?? '';
+        const normalized = decodeEntities(raw).replace(/[\s\u0000-\u001f]+/g, '');
+        return DANGEROUS_SCHEME_RE.test(normalized) ? '' : match;
+    });
+}
+function sanitizeBody(html) {
+    return stripDangerousUrlAttrs(html
+        .replace(SCRIPT_RE, '')
+        .replace(SCRIPT_OPEN_RE, '')
+        .replace(DANGEROUS_TAG_RE, '')
+        .replace(ON_ATTR_RE, '')).replace(/javascript\s*:/gi, '');
+}
 function plainStatValue(raw) {
     return raw.replace(TAG_STRIP_RE, '').trim();
 }
 function transformInlineBlocks(bodyHtml) {
-    return bodyHtml
+    const safe = sanitizeBody(bodyHtml);
+    return safe
         .replace(STAT_RE, (_match, _value, _label, offset, str, groups) => {
         const value = plainStatValue(groups?.value ?? _value);
         const label = (groups?.label ?? _label ?? '').trim();
@@ -110,6 +141,6 @@ function transformInlineBlocks(bodyHtml) {
     });
 }
 function safeUrl(url) {
-    return SAFE_HREF_RE.test(url) ? url : '';
+    return url && SAFE_HREF_RE.test(url) ? url : '';
 }
 export { escapeHtml, sanitizeInline, transformInlineBlocks, safeUrl };

package/dist/frontpage.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Artem Iagovdik <artyom.yagovdik@gmail.com>
 import { escapeHtml, safeUrl } from './format.js';
 import { categoryClass, renderCard } from './render.js';
 const BRIEF_MAX = 5;

package/dist/render.d.ts

@@ -1,5 +1,4 @@
-import type { ArticleData, RenderOptions, WeeklyData } from './types.js';
+import type { ArticleData, RenderOptions } from './types.js';
 export declare function categoryClass(category: string): string;
 export declare function renderArticle(data: ArticleData, opts?: RenderOptions): string;
-export declare function renderWeekly(data: WeeklyData, opts?: RenderOptions): string;
 export declare function renderCard(data: ArticleData, opts?: RenderOptions): string;

package/dist/render.js

@@ -78,7 +78,7 @@ function renderShareBar(title, url) {
         '</div>');
 }
 export function categoryClass(category) {
-    return `cat-${category}`;
+    return `cat-${escapeHtml(category)}`;
 }
 function formatLabel(format) {
     if (format === 'quick_take')
@@ -133,7 +133,9 @@ function renderFeatureArticle(data, ctx) {
         `<div class="article-byline">${byline}</div>` +
         '</div>' +
         '</header>' +
-        `<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>` +
+        (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) +
         `<div class="article-body">${bodyHtml}</div>` +
         renderKeyPoints(data.keyPoints) +
@@ -150,7 +152,9 @@ function renderWireArticle(data, ctx) {
         `<h1 class="post-simple-title">${ctx.titleHtml}</h1>` +
         `<div class="post-simple-meta"><span>${escapeHtml(data.publishedAt)}</span>${data.readingTime ? `<span>${escapeHtml(data.readingTime)}</span>` : ''}</div>` +
         '</header>' +
-        `<figure class="post-simple-img"><img src="${escapeHtml(safeUrl(data.heroImage))}" alt="${escapeHtml(data.heroImageAlt ?? data.title)}" loading="eager" fetchpriority="high" decoding="async" width="${safeDimension(data.heroImageWidth, 1600)}" height="${safeDimension(data.heroImageHeight, 900)}"></figure>` +
+        (data.heroImage
+            ? `<figure class="post-simple-img"><img src="${escapeHtml(safeUrl(data.heroImage))}" alt="${escapeHtml(data.heroImageAlt ?? data.title)}" loading="eager" fetchpriority="high" decoding="async" width="${safeDimension(data.heroImageWidth, 1600)}" height="${safeDimension(data.heroImageHeight, 900)}"></figure>`
+            : '') +
         `<div class="post-simple-body">${bodyHtml}</div>` +
         (data.pullQuote
             ? `<figure class="source-quote"><p class="q">${sanitizeInline(data.pullQuote)}</p></figure>`
@@ -162,28 +166,6 @@ function renderWireArticle(data, ctx) {
         renderShareBar(data.title, data.shareUrl) +
         '</article>');
 }
-export function renderWeekly(data, opts) {
-    const sectionsHtml = data.sections
-        .map((s) => renderWeeklySection(s))
-        .join('');
-    return (`<article class="article-shell cat-weekly">` +
-        '<div class="article-progress" aria-hidden="true"><div class="fill"></div></div>' +
-        '<header class="article-hero">' +
-        '<div class="article-hero-inner">' +
-        '<div class="article-kicker">Weekly Recap</div>' +
-        `<h1 class="article-title">${escapeHtml(data.title)}</h1>` +
-        `<p class="article-deck">${escapeHtml(data.subtitle)}</p>` +
-        '</div>' +
-        '</header>' +
-        `<figure class="article-hero-img"><img src="${escapeHtml(safeUrl(data.heroImage))}" alt="${escapeHtml(data.title)}" loading="eager" width="1920" height="1080"></figure>` +
-        `<div class="recap-thesis">${escapeHtml(data.thesis)}</div>` +
-        `<div class="article-body">${sectionsHtml}</div>` +
-        renderKeyPoints(data.keyPoints) +
-        renderKnowCards(data.known, data.unknown) +
-        renderRelated(data.related) +
-        renderShareBar(data.title, data.shareUrl) +
-        '</article>');
-}
 export function renderCard(data, opts) {
     const catClass = categoryClass(data.category);
     const titleHtml = titleWithAccent(data.title, data.titleAccentWord);
@@ -191,7 +173,9 @@ export function renderCard(data, opts) {
     const rawHref = data.shareUrl ?? `#${data.slug}`;
     const href = safeUrl(rawHref) || '#';
     return (`<a class="druck-card ${catClass}" href="${escapeHtml(href)}">` +
-        `<figure class="card-thumb"><img src="${escapeHtml(safeUrl(data.heroImage))}" alt="${escapeHtml(data.heroImageAlt ?? data.title)}" loading="lazy" width="400" height="225"></figure>` +
+        (data.heroImage
+            ? `<figure class="card-thumb"><img src="${escapeHtml(safeUrl(data.heroImage))}" alt="${escapeHtml(data.heroImageAlt ?? data.title)}" loading="lazy" width="400" height="225"></figure>`
+            : `<figure class="card-thumb card-thumb--placeholder" aria-hidden="true"><span class="thumb-mark">${escapeHtml((data.title.trim()[0] ?? '').toUpperCase())}</span></figure>`) +
         `<div class="card-text">` +
         `<div class="card-kicker">${escapeHtml(data.category)}${fLabel ? ` <span class="sep">&middot;</span> ${fLabel}` : ''}</div>` +
         `<h3 class="card-title">${titleHtml}</h3>` +
@@ -200,25 +184,3 @@ export function renderCard(data, opts) {
         `</div>` +
         `</a>`);
 }
-function renderWeeklySection(section) {
-    const narrativeHtml = transformInlineBlocks(section.narrative);
-    const keyPointsHtml = renderKeyPoints(section.keyPoints);
-    const articlesHtml = (section.articles ?? [])
-        .map((a) => {
-        const safeArticleUrl = safeUrl(a.url);
-        if (!safeArticleUrl)
-            return '';
-        return (`<a class="recap-article" href="${escapeHtml(safeArticleUrl)}">` +
-            (a.image ? `<img class="recap-article-thumb" src="${escapeHtml(safeUrl(a.image))}" alt="" loading="lazy">` : '') +
-            `<div class="recap-article-title">${escapeHtml(a.title)}</div>` +
-            (a.summary ? `<div class="recap-article-summary">${escapeHtml(a.summary)}</div>` : '') +
-            '</a>');
-    })
-        .join('');
-    return ('<section class="chapter-panel recap-section">' +
-        `<h2 class="recap-section-title">${escapeHtml(section.title)}</h2>` +
-        `<div class="recap-section-narrative">${narrativeHtml}</div>` +
-        keyPointsHtml +
-        (articlesHtml ? `<div class="recap-articles">${articlesHtml}</div>` : '') +
-        '</section>');
-}

package/dist/types.d.ts

@@ -39,7 +39,7 @@ export interface ArticleData {
     category: Category;
     publishedAt: string;
     readingTime?: string;
-    heroImage: string;
+    heroImage?: string;
     heroImageAlt?: string;
     heroImageWidth?: number;
     heroImageHeight?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@druck-editorial/engine",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Editorial rendering engine: structured article JSON in, magazine-quality pages out.",
   "author": "Artem Iagovdik <artyom.yagovdik@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "vitest": "^3.2.0"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "rm -rf dist && tsc",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
   }

package/dist/frontpage.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/frontpage.test.js

@@ -1,75 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { buildFrontPage, renderFrontPage } from './frontpage.js';
-function item(n, extra = {}) {
-    return {
-        title: `Story ${n}`,
-        subtitle: `Subtitle ${n}`,
-        metaDescription: `Meta ${n}`,
-        slug: `story-${n}`,
-        format: 'wire',
-        category: 'ai',
-        publishedAt: 'Jun 10, 2026',
-        heroImage: `https://example.com/${n}.webp`,
-        shareUrl: `https://example.com/articles/story-${n}/`,
-        ...extra,
-    };
-}
-const eleven = Array.from({ length: 11 }, (_, i) => item(i));
-describe('buildFrontPage', () => {
-    it('produces hero, feature, triple, brief for 11 items', () => {
-        const rows = buildFrontPage(eleven);
-        expect(rows.map((r) => r.type)).toEqual(['hero', 'feature', 'triple', 'brief']);
-        expect(rows.map((r) => r.items.length)).toEqual([1, 2, 3, 5]);
-    });
-    it('is deterministic', () => {
-        expect(buildFrontPage(eleven)).toEqual(buildFrontPage(eleven));
-    });
-    it('promotes the first hot item to the hero', () => {
-        const items = [item(0), item(1), item(2, { hot: true })];
-        const rows = buildFrontPage(items);
-        expect(rows[0].items[0].slug).toBe('story-2');
-    });
-    it('degrades gracefully on sparse input', () => {
-        expect(buildFrontPage([])).toEqual([]);
-        expect(buildFrontPage([item(0)]).map((r) => r.type)).toEqual(['hero']);
-        expect(buildFrontPage([item(0), item(1)]).map((r) => r.type)).toEqual(['hero', 'brief']);
-        expect(buildFrontPage(eleven.slice(0, 3)).map((r) => r.type)).toEqual(['hero', 'feature']);
-    });
-    it('caps brief at 5 and ignores overflow', () => {
-        const twenty = Array.from({ length: 20 }, (_, i) => item(i));
-        const rows = buildFrontPage(twenty);
-        expect(rows.at(-1)?.items.length).toBe(5);
-        expect(rows.flatMap((r) => r.items).length).toBe(11);
-    });
-});
-describe('renderFrontPage', () => {
-    it('renders row wrappers and a scrimmed hero card', () => {
-        const html = renderFrontPage(buildFrontPage(eleven));
-        expect(html).toContain('class="druck-front-page"');
-        expect(html).toContain('df-row--hero');
-        expect(html).toContain('df-row--feature');
-        expect(html).toContain('df-row--triple');
-        expect(html).toContain('df-row--brief');
-        expect(html).toContain('df-hero-scrim');
-    });
-    it('renders a HOT badge only for hot heroes', () => {
-        const hot = renderFrontPage(buildFrontPage([item(0, { hot: true })]));
-        const cold = renderFrontPage(buildFrontPage([item(0)]));
-        expect(hot).toContain('df-hot');
-        expect(cold).not.toContain('df-hot');
-    });
-    it('escapes content and drops unsafe URLs', () => {
-        const evil = item(0, {
-            title: '<script>x</script>',
-            shareUrl: 'javascript:alert(1)',
-        });
-        const html = renderFrontPage(buildFrontPage([evil]));
-        expect(html).not.toContain('<script>x');
-        expect(html).not.toContain('javascript:');
-        expect(html).toContain('href="#"');
-    });
-    it('guards an empty hero image src', () => {
-        const html = renderFrontPage(buildFrontPage([item(0, { heroImage: '' })]));
-        expect(html).not.toContain('src=""');
-    });
-});

package/dist/render.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/render.test.js

@@ -1,116 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { renderArticle, renderCard } from './render.js';
-function buildArticle(overrides = {}) {
-    return {
-        title: 'Test Story',
-        subtitle: 'A subtitle',
-        metaDescription: 'meta',
-        slug: 'test-story',
-        format: 'feature',
-        category: 'ai',
-        publishedAt: '2026-06-09',
-        readingTime: '3 min read',
-        heroImage: '/img/test.webp',
-        chapters: [{ title: 'One', bodyHtml: '<p>Body</p>' }],
-        ...overrides,
-    };
-}
-describe('hero image attributes', () => {
-    test('emits provided alt text and dimensions on feature heroes', () => {
-        const html = renderArticle(buildArticle({ heroImageAlt: 'Abstract circuitry', heroImageWidth: 1920, heroImageHeight: 1047 }));
-        expect(html).toContain('alt="Abstract circuitry"');
-        expect(html).toContain('width="1920"');
-        expect(html).toContain('height="1047"');
-    });
-    test('falls back to title alt and template dimensions when fields absent', () => {
-        const html = renderArticle(buildArticle());
-        expect(html).toContain('alt="Test Story"');
-        expect(html).toContain('width="1920"');
-        expect(html).toContain('height="1080"');
-    });
-    test('emits provided dimensions on wire heroes', () => {
-        const html = renderArticle(buildArticle({ format: 'wire', bodyHtml: '<p>Wire body</p>', heroImageWidth: 1920, heroImageHeight: 1049 }));
-        expect(html).toContain('width="1920"');
-        expect(html).toContain('height="1049"');
-    });
-    test('escapes html-special characters in heroImageAlt', () => {
-        const html = renderArticle(buildArticle({ heroImageAlt: '"onload="alert(1)' }));
-        expect(html).not.toContain('"onload=');
-        expect(html).toContain('&quot;');
-    });
-    test('rejects non-numeric hero dimensions to prevent attribute injection', () => {
-        const malicious = { heroImageWidth: '800" onload="alert(1)' };
-        const html = renderArticle(buildArticle(malicious));
-        expect(html).not.toContain('onload=');
-        expect(html).toContain('width="1920"');
-    });
-    test('falls back to wire template dimensions when fields absent', () => {
-        const html = renderArticle(buildArticle({ format: 'wire', bodyHtml: '<p>Wire body</p>', chapters: undefined }));
-        expect(html).toContain('width="1600"');
-        expect(html).toContain('height="900"');
-    });
-});
-describe('renderCard', () => {
-    test('emits card markup with category class and kicker', () => {
-        const html = renderCard(buildArticle({ format: 'quick_take' }));
-        expect(html).toContain('class="druck-card cat-ai"');
-        expect(html).toContain('class="card-thumb"');
-        expect(html).toContain('class="card-title"');
-        expect(html).toContain('ai');
-        expect(html).toContain('Quick Take');
-        expect(html).toContain('Test Story');
-        expect(html).toContain('A subtitle');
-    });
-    test('uses shareUrl as href when present', () => {
-        const html = renderCard(buildArticle({ shareUrl: '/articles/test/' }));
-        expect(html).toContain('href="/articles/test/"');
-    });
-    test('falls back to slug hash when shareUrl absent', () => {
-        const html = renderCard(buildArticle());
-        expect(html).toContain('href="#test-story"');
-    });
-    test('escapes title and subtitle in card output', () => {
-        const html = renderCard(buildArticle({ title: '<script>', subtitle: '"alert"' }));
-        expect(html).not.toContain('<script>');
-        expect(html).toContain('&lt;script&gt;');
-        expect(html).toContain('&quot;alert&quot;');
-    });
-    test('strips javascript: URLs from card href', () => {
-        const html = renderCard(buildArticle({ shareUrl: 'javascript:alert(1)' }));
-        expect(html).not.toContain('javascript:');
-        expect(html).toContain('href="\#"');
-    });
-    test('strips data: URLs from hero image src', () => {
-        const html = renderArticle(buildArticle({ heroImage: 'data:image/svg+xml,<svg></svg>' }));
-        expect(html).not.toContain('data:');
-        expect(html).toContain('src=""');
-    });
-    test('preserves safe relative and absolute URLs', () => {
-        const html = renderCard(buildArticle({ shareUrl: '/articles/safe/', heroImage: 'https://example.com/img.webp' }));
-        expect(html).toContain('href="/articles/safe/"');
-        expect(html).toContain('src="https://example.com/img.webp"');
-    });
-    test('omits the reading-time span when readingTime is absent', () => {
-        const html = renderCard(buildArticle({ readingTime: undefined }));
-        expect(html).not.toContain('<span></span>');
-        expect(html).toContain('<time>');
-    });
-    test('accepts the widened category union', () => {
-        const html = renderCard(buildArticle({ category: 'infrastructure' }));
-        expect(html).toContain('cat-infrastructure');
-    });
-});
-describe('renderArticle feature format', () => {
-    test('omits reading-time span in byline when readingTime is absent', () => {
-        const html = renderArticle(buildArticle({ format: 'feature', readingTime: undefined }));
-        expect(html).not.toContain('<span></span>');
-        expect(html).toContain('article-byline');
-    });
-});
-describe('renderArticle wire format', () => {
-    test('omits reading-time span in meta when readingTime is absent', () => {
-        const html = renderArticle(buildArticle({ format: 'wire', readingTime: undefined, bodyHtml: '<p>Wire body</p>' }));
-        expect(html).not.toContain('<span></span>');
-        expect(html).toContain('post-simple-meta');
-    });
-});