refactor models

src/base/filters.test.ts

@@ -11,7 +11,7 @@ import {
   validateLinks
 } from './filters.js';
 
-import { item_path } from '../model/howto.js';
+import { item_path } from '../model/howto/howto.js';
 
 describe('filters', () => {
   describe('item_path', () => {

src/components/cta/CtaDirectory.astro

@@ -1,5 +1,6 @@
 ---
 import Translate from "@/components/polymech/i18n.astro"
+import { Img } from "imagetools/components"
 
 interface Props {
   title: string;
@@ -15,7 +16,7 @@ const {
   description = "",
   buttonText = "Directory",
   buttonLink = "/howtos",
-  imageSrc = "/images/home/cta-world.png",
+  imageSrc = "/images/home/world.png",
   imageAlt = ""
 } = Astro.props;
 ---
@@ -25,10 +26,14 @@ const {
       
       <!-- Image takes 50% -->
       <div class="w-full md:w-1/2">
-        <img
-          class="w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"
+        <Img
           src={imageSrc}
           alt={imageAlt}
+          attributes={{
+            img: {
+              class: "w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"            
+            }
+          }}
         />
       </div>
 

src/components/cta/CtaHowtos.astro

@@ -1,6 +1,6 @@
 ---
 import Translate from "@/components/polymech/i18n.astro"
-
+import { Img } from "imagetools/components"
 interface Props {
   title: string;
   description: string;
@@ -25,10 +25,14 @@ const {
       
       <!-- Image takes 50% -->
       <div class="w-full md:w-1/2">
-        <img
-          class="w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"
+        <Img          
           src={imageSrc}
-          alt={imageAlt}
+          alt={imageAlt},
+          attributes={{
+            img: {
+              class: "w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"            
+            },
+          }}
         />
       </div>
 

src/components/cta/CtaKB.astro

@@ -1,6 +1,6 @@
 ---
 import Translate from "@/components/polymech/i18n.astro"
-
+import { Img } from "imagetools/components"
 interface Props {
   title: string;
   description: string;
@@ -25,10 +25,14 @@ const {
       
       <!-- Image takes 50% -->
       <div class="w-full md:w-1/2">
-        <img
-          class="w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"
+        <Img
           src={imageSrc}
           alt={imageAlt}
+          attributes={{
+            img: {
+              class: "w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"
+            }
+          }}
         />
       </div>
 

src/components/cta/CtaShop.astro

@@ -0,0 +1,80 @@
+---
+import Translate from "@/components/polymech/i18n.astro"
+import { Img } from "imagetools/components"
+interface Props {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+  imageSrc: string;
+  imageAlt?: string;
+}
+
+const {
+  title = "Marketplace",
+  description = "",
+  buttonText = "Shop",
+  buttonLink = "/en/shop",
+  imageSrc = "/images/home/shop.png",
+  imageAlt = ""
+} = Astro.props;
+---
+<section>
+  <div class="py-2">
+    <div class="flex flex-col md:flex-row gap-6 p-4 bg-white rounded-xl overflow-hidden relative">
+      
+      <!-- Image takes 50% -->
+      <div class="w-full md:w-1/2">
+        <Img
+          src={imageSrc}
+          alt={imageAlt}
+          attributes={{
+            img: {
+              class: "w-full max-w-100 rounded-lg hover:ring-2 hover:ring-blue-500 aspect-square object-contain"
+            }
+          }}
+        />
+      </div>
+
+      <!-- Text content takes the other 50% -->
+      <div class="w-full md:w-1/2 flex flex-col justify-start">
+        <h1 class="text-lg text-neutral-600 font-mono tracking-tight uppercase">
+          <Translate>{title}</Translate>
+        </h1>
+        <p class="text-sm text-neutral-500">
+          <Translate>{description}</Translate>
+        </p>
+        <div class="flex mt-6">
+          <a
+            href={buttonLink}
+            title="link to your page"
+            aria-label="your label"
+            class="relative group overflow-hidden pl-4 font-mono h-14 flex space-x-6 items-center bg-orange-500 hover:bg-black duration-300 rounded-xl justify-between"
+          >
+            <span class="relative uppercase text-xs text-white"><Translate>{buttonText}</Translate></span>
+            <div
+              aria-hidden="true"
+              class="w-12 text-white transition duration-300 -translate-y-7 group-hover:translate-y-7"
+            >
+              <div class="h-14 flex">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                  stroke-width="1.5" stroke="currentColor" class="size-6 m-auto fill-white">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+                </svg>
+              </div>
+              <div class="h-14 flex">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                  stroke-width="1.5" stroke="currentColor" class="size-6 m-auto fill-white">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+                </svg>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>

src/components/howtos/Detail2.astro

@@ -2,7 +2,7 @@
 import fs from "fs";
 import path from "path";
 import { decode } from "html-entities";
-import { IHowto, asset_local_rel } from "@/model/howto.js";
+import { IHowto, asset_local_rel } from "@/model/howto/howto.jswto.js";
 import { Img } from "imagetools/components";
 import { i18n as Translate } from "@polymech/astro-base";
 import BaseLayout from "@/layouts/BaseLayout.astro";

src/components/howtos/ListItem.astro

@@ -3,7 +3,7 @@ import { default_image, IMAGE_SETTINGS } from "config/config.js";
 import Translate from "@/components/polymech/i18n.astro";
 import { Img } from "imagetools/components";
 import Sidebar from "@/components/howtos/sidebar2.astro";
-import { asset_local_abs,asset_local_rel, IHowto } from "@/model/howto.js";
+import { asset_local_abs,asset_local_rel, IHowto } from "@/model/howto/howto.jswto.js";
 const { title, url, model, selected = false } = Astro.props;
 const item: IHowto = model.item;
 const classes = `group relative bg-white overflow-hidden group rounded-xl ${selected ? "ring-2 ring-orange-500" : ""}`;

src/components/howtos/sidebar.astro

@@ -1,6 +1,6 @@
 ---
 // Import the required interfaces and utilities
-import { IHowto } from "@/model/howto.js";
+import { IHowto } from "@/model/howto/howto.jswto.js";
 import { i18n as Translate } from "@polymech/astro-base";
 import { getCollection } from 'astro:content';
 const items = await getCollection('howtos');

src/components/howtos/sidebar2.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-import { IHowto } from "@/model/howto.js";
+import { IHowto } from "@/model/howto/howto.jswto.js";
 import { i18n as Translate } from "@polymech/astro-base";
 const locale = Astro.currentLocale;
 const items = await getCollection('howtos')

src/config/config.ts

@@ -34,7 +34,7 @@ export const HOWTO_ADD_REFERENCES = true
 export const HOWTO_COMPLETE_SKILLS = false
 export const HOWTO_LOCAL_RESOURCES = false
 export const HOWTO_SEO_LLM = true
-export const HOWTO_MAX_ITEMS = 5
+export const HOWTO_MAX_ITEMS = 200
 
 export const HOWTO_MIGRATION = () => path.resolve(resolve("./data/last.json"))
 export const HOWTO_ROOT_INTERN = () => path.resolve(resolve("./public/resources/howtos"))

src/content.config.ts

@@ -1,8 +1,8 @@
 import { defineCollection, z } from "astro:content"
-import { loader } from './model/component.js'
+import { loader } from './model/component/component.js'
 import { ComponentConfigSchema } from '@polymech/commons/component'
 
-import { loader as howtoLoader  } from './model/howto.js'
+import { loader as howtoLoader  } from './model/howto/howto.js'
 
 import { RETAIL_PRODUCT_BRANCH, PROJECTS_BRANCH } from 'config/config.js'
 

src/layouts/Howto.astro

@@ -1,7 +1,7 @@
 ---
 import fs from 'fs';
 import path from 'path';
-import { IHowto,asset_local_rel } from "@/model/howto";
+import { IHowto,asset_local_rel } from "@/model/howto/howto/howto";
 import { Img } from 'imagetools/components';
 import { i18n as Translate }  from "@polymech/astro-base";
 import { files,forward_slash } from "@polymech/commons"

src/layouts/StoreLayout.astro

@@ -18,7 +18,7 @@ import {
   IComponentConfigEx,
   group_by_path,
   group_path,
-} from "@/model/component.js";
+} from "@/model/component/component.jsmponent.js";
 
 import "flowbite";
 

src/model/annotation/annotation-example.ts

@@ -4,7 +4,7 @@ import {
   createStepAnnotationByTitle,
   generateAnnotationCacheKey
 } from './annotation.js';
-import { IHowto } from './howto-model.js';
+import { IHowto } from '../howto/howto-model.js';
 import { get_cached, set_cached_object } from '@polymech/cache';
 
 /**

src/model/annotation/annotation-examples.ts

@@ -1,7 +1,7 @@
 import { JSONPath } from 'jsonpath-plus';
 import { readFile, readdirSync } from 'fs';
 import { resolve, extname, join } from 'path';
-import { IHowto } from './howto-model.js';
+import { IHowto } from '../howto/howto-model.js';
 import { IAnnotation, AnnotationMode, generateCacheKey, cacheAnnotation, getCachedAnnotation } from './annotation.js';
 import { promisify } from 'util';
 

src/model/annotation/annotation.ts

@@ -1,4 +1,4 @@
-import { IHowto } from './howto-model.js';
+import { IHowto } from '../howto/howto-model.js';
 import { file_hash, 
   file_name_hash, 
   fileAsBuffer, 

src/model/commons.ts

@@ -1,12 +1,5 @@
 import * as path from 'path'
-import { z } from "zod"
-import normalizeUrl from 'normalize-url'
-import { PFilterValid  } from '@polymech/commons/filter'
-
 import { forward_slash, pathInfoEx, resolve, readOSRConfig, } from '@polymech/commons'
-
-
-
 export const find_items = (nodes: string[], options) => {
     nodes = nodes.filter(options.filter)
     return nodes.map((c) => {
@@ -18,8 +11,6 @@ export const find_items = (nodes: string[], options) => {
         }
     })
 }
-
-
 export const get = (src, root, type) => {
     const srcInfo = pathInfoEx(src, false, { absolute: true})
     return srcInfo

src/model/directory/directory.ts

@@ -13,13 +13,11 @@ import {
     PRODUCT_ROOT
     } from 'config/config.js'
 
-import { env } from '../base/index.js'
-
-import { gallery } from '../base/media.js';
+import { env } from '../../base/index.js'
 
+import { gallery } from '../../base/media.js';
 import { get } from '@polymech/commons/component'
 import { PFilterValid } from '@polymech/commons/filter'
-
 import { translate } from "@/base/i18n.js"
 import { I18N_SOURCE_LANGUAGE } from "config/config.js"
 import { slugify } from "@/base/strings.js"
@@ -128,5 +126,4 @@ const group = async (items, locale) => {
         return acc
     }, {})
 }
-
 export const group_by_path = async (items, locale): Promise<I_User[]> => await group(items, locale)

src/model/howto/howto.ts

@@ -12,22 +12,17 @@ import { sync as write } from '@polymech/fs/write'
 import type { Loader, LoaderContext } from 'astro/loaders'
 import { resolveVariables } from "@polymech/commons/variables"
 export * from './howto-model.js'
-export * from '../base/filters.js'
+export * from '@/base/filters.js'
 
 import { IHowto, IImage, ITag, ITEM_TYPE } from './howto-model.js'
-import { blacklist, default_filters_markdown, validateLinks } from '../base/filters.js'
-import { download } from './download.js'
+import { blacklist, default_filters_markdown, validateLinks } from '../../base/filters.js'
+import { download } from '../download.js'
 
 import { filter } from "@/base/kbot.js"
 import { slugify } from "@/base/strings.js"
-import type { IAnnotation } from "./annotation.js"
-import { AnnotationMode, generateCacheKey, cacheAnnotation, getCachedAnnotation } from './annotation.js'
-
-import { urlCache } from '../base/url-cache.js';
-
+import { urlCache } from '../../base/url-cache.js';
 
 const expandUrls = true
-
 import {
   HOWTO_FILES_WEB,
   HOWTO_FILES_ABS,
@@ -53,7 +48,7 @@ import {
 
 import { env, logger } from '@/base/index.js'
 
-import { applyFilters, default_filters_plain, FilterFunction } from '../base/filters.js'
+import { applyFilters, default_filters_plain, FilterFunction } from '../../base/filters.js'
 import { TemplateContext, buildPrompt, LLMConfig, createTemplates } from '@/base/kbot-templates.js';
 import { template_filter } from '@/base/kbot.js'
 

src/model/product/product.ts

@@ -3,7 +3,6 @@ import { findUp } from 'find-up'
 
 import pMap from 'p-map'
 import { sanitizeFilename } from "@polymech/fs/utils"
-import { execFileSync, execFile } from "child_process";
 import { sync as read } from '@polymech/fs/read'
 import { sync as exists } from '@polymech/fs/exists'
 import { sync as mkdir } from '@polymech/fs/dir'
@@ -13,10 +12,10 @@ import type { Loader, LoaderContext } from 'astro/loaders'
 import { resolveVariables } from "@polymech/commons/variables"
 
 import { env, logger } from '@/base/index.js'
-import { download } from './download.js'
+import { download } from '../download.js'
 import { default_image } from 'config/config.js'
 
-import { applyFilters, default_filters_plain, FilterFunction } from '../base/filters.js'
+import { applyFilters, default_filters_plain, FilterFunction } from '../../base/filters.js'
 import { TemplateContext, buildPrompt, LLMConfig, createTemplates } from '@/base/kbot-templates.js'
 import { template_filter } from '@/base/kbot.js'
 

src/model/registry.ts

@@ -1,7 +1,7 @@
 //import { get as  handleRSS } from './rss.js'
-import { get as handleMerchant } from './merchant.js'
-import { get as handleJsonLd } from './json-ld.js'
-import { get as handleJsonLdHowto } from './json-ld-howto.js'
+import { get as handleMerchant } from './product/merchant.js'
+import { get as handleJsonLd } from './product/json-ld.js'
+import { get as handleJsonLdHowto } from './howto/json-ld-howto.js'
 import type { IComponentNode, IComponentConfig } from '@polymech/commons/'
 
 export type Handler = (node: IComponentNode, config: IComponentConfig, opts: { url?: string }) => Promise<any>

src/model/sidebar.html

@@ -1,34 +0,0 @@
-
-<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
-    <span class="sr-only">Open sidebar</span>
-    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
-    </svg>
- </button>
- 
- <aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
-    <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
-       <ul class="space-y-2 font-medium">
-          <li>
-             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
-                   <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
-                   <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
-                </svg>
-                <span class="ms-3">Dashboard</span>
-             </a>
-          </li>
-          <li>
-             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
-                <svg class="shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
-                   <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
-                </svg>
-                <span class="flex-1 ms-3 whitespace-nowrap">Kanban</span>
-                <span class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
-             </a>
-          </li>
-         
-       </ul>
-    </div>
- </aside>
- 

src/model/todos-workflow.md

@@ -1,6 +0,0 @@
-## Goal
-
-- [ ] Extend howtos for alternative steps, also, add a field : 'enabled'
-
-- integrate changes in  `./howto-ex.ts`
-- Do **not** implement or design any storage logic.

src/pages/[locale].astro

@@ -7,7 +7,7 @@ import config from "config/config.json";
 import { getCollection } from "astro:content";
 import StoreEntries from "@/components/store/StoreEntries.astro";
 import CtaOne from "@/components/cta/CtaOne.astro";
-import { group_by_path } from "@/model/component.js";
+import { group_by_path } from "@/model/component/component.jsmponent.js";
 
 const view = "store"
 const items = await getCollection(view)

src/pages/[locale]/howto-category/[...category].astro

@@ -1,5 +1,5 @@
 ---
-import { IHowto } from "@/model/howto.js";
+import { IHowto } from "@/model/howto/howto.jswto.js";
 import { getCollection } from "astro:content";
 import List from "@/components/howtos/List.astro";
 import { LANGUAGES_PROD as LANGUAGES } from "config/config.js";

src/pages/[locale]/howtos/index.astro

@@ -1,5 +1,5 @@
 ---
-import { group_by_cat } from "@/model/howto.js";
+import { group_by_cat } from "@/model/howto/howto.jswto.js";
 import { getCollection } from "astro:content";
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import Wrapper from "@/components/containers/Wrapper.astro";

src/pages/index.astro

@@ -6,11 +6,9 @@ import StoreEntries from "@/components/store/StoreEntries.astro"
 import Howtos from "@/components/cta/CtaHowtos.astro"
 import KB from "@/components/cta/CtaKB.astro"
 
-import Library from "@/components/cta/CtaLibrary.astro"
-import Cta1 from "@/components/cta/CtaOne.astro"
-
 import Directory from "@/components/cta/CtaDirectory.astro"
-import Cta2 from "@/components/cta/CtaTwo.astro"
+import Shop from "@/components/cta/CtaShop.astro"
+
 const allProducts = await getCollection("store")
 const locale = Astro.currentLocale || "en"
 ---
@@ -18,6 +16,7 @@ const locale = Astro.currentLocale || "en"
   <Howtos />
   <KB />
   <Directory />
+  <Shop />
   <section>
     <div class="py-2 space-y-2">
       <div class="grid md:grid-cols-2 lg:grid-cols-2 gap-2 ">        

src/pages/tests/components.astro

@@ -1,6 +1,6 @@
 ---
 import { foo, i18n as Translate } from "@polymech/astro-base"
-import test from "@/model/howto.json"
+import test from "@/model/howto/howto.json"
 ---
 <Translate language="es">Hellau</Translate>