howto basic shit

.astro/collections/resources.schema.json

@@ -23,7 +23,7 @@
               "format": "unix-time"
             }
           ],
-          "default": "2025-03-22T20:37:12.390Z"
+          "default": "2025-03-22T23:21:27.575Z"
         },
         "description": {
           "type": "string",

.kbot/params.json

@@ -3,7 +3,7 @@
   "messages": [
     {
       "role": "user",
-      "content": "use a formal tone\nspell check the text, fix any errors\nremove emojis\nremove personal preferences or biases\nshorten text if possible but preserve personality\nremove references to preciousplastic, bazar and Discord\nremove any brain/green washing as well suggestions not related to the craft\nContext: howto tutorials, for makers\ndont comment just return as Markdown : This how-to contains information on how we built a low-cost, automated injection molding machine. Unfortunately the folder is way to big for uploading it here. \n\nWe added a link to our dropbox, where you can download the folder :)"
+      "content": "use a formal tone\nspell check the text, fix any errors\nremove emojis\nremove personal preferences or biases\nshorten text if possible but preserve personality\nremove references to preciousplastic, bazar and Discord\nremove any brain/green washing as well suggestions not related to the craft\nContext: howto tutorials, for makers\ndont comment just return as Markdown : An experience review designing a broom hanger mold: These are some steps to design a mold for the injection machine."
     },
     {
       "role": "user",

package-lock.json

@@ -41,6 +41,7 @@
         "github-slugger": "^2.0.0",
         "glob": "^11.0.1",
         "got": "^14.4.6",
+        "html-entities": "^2.5.2",
         "imagetools": "file:../astro-components/packages/imagetools",
         "lighthouse": "^12.3.0",
         "markdown-it": "^14.1.0",
@@ -7481,6 +7482,22 @@
         "he": "bin/he"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
+      "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/html-escaper": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",

package.json

@@ -51,6 +51,7 @@
     "github-slugger": "^2.0.0",
     "glob": "^11.0.1",
     "got": "^14.4.6",
+    "html-entities": "^2.5.2",
     "imagetools": "file:../astro-components/packages/imagetools",
     "lighthouse": "^12.3.0",
     "markdown-it": "^14.1.0",

src/components/howtos/Detail.astro

@@ -1,6 +1,7 @@
 ---
 import fs from "fs";
 import path from "path";
+import { decode } from 'html-entities'
 import { IHowto, asset_local_rel } from "@/model/howto.js";
 import { Img } from "imagetools/components";
 import { i18n as Translate } from "@polymech/astro-base";
@@ -19,6 +20,7 @@ import {
   HOWTO_FILES_ABS,
   I18N_SOURCE_LANGUAGE,
 } from "config/config.js";
+
 interface Props {
   howto: IHowto;
 }
@@ -73,23 +75,20 @@ const authorLinks = (howto?.user?.data.urls || []).filter(
         <h1 class="text-4xl font-bold text-gray-800 mb-4">
           <Translate>{howto.title}</Translate>
         </h1>
+        <GalleryK images={[{ src: howto.cover_image.src, alt:'' }]} />
         <div class="flex gap-2 mb-4">
           {
             howto.tags.map((tag) => (
               <span class="bg-orange-600 text-white text-xs px-3 py-1 rounded-full">
-                <Translate>{tag}</Translate>
+                <Translate>{tag.toUpperCase()}</Translate>
               </span>
             ))
           }
         </div>
-        <Img
-          src={howto.cover_image.src}
-          alt="Cover"
-          attributes={{ img: { class: "h-80 w-full object-cover rounded-md" } }}
-        />
       </header>
     </article>
-    <section class="p-8">
+
+    <section class="p-8 meta-view">
       <ul class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
         <li>
           <strong><Translate>Difficulty:</Translate></strong>
@@ -97,137 +96,85 @@ const authorLinks = (howto?.user?.data.urls || []).filter(
         </li>
         <li>
           <strong><Translate>Time Required:</Translate></strong>
-          <Translate>{howto.time}</Translate>
+          <Translate>{decode(howto.time)}</Translate>
         </li>
         <li>
-          <strong><Translate>Views:</Translate></strong>
-          {howto.total_views}
+          <strong><Translate>Views:</Translate></strong>{howto.total_views}
         </li>
         <li>
-          <strong><Translate>Creator:</Translate></strong>
-          {howto._createdBy}
+          <strong><Translate>Creator:</Translate></strong>{howto._createdBy}
         </li>
         <li>
-          <strong><Translate>Country:</Translate></strong>
-          {authorGeo.countryName}
+          <strong><Translate>Country:</Translate></strong>{authorGeo.countryName}
         </li>
         <li>
           <strong><Translate>Email:</Translate></strong>
-          <a
-            class="text-orange-600 underline"
-            href={`mailto:${authorLinks.find((link) => link.name.toLowerCase() === "email")?.url.replace("mailto:", "")}`}
-          >
-            {
-              authorLinks
-                .find((link) => link.name.toLowerCase() === "email")
-                ?.url.replace("mailto:", "")
-            }
+          <a class="text-orange-600 underline" href={`mailto:${authorLinks.find((link)=>link.name.toLowerCase()==="email")?.url.replace("mailto:","")}`}>
+            {authorLinks.find((link)=>link.name.toLowerCase()==="email")?.url.replace("mailto:","")}
           </a>
         </li>
         {
-          authorLinks
-            .filter((l) => l.name.toLowerCase() !== "email")
-            .map((link) => (
-              <li>
-                <strong>{link.name}:</strong>
-                <a
-                  class="text-orange-600 underline"
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {shortenUrl(link.url)}
-                </a>
-              </li>
-            ))
-        }
-        <li>
-          <strong><Translate>Downloads:</Translate></strong>
-          {howto.total_downloads}
-        </li>
-      </ul>
-    </section>
-    <section class="p-8 bg-white">
-      <div class="mb-8 text-gray-700 markdown-content">
-        <Description />
-      </div>
-      <a
-        href={`${HOWTO_FILES_WEB(howto.slug)}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-block py-2 p-4 bg-orange-600 hover:bg-orange-700 text-white rounded-full m-8"
-      >
-        <Translate>Browse Files</Translate>
-      </a>
-       <!-- Resources -->
-       {
-        howto.files.length > 0 && (
-          <div class="p-8 mb-8">
-            <h2 class="text-xl font-semibold mb-2">
-              <Translate>Resources</Translate>
-            </h2>
-            <ul class="list-disc list-inside">
-              {howto.files.map((file) => (
-                <li>
-                  <a
-                    href={`${file.downloadUrl}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="text-orange-700 hover:underline break-words"
-                  >
-                    {file.name}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )
-      }
-    </section>
-    <section class="border-t border-gray-200 bg-gray-50 p-8">
-      <h2 class="text-2xl font-bold text-gray-800 mb-6">
-        <Translate>Steps</Translate>
-      </h2>
-      <ol class="space-y-10">
-        {
-          stepsWithFilteredMarkdown.map((step, idx) => (
-            <li
-              id={`step-${idx + 1}`}
-              class="bg-white shadow-sm rounded-lg p-6"
-            >
-              <div class="mb-4 flex items-center">
-                <span class="bg-orange-600 text-xl font-bold text-white rounded-full h-10 w-10 flex items-center justify-center mr-3">
-                  {idx + 1}
-                </span>
-                <h3 class="text-xl font-bold">
-                  <Translate>{step.title}</Translate>
-                </h3>
-              </div>
-              <div class="text-gray-700 markdown-content">
-                <step.filteredMarkdownComponent />
-              </div>
-              {step.images?.length > 0 && <GalleryK images={step.images} />}
-            </li>
+          authorLinks.filter((l)=>l.name.toLowerCase()!=="email").map((link)=>(
+          <li>
+            <strong>{link.name}:</strong>
+            <a class="text-orange-600 underline" href={link.url} target="_blank">
+              {shortenUrl(link.url)}
+            </a>
+          </li>
           ))
         }
+        <li><strong><Translate>Downloads:</Translate></strong>{howto.total_downloads}</li>
+      </ul>
+    </section>
+
+    <section class="bg-white px-8 pb-8">
+      <div class="mb-8 markdown-content">
+        <Description />
+      </div>
+      <a href={HOWTO_FILES_WEB(howto.slug)} class="inline-block py-2 px-4 bg-orange-600 hover:bg-orange-700 text-white rounded-full mb-8"><Translate>Browse Files</Translate></a>
+    </section>
+
+    <section class="px-8 py-8 bg-orange-50">
+      <h2 class="font-bold mb-4 text-xl"><Translate>Table of Contents</Translate></h2>
+      <ul class="grid grid-cols-1 md:grid-cols-2 gap-2 list-decimal p-4">
+        {stepsWithFilteredMarkdown.map((step, idx)=>(
+          <li>
+            <a href={`#step-${idx+1}`} class="text-orange-600 hover:underline">
+              <Translate>{step.title}</Translate>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+
+    <section class="border-t border-gray-300 bg-gray-50 p-8">
+      <h2 class="text-2xl font-bold text-gray-800 mb-6"><Translate>Steps</Translate></h2>
+      <ol class="space-y-10">
+        {stepsWithFilteredMarkdown.map((step, idx) => (
+          <li id={`step-${idx + 1}`} class="bg-white shadow-sm rounded-lg p-6">
+            <div class="mb-4 flex items-center">
+              <span class="bg-orange-600 text-xl font-bold text-white rounded-full h-10 w-10 flex items-center justify-center mr-3">
+                {idx + 1}
+              </span>
+              <h3 class="text-xl font-bold">
+                <Translate>{step.t}</Translate>
+              </h3>
+            </div>
+            <div class="markdown-content">
+              <step.filteredMarkdownComponent />
+            </div>
+            {step.images?.length > 0 && <GalleryK images={step.images} />}
+          </li>
+        ))}
       </ol>
     </section>
-    <section class="p-8 bg-white">
-      <div class="mb-8 text-gray-700 markdown-content">
-        <Resources />
-      </div>
-    </section>
+
+    <section class="p-8 bg-white"><Resources /></section>
+
     <footer class="p-8 text-sm border-t bg-white text-gray-600">
       <div class="flex justify-between">
-        <span>
-          <Translate>Created on</Translate>: {
-            new Date(howto._created).toLocaleDateString()
-          }
-        </span>
-        <span>
-          {howto.votedUsefulBy.length}
-          <Translate>people found this useful</Translate>
-        </span>
+        <span><Translate>Created on</Translate>: {new Date(howto._created).toLocaleDateString()}</span>
+        <span>{howto.votedUsefulBy.length} <Translate>people found this useful</Translate></span>
       </div>
     </footer>
   </Wrapper>

src/components/howtos/Detail2.astro

@@ -1,6 +1,7 @@
 ---
 import fs from "fs";
 import path from "path";
+import { decode } from 'html-entities'
 import { IHowto, asset_local_rel } from "@/model/howto.js";
 import { Img } from "imagetools/components";
 import { i18n as Translate } from "@polymech/astro-base";
@@ -74,138 +75,107 @@ const authorLinks = (howto?.user?.data.urls || []).filter(
         <h1 class="text-4xl font-bold text-gray-800 mb-4">
           <Translate>{howto.title}</Translate>
         </h1>
+        <GalleryK images={[{ src: howto.cover_image.src, alt:'' }]} />
         <div class="flex gap-2 mb-4">
           {
             howto.tags.map((tag) => (
               <span class="bg-orange-600 text-white text-xs px-3 py-1 rounded-full">
-                <Translate>{tag}</Translate>
+                <Translate>{tag.toUpperCase()}</Translate>
               </span>
             ))
           }
         </div>
-        <Img
-          src={howto.cover_image.src}
-          alt="Cover"
-          attributes={{ img: { class: "h-80 w-full object-cover rounded-md" } }}
-        />
       </header>
     </article>
-    <section class="p-8">
-      <ul class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
+
+    <section class="meta-view bg-white rounded-lg p-4">
+      <ul class="grid grid-cols-2 sm:grid-cols-3 gap-4 mt-8 mb-8">
         <li>
           <strong><Translate>Difficulty:</Translate></strong>
           <Translate>{howto.difficulty_level}</Translate>
         </li>
         <li>
           <strong><Translate>Time Required:</Translate></strong>
-          <Translate>{howto.time}</Translate>
+          <Translate>{decode(howto.time)}</Translate>
         </li>
         <li>
-          <strong><Translate>Views:</Translate></strong>
-          {howto.total_views}
+          <strong><Translate>Views:</Translate></strong>{howto.total_views}
         </li>
         <li>
-          <strong><Translate>Creator:</Translate></strong>
-          {howto._createdBy}
+          <strong><Translate>Creator:</Translate></strong>{howto._createdBy}
         </li>
         <li>
-          <strong><Translate>Country:</Translate></strong>
-          {authorGeo.countryName}
+          <strong><Translate>Country:</Translate></strong>{authorGeo.countryName}
         </li>
         <li>
           <strong><Translate>Email:</Translate></strong>
-          <a
-            class="text-orange-600 underline"
-            href={`mailto:${authorLinks.find((link) => link.name.toLowerCase() === "email")?.url.replace("mailto:", "")}`}
-          >
-            {
-              authorLinks
-                .find((link) => link.name.toLowerCase() === "email")
-                ?.url.replace("mailto:", "")
-            }
+          <a class="text-orange-600 underline" href={`mailto:${authorLinks.find((link)=>link.name.toLowerCase()==="email")?.url.replace("mailto:","")}`}>
+            {authorLinks.find((link)=>link.name.toLowerCase()==="email")?.url.replace("mailto:","")}
           </a>
         </li>
         {
-          authorLinks
-            .filter((l) => l.name.toLowerCase() !== "email")
-            .map((link) => (
-              <li>
-                <strong>{link.name}:</strong>
-                <a
-                  class="text-orange-600 underline"
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {shortenUrl(link.url)}
-                </a>
-              </li>
-            ))
-        }
-        <li>
-          <strong><Translate>Downloads:</Translate></strong>
-          {howto.total_downloads}
-        </li>
-      </ul>
-    </section>
-    <section class="p-8 bg-white">
-      <div class="mb-8 text-gray-700 markdown-content">
-        <Description />
-      </div>
-      <a
-        href={`${HOWTO_FILES_WEB(howto.slug)}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-block py-2 p-4 bg-orange-600 hover:bg-orange-700 text-white rounded-full m-8"
-      >
-        <Translate>Browse Files</Translate>
-      </a>
-    </section>
-    <section class="border-t border-gray-200 bg-gray-50 p-8">
-      <h2 class="text-2xl font-bold text-gray-800 mb-6">
-        <Translate>Steps</Translate>
-      </h2>
-      <ol class="space-y-10">
-        {
-          stepsWithFilteredMarkdown.map((step, idx) => (
-            <li
-              id={`step-${idx + 1}`}
-              class="bg-white shadow-sm rounded-lg p-6"
-            >
-              <div class="mb-4 flex items-center">
-                <span class="bg-orange-600 text-xl font-bold text-white rounded-full h-10 w-10 flex items-center justify-center mr-3">
-                  {idx + 1}
-                </span>
-                <h3 class="text-xl font-bold">
-                  <Translate>{step.title}</Translate>
-                </h3>
-              </div>
-              <div class="text-gray-700 markdown-content">
-                <step.filteredMarkdownComponent />
-              </div>
-              {step.images?.length > 0 && <GalleryK images={step.images} />}
-            </li>
+          authorLinks.filter((l)=>l.name.toLowerCase()!=="email").map((link)=>(
+          <li>
+            <strong>{link.name}:</strong>
+            <a class="text-orange-600 underline" href={link.url} target="_blank">
+              {shortenUrl(link.url)}
+            </a>
+          </li>
           ))
         }
+        <li><strong><Translate>Downloads:</Translate></strong>{howto.total_downloads}</li>
+      </ul>
+    </section>
+
+    <section class="bg-white p-8">
+      <div class="mb-8 markdown-content">
+        <Description />
+      </div>
+      <a href={HOWTO_FILES_WEB(howto.slug)} class="inline-block py-2 px-4 bg-orange-600 hover:bg-orange-700 text-white rounded-full mb-8"><Translate>Browse Files</Translate></a>
+    </section>
+
+    <section class="px-8 py-8 bg-orange-50">
+      <h2 class="font-bold mb-4 text-xl"><Translate>Table of Contents</Translate></h2>
+      <ul class="grid grid-cols-1 md:grid-cols-2 gap-2 list-decimal p-4">
+        {stepsWithFilteredMarkdown.map((step, idx)=>(
+          <li>
+            <a href={`#step-${idx+1}`} class="text-orange-600 hover:underline">
+              <Translate>{step.title}</Translate>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+
+    <section class="border-t border-gray-300 bg-gray-50 p-8">
+      <h2 class="text-2xl font-bold text-gray-800 mb-6"><Translate>Steps</Translate></h2>
+      <ol class="space-y-10">
+        {stepsWithFilteredMarkdown.map((step, idx) => (
+          <li id={`step-${idx + 1}`} class="bg-white shadow-sm rounded-lg p-6">
+            <div class="mb-4 flex items-center">
+              <span class="bg-orange-600 text-xl font-bold text-white rounded-full h-10 w-10 flex items-center justify-center mr-3">
+                {idx + 1}
+              </span>
+              <h3 class="text-xl font-bold">
+                <a href={`#step-${idx + 1}`} class="text-orange-600 hover:underline"><Translate>{step.title}</Translate></a>
+              </h3>
+            </div>
+            <div class="markdown-content">
+              <step.filteredMarkdownComponent />
+            </div>
+            {step.images?.length > 0 && <GalleryK images={step.images} />}
+          </li>
+        ))}
       </ol>
     </section>
-    <section class="p-8 bg-white">
-      <div class="mb-8 text-gray-700 markdown-content">
-        <Resources />
-      </div>
-    </section>
+
+    <section class="p-8 bg-white"><Resources /></section>
+
     <footer class="p-8 text-sm border-t bg-white text-gray-600">
       <div class="flex justify-between">
-        <span>
-          <Translate>Created on</Translate>: {
-            new Date(howto._created).toLocaleDateString()
-          }
-        </span>
-        <span>
-          {howto.votedUsefulBy.length}
-          <Translate>people found this useful</Translate>
-        </span>
+        <span><Translate>Created on</Translate>: {new Date(howto._created).toLocaleDateString()}</span>
+        <span>{howto.votedUsefulBy.length} <Translate>people found this useful</Translate></span>
       </div>
     </footer>
   </Wrapper>
-</BaseLayout>
+</BaseLayout>

src/components/howtos/todos.md

@@ -2,12 +2,12 @@
 
 - for Astro, tailwind
 - no react or additional dependencies
-- dont comment, just return the code
+- dont comment, just return the entire code
 - skip checked tasks
-- leave everything else intact, dont optimize !!
+- leave everything else intact, dont optimize !
 
 ## Todos
 
 Detail.astro:
 
-- [ ] make step titles (multilang) as linkable (eg: #step-title-en)
+- [ ] make step titles linkable

src/config/config.ts

@@ -22,7 +22,7 @@ export const I18N_ASSET_PATH = "${SRC_DIR}/${SRC_NAME}-${DST_LANG}${SRC_EXT}"
 
 export const HOWTO_GLOB = '**/config.json'
 export const FILES_WEB = 'https://files.polymech.io/files/machines/howtos/'
-export const HOWTO_FILTER_LLM = true
+export const HOWTO_FILTER_LLM = false
 export const HOWTO_ROOT = () => path.resolve(resolve("./public/resources/howtos"))
 export const HOWTO_FILES_ABS = (id) => `${HOWTO_ROOT()}/${id}`
 export const HOWTO_FILES_WEB = (id: string) => `${FILES_WEB}/${id}`