domma-cms 1.8.8 → 1.8.9

package/server/services/wpImport/widgets.js

@@ -0,0 +1,355 @@
+/**
+ * WordPress widgets -> Domma blocks. PURE: no I/O; the run (./index.js)
+ * supplies the lookups and writes what this returns.
+ *
+ * The widgets come from a `.wie` file - the JSON the free "Widget Importer &
+ * Exporter" WordPress plugin writes (Tools › Widget Importer & Exporter ›
+ * Export Widgets), because a WordPress export (WXR) has no widgets in it:
+ *
+ *   {"<sidebar-id>": {"<widget-type>-<n>": {settings…}, …}, …}
+ *
+ * Sidebar ids are the theme's own (sidebar-1, footer-1, footer-widgets-2…);
+ * `wp_inactive_widgets` holds the ones taken off the site and is left out.
+ *
+ * Each widget area becomes one block, `wp-<area>` (content/blocks/<name>.html),
+ * its widgets in order, each a <section> with its title as a heading:
+ *
+ *   text, custom_html, block  -> their HTML through the importer's conversion
+ *                                (./convert.js - sanitised, WordPress shortcodes
+ *                                left as inert text, old links and media re-pointed)
+ *   media_image               -> the picture, when the export's media brought it here
+ *   nav_menu                  -> [menu] of the menu the import made from it
+ *   recent-posts, categories  -> the Blog's [blog-list] / [blog-categories]
+ *   archives                  -> a link to the Blog
+ *   search                    -> a link that opens the site search (#site-search)
+ *   anything else             -> listed as needing rebuilding, nothing guessed
+ *
+ * An area whose id says "footer" is offered "Place in the footer" (on by
+ * default): its block joins the site's footer (`site.json` footer.blocks,
+ * drawn by services/renderer.js on every page).
+ *
+ * The file is untrusted: size and nesting are capped before JSON.parse, keys
+ * that could reach an object's prototype are dropped, only plain values are
+ * kept, and every string is escaped or sanitised on its way into HTML.
+ *
+ * @module services/wpImport/widgets
+ */
+import {convertContent, escapeAttr, escapeText} from './convert.js';
+import {freePath, slugify} from './plan.js';
+
+export const WIE_MAX_BYTES = 2 * 1024 * 1024;
+export const WIE_MAX_DEPTH = 8;
+const MAX_AREAS = 60;
+const MAX_WIDGETS = 100;           // per area
+const MAX_STRING = 200 * 1024;     // per setting
+const BAD_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+const AREA_ID = /^[A-Za-z0-9_-]{1,100}$/;
+const WIDGET_ID = /^([A-Za-z0-9_-]{1,80}?)-(\d{1,9})$/;
+const SETTING_KEY = /^[\w-]{1,80}$/;
+/** The most blocks the footer draws (renderer.js FOOTER_BLOCKS_MAX; Site Settings refuses more). */
+const FOOTER_MAX = 8;
+
+/** WordPress's own name for the widgets taken off the site. */
+export const INACTIVE_AREA = 'wp_inactive_widgets';
+
+/** The widget types, as the preview and the report say them. */
+export const WIDGET_LABEL = {
+    text: 'Text', custom_html: 'Custom HTML', block: 'Block', media_image: 'Image', nav_menu: 'Navigation menu',
+    'recent-posts': 'Recent posts', categories: 'Categories', archives: 'Archives', tag_cloud: 'Tag cloud', search: 'Search',
+    calendar: 'Calendar', rss: 'RSS feed', meta: 'Meta', pages: 'Pages', 'recent-comments': 'Recent comments',
+    media_gallery: 'Gallery', media_video: 'Video', media_audio: 'Audio'
+};
+
+export class WieError extends Error {
+    constructor(message) { super(message); this.statusCode = 400; }
+}
+
+const plain = (v) => v !== null && typeof v === 'object' && !Array.isArray(v);
+
+/** The deepest nesting of {} and [] in a JSON text, counted without parsing it (stops past `limit`). */
+export function jsonDepth(text, limit = Infinity) {
+    let depth = 0;
+    let max = 0;
+    let inString = false;
+    let escaped = false;
+    for (let i = 0; i < text.length; i++) {
+        const c = text.charCodeAt(i);
+        if (inString) {
+            if (escaped) escaped = false;
+            else if (c === 92) escaped = true;
+            else if (c === 34) inString = false;
+            continue;
+        }
+        if (c === 34) inString = true;
+        else if (c === 123 || c === 91) { depth++; if (depth > max) { max = depth; if (max > limit) return max; } }
+        else if (c === 125 || c === 93) depth--;
+    }
+    return max;
+}
+
+/** A widget's settings: plain values only, strings clipped, no key that could reach a prototype. */
+function cleanSettings(raw) {
+    const out = {};
+    for (const [k, v] of Object.entries(raw)) {
+        if (BAD_KEYS.has(k) || !SETTING_KEY.test(k)) continue;
+        if (typeof v === 'string') out[k] = v.slice(0, MAX_STRING);
+        else if (typeof v === 'number' && Number.isFinite(v)) out[k] = v;
+        else if (typeof v === 'boolean') out[k] = v;
+    }
+    return out;
+}
+
+/**
+ * Read a .wie file.
+ *
+ * @param {string|Buffer} input
+ * @returns {{areas: {id: string, widgets: {id: string, type: string, settings: object}[]}[], inactive: number, notes: string[]}}
+ * @throws {WieError} when it is too big, too deep, not JSON, or not a widgets file
+ */
+export function readWie(input) {
+    const size = Buffer.isBuffer(input) ? input.length : Buffer.byteLength(String(input ?? ''));
+    if (size > WIE_MAX_BYTES) throw new WieError(`The widgets file is over ${WIE_MAX_BYTES / 1048576} MB - that is far bigger than any real one.`);
+    const text = (Buffer.isBuffer(input) ? input.toString('utf8') : String(input ?? '')).replace(/^/, '');
+    if (!text.trim()) throw new WieError('The widgets file is empty.');
+    if (jsonDepth(text, WIE_MAX_DEPTH) > WIE_MAX_DEPTH) throw new WieError('That widgets file is nested far deeper than a real one - refused.');
+    let data;
+    try {
+        data = JSON.parse(text, (k, v) => (BAD_KEYS.has(k) ? undefined : v));
+    } catch {
+        throw new WieError('That is not a widgets file. In WordPress, use the free "Widget Importer & Exporter" plugin (Tools › Widget Importer & Exporter › Export Widgets) and upload the .wie file it gives you.');
+    }
+    if (!plain(data)) throw new WieError('That is not a widgets file - it should list widget areas, each with its widgets.');
+    const areas = [];
+    const notes = [];
+    let inactive = 0;
+    let ignored = 0;
+    for (const [id, widgets] of Object.entries(data)) {
+        if (!AREA_ID.test(id) || !plain(widgets)) { ignored++; continue; }
+        if (id === INACTIVE_AREA) { inactive += Object.keys(widgets).length; continue; }
+        if (areas.length >= MAX_AREAS) { ignored++; continue; }
+        const list = [];
+        for (const [wid, settings] of Object.entries(widgets)) {
+            const m = WIDGET_ID.exec(wid);
+            if (!m || !plain(settings)) { ignored++; continue; }
+            if (list.length >= MAX_WIDGETS) { ignored++; continue; }
+            list.push({id: wid, type: m[1].toLowerCase(), settings: cleanSettings(settings)});
+        }
+        areas.push({id, widgets: list});
+    }
+    if (!areas.length && !inactive) throw new WieError('That widgets file has no widget areas in it.');
+    if (ignored) notes.push(`${ignored} entr${ignored === 1 ? 'y' : 'ies'} in the widgets file ${ignored === 1 ? 'was' : 'were'} not in the shape the Widget Importer & Exporter writes, and ${ignored === 1 ? 'was' : 'were'} left out.`);
+    return {areas, inactive, notes};
+}
+
+/** Does the theme's id for an area say it is a footer? (footer, footer-1, footer-widgets-2, sidebar-footer…) */
+export const isFooterArea = (id) => /footer/i.test(String(id || ''));
+
+/** "footer-widgets-2" -> "Footer widgets 2". */
+export function areaLabel(id) {
+    const s = String(id || '').replace(/[_-]+/g, ' ').trim();
+    return s ? `${s[0].toUpperCase()}${s.slice(1)}` : 'Widget area';
+}
+
+const typeLabel = (type) => WIDGET_LABEL[type] || areaLabel(type);
+const clipText = (s, n) => String(s ?? '').replace(/[\u0000-\u001f\u007f]/g, ' ').replace(/\s+/g, ' ').trim().slice(0, n);
+/** A widget's title as plain text (WordPress allows a little HTML in one). */
+export const widgetTitle = (w) => clipText(String(w.settings?.title ?? '').replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/g, ' ').replace(/&#0*39;|&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&'), 150);
+/** "Calendar ("Events")" - how a widget that needs rebuilding is listed. */
+const describe = (w) => `${typeLabel(w.type)}${widgetTitle(w) ? ` ("${widgetTitle(w)}")` : ''}`;
+const int = (v, def) => { const n = Number.parseInt(v, 10); return Number.isFinite(n) ? n : def; };
+
+/**
+ * What one widget becomes - shared by the plan (can it come across?) and the
+ * run (its HTML), so the preview says what the run does.
+ *
+ * @param {object} w - {type, settings}
+ * @param {object} ctx
+ * @param {(id: number, url: string) => boolean} ctx.hasMedia - will the picture be here?
+ * @param {(termId: number) => string} ctx.menuSlug - the menu made from a WordPress menu ('' = none)
+ * @param {{posts: boolean, list: boolean, categories: boolean, basePath: string}} ctx.blog
+ * @param {boolean} ctx.search - site search is on
+ * @returns {{how: 'html'|'image'|'menu'|'blog'|'link'|'search'|'rebuild', why?: string, slug?: string}}
+ */
+export function decideWidget(w, ctx) {
+    const s = w.settings || {};
+    const blog = ctx.blog || {};
+    switch (w.type) {
+        case 'text': case 'custom_html': case 'block':
+            return {how: 'html'};
+        case 'media_image':
+            if (ctx.hasMedia?.(int(s.attachment_id, 0), String(s.url || ''))) return {how: 'image'};
+            return {how: 'rebuild', why: 'its picture is not among the media being imported'};
+        case 'nav_menu': {
+            const slug = ctx.menuSlug?.(int(s.nav_menu, 0)) || '';
+            return slug ? {how: 'menu', slug} : {how: 'rebuild', why: 'its menu is not being imported'};
+        }
+        case 'recent-posts':
+            return blog.posts && blog.list ? {how: 'blog'} : {how: 'rebuild', why: 'posts are not going to a Blog'};
+        case 'categories':
+            return blog.posts && blog.categories ? {how: 'blog'} : {how: 'rebuild', why: 'posts are not going to a Blog'};
+        case 'archives':
+            return blog.posts ? {how: 'link'} : {how: 'rebuild', why: 'posts are not going to a Blog'};
+        case 'search':
+            return ctx.search ? {how: 'search'} : {how: 'rebuild', why: 'site search is switched off (System › Search)'};
+        default:
+            return {how: 'rebuild', why: 'this site has nothing like it'};
+    }
+}
+
+/**
+ * The plan's widget rows - one per widget area that has widgets.
+ *
+ * @param {object|null} wie - from readWie()
+ * @param {object} ctx
+ * @param {object} ctx.mapped           - mapping.items of earlier runs
+ * @param {object} ctx.choices          - per row key: skip / overwrite / import
+ * @param {object} ctx.footer           - per area id: false = not in the footer
+ * @param {Set<string>} ctx.blockNames  - the blocks here
+ * @param {Object<string,string>} ctx.blockHashes - block -> fingerprint now (blocks an earlier run made)
+ * @param {string[]} ctx.footerBlocks   - site.json footer.blocks now
+ * @returns {{rows: object[], summary: object|null}}
+ */
+export function planWidgets(wie, ctx) {
+    if (!wie) return {rows: [], summary: null};
+    const mapped = ctx.mapped || {};
+    const choices = ctx.choices || {};
+    const footerOpt = ctx.footer || {};
+    const taken = new Set([...(ctx.blockNames || [])]);
+    const inFooter = new Set(ctx.footerBlocks || []);
+    // Names an earlier run gave these areas are theirs, not a clash.
+    for (const a of wie.areas) { const was = mapped[`widgets:${a.id}`]; if (was?.block) taken.delete(was.block); }
+    const rows = [];
+    const areas = [];
+    let footerCount = inFooter.size;
+    for (const area of wie.areas) {
+        if (!area.widgets.length) continue;
+        const key = `widgets:${area.id}`;
+        const was = mapped[key];
+        const label = areaLabel(area.id);
+        const decisions = area.widgets.map(w => ({w, d: decideWidget(w, ctx)}));
+        const rebuild = decisions.filter(x => x.d.how === 'rebuild').map(x => `${describe(x.w)} - ${x.d.why}`);
+        const footer = isFooterArea(area.id);
+        const row = {
+            key, kind: 'widgets', wpId: 0, title: `${label} widgets`, area: area.id, count: area.widgets.length,
+            widgetTypes: [...new Set(area.widgets.map(w => typeLabel(w.type)))],
+            needs: rebuild.length ? `Rebuild: ${rebuild.join('; ')}` : '', footer
+        };
+        let action;
+        let name;
+        let reason = '';
+        if (choices[key] === 'skip') { action = 'skip'; name = was?.block || ''; reason = 'You chose to skip it.'; }
+        else if (was?.block && ctx.blockNames?.has(was.block)) {
+            name = was.block;
+            const edited = ctx.blockHashes?.[name] && ctx.blockHashes[name] !== was.hash;
+            if (edited && choices[key] !== 'overwrite') { action = 'keep'; reason = 'Edited on this site since it was imported - left as it is.'; }
+            else { action = 'update'; reason = edited ? 'Edited here since - you chose to overwrite it.' : ''; }
+        } else if (was?.block && choices[key] !== 'import') {
+            action = 'skip'; name = was.block; reason = 'Deleted on this site since it was imported - choose "Import again" to bring it back.';
+        } else {
+            const wanted = was?.block || `wp-${slugify(area.id) || 'widgets'}`.slice(0, 60).replace(/-+$/, '');
+            name = freePath(wanted, taken);
+            action = name === wanted ? 'create' : 'rename';
+            if (was?.block) reason = 'Imported again after being deleted here.';
+            else if (action === 'rename') reason = `This site has a block called ${wanted} - this one is ${name}.`;
+        }
+        if (name) taken.add(name);
+        // The footer: placed once; never twice, never taken back out, and not put back once removed here.
+        let place = '';
+        if (footer && action !== 'skip') {
+            if (inFooter.has(name)) place = 'there';
+            else if (footerOpt[area.id] === false) place = 'off';
+            else if (was?.placed) place = 'removed';
+            else if (footerCount >= FOOTER_MAX) place = 'full';
+            else { place = 'add'; footerCount++; }
+        }
+        rows.push({...row, action, target: name, reason, place});
+        areas.push({
+            id: area.id, label, block: name, action, count: area.widgets.length, types: row.widgetTypes, footer, place,
+            rebuild, coming: decisions.length - rebuild.length
+        });
+    }
+    return {rows, summary: {areas, inactive: wie.inactive || 0, notes: wie.notes || []}};
+}
+
+/**
+ * One widget area's block template: its widgets, in order, as HTML with no
+ * blank lines (a blank line ends an HTML block in Markdown - CLAUDE.md gotcha
+ * 11) and no "{{" (a block template's placeholder).
+ *
+ * @param {{id: string, widgets: object[]}} area
+ * @param {object} ctx - decideWidget()'s, plus:
+ * @param {object} ctx.convert - convertContent()'s context (mediaFor, mediaById, linkFor)
+ * @param {(id: number, url: string) => string} ctx.mediaUrl - /media/<file> for a picture, or ''
+ * @returns {{html: string, notes: string[], rebuild: string[]}}
+ */
+export function widgetAreaHtml(area, ctx) {
+    const notes = [];
+    const rebuild = [];
+    const parts = [`<!-- Imported from WordPress: the "${area.id}" widget area. -->`];
+    for (const w of area.widgets) {
+        const d = decideWidget(w, ctx);
+        if (d.how === 'rebuild') { rebuild.push(`${describe(w)} - ${d.why}`); continue; }
+        const body = widgetBody(w, d, ctx, notes);
+        // Said, never silently dropped: a picture whose download failed, a widget with nothing left in it.
+        if (!body) { rebuild.push(`${describe(w)} - ${d.how === 'image' ? 'its picture did not come across' : 'nothing was left in it once cleaned'}`); continue; }
+        const title = widgetTitle(w);
+        const cls = `wp-widget wp-widget-${slugify(w.type) || 'other'}`;
+        parts.push(`<section class="${cls}">${title ? `\n<h3 class="wp-widget-title">${escapeText(title)}</h3>` : ''}\n${body}\n</section>`);
+    }
+    const html = parts.join('\n')
+        .replace(/\{/g, '&#123;')
+        .replace(/\n[ \t]*(?=\n)/g, '').replace(/\n{2,}/g, '\n');
+    return {html: `${html}\n`, notes, rebuild};
+}
+
+function widgetBody(w, d, ctx, notes) {
+    const s = w.settings || {};
+    if (d.how === 'html') {
+        const raw = w.type === 'text' ? s.text : s.content;
+        const conv = convertContent(String(raw ?? ''), {...ctx.convert, html: true});
+        for (const n of conv.notes) if (!notes.includes(n)) notes.push(n);
+        if (conv.shortcodes.length) {
+            const n = `WordPress shortcodes in the widgets are left as text to rebuild: ${conv.shortcodes.map(x => `[${x}]`).join(' ')}.`;
+            if (!notes.includes(n)) notes.push(n);
+        }
+        // A picture with no real address (src="x") would only ask this site for a page that is not there.
+        return conv.body.replace(/<img\b[^>]*>/gi, (tag) => (/\ssrc="(\/(?!\/)|https?:\/\/)/i.test(tag) ? tag : '')).trim();
+    }
+    if (d.how === 'image') {
+        const src = ctx.mediaUrl?.(int(s.attachment_id, 0), String(s.url || '')) || '';
+        if (!/^\/media\/[^/]+$/.test(src)) return '';
+        const alt = clipText(s.alt || s.image_title || '', 300);
+        let pic = `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}">`;
+        const link = imageLink(s, src, ctx);
+        if (link) pic = `<a href="${escapeAttr(link)}">${pic}</a>`;
+        const caption = clipText(String(s.caption || '').replace(/<[^>]*>/g, ''), 500);
+        return `<figure class="wp-widget-figure">${pic}${caption ? `<figcaption>${escapeText(caption)}</figcaption>` : ''}</figure>`;
+    }
+    if (d.how === 'menu') return `[menu slug="${escapeAttr(d.slug)}" /]`;
+    if (d.how === 'blog') {
+        if (w.type === 'recent-posts') return `[blog-list count="${Math.min(20, Math.max(1, int(s.number, 5)))}" /]`;
+        return `[blog-categories${s.count ? ' show-counts="true"' : ''} /]`;
+    }
+    if (d.how === 'link') {
+        const base = /^\/[a-z0-9/-]*$/i.test(ctx.blog?.basePath || '') ? ctx.blog.basePath : '/blog';
+        const n = 'WordPress date archives became a link to the Blog.';
+        if (!notes.includes(n)) notes.push(n);
+        return `<p><a href="${escapeAttr(base)}">All posts</a></p>`;
+    }
+    if (d.how === 'search') return '<p><a class="btn btn-outline btn-sm wp-widget-search-link" href="#site-search">Search the site</a></p>';
+    return '';
+}
+
+/** Where an image widget's picture leads: its own link, the file, or nowhere. Only http(s) or this site. */
+function imageLink(s, src, ctx) {
+    const type = String(s.link_type || 'none');
+    if (type === 'file' || type === 'post') return src;
+    if (type !== 'custom') return '';
+    const raw = String(s.link_url || '').trim();
+    if (!raw) return '';
+    const local = ctx.convert?.linkFor?.(raw);
+    const href = local || raw;
+    if (/^\/(?!\/)/.test(href) || /^https?:\/\//i.test(href)) return href;
+    return '';
+}

package/server/templates/page.html

@@ -25,7 +25,7 @@
     <link rel="stylesheet" href="/dist/domma/themes/domma-themes.css">
 
     <!-- Site CSS -->
-    <link rel="stylesheet" href="/public/css/site.css?v=20261016-mobile-options">
+    <link rel="stylesheet" href="/public/css/site.css?v=20261016-footer-blocks">
     <link rel="stylesheet" href="/public/css/forms.css?v=20260927-submit-btn-css">
     <!-- Menu item hover / current-page effects. Loaded after site.css so a
          menu's own highlight wins over the blanket link styling there. -->
@@ -91,7 +91,7 @@
     </main>
 
     {{#if showFooter}}
-    <footer id="site-footer" class="page-footer"></footer>
+    <footer id="site-footer" class="page-footer">{{footerBlocksHtml}}</footer>
     {{/if}}
 
     <!-- DOMPurify - must load before DommaJS -->
@@ -173,7 +173,7 @@
     </script>
 
     <!-- Site initialisation -->
-    <script src="/public/js/site.js?v=20261016-mobile-options" type="module"></script>
+    <script src="/public/js/site.js?v=20261016-footer-blocks" type="module"></script>
     <script src="/public/js/collection-context.js?v=20261010-utf8-payloads" type="module"></script>
     {{ctxMenusModule}}