nodoku-core 0.2.1 → 0.2.3

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

@@ -12,16 +12,12 @@ register('./import-load-hooks.js', import.meta.url);
  */
 // @ts-ignore
 const template = (await import("./mustache/component-resolver.ts.hbs")).default;
-class TemplateView {
-    modules = [];
-    comps = [];
-}
 function calculateTemplateView(dirNodeModules = undefined) {
     if (!dirNodeModules) {
         dirNodeModules = `${path.resolve()}/node_modules`;
     }
     const manifests = loadManifestsFromFolder(dirNodeModules);
-    const view = new TemplateView();
+    const view = { modules: [], comps: [] };
     manifests.forEach((m, k) => {
         let prefix = "";
         if (m.namespace) {

package/esm/bin/generate-skin-schema.js

@@ -12,15 +12,12 @@ register('./import-load-hooks.js', import.meta.url);
  */
 // @ts-ignore
 const template = (await import("./mustache/visual-schema.json.hbs")).default;
-class TemplateView {
-    components = new Map();
-}
 function calculateTemplateView(schemaDestinationDir, dirNodeModules = undefined) {
     if (!dirNodeModules) {
         dirNodeModules = path.resolve("./node_modules");
     }
     const components = loadManifestsFromFolder(dirNodeModules);
-    const tv = new TemplateView();
+    const tv = { components: new Map() };
     components.forEach((m) => {
         m.components.forEach((cd, cn) => {
             const moduleDir = `${dirNodeModules}/${m.moduleName}`;

package/esm/bin/manifest-loader.js

@@ -1,4 +1,3 @@
-import { ComponentDef, Manifest } from "./manifest.js";
 import fs from "node:fs";
 import path from "path";
 export function loadManifestsFromFolder(dir) {
@@ -23,7 +22,11 @@ function loadComponentsByManifest(dir, moduleName) {
         const stat = fs.statSync(moduleDir);
         if (stat.isFile()) {
             if (f == "nodoku.manifest.json") {
-                const manifest = new Manifest(moduleName, moduleDir);
+                const manifest = {
+                    moduleName: moduleName,
+                    moduleDir: moduleDir,
+                    components: new Map()
+                };
                 console.log("found manifest ", `${dir}/${f}`, "reading...");
                 let json;
                 if (stat.isSymbolicLink()) {
@@ -39,7 +42,14 @@ function loadComponentsByManifest(dir, moduleName) {
                     const v = json.components[k];
                     console.log("adding ", k, v);
                     // comps.set(k, Manifest.from(k, moduleName, v));
-                    manifest.components.set(k, new ComponentDef(v.implementation, v.schemaFile, v.optionsFile, v.defaultThemeFile, v.numBlocks));
+                    // manifest.components.set(k, new ComponentDef(v.implementation, v.schemaFile, v.optionsFile, v.defaultThemeFile, v.numBlocks))
+                    manifest.components.set(k, {
+                        implementation: v.implementation,
+                        themeSchema: v.schemaFile,
+                        optionsSchema: v.optionsFile,
+                        defaultThemeFile: v.defaultThemeFile,
+                        numBlocks: v.numBlocks
+                    });
                 });
                 return manifest;
             }

package/esm/bin/manifest.js

@@ -1,24 +1 @@
-export class ComponentDef {
-    implementation;
-    themeSchema;
-    optionsSchema;
-    defaultThemeFile;
-    numBlocks;
-    constructor(componentImplementation, componentSchema, optionsSchema, defaultThemeFile, numBlocks) {
-        this.implementation = componentImplementation;
-        this.themeSchema = componentSchema;
-        this.optionsSchema = optionsSchema;
-        this.defaultThemeFile = defaultThemeFile;
-        this.numBlocks = numBlocks;
-    }
-}
-export class Manifest {
-    moduleName;
-    moduleDir;
-    namespace = undefined;
-    components = new Map();
-    constructor(moduleName, moduleDir) {
-        this.moduleName = moduleName;
-        this.moduleDir = moduleDir;
-    }
-}
+export {};

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,17 +6,12 @@ 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}}>*/}
-            {/*</div>*/}
-            <div className={"top-0 bottom-0 left-0 right-0 absolute bg-white "} style={{ zIndex: -5, opacity: 0.7 }}>
+            <div className={"top-0 bottom-0 left-0 right-0 absolute bg-white "} style={{ zIndex: -5, opacity: 0.7 }}></div>
+            <div className={"p-5 w-full bg-red-400 text-center"}>
+                dummy component<h3><b>{`ns-${block.namespace}-row-${rowIndex}-i-${componentIndex}`}</b></h3>
             </div>
-            <div className={"p-5 w-full bg-red-400 text-center"}>dummy component<h3><b>{`ns-${block.namespace}-row-${rowIndex}-i-${componentIndex}`}</b></h3></div>
 
 
             <div className="p-5">
@@ -86,8 +81,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

@@ -6,6 +6,7 @@ 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 };
@@ -30,7 +31,8 @@ async function RenderingPage(props) {
     else {
         l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, actualComponentResolver)];
     }
-    return <div className={`${skin?.renderingPage?.base} ${skin?.renderingPage?.decoration}`}>{l}</div>;
+    const actualSkin = mergeTheme(skin, { renderingPage: { base: "", decoration: "" }, rows: [] });
+    return <div className={`rows-container ${ts(actualSkin, "renderingPage")}`}>{l}</div>;
 }
 function generateSkinByContentBlocks(blocks, skin) {
     const rendered = new Set();
@@ -74,7 +76,7 @@ async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, co
     }
     const rowComponents = l.flatMap((p) => p);
     if (rowComponents.length == 0) {
-        return <></>;
+        return <div key={`row-${iRow}`}></div>;
     }
     const numComponents = rowComponents.length;
     const rowEffectiveTheme = mergeTheme(row?.theme, defaultRowThemeImpl);
@@ -136,8 +138,8 @@ async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, co
     if (rowEffectiveTheme.rowDisplay == "flex") {
         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 ${flexBasis} ${rowEffectiveTheme.componentHolder?.base} ${rowEffectiveTheme.componentHolder?.decoration}`}>
+    return (<div key={`row-${iRow}`} className={`row-${iRow} ${rowDisplay} ${rowEffectiveTheme?.base} ${rowEffectiveTheme?.decoration} class-row-${iRow}`}>
+            {rowComponents.map((c, i) => <div key={`row-${iRow}-component-${i}`} className={`row-${iRow}-component-${i} nd-component-holder ${flexBasis} ${ts(rowEffectiveTheme, "componentHolder")}`}>
                         {c}
                     </div>)}
         </div>);

package/esm/index.js

@@ -1,10 +1,10 @@
-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";
 import { defaultRowThemeImpl } from "./theme-utils/row-style";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
+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";

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/package.json

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

package/types/bin/manifest.d.ts

@@ -1,15 +1,13 @@
-export declare class ComponentDef {
+export type ComponentDef = {
     implementation: string;
     themeSchema: string;
     optionsSchema: string;
     defaultThemeFile: string;
     numBlocks: string | number;
-    constructor(componentImplementation: string, componentSchema: string, optionsSchema: string, defaultThemeFile: string, numBlocks: string | number);
-}
-export declare class Manifest {
+};
+export type Manifest = {
     moduleName: string;
     moduleDir: string;
-    namespace: string | undefined;
+    namespace?: string;
     components: Map<string, ComponentDef>;
-    constructor(moduleName: string, moduleDir: string);
-}
+};

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";
@@ -8,7 +8,7 @@ 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, 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 };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
 export { mergeTheme, type ThemeStyle, type ExtendedThemeStyle, type ImageStyle };
 export type { I18nextProvider, AsyncFunctionComponent, ImageProvider };