nodoku-core 0.2.0 → 0.2.2

package/esm/content/nd-content.js

@@ -3,6 +3,10 @@ export class NdContentImage {
     title;
     alt;
 }
+export class NdCallToAction {
+    ctaUrl = {};
+    ctaTitle;
+}
 export class NdTranslatableText {
     key = "";
     ns = "";
@@ -49,9 +53,8 @@ export class NdContentBlock {
     h4;
     h5;
     h6;
-    footer;
+    callToActions = [];
     paragraphs = [];
-    // bgImageUrl?: NdTranslatableText;
     images = [];
     htmlElements = [];
     constructor(id, ns, lng) {

package/esm/core/dummy-comp.jsx

@@ -6,10 +6,7 @@ export async function DummyComp(props) {
     return <div>{await render(rowIndex, componentIndex, content[0], t)}</div>;
 }
 async function render(rowIndex, componentIndex, block, t) {
-    // var style = {};
-    // if (block.bgImageUrl) {
-    //     style = {backgroundImage: `url(${t(block.bgImageUrl)})`}
-    // }
+    console.log("this is my block", block.callToActions.map(cta => `${cta.ctaUrl.key}`));
     return (<div className={"w-full w-full flex flex-col items-left justify-left  border border-4 border-red-200 relative pb-10"}>
             {/*<div className={"top-0 bottom-0 left-0 right-0 absolute bg-cover bg-no-repeat"}*/}
             {/*     style={{...style, zIndex: -11}}>*/}
@@ -86,8 +83,10 @@ async function render(rowIndex, componentIndex, block, t) {
             </div>
 
             <div className={"absolute bottom-0 p-5"}>
-                {block.footer?.key}
-                <p>{block.footer && t(block.footer)}</p>
+                {block.callToActions.map((cta) => {
+            return <p><b>{`${t(cta.ctaTitle || cta.ctaUrl)}: ${t(cta.ctaUrl)}`}</b>{`${cta.ctaUrl.key}: ${t(cta.ctaUrl)}`}</p>;
+        })}
+
             </div>
 
         </div>);

package/esm/core/rendering-page.jsx

@@ -5,6 +5,8 @@ import { DummyComp } from "./dummy-comp";
 import yaml from "js-yaml";
 import fs from "node:fs";
 import { mergeTheme } from "../theme-utils/theme-merger";
+import { defaultRowThemeImpl } from "../theme-utils/row-style";
+import { ts } from "../index";
 async function defaultComponentResolver() {
     const compoDef = new NdComponentDefinition("unlimited", undefined, {});
     return { compo: DummyComp, compoDef: compoDef };
@@ -36,7 +38,7 @@ function generateSkinByContentBlocks(blocks, skin) {
     let currentRow = undefined;
     const res = new NdPageSkin();
     let rowIndex = 0;
-    blocks.map((b, i) => {
+    blocks.map((b) => {
         if (!rendered.has(b.id)) {
             const bRows = skin.rows.filter(r => r.components.filter(c => c.selector.match(b)).length > 0);
             if (bRows.length > 0) {
@@ -76,7 +78,7 @@ async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, co
         return <></>;
     }
     const numComponents = rowComponents.length;
-    const rowEffectiveTheme = mergeTheme(row?.theme, NdRow.defaultRowTheme);
+    const rowEffectiveTheme = mergeTheme(row?.theme, defaultRowThemeImpl);
     const maxCols = row?.maxCols ? row.maxCols : 3;
     const numCols = numComponents <= maxCols ? numComponents : maxCols;
     let gridCols = "grid-cols-1";
@@ -136,7 +138,9 @@ async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, co
         rowDisplay = "flex flex-row justify-center flex-wrap flex-1";
     }
     return (<div key={`row-${iRow}`} className={`${rowDisplay} ${rowEffectiveTheme?.base} ${rowEffectiveTheme?.decoration} class-row-${iRow}`}>
-            {rowComponents.map(c => <div className={`nd-component-holder basis-full ${flexBasis} ${rowEffectiveTheme.componentHolder?.base} ${rowEffectiveTheme.componentHolder?.decoration}`} style={{ minWidth: 0, overflow: "hidden" }}>{c}</div>)}
+            {rowComponents.map((c) => <div className={`nd-component-holder ${flexBasis} ${ts(rowEffectiveTheme, "componentHolder")} ${rowEffectiveTheme.componentHolder?.base} ${rowEffectiveTheme.componentHolder?.decoration}`}>
+                        {c}
+                    </div>)}
         </div>);
 }
 async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageProvider, i18nProvider, componentResolver) {

package/esm/index.js

@@ -1,11 +1,18 @@
-import { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock } from "./content/nd-content";
+import { NdContentImage, NdTranslatableText, NdList, 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";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
+import { defaultRowThemeImpl } from "./theme-utils/row-style";
+export { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme };
 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 const ts = function (t, key) {
+    const themeStyle = t[key];
+    const k = key;
+    return k + " " + themeStyle?.base + " " + themeStyle?.decoration;
+};
+export const defaultRowTheme = defaultRowThemeImpl;

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

@@ -2,6 +2,7 @@ import { NdTranslatableText, NdList, NdContentBlock, NdContentImage, NdCode } fr
 import { Marked } from '@ts-stack/markdown';
 import { parse } from 'node-html-parser';
 import yaml from "js-yaml";
+import { NdCallToAction } from "../../content/nd-content";
 const nsRegex = /.*\/(.*)\.md/;
 export async function contentMarkdownProvider(mdFileUrl, contentLng, ns = undefined) {
     return await fetch(mdFileUrl)
@@ -19,7 +20,7 @@ export async function contentMarkdownProvider(mdFileUrl, contentLng, ns = undefi
         return parseMarkdownAsContent(fileContent, contentLng, ns);
     });
 }
-const footerPattern = /^\|(.*)\|/;
+const callToActionPattern = /^\|(.*)\|/;
 const codePattern = /<code class="lang-(\w+)">(.*)<\/code>/s;
 class BlockHolder {
     blockIndex;
@@ -34,7 +35,7 @@ class BlockHolder {
         this.blockIndex = blockIndex;
         this.blockDefIndex = blockDefIndex;
     }
-    blockContent = { paragraphsIndex: [], imagesIndex: [], htmlStream: [] };
+    blockContent = { paragraphsIndex: [], imagesIndex: [], callToActionIndex: [], htmlStream: [] };
     hasContentH1AndBelow() {
         return this.blockContent.titleIndex != undefined || this.hasContentH2AndBelow();
     }
@@ -128,6 +129,12 @@ class BlockHolder {
         this.blockContent.htmlStream.push(childNode);
         return this;
     }
+    addCallToAction(childNode) {
+        this.blockContent.callToActionIndex.push(this.blockContent.htmlStream.length);
+        // console.log("adding html for cta", childNode.innerHTML)
+        this.blockContent.htmlStream.push(childNode);
+        return this;
+    }
     addHorizontalLine(childNode) {
         this.blockContent.htmlStream.push(childNode);
         return this;
@@ -168,6 +175,7 @@ class BlockHolder {
         // console.log("creating block: ", this.blockContent.paragraphsIndex)
         let pi = 0;
         let imi = 0;
+        let ci = 0;
         this.blockContent.htmlStream.forEach((htmlElem, i) => {
             let text = undefined;
             if (i === this.blockContent.titleIndex) {
@@ -242,21 +250,41 @@ class BlockHolder {
                     imi++;
                 }
             }
+            else if (this.blockContent.callToActionIndex.indexOf(i) >= 0) {
+                const cta = this.parseCallToAction(blockId, htmlElem, ci);
+                if (cta) {
+                    newBlock.callToActions.push(cta);
+                    text = cta;
+                    ci++;
+                    // console.log("added call to action: ", cta)
+                }
+            }
             else {
                 text = new NdTranslatableText(this.ns, `${blockId}.htmlElements.${newBlock.htmlElements.length}`, "");
             }
             newBlock.htmlElements.push({ htmlElem: htmlElem, translatedText: text });
         });
-        if (this.blockContent.footer && this.blockContent.footer.trim().length > 0) {
-            newBlock.footer = new NdTranslatableText(this.ns, `${blockId}.footer`, this.blockContent.footer);
-        }
-        // if (this.blockContent.bgImage && this.blockContent.bgImage.getAttribute("src")) {
-        //     newBlock.bgImageUrl = new NdTranslatableText(this.ns,  `${blockId}.bgImageUrl`,
-        //         this.blockContent.bgImage.getAttribute("src") as string, true);
+        // if (this.blockContent.footer && this.blockContent.footer.trim().length > 0) {
+        //     newBlock.footer = new NdTranslatableText(this.ns, `${blockId}.footer`, this.blockContent.footer);
         // }
-        // console.log("added block", newBlock)
         return newBlock;
     }
+    parseCallToAction(blockId, ctaHtml, ci) {
+        const cta = new NdCallToAction();
+        // console.log("parsing callToAction", ctaHtml.innerHTML, ctaHtml.rawTagName, ctaHtml.attributes, ctaHtml.childNodes.map(cn => cn.rawTagName));
+        // const res = callToActionPattern.exec(ctaHtml.innerHTML)
+        const cnRef = ctaHtml.childNodes.find(cn => cn.rawTagName === "a");
+        let url = "n/a";
+        let title = ctaHtml.innerHTML;
+        if (cnRef) {
+            url = cnRef.getAttribute("href") || url;
+            title = cnRef.textContent;
+        }
+        cta.ctaUrl = new NdTranslatableText(this.ns, `${blockId}.callToActions.${ci}.ctaUrl`, url);
+        cta.ctaTitle = new NdTranslatableText(this.ns, `${blockId}.callToActions.${ci}.ctaTitle`, title);
+        // console.log("returnin created cta: ", cta)
+        return cta;
+    }
     parseParagraph(blockId, p, pi) {
         if (p.rawTagName === "p" || p.rawTagName === "blockquote") {
             return new NdTranslatableText(this.ns, `${blockId}.paragraphs.${pi}`, p.innerHTML);
@@ -341,23 +369,22 @@ export function parseMarkdownAsContent(fileContents, contentLng, ns) {
             currentBlock.addParagraph(childNode);
         }
         else if (childNode.rawTagName === "p" || childNode.rawTagName === "blockquote") {
-            const rFooter = footerPattern.exec(childNode.innerHTML);
-            if (rFooter) {
-                currentBlock.blockContent.footer = rFooter[1];
-            }
-            else if (childNode.childNodes && childNode.childNodes.filter(cn => cn.rawTagName == "img").length > 0) {
+            if (childNode.childNodes &&
+                childNode.childNodes.filter(cn => cn.rawTagName == "img").length > 0) {
                 childNode.childNodes.filter(cn => cn.rawTagName == "img")
                     .forEach((cn) => {
-                    const l = cn;
-                    // if (l.getAttribute("alt") === "bg-image") {
-                    //     currentBlock.blockContent.bgImage = l;
-                    // } else {
                     currentBlock.addImage(cn);
-                    // }
                 });
             }
             else {
-                currentBlock.addParagraph(childNode);
+                const rCta = callToActionPattern.exec(childNode.innerHTML);
+                if (rCta) {
+                    // console.log("cta childNode", childNode)
+                    currentBlock.addCallToAction(childNode);
+                }
+                else {
+                    currentBlock.addParagraph(childNode);
+                }
             }
         }
         else if (childNode.rawTagName === "figure") {

package/esm/skin/nd-skin.js

@@ -72,15 +72,6 @@ export class NdRow {
     constructor(rowIndex) {
         this.rowIndex = rowIndex;
     }
-    static defaultRowTheme = {
-        base: "md:grid-cols-1",
-        decoration: "gap-4",
-        rowDisplay: "grid",
-        componentHolder: {
-            base: "min-w-0 overflow-hidden",
-            decoration: ""
-        },
-    };
 }
 export class NdPageSkin {
     renderingPage;

package/esm/theme-utils/row-style.js

@@ -1 +1,9 @@
-export {};
+export const defaultRowThemeImpl = {
+    base: "md:grid-cols-1",
+    decoration: "gap-4",
+    rowDisplay: "grid",
+    componentHolder: {
+        base: "min-w-0 overflow-hidden",
+        decoration: ""
+    },
+};

package/package.json

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

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

@@ -4,6 +4,10 @@ export declare class NdContentImage {
     title?: NdTranslatableText;
     alt?: NdTranslatableText;
 }
+export declare class NdCallToAction {
+    ctaUrl: NdTranslatableText;
+    ctaTitle?: NdTranslatableText;
+}
 export declare class NdTranslatableText {
     key: string;
     ns: string;
@@ -38,12 +42,12 @@ export declare class NdContentBlock {
     h4?: NdTranslatableText;
     h5?: NdTranslatableText;
     h6?: NdTranslatableText;
-    footer?: NdTranslatableText;
+    callToActions: NdCallToAction[];
     paragraphs: (NdTranslatableText | NdList | NdCode)[];
     images: NdContentImage[];
     htmlElements: {
         htmlElem: HTMLElement;
-        translatedText: (NdTranslatableText | NdContentImage | NdList | NdCode);
+        translatedText: (NdTranslatableText | NdContentImage | NdList | NdCode | NdCallToAction);
     }[];
     constructor(id: string, ns: string, lng: string);
     getByKey(key: string, ns: string): string | undefined;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock } from "./content/nd-content";
+import { NdContentImage, NdTranslatableText, NdList, NdCode, NdCallToAction, 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";
@@ -7,10 +7,13 @@ 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";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdDefaultThemeName, type NdImageProps };
+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 { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme, type ThemeStyle, type ExtendedThemeStyle, type ImageStyle };
 export type { I18nextProvider, AsyncFunctionComponent, ImageProvider };
 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 defaultRowTheme: RowStyle;

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

@@ -32,10 +32,9 @@ export declare class NdSkinComponent {
 export declare class NdRow {
     rowIndex: number;
     maxCols?: number;
-    theme: RowStyle | undefined;
+    theme?: RowStyle;
     components: NdSkinComponent[];
     constructor(rowIndex: number);
-    static defaultRowTheme: RowStyle;
 }
 export declare class NdPageSkin {
     renderingPage: ThemeStyle | undefined;

package/types/theme-utils/row-style.d.ts

@@ -3,3 +3,4 @@ export type RowStyle = ThemeStyle & {
     rowDisplay?: "flex" | "grid";
     componentHolder?: ThemeStyle;
 };
+export declare const defaultRowThemeImpl: RowStyle;