nodoku-core 0.2.3 → 0.2.4

package/esm/core/dummy-comp.jsx

@@ -1,8 +1,8 @@
 import { NdCode, NdTranslatableText } 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,12 +18,12 @@ 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:
@@ -32,7 +32,7 @@ async function render(rowIndex, componentIndex, block, t) {
                 return (<div>
                                 {p && p.key}
                                 <p key={ip} className={"mb-3 font-normal text-gray-700 dark:text-gray-400"}>
-                                    {p && t(p)}
+                                    {p && t(p).__html}
                                 </p>
                             </div>);
             }
@@ -48,12 +48,12 @@ async function render(rowIndex, componentIndex, block, t) {
                 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>)}
+                                    {list.items.map(i => <li className={"ml-4"}>{t(i).__html} <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>)}
+                                    {list.items.map(i => <li className={"ml-4"}>{t(i).__html} <small>(<i>{i.key}</i>)</small></li>)}
                                 </ul>);
                 }
             }
@@ -62,7 +62,7 @@ async function render(rowIndex, componentIndex, block, t) {
                 {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 +71,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>);
         })}

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

@@ -23,7 +23,9 @@ 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;
+    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageProvider = undefined, i18nextProvider = undefined, htmlSanitizer = undefined) {
         this.lng = lng;
         this.renderingPriority = renderingPriority;
         this.content = content;
@@ -31,5 +33,6 @@ export class RenderingPageProps {
         this.skin = skin;
         this.imageProvider = imageProvider;
         this.i18nextProvider = i18nextProvider;
+        this.htmlSanitizer = htmlSanitizer;
     }
 }

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 } = 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)));
     }
     else {
-        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, actualComponentResolver)];
+        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, i18nextPostProcessor, actualComponentResolver, htmlSanitizer)];
     }
     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) {
     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)));
     }
     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)));
     }
     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) {
     // 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));
         }
         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) {
+    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,8 +238,9 @@ 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;
     // if (themeHierarchy) {
     //     console.log("themeHierarchy", themeHierarchy)
@@ -206,7 +257,7 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
         options: effectiveOptions,
         lng: lng,
         imageProvider: actualImageProvider,
-        i18nextProvider: actualI18nextProvider
+        i18nextTrustedHtmlProvider: actualI18nextProvider
     };
     // console.log("start rendering page with props", props);
     const res = await component(props);

package/esm/index.js

@@ -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/skin/nd-skin.js

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

package/package.json

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

package/types/core/providers.d.ts

@@ -8,12 +8,20 @@ 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;

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

@@ -1,6 +1,8 @@
-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";
 export declare enum RenderingPriority {
     content_first = 0,
     skin_first = 1
@@ -11,7 +13,9 @@ 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;
+    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageProvider?: NdImageProvider | undefined, i18nextProvider?: NdI18nextProvider | undefined, htmlSanitizer?: NdHtmlSanitizer | undefined);
 }

package/types/index.d.ts

@@ -2,18 +2,20 @@ import { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdC
 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, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, 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,8 @@
-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";
 export type NdDefaultThemeName = "light" | "dark";
 export declare class NdThemeHierarchy {
     defaultThemeName: NdDefaultThemeName;
@@ -69,7 +70,7 @@ 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;
+    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageProvider: NdImageProvider, i18nextTrustedHtmlProvider: NdI18nextTrustedHtmlProvider);
 }