nodoku-core 0.2.3 → 0.2.5

package/esm/bin/generate-component-resolver.js

@@ -17,7 +17,7 @@ function calculateTemplateView(dirNodeModules = undefined) {
         dirNodeModules = `${path.resolve()}/node_modules`;
     }
     const manifests = loadManifestsFromFolder(dirNodeModules);
-    const view = { modules: [], comps: [] };
+    const view = { modules: [], comps: [], clSideComps: [] };
     manifests.forEach((m, k) => {
         let prefix = "";
         if (m.namespace) {
@@ -35,9 +35,22 @@ function calculateTemplateView(dirNodeModules = undefined) {
             else {
                 nb = `${cd.numBlocks}`;
             }
-            view.comps.push({ name: cn, impl: `${prefix}${cd.implementation}`, defaultThemeFile: "./" + path.relative(path.resolve("."), path.resolve("./schemas", m.moduleName, cd.defaultThemeFile)).replaceAll("\\", "/"), numBlocks: nb });
+            view.comps.push({
+                name: cn,
+                impl: `${prefix}${cd.implementation}`,
+                defaultThemeFile: "./" + path.relative(path.resolve("."), path.resolve("./schemas", m.moduleName, cd.defaultThemeFile)).replaceAll("\\", "/"),
+                numBlocks: nb
+            });
+            if (cd.clientSideComps) {
+                cd.clientSideComps.forEach(cl => {
+                    view.clSideComps.push({ n: `${cn}:${cl}`, isLast: false });
+                });
+            }
         });
     });
+    if (view.clSideComps && view.clSideComps.length > 0) {
+        view.clSideComps[view.clSideComps.length - 1].isLast = true;
+    }
     return view;
 }
 export function generateComponentResolver() {

package/esm/bin/manifest-loader.js

@@ -48,7 +48,8 @@ function loadComponentsByManifest(dir, moduleName) {
                         themeSchema: v.schemaFile,
                         optionsSchema: v.optionsFile,
                         defaultThemeFile: v.defaultThemeFile,
-                        numBlocks: v.numBlocks
+                        numBlocks: v.numBlocks,
+                        clientSideComps: v.clientSideComps
                     });
                 });
                 return manifest;

package/esm/bin/mustache/component-resolver.ts.hbs

@@ -10,6 +10,29 @@ const components: Map<string, {compo: AsyncFunctionComponent, compoDef: NdCompon
 components.set("{{{name}}}", {compo: {{impl}}, compoDef: new NdComponentDefinition({{{numBlocks}}}, "{{{defaultThemeFile}}}")});
 {{/comps}}
 
+{{^clSideComps.length}}
+export type ClientSideComponentNameEnum = void;
+{{/clSideComps.length}}
+
+{{#clSideComps.length}}
+export type ClientSideComponentNameEnum =
+{{#clSideComps.length}}
+    {{#clSideComps}}
+        "{{{n}}}"{{^isLast}} | {{/isLast}}{{#isLast}};{{/isLast}}
+    {{/clSideComps}}
+{{/clSideComps.length}}
+
+export const fromStringToClientSideComponentNameEnum = (c: string): ClientSideComponentNameEnum | undefined => {
+{{#clSideComps}}
+    if (c === "{{{n}}}") {
+        return "{{{n}}}";
+    }
+{{/clSideComps}}
+    return undefined;
+}
+
+{{/clSideComps.length}}
+
 export async function nodokuComponentResolver(componentName: string): Promise<{compo: AsyncFunctionComponent, compoDef: NdComponentDefinition}> {
     const f: {compo: AsyncFunctionComponent, compoDef: NdComponentDefinition} | undefined = components.get(componentName);
     return f ? f : {compo: DummyComp, compoDef: new NdComponentDefinition(1)};

package/esm/content/nd-content.js

@@ -41,6 +41,14 @@ export class NdCode {
         this.code = code;
     }
 }
+export class NdLink {
+    urlText;
+    url;
+    constructor(text, url) {
+        this.urlText = text;
+        this.url = url;
+    }
+}
 export class NdContentBlock {
     id;
     lng;

package/esm/core/dummy-comp.jsx

@@ -1,8 +1,9 @@
 import { NdCode, NdTranslatableText } from "../content/nd-content";
+import { NdLink } from "../content/nd-content";
 export async function DummyComp(props) {
     // console.log("content dummy comp", props.theme)
-    const { content, i18nextProvider, lng, rowIndex, componentIndex } = props;
-    const { t } = await i18nextProvider(lng);
+    const { content, i18nextTrustedHtmlProvider, lng, rowIndex, componentIndex } = props;
+    const { t } = await i18nextTrustedHtmlProvider(lng);
     return <div>{await render(rowIndex, componentIndex, content[0], t)}</div>;
 }
 async function render(rowIndex, componentIndex, block, t) {
@@ -18,51 +19,21 @@ async function render(rowIndex, componentIndex, block, t) {
                 {block.title && <a href="#">
                     {block.title && block.title.key}
                     <h5 className={"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}>
-                        {block.title && t(block.title)}
+                        {block.title && t(block.title).__html}
                     </h5>
                 </a>}
                 {block.subTitle && block.subTitle.key}
                 {block.subTitle && <h6 className={"mb-2 text-xl tracking-tight text-gray-900 dark:text-white"}>
-                    {block.subTitle && t(block.subTitle)}
+                    {block.subTitle && t(block.subTitle).__html}
                 </h6>}
 
                 paragraphs:
-                {await Promise.all(block.paragraphs.map(async (p, ip) => {
-            if (p instanceof NdTranslatableText) {
-                return (<div>
-                                {p && p.key}
-                                <p key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
-                                    {p && t(p)}
-                                </p>
-                            </div>);
-            }
-            else if (p instanceof NdCode) {
-                const code = p;
-                return (<div className={"border border-gray-200 p-4"}>
-                                <pre className={"text-pretty"}>
-                                    <code lang={code.lang} className={"hljs"} dangerouslySetInnerHTML={{ __html: code.code }}/>
-                                </pre>
-                            </div>);
-            }
-            else {
-                const list = p;
-                if (list.ordered) {
-                    return (<ol className={"list-disc list-outside"}>
-                                    {list.items.map(i => <li className={"ml-4"}>{t(i)} <small>(<i>{i.key}</i>)</small></li>)}
-                                </ol>);
-                }
-                else {
-                    return (<ul className={"list-disc list-outside"}>
-                                    {list.items.map(i => <li className={"ml-4"}>{t(i)} <small>(<i>{i.key}</i>)</small></li>)}
-                                </ul>);
-                }
-            }
-        }))}
+                {await Promise.all(block.paragraphs.map(async (p, ip) => renderParagraph(p, ip)))}
                 images:
                 {block.images.map((img, ii) => {
             return (<div>
                             <p key={"url" + ii} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
-                                url: {img && img.url && t(img.url)}
+                                url: {img && img.url && t(img.url).__html}
                                 {img.url && <span className={"bg-cover bg-no-repeat"} style={{
                         display: "block",
                         width: "200px",
@@ -71,10 +42,10 @@ async function render(rowIndex, componentIndex, block, t) {
                     }}></span>}
                             </p>
                             <p key={"alt" + ii} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
-                                alt: {img && img.alt && t(img.alt)}
+                                alt: {img && img.alt && t(img.alt).__html}
                             </p>
                             <p key={"title" + ii} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
-                                title: {img && img.title && t(img.title)}
+                                title: {img && img.title && t(img.title).__html}
                             </p>
                         </div>);
         })}
@@ -88,4 +59,60 @@ async function render(rowIndex, componentIndex, block, t) {
             </div>
 
         </div>);
+    function renderParagraph(p, ip) {
+        if (p instanceof NdTranslatableText) {
+            return (<div>
+                    {p && p.key}
+                    <p key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
+                        {p && t(p).__html}
+                    </p>
+                </div>);
+        }
+        else if (p instanceof NdCode) {
+            const code = p;
+            return (<div className={"border border-gray-200 p-4"}>
+                                <pre className={"text-pretty"}>
+                                    <code lang={code.lang} className={"hljs"} dangerouslySetInnerHTML={{ __html: code.code }}/>
+                                </pre>
+                </div>);
+        }
+        else if (p instanceof NdLink) {
+            const link = p;
+            return (<div>
+                    link
+                    <div key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
+                        urlText: {link.urlText && showTranslatableText(link.urlText)}
+                        url: {showTranslatableText(link.url)}
+                    </div>
+
+                </div>);
+        }
+        else {
+            const list = p;
+            if (list.ordered) {
+                return (<ol className={"list-disc list-outside"}>
+                        {list.items.map(i => <li className={"ml-4"}>
+                                {showListItem(i)}
+                                {i.subList && renderParagraph(i.subList, ip)}
+                            </li>)}
+                    </ol>);
+            }
+            else {
+                return (<ul className={"list-disc list-outside"}>
+                        {list.items.map(i => <li className={"ml-4"}>
+                                {showListItem(i)}
+                                {i.subList && renderParagraph(i.subList, ip)}
+                            </li>)}
+                    </ul>);
+            }
+        }
+    }
+}
+function showTranslatableText(text) {
+    return <span>{text.text} <small>(<i>{text.key}</i>)</small></span>;
+}
+function showListItem(i) {
+    return i.text instanceof NdTranslatableText ?
+        showTranslatableText(i.text) :
+        <span>link item {(i.text.urlText ? showTranslatableText(i.text.urlText) : "link text n/a")} : {showTranslatableText(i.text.url)}</span>;
 }

package/esm/core/rendering-page-props.js

@@ -23,7 +23,10 @@ export class RenderingPageProps {
     componentResolver = undefined;
     imageProvider = undefined;
     i18nextProvider = undefined;
-    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageProvider = undefined, i18nextProvider = undefined) {
+    i18nextPostProcessor;
+    htmlSanitizer;
+    clientSideComponentProvider;
+    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageProvider = undefined, i18nextProvider = undefined, htmlSanitizer = undefined, clientSideComponentProvider = undefined) {
         this.lng = lng;
         this.renderingPriority = renderingPriority;
         this.content = content;
@@ -31,5 +34,7 @@ export class RenderingPageProps {
         this.skin = skin;
         this.imageProvider = imageProvider;
         this.i18nextProvider = i18nextProvider;
+        this.htmlSanitizer = htmlSanitizer;
+        this.clientSideComponentProvider = clientSideComponentProvider;
     }
 }

package/esm/core/rendering-page.jsx

@@ -16,7 +16,7 @@ async function defaultImageProvider(imageProps) {
     return <img className={`${imageStyle?.base} ${imageStyle?.decoration}`} src={url} alt={alt}/>;
 }
 async function RenderingPage(props) {
-    const { lng, renderingPriority, content, componentResolver, skin, imageProvider, i18nextProvider } = props;
+    const { lng, renderingPriority, content, componentResolver, skin, imageProvider, i18nextProvider, i18nextPostProcessor, htmlSanitizer, clientSideComponentProvider } = props;
     const actualComponentResolver = componentResolver ? componentResolver : defaultComponentResolver;
     let l;
     if (skin) {
@@ -26,10 +26,10 @@ async function RenderingPage(props) {
         }
         // console.log(" >>> this is my content <<< ", content)
         // console.log(" >>> this is my skin <<< ", JSON.stringify(blockSkin))
-        l = await Promise.all(blockSkin.rows.map(async (row, iRow) => await createRow(row, iRow, content, lng, imageProvider, i18nextProvider, actualComponentResolver)));
+        l = await Promise.all(blockSkin.rows.map(async (row, iRow) => await createRow(row, iRow, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer, clientSideComponentProvider)));
     }
     else {
-        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, actualComponentResolver)];
+        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer, clientSideComponentProvider)];
     }
     const actualSkin = mergeTheme(skin, { renderingPage: { base: "", decoration: "" }, rows: [] });
     return <div className={`rows-container ${ts(actualSkin, "renderingPage")}`}>{l}</div>;
@@ -66,13 +66,13 @@ function generateSkinByContentBlocks(blocks, skin) {
     // console.log("generated skin", JSON.stringify(res))
     return res;
 }
-async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, componentResolver) {
+async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider) {
     let l;
     if (row) {
-        l = await Promise.all(row.components.map(async (visualSection, iComp) => await createRowComponents(iRow, iComp, visualSection, blocks, lng, imageProvider, i18nProvider, componentResolver)));
+        l = await Promise.all(row.components.map(async (visualSection, iComp) => await createRowComponents(iRow, iComp, visualSection, blocks, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider)));
     }
     else {
-        l = await Promise.all(blocks.map(async (block, iComp) => await createRowComponents(iRow, iComp, undefined, [block], lng, imageProvider, i18nProvider, componentResolver)));
+        l = await Promise.all(blocks.map(async (block, iComp) => await createRowComponents(iRow, iComp, undefined, [block], lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider)));
     }
     const rowComponents = l.flatMap((p) => p);
     if (rowComponents.length == 0) {
@@ -144,7 +144,7 @@ async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, co
                     </div>)}
         </div>);
 }
-async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageProvider, i18nProvider, componentResolver) {
+async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageProvider, i18nProvider, i18nextPostProcessor, componentResolver, htmlSanitizer, clientSideComponentProvider) {
     // console.log("before component", skinComponent)
     const filteredBlocks = skinComponent ? skinComponent.selector.filterBlocks(pageContent) : pageContent;
     if (filteredBlocks.length == 0) {
@@ -170,17 +170,67 @@ async function createRowComponents(rowIndex, blockIndex, skinComponent, pageCont
             const blocks = filteredBlocks.slice(start, end);
             const compIndex = blockIndex * filteredBlocks.length + i;
             // console.log("calculated compo index ", compIndex, "filteredBlocks.length", filteredBlocks.length, "blockIndex", blockIndex)
-            res.push(await renderSingleComponent(rowIndex, compIndex, compo, blocks, skinComponent?.defaultThemeName || "light", compoDef.defaultTheme, skinComponent?.themeHierarchy, lng, imageProvider, i18nProvider));
+            res.push(await renderSingleComponent(rowIndex, compIndex, compo, blocks, skinComponent?.defaultThemeName || "light", compoDef.defaultTheme, skinComponent?.themeHierarchy, lng, imageProvider, i18nProvider, i18nextPostProcessor, htmlSanitizer, clientSideComponentProvider));
         }
         start = end;
         ++i;
     } while (end < filteredBlocks.length);
     return res;
 }
-async function renderSingleComponent(rowIndex, componentIndex, component, blocks, defaultThemeName, defaultTheme, themeHierarchy, lng, imageProvider, i18nextProvider) {
-    let actualI18nextProvider;
+function wrapInPostProcessor(provider, postProcessor) {
+    // if (postProcessor) {
+    //
+    //     return async (lng: string): Promise<{t: (text: NdTranslatableText) => NdTrustedHtml}> => {
+    //
+    //         const {t} = await provider(lng)
+    //         const tt = (txt: NdTranslatableText): NdTrustedHtml => {
+    //             // const translated: NdTrustedHtml = t(txt);
+    //             // let res = translated;
+    //             // if (typeof translated === "string") {
+    //             //     res = postProcessor(translated)
+    //             // }
+    //             // return res;
+    //             return postProcessor(t(txt))
+    //         }
+    //
+    //         return {t: tt}
+    //     }
+    // } else {
+    //     return provider;
+    // }
+    return async (lng) => {
+        const { t } = await provider(lng);
+        const tt = (txt) => {
+            // const translated: NdTrustedHtml = t(txt);
+            // let res = translated;
+            // if (typeof translated === "string") {
+            //     res = postProcessor(translated)
+            // }
+            // return res;
+            return postProcessor ? postProcessor(t(txt)) : t(txt);
+        };
+        return { t: tt };
+    };
+}
+function makeTrusted(provider, sanitizer) {
+    return async (lng) => {
+        const { t } = await provider(lng);
+        const tt = (txt) => {
+            // const translated: NdTrustedHtml = t(txt);
+            // let res = translated;
+            // if (typeof translated === "string") {
+            //     res = postProcessor(translated)
+            // }
+            // return res;
+            return sanitizer(t(txt));
+        };
+        return { t: tt };
+    };
+}
+async function renderSingleComponent(rowIndex, componentIndex, component, blocks, defaultThemeName, defaultTheme, themeHierarchy, lng, imageProvider, i18nextProvider, i18nextPostProcessor, htmlSanitizer, clientSideComponentProvider) {
+    let actualI18nextProvider_;
     if (lng == blocks[0].lng || !i18nextProvider) {
-        actualI18nextProvider = async (lng) => {
+        actualI18nextProvider_ = async (lng) => {
             return { t: (text) => {
                     const b = blocks.map((b) => b.getByKey(text.key, text.ns)).find((s) => s);
                     return b ? b : `key not found: ${text.ns}:${text.key}`;
@@ -188,9 +238,11 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
         };
     }
     else {
-        actualI18nextProvider = i18nextProvider;
+        actualI18nextProvider_ = i18nextProvider;
     }
+    const actualI18nextProvider = makeTrusted(wrapInPostProcessor(actualI18nextProvider_, i18nextPostProcessor), htmlSanitizer || ((text) => ({ __html: text })));
     const actualImageProvider = imageProvider ? imageProvider : defaultImageProvider;
+    const actualClientSideComponentProvider = clientSideComponentProvider ? clientSideComponentProvider : (c) => <span>[placeholder for: {c}]</span>;
     // if (themeHierarchy) {
     //     console.log("themeHierarchy", themeHierarchy)
     // }
@@ -206,7 +258,8 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
         options: effectiveOptions,
         lng: lng,
         imageProvider: actualImageProvider,
-        i18nextProvider: actualI18nextProvider
+        i18nextTrustedHtmlProvider: actualI18nextProvider,
+        clientSideComponentProvider: actualClientSideComponentProvider
     };
     // console.log("start rendering page with props", props);
     const res = await component(props);

package/esm/index.js

@@ -1,10 +1,10 @@
-import { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock } from "./content/nd-content";
+import { NdContentImage, NdTranslatableText, NdList, NdLink, NdCode, NdCallToAction, NdContentBlock } from "./content/nd-content";
 import { NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy } from "./skin/nd-skin";
 import { RenderingPageProps, RenderingPriority } from "./core/rendering-page-props";
 import { RenderingPage } from "./core/rendering-page";
 import { mergeTheme } from "./theme-utils/theme-merger";
 import { defaultRowThemeImpl } from "./theme-utils/row-style";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
+export { NdContentImage, NdTranslatableText, NdList, NdLink, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme };
 export { DummyComp } from "./core/dummy-comp";
@@ -15,4 +15,31 @@ export const ts = function (t, key) {
     const k = key;
     return k + " " + themeStyle?.base + " " + themeStyle?.decoration;
 };
+export const tsi = function (t, key, i) {
+    // console.log("in tsi ", key, t[key], Array.isArray(t[key]), [1, 2, 3], Array.isArray([1, 2, 3]))
+    if (typeof t[key] === 'object') {
+        // console.log("this is tsi object", key)
+        const len = Object.keys(t[key]).length;
+        const obj = t[key];
+        const themeStyle = obj[i % len];
+        const k = key;
+        return k + `[${i}]` + themeStyle?.base + " " + themeStyle?.decoration;
+    }
+    else if (Array.isArray(t[key])) {
+        // console.log("this is tsi array", key)
+        const len = t[key].length;
+        const themeStyle = t[key][i % len];
+        const k = key;
+        return k + `[${i}]` + themeStyle?.base + " " + themeStyle?.decoration;
+    }
+    else {
+        return ts(t, key);
+    }
+};
+export const extractValueFromText = (text, attrName) => {
+    if (text && text.__html.startsWith(`{${attrName}}`)) {
+        return { __html: text.__html.substring(`{${attrName}}`.length) };
+    }
+    return text;
+};
 export const defaultRowTheme = defaultRowThemeImpl;

package/esm/providers/content/content-markdown-provider.js

@@ -1,8 +1,9 @@
 import { NdTranslatableText, NdList, NdContentBlock, NdContentImage, NdCode } from "nodoku-core";
 import { Marked } from '@ts-stack/markdown';
-import { parse } from 'node-html-parser';
+import { parse, TextNode } from 'node-html-parser';
 import yaml from "js-yaml";
 import { NdCallToAction } from "../../content/nd-content";
+import { NdLink } from "../../content/nd-content";
 const nsRegex = /.*\/(.*)\.md/;
 export async function contentMarkdownProvider(mdFileUrl, contentLng, ns = undefined) {
     return await fetch(mdFileUrl)
@@ -203,7 +204,7 @@ class BlockHolder {
                 text = newBlock.h6;
             }
             else if (this.blockContent.paragraphsIndex.indexOf(i) >= 0) {
-                const para = this.parseParagraph(blockId, htmlElem, pi);
+                const para = this.parseParagraph(`${blockId}.paragraphs.${pi}`, htmlElem);
                 if (para) {
                     newBlock.paragraphs.push(para);
                     text = para;
@@ -285,9 +286,23 @@ class BlockHolder {
         // console.log("returnin created cta: ", cta)
         return cta;
     }
-    parseParagraph(blockId, p, pi) {
+    parseParagraph(idPrefix, cn) {
+        if (!cn) {
+            return undefined;
+        }
+        if (cn instanceof TextNode) {
+            return new NdTranslatableText(this.ns, `${idPrefix}`, cn.text);
+        }
+        const p = cn;
+        if (!p.rawTagName) {
+            return undefined;
+        }
+        console.log("parsing paragraph", p.innerHTML);
         if (p.rawTagName === "p" || p.rawTagName === "blockquote") {
-            return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}`, p.innerHTML);
+            return new NdTranslatableText(this.ns, `${idPrefix}`, p.innerHTML);
+        }
+        else if (p.rawTagName === "a") {
+            return new NdLink(new NdTranslatableText(this.ns, `${idPrefix}.urlText`, p.innerHTML), new NdTranslatableText(this.ns, `${idPrefix}.url`, p.attributes["href"], true));
         }
         else if (p.rawTagName === "pre") {
             const codeHtml = p.childNodes[0];
@@ -301,24 +316,49 @@ class BlockHolder {
             }
         }
         else if (p.rawTagName === "ol") {
-            return NdList.createOrdered(p.childNodes
-                .filter(lin => lin.innerText && lin.innerText.trim().length > 0)
-                .map((lin, k) => {
-                const li = lin;
-                return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}.items.${k}`, li.innerHTML);
-            }));
+            return NdList.createOrdered(this.parseListItems(idPrefix, p));
         }
         else if (p.rawTagName === "ul") {
-            return NdList.createUnOrdered(p.childNodes
-                .filter(lin => lin.innerText && lin.innerText.trim().length > 0)
-                .map((lin, k) => {
-                const li = lin;
-                return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}.items.${k}`, li.innerHTML);
-            }));
-        }
-        console.log("couldn't parse paragraph: ", p);
+            return NdList.createUnOrdered(this.parseListItems(idPrefix, p));
+        } /*else {
+            return new NdTranslatableText(this.ns, `${idPrefix}`, p.innerHTML);
+        }*/
+        console.log("couldn't parse paragraph: ", p.innerHTML);
         return undefined;
     }
+    parseListItems(idPrefix, p) {
+        return p.childNodes
+            .filter(lin => lin.innerText && lin.innerText.trim().length > 0)
+            .map((lin, k) => {
+            const li = lin;
+            let innerList = undefined;
+            let liText; //TextNode | undefined;
+            if (li.childNodes.length > 0) {
+                console.log("found inner item", li.childNodes.length, (li.childNodes.map(i => i)
+                    .map((i1) => i1.rawTagName ? i1.rawTagName : "N.A")), "<<<");
+                console.log("found inner list", li.childNodes[0].innerText);
+                innerList = li.childNodes
+                    .map(cn => this.parseParagraph(`${idPrefix}.items.${k}.subList`, cn))
+                    .find((p) => p != undefined && p instanceof NdList);
+                liText = li.childNodes
+                    .map(cn => this.parseParagraph(`${idPrefix}.items.${k}.text`, cn))
+                    .find((p) => p != undefined && (p instanceof NdLink || p instanceof NdTranslatableText));
+                // innerList = innerNodes.find((p: NdParagraph | undefined) => p != undefined && p instanceof NdList)
+                // if (li.childNodes[0].rawTagName in ["ol", "ul"]) {
+                // }
+                // liText = li.childNodes.filter(cn => cn instanceof TextNode).find(t => t && t.text.length > 0);
+                // liText = innerNodes.find((p: NdParagraph | undefined) => p != undefined && (p instanceof NdLink || p instanceof NdTranslatableText))
+            }
+            // type l = keyof HTMLElement
+            // console.log("found list", li.childNodes.filter(cn => Object.keys(cn).map(k => k == "parentNode" ? "parent" : (cn as HTMLElement)[k as l])), "<<", lin.innerText, "<<")
+            // const foundList = {text: new NdTranslatableText(this.ns, `${idPrefix}.items.${k}`, liText)/*liText*/, subList: innerList};
+            const foundList = { text: liText ? liText : new NdTranslatableText(this.ns, `${idPrefix}.items.${k}`, "n/a"), subList: innerList };
+            console.log("found list", ">>", foundList, "<<");
+            return foundList;
+            // const listItem = this.parseParagraph(`${idPrefix}.items.${k}`, li)
+            // return listItem ? listItem : new NdTranslatableText(this.ns, `${idPrefix}.items.${k}`, "undefined list item" + li.innerHTML);
+        }).filter(lin => lin != undefined);
+    }
 }
 export function parseMarkdownAsContent(fileContents, contentLng, ns) {
     Marked.setOptions({ isNoP: true });

package/esm/skin/nd-skin.js

@@ -118,8 +118,9 @@ export class NdSkinComponentProps {
     options;
     lng;
     imageProvider;
-    i18nextProvider;
-    constructor(rowIndex, componentIndex, content, defaultThemeName, theme, themes, options, lng, imageProvider, i18nextProvider) {
+    i18nextTrustedHtmlProvider;
+    clientSideComponentProvider;
+    constructor(rowIndex, componentIndex, content, defaultThemeName, theme, themes, options, lng, imageProvider, i18nextTrustedHtmlProvider, clientSideComponentProvider) {
         this.rowIndex = rowIndex;
         this.componentIndex = componentIndex;
         this.content = content;
@@ -129,6 +130,7 @@ export class NdSkinComponentProps {
         this.options = options;
         this.lng = lng;
         this.imageProvider = imageProvider;
-        this.i18nextProvider = i18nextProvider;
+        this.i18nextTrustedHtmlProvider = i18nextTrustedHtmlProvider;
+        this.clientSideComponentProvider = clientSideComponentProvider;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodoku-core",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "basic foundation for nodoku static site generator",
   "exports": {
     ".": {

package/schemas/manifest-schema.json

@@ -34,6 +34,12 @@
                 "type": "number"
               }
             ]
+          },
+          "clientSideComps": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
           }
         },
         "required": [

package/types/bin/manifest.d.ts

@@ -4,6 +4,7 @@ export type ComponentDef = {
     optionsSchema: string;
     defaultThemeFile: string;
     numBlocks: string | number;
+    clientSideComps: string[];
 };
 export type Manifest = {
     moduleName: string;

package/types/content/nd-content.d.ts

@@ -15,18 +15,28 @@ export declare class NdTranslatableText {
     excludeFromTranslation: boolean;
     constructor(ns: string, key?: string, text?: string, excludeFromTranslation?: boolean);
 }
+export type NdListItem = {
+    text: NdTranslatableText | NdLink;
+    subList: NdParagraph | undefined;
+};
 export declare class NdList {
-    items: NdTranslatableText[];
+    items: NdListItem[];
     ordered: boolean;
     private constructor();
-    static createOrdered(items: NdTranslatableText[]): NdList;
-    static createUnOrdered(items: NdTranslatableText[]): NdList;
+    static createOrdered(items: NdListItem[]): NdList;
+    static createUnOrdered(items: NdListItem[]): NdList;
 }
 export declare class NdCode {
     lang: string;
     code: string;
     constructor(lang: string, code: string);
 }
+export declare class NdLink {
+    urlText: NdTranslatableText | undefined;
+    url: NdTranslatableText;
+    constructor(text: NdTranslatableText, url: NdTranslatableText);
+}
+export type NdParagraph = NdTranslatableText | NdList | NdCode | NdLink;
 export declare class NdContentBlock {
     id: string;
     lng: string;
@@ -43,7 +53,7 @@ export declare class NdContentBlock {
     h5?: NdTranslatableText;
     h6?: NdTranslatableText;
     callToActions: NdCallToAction[];
-    paragraphs: (NdTranslatableText | NdList | NdCode)[];
+    paragraphs: NdParagraph[];
     images: NdContentImage[];
     htmlElements: {
         htmlElem: HTMLElement;

package/types/core/providers.d.ts

@@ -8,12 +8,21 @@ export type NdImageProps = {
     title?: string;
     imageStyle?: ImageStyle;
 };
+export type NdTrustedHtml = {
+    __html: TrustedHTML;
+};
 export type AsyncFunctionComponent = (props: NdSkinComponentProps) => Promise<JSX.Element>;
 export type ComponentResolver = (componentName: string) => Promise<{
     compo: AsyncFunctionComponent;
     compoDef: NdComponentDefinition;
 }>;
-export type I18nextProvider = (lng: string) => Promise<{
+export type NdI18nextProvider = (lng: string) => Promise<{
     t: (text: NdTranslatableText) => string;
 }>;
-export type ImageProvider = (imageProps: NdImageProps) => Promise<JSX.Element>;
+export type NdI18nextTrustedHtmlProvider = (lng: string) => Promise<{
+    t: (text: NdTranslatableText) => NdTrustedHtml;
+}>;
+export type NdImageProvider = (imageProps: NdImageProps) => Promise<JSX.Element>;
+export type NdI18NextPostProcessor = (text: string) => string;
+export type NdHtmlSanitizer = (text: string) => NdTrustedHtml;
+export type NdClientSideComponentProvider = (componentName: string) => JSX.Element;

package/types/core/rendering-page-props.d.ts

@@ -1,6 +1,9 @@
-import { ComponentResolver, I18nextProvider, ImageProvider } from "./providers";
+import { ComponentResolver, NdI18nextProvider, NdImageProvider } from "./providers";
 import { NdContentBlock } from "../content/nd-content";
 import { NdPageSkin } from "../skin/nd-skin";
+import { NdI18NextPostProcessor } from "./providers";
+import { NdHtmlSanitizer } from "./providers";
+import { NdClientSideComponentProvider } from "./providers";
 export declare enum RenderingPriority {
     content_first = 0,
     skin_first = 1
@@ -11,7 +14,10 @@ export declare class RenderingPageProps {
     skin: NdPageSkin | undefined;
     renderingPriority: RenderingPriority;
     componentResolver: ComponentResolver | undefined;
-    imageProvider: ImageProvider | undefined;
-    i18nextProvider: I18nextProvider | undefined;
-    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageProvider?: ImageProvider | undefined, i18nextProvider?: I18nextProvider | undefined);
+    imageProvider: NdImageProvider | undefined;
+    i18nextProvider: NdI18nextProvider | undefined;
+    i18nextPostProcessor: NdI18NextPostProcessor | undefined;
+    htmlSanitizer: NdHtmlSanitizer | undefined;
+    clientSideComponentProvider: NdClientSideComponentProvider | undefined;
+    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageProvider?: NdImageProvider | undefined, i18nextProvider?: NdI18nextProvider | undefined, htmlSanitizer?: NdHtmlSanitizer | undefined, clientSideComponentProvider?: NdClientSideComponentProvider | undefined);
 }

package/types/index.d.ts

@@ -1,19 +1,21 @@
-import { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock } from "./content/nd-content";
+import { NdContentImage, NdTranslatableText, NdList, NdLink, NdListItem, NdCode, NdCallToAction, NdParagraph, NdContentBlock } from "./content/nd-content";
 import { NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, NdDefaultThemeName } from "./skin/nd-skin";
 import { RenderingPageProps, RenderingPriority } from "./core/rendering-page-props";
 import { RenderingPage } from "./core/rendering-page";
-import { I18nextProvider, AsyncFunctionComponent, ImageProvider, NdImageProps } from "./core/providers";
+import { NdI18nextProvider, AsyncFunctionComponent, NdImageProvider, NdImageProps, NdI18nextTrustedHtmlProvider, NdHtmlSanitizer, NdTrustedHtml, NdI18NextPostProcessor } from "./core/providers";
 import { mergeTheme } from "./theme-utils/theme-merger";
 import { ThemeStyle } from "./theme-utils/theme-style";
 import { ExtendedThemeStyle } from "./theme-utils/extended-theme-style";
 import { ImageStyle } from "./theme-utils/image-style";
 import { RowStyle } from "./theme-utils/row-style";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdDefaultThemeName, type NdImageProps };
+export { NdContentImage, NdTranslatableText, NdList, type NdListItem, NdLink, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdParagraph, type NdDefaultThemeName, type NdImageProps, type NdI18nextTrustedHtmlProvider, type NdHtmlSanitizer, type NdTrustedHtml, type NdI18NextPostProcessor };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme, type ThemeStyle, type ExtendedThemeStyle, type ImageStyle };
-export type { I18nextProvider, AsyncFunctionComponent, ImageProvider };
+export type { NdI18nextProvider, AsyncFunctionComponent, NdImageProvider };
 export { DummyComp } from "./core/dummy-comp";
 export { contentMarkdownProvider, parseMarkdownAsContent } from "./providers/content/content-markdown-provider";
 export { skinYamlProvider, parseYamlContentAsSkin } from "./providers/skin/skin-yaml-provider";
 export declare const ts: <T>(t: T, key: keyof T) => string;
+export declare const tsi: <T>(t: T, key: keyof T, i: number) => string;
+export declare const extractValueFromText: (text: NdTrustedHtml | undefined, attrName: string) => NdTrustedHtml | undefined;
 export declare const defaultRowTheme: RowStyle;

package/types/skin/nd-skin.d.ts

@@ -1,7 +1,9 @@
-import { I18nextProvider, ImageProvider } from "../core/providers";
+import { NdImageProvider } from "../core/providers";
 import { NdContentBlock } from "../content/nd-content";
 import { ThemeStyle } from "../theme-utils/theme-style";
 import { RowStyle } from "../theme-utils/row-style";
+import { NdI18nextTrustedHtmlProvider } from "../core/providers";
+import { NdClientSideComponentProvider } from "../core/providers";
 export type NdDefaultThemeName = "light" | "dark";
 export declare class NdThemeHierarchy {
     defaultThemeName: NdDefaultThemeName;
@@ -69,7 +71,8 @@ export declare class NdSkinComponentProps<TComponentTheme = any, TComponentOptio
     themes: TComponentTheme[];
     options: TComponentOptions | undefined;
     lng: string;
-    imageProvider: ImageProvider;
-    i18nextProvider: I18nextProvider;
-    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageProvider: ImageProvider, i18nextProvider: I18nextProvider);
+    imageProvider: NdImageProvider;
+    i18nextTrustedHtmlProvider: NdI18nextTrustedHtmlProvider;
+    clientSideComponentProvider: NdClientSideComponentProvider;
+    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageProvider: NdImageProvider, i18nextTrustedHtmlProvider: NdI18nextTrustedHtmlProvider, clientSideComponentProvider: NdClientSideComponentProvider);
 }