howto resources - css)

src/components/howtos/Detail.astro

@@ -9,7 +9,6 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 import Wrapper from "@/components/containers/Wrapper.astro";
 import GalleryK from "@/components/polymech/GalleryK.astro";
 import { HOWTO_FILES_WEB, HOWTO_FILES_ABS } from "config/config.js";
-import Sidebar from "@/components/howtos/sidebar2.astro";
 
 interface Props {
   howto: IHowto;
@@ -111,7 +110,7 @@ model_files = model_files.map((f) =>
       <div class="steps-container space-y-12">
         {
           howto.steps.map((step, index) => (
-            <div class="step-item" id={`step-${index + 1}`}>
+            <div class="step-item bg-gray-50 p-4 rounded-lg mb-8" id={`step-${index + 1}`}>
               <h2 class="text-2xl font-semibold mb-4">
                 <span class="bg-orange-500/75 text-white w-8 h-8 rounded-full text-center leading-8 mr-2 inline-block float-left">
                   {index + 1}

src/components/howtos/Detail2.astro

@@ -0,0 +1,133 @@
+---
+import fs from "fs";
+import path from "path";
+import { IHowto, asset_local_rel } from "@/model/howto.js";
+import { Img } from "imagetools/components";
+import { i18n as Translate } from "@polymech/astro-base";
+import { files, forward_slash } from "@polymech/commons";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Wrapper from "@/components/containers/Wrapper.astro";
+import GalleryK from "@/components/polymech/GalleryK.astro";
+import { HOWTO_FILES_WEB, HOWTO_FILES_ABS } from "config/config.js";
+
+interface Props {
+  howto: IHowto;
+}
+const { howto } = Astro.props;
+const coverLocaleRel = await asset_local_rel(howto, howto.cover_image);
+
+const howto_abs = HOWTO_FILES_ABS(howto.slug);
+let model_files: any = [...files(howto_abs, "**/**/*.(step|stp)")];
+model_files = model_files.map((f) => forward_slash(`${howto.slug}/${path.relative(path.resolve(howto_abs), f)}`));
+
+---
+
+<BaseLayout class="markdown-content bg-gray-100">
+  <Wrapper class="">
+    <article class="bg-white shadow-lg rounded-lg overflow-hidden">
+      <!-- Header -->
+      <header class="p-8 bg-gradient-to-r from-orange-200 to-orange-300">
+        <h1 class="text-4xl font-bold mb-4 text-gray-800">
+          <Translate>{howto.title}</Translate>
+        </h1>
+        <div class="flex flex-wrap gap-2 mb-4">
+          {Object.keys(howto.tags).map((tag) => (
+            <span class="bg-orange-600 text-white text-xs px-3 py-1 rounded-full">
+              <Translate>{tag}</Translate>
+            </span>
+          ))}
+        </div>
+        <Img
+          src={coverLocaleRel}
+          alt={"Cover Image"}
+          attributes={{
+            img: {
+              class: "h-80 w-full object-cover rounded-md",
+            },
+          }}
+        />
+      </header>
+
+      <!-- Main Content -->
+      <section class="p-8">
+        <!-- Metadata -->
+        <ul class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
+          <li><strong><Translate>Difficulty:</Translate></strong> <Translate>{howto.difficulty_level}</Translate></li>
+          <li><strong><Translate>Time Required:</Translate></strong> <Translate>{howto.time}</Translate></li>
+          <li><strong><Translate>Views:</Translate></strong> {howto.total_views}</li>
+          <li><strong><Translate>Creator:</Translate></strong> {howto._createdBy}</li>
+          <li><strong><Translate>Country:</Translate></strong> {howto.creatorCountry}</li>
+          <li><strong><Translate>Downloads:</Translate></strong> {howto.total_downloads}</li>
+        </ul>
+
+        <!-- Description -->
+        <p class="mb-8 text-gray-700 whitespace-pre-line">
+          <Translate>
+            <div set:html={howto.description.replace(/\n/g, "<br>")}></div>
+          </Translate>
+        </p>
+
+        <!-- Resources -->
+        {howto.files.length > 0 && (
+          <div class="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>
+        )}
+        <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>
+
+      <!-- Steps -->
+      <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">
+          {howto.steps.map((step, index) => (
+            <li id={`step-${index + 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">{index + 1}</span>
+                <h3 class="text-xl font-bold"><Translate>{step.title}</Translate></h3>
+              </div>
+              <div class="mb-4 text-gray-700 whitespace-pre-line">                
+                  <div set:html={step.text.replace(/\n/g, '<br>')}></div>
+              </div>
+              {step.images && step.images.length > 0 &&
+                (<GalleryK images={step.images} />)
+              }
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      <!-- Footer Information -->
+      <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>
+            <Translate>Found useful by</Translate> {howto.votedUsefulBy.length} <Translate>people</Translate>
+          </span>
+        </div>
+      </footer>
+
+    </article>
+  </Wrapper>
+</BaseLayout>

src/components/howtos/todos.md

@@ -6,4 +6,4 @@
 - For text, use {text} (import { i18n as Translate } from "@polymech/astro-base")
 - data is provided via `import { getCollection } from 'astro:content', eg: const items = await getCollection('howtos')`
 
-- [ ] improve layout and css
+- [ ] update Detail.astro : improve layout and css

src/components/howtos/todos.sh

@@ -3,5 +3,10 @@ kbotd --preferences ./todos.md \
       --include=./Detail.astro \
       --include=./howto.json \
       --disable=terminal,git,npm,user,interact,search,email,web \
-      --disableTools=read_files,list_files,file_exists,web \
-      --model=anthropic/claude-3.7-sonnet
+      --disableTools=read_file,read_files,list_files,file_exists,web \
+      --model=gpt-4.5-preview \
+      --router=openai \
+      --mode=completion \
+      --dst=./Detail2.astro
+
+