@materializecms/server 0.4.0 → 0.6.0

package/src/wordpress.js

@@ -236,6 +236,23 @@ export function imagesIn(html) {
     walk(parse(html));
     return [...new Set(out)];
 }
+/** The alternative text written on WordPress, trimmed. */
+const altOf = (img) => (img.attribs?.alt ?? '').replace(/\s+/g, ' ').trim().slice(0, 500);
+/** Each image address in some HTML with its alternative text, for the library. */
+export function imageAltsIn(html) {
+    const out = new Map();
+    const walk = (n) => {
+        if (n.name === 'img') {
+            const src = imageSrc(n);
+            if (src && !out.get(src))
+                out.set(src, altOf(n));
+        }
+        for (const c of n.children ?? [])
+            walk(c);
+    };
+    walk(parse(html));
+    return out;
+}
 function imageSrc(img) {
     const a = img.attribs ?? {};
     // Lazy-loading plugins keep the real address aside.
@@ -363,7 +380,7 @@ function pieces(html, ctx) {
                 flush();
                 const src = imageSrc(img);
                 if (src)
-                    out.push({ kind: 'image', src });
+                    out.push({ kind: 'image', src, alt: altOf(img) });
                 return;
             }
             inlineBuffer.push(n);
@@ -373,7 +390,7 @@ function pieces(html, ctx) {
         if (name === 'img') {
             const src = imageSrc(n);
             if (src)
-                out.push({ kind: 'image', src });
+                out.push({ kind: 'image', src, alt: altOf(n) });
             return;
         }
         if (/^h[1-6]$/.test(name)) {
@@ -388,7 +405,7 @@ function pieces(html, ctx) {
             for (const img of allImgs(n)) {
                 const src = imageSrc(img);
                 if (src)
-                    out.push({ kind: 'image', src });
+                    out.push({ kind: 'image', src, alt: altOf(img) });
             }
             const runs = runsOf(n.children ?? [], ctx);
             if (runs.length)
@@ -451,7 +468,7 @@ export function htmlToRichText(html, ctx) {
         if (p.kind === 'image') {
             const img = ctx.image(p.src);
             if (img)
-                out.push({ type: 'image', children: [], image: img });
+                out.push({ type: 'image', children: [], image: { ...img, alt: p.alt || img.alt } });
         }
         else if (p.kind === 'button') {
             out.push({ type: 'paragraph', children: [{ text: p.text, bold: true, href: p.href }] });
@@ -512,7 +529,7 @@ export function htmlToPage(html, title, ctx) {
                     type: 'image',
                     name: 'Immagine',
                     src: img.src,
-                    alt: img.alt,
+                    alt: p.alt || img.alt,
                     ratio: img.width && img.height ? `${img.width}/${img.height}` : '16/9',
                     radius: 'card',
                     width: 'fill',

package/src/wpimport.d.ts

@@ -1,4 +1,5 @@
 import type { Collection, Field, Media } from '@materializecms/core';
+import type { PageNode } from '@materializecms/core/page';
 import { type WpSite } from './wordpress.ts';
 /**
  * A WordPress site into Materialize: which collection each kind of item goes to, which field
@@ -23,6 +24,8 @@ export interface ImportPlan {
     /** For a choice field: WordPress category → option value; unmatched ones take `fallback`. */
     categories?: Record<string, string>;
     fallbackCategory?: string;
+    /** Pages built on the canvas are laid out again by the AI with the section library (drafts). */
+    aiLayout?: boolean;
 }
 /** Which sources fit a field of this kind. */
 export declare function sourcesFor(f: Field): WpSource[];
@@ -40,7 +43,7 @@ export declare function matchOption(name: string, options: {
     label: string;
 }[]): string | null;
 export interface ImportProgress {
-    phase: 'media' | 'content' | 'done' | 'failed';
+    phase: 'media' | 'content' | 'layout' | 'done' | 'failed';
     done: number;
     total: number;
     created: {
@@ -63,6 +66,8 @@ export interface ImportProgress {
         reasons: Record<string, number>;
     };
     redirects: number;
+    /** Pages the AI laid out again. */
+    relaid: number;
     error?: string;
 }
 export interface ImportDeps {
@@ -91,7 +96,20 @@ export interface ImportDeps {
         from: string;
         to: string;
     }[]) => Promise<number>;
+    /** The AI lays a page out again in its draft; a reason when it was left as it was. */
+    relayout?: (doc: {
+        id: string;
+        collection: string;
+        title: string;
+    }) => Promise<null | string>;
     onProgress: (p: ImportProgress) => void;
 }
 export declare function runImport(site: WpSite, plan: ImportPlan, deps: ImportDeps): Promise<ImportProgress>;
 export { fold };
+/**
+ * Whether a page laid out again by the AI still says what it said: no text lost, nothing made up
+ * (library sample texts left behind count as made up), every image still there. A reason when not.
+ */
+export declare function relayoutProblem(before: PageNode[], after: PageNode[]): string | null;
+/** Descriptions the page had for its images, put back where the new layout left them empty. */
+export declare function restoreAlts(before: PageNode[], after: PageNode[]): PageNode[];

package/src/wpimport.js

@@ -1,5 +1,5 @@
 import { slugify } from '@materializecms/core';
-import { htmlToPage, htmlToRichText, imagesIn, mainContent, originalOf, plain, } from './wordpress.js';
+import { htmlToPage, htmlToRichText, imageAltsIn, mainContent, originalOf, plain, } from './wordpress.js';
 /** Which sources fit a field of this kind. */
 export function sourcesFor(f) {
     switch (f.kind) {
@@ -113,6 +113,7 @@ export async function runImport(site, plan, deps) {
         problems: [],
         media: { downloaded: 0, failed: 0, reasons: {} },
         redirects: 0,
+        relaid: 0,
     };
     const report = () => deps.onProgress({ ...progress });
     const targetOf = (item) => (item.kind === 'post' ? plan.posts : plan.pages);
@@ -136,8 +137,11 @@ export async function runImport(site, plan, deps) {
         const t = targetOf(item);
         const fields = Object.values(t.fields);
         if (fields.includes('content'))
-            for (const src of imagesIn(item.html))
-                wanted.set(new URL(src, site.url).href, '');
+            for (const [src, alt] of imageAltsIn(item.html)) {
+                const url = new URL(src, site.url).href;
+                if (!wanted.get(url))
+                    wanted.set(url, alt);
+            }
         if (fields.includes('featured') && item.featured?.url)
             wanted.set(new URL(item.featured.url, site.url).href, item.featured.alt);
     }
@@ -217,6 +221,8 @@ export async function runImport(site, plan, deps) {
     const moves = [];
     // Addresses taken by this import: WordPress allows the same slug under different parent pages.
     const taken = new Map();
+    // Canvas pages filled from the content: the ones the AI may lay out again.
+    const canvas = [];
     for (const entry of plans) {
         const { item, t, def } = entry;
         let { slug, url } = entry;
@@ -268,6 +274,8 @@ export async function runImport(site, plan, deps) {
                     progress.problems.push({ title: doc.title, reason: 'importato come bozza: ha campi da completare' });
                 }
             progress.created.push({ id: doc.id, collection: def.name, title: doc.title, published });
+            if (Object.entries(t.fields).some(([name, source]) => source === 'content' && def.fields[name]?.kind === 'page'))
+                canvas.push({ id: doc.id, collection: def.name, title: doc.title });
             const from = pathOf(item.link, site.url);
             if (published && from && url && from !== url)
                 moves.push({ from, to: url });
@@ -282,6 +290,31 @@ export async function runImport(site, plan, deps) {
     }
     if (plan.redirects && moves.length)
         progress.redirects = await deps.addRedirects(moves);
+    // 4. The AI lays the pages out again, one at a time, in their drafts: what WordPress had stays
+    // published until someone publishes the new layout.
+    if (plan.aiLayout && deps.relayout && canvas.length) {
+        progress.phase = 'layout';
+        progress.done = 0;
+        progress.total = canvas.length;
+        report();
+        for (const doc of canvas) {
+            try {
+                const why = await deps.relayout(doc);
+                if (why)
+                    progress.problems.push({ title: doc.title, reason: `impaginazione semplice lasciata: ${why}` });
+                else
+                    progress.relaid++;
+            }
+            catch (error) {
+                progress.problems.push({
+                    title: doc.title,
+                    reason: `l’AI non ha rifatto l’impaginazione: ${error.message}`,
+                });
+            }
+            progress.done++;
+            report();
+        }
+    }
     progress.phase = 'done';
     report();
     return progress;
@@ -350,3 +383,79 @@ async function valueFor(f, source, item, ctx, plan, site, relations, deps) {
     }
 }
 export { fold };
+/** The words of a page (texts and buttons), lowercase, three letters or more. */
+function wordsOf(nodes) {
+    const out = new Set();
+    const go = (list) => {
+        for (const n of list) {
+            if (!n.hidden) {
+                const text = [n.text, ...(n.runs ?? []).map((r) => r.t)].filter(Boolean).join(' ');
+                for (const w of text.toLowerCase().match(/[\p{L}\p{N}]{3,}/gu) ?? [])
+                    out.add(w);
+            }
+            if (n.children)
+                go(n.children);
+        }
+    };
+    go(nodes);
+    return out;
+}
+function imagesOf(nodes) {
+    const out = new Set();
+    const go = (list) => {
+        for (const n of list) {
+            if (n.type === 'image' && n.src && !n.hidden)
+                out.add(n.src);
+            if (n.bgImage?.src)
+                out.add(n.bgImage.src);
+            if (n.children)
+                go(n.children);
+        }
+    };
+    go(nodes);
+    return out;
+}
+/**
+ * Whether a page laid out again by the AI still says what it said: no text lost, nothing made up
+ * (library sample texts left behind count as made up), every image still there. A reason when not.
+ */
+export function relayoutProblem(before, after) {
+    const was = wordsOf(before);
+    const now = wordsOf(after);
+    if (!now.size)
+        return 'la pagina sarebbe rimasta vuota';
+    const lost = [...was].filter((w) => !now.has(w)).length;
+    const added = [...now].filter((w) => !was.has(w)).length;
+    if (lost > Math.max(3, was.size * 0.1))
+        return 'l’AI avrebbe tolto parte del testo';
+    if (added > Math.max(8, was.size * 0.15))
+        return 'l’AI avrebbe aggiunto testi che non c’erano';
+    const pictures = imagesOf(after);
+    if ([...imagesOf(before)].some((src) => !pictures.has(src)))
+        return 'l’AI avrebbe tolto delle immagini';
+    return null;
+}
+/** Descriptions the page had for its images, put back where the new layout left them empty. */
+export function restoreAlts(before, after) {
+    const alts = new Map();
+    const read = (list) => {
+        for (const n of list) {
+            if (n.type === 'image' && n.src && n.alt)
+                alts.set(n.src, n.alt);
+            if (n.bgImage?.src && n.bgImage.alt)
+                alts.set(n.bgImage.src, n.bgImage.alt);
+            if (n.children)
+                read(n.children);
+        }
+    };
+    read(before);
+    const fix = (n) => {
+        let out = n;
+        if (n.type === 'image' && n.src && !n.alt?.trim() && alts.has(n.src))
+            out = { ...out, alt: alts.get(n.src) };
+        if (n.bgImage?.src && !n.bgImage.alt?.trim() && alts.has(n.bgImage.src))
+            out = { ...out, bgImage: { ...n.bgImage, alt: alts.get(n.bgImage.src) ?? '' } };
+        return n.children ? { ...out, children: n.children.map(fix) } : out;
+    };
+    return after.map(fix);
+}