generated from polymech/site-template
howto resources :)
This commit is contained in:
parent
00d2f636e8
commit
a41248de93
@ -1,14 +1,14 @@
|
||||
---
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { IHowto,asset_local_rel } from "@/model/howto";
|
||||
import { Img } from 'imagetools/components';
|
||||
import { i18n as Translate } from "@polymech/astro-base";
|
||||
import { files,forward_slash } from "@polymech/commons"
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { IHowto, asset_local_rel } from "@/model/howto";
|
||||
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"
|
||||
import { HOWTO_FILES_WEB, HOWTO_FILES_ABS } from "config/config.js";
|
||||
import Sidebar from "@/components/howtos/sidebar2.astro";
|
||||
|
||||
interface Props {
|
||||
@ -16,126 +16,146 @@ interface Props {
|
||||
}
|
||||
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)}`))
|
||||
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">
|
||||
<Wrapper>
|
||||
|
||||
<div class="howto-container max-w-4xl mx-auto p-4 ml-4 pl-8">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-2">
|
||||
<Translate>{howto.title}</Translate>
|
||||
</h1>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg m-4">
|
||||
{
|
||||
howto.tags.map((tag) => (
|
||||
<span class="inline-block text-gray-700 px-2 py-1 rounded-full text-sm mr-2">
|
||||
<Translate>{tag}</Translate>
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<!-- Cover image -->
|
||||
<div class="mb-4">
|
||||
<Img
|
||||
src={coverLocaleRel}
|
||||
alt={"none"}
|
||||
attributes={{
|
||||
img: { class: "w-full h-64 object-cover rounded-lg" }
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<!-- Metadata -->
|
||||
<div class="flex flex-wrap gap-4 mb-4 text-sm text-gray-600">
|
||||
<div>
|
||||
<span class="font-semibold">Difficulty:</span>
|
||||
<Translate>{howto.difficulty_level}</Translate>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Time:</span>
|
||||
<Translate>{howto.time}</Translate>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Views:</span> {howto.total_views}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Created by:</span> {howto._createdBy}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Country:</span> {howto.creatorCountry}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<p class="whitespace-pre-line white-space: pre-line;">
|
||||
<Translate><div set:html={howto.description.replace(/\n/g, '<br>')}></div></Translate>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 class="font-semibold mb-4"> <Translate>Resources</Translate></h3>
|
||||
<div class="">
|
||||
<div class="howto-container">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-2">
|
||||
<Translate>{howto.title}</Translate>
|
||||
</h1>
|
||||
<div class="bg-gray-50 p-4 rounded-lg m-4">
|
||||
{
|
||||
howto.files.map((file) => (
|
||||
<a href={`${file.downloadUrl}`} target="_blank" rel="noopener noreferrer">{file.name}</a>
|
||||
))
|
||||
}
|
||||
howto.tags.map((tag) => (
|
||||
<span class="inline-block text-gray-700 px-2 py-1 rounded-full text-sm mr-2">
|
||||
<Translate>{tag}</Translate>
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<!-- Cover image -->
|
||||
<div class="mb-4">
|
||||
<Img
|
||||
src={coverLocaleRel}
|
||||
alt={"none"}
|
||||
attributes={{
|
||||
img: { class: "w-full h-64 object-cover rounded-lg" },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<!-- Metadata -->
|
||||
<div class="flex flex-wrap gap-4 mb-4 text-sm text-gray-600 bg-white p-4 rounded-lg">
|
||||
<div>
|
||||
<span class="font-semibold">Difficulty:</span>
|
||||
<Translate>{howto.difficulty_level}</Translate>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Time:</span>
|
||||
<Translate>{howto.time}</Translate>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Views:</span>
|
||||
{howto.total_views}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Created by:</span>
|
||||
{howto._createdBy}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Country:</span>
|
||||
{howto.creatorCountry}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href={`${HOWTO_FILES_WEB(howto.slug)}`} target="_blank" rel="noopener noreferrer"><Translate>Browse Files</Translate></a>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="steps-container space-y-12">
|
||||
{howto.steps.map((step, index) => (
|
||||
<div class="step-item" 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}
|
||||
</span>
|
||||
<Translate>{step.title}</Translate>
|
||||
</h2>
|
||||
|
||||
<div class="step-content mb-6">
|
||||
<p class="whitespace-pre-line mb-4">
|
||||
<Translate><div set:html={step.text.replace(/\n/g, '<br>')}></div></Translate>
|
||||
<!-- Description -->
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<p class="whitespace-pre-line white-space: pre-line;">
|
||||
<Translate
|
||||
><div
|
||||
set:html={howto.description.replace(/\n/g, "<br>")}
|
||||
/></Translate
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{step.images && step.images.length > 0 && (
|
||||
<div class="step-images">
|
||||
<GalleryK images={step.images} />
|
||||
<div class="bg-gray-50 p-4 rounded-lg mb-8">
|
||||
<h3 class="font-semibold mb-4"><Translate>Resources</Translate></h3>
|
||||
<div class="">
|
||||
{
|
||||
howto.files.map((file) => (
|
||||
<a
|
||||
href={`${file.downloadUrl}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{file.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<!-- Footer information -->
|
||||
<footer class="mt-12 pt-6 border-t border-gray-200">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<span class="text-sm text-gray-500">
|
||||
<Translate>Created</Translate>: {new Date(howto._created).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span>
|
||||
<Translate>Found useful by</Translate>: {howto.votedUsefulBy.length} <Translate>people</Translate>
|
||||
</span>
|
||||
|
||||
<a
|
||||
href={`${HOWTO_FILES_WEB(howto.slug)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"><Translate>Browse Files</Translate></a
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="steps-container space-y-12">
|
||||
{
|
||||
howto.steps.map((step, index) => (
|
||||
<div class="step-item" 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}
|
||||
</span>
|
||||
<Translate>{step.title}</Translate>
|
||||
</h2>
|
||||
|
||||
<div class="step-content mb-6">
|
||||
<p class="whitespace-pre-line mb-4">
|
||||
<Translate>
|
||||
<div set:html={step.text.replace(/\n/g, "<br>")} />
|
||||
</Translate>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{step.images && step.images.length > 0 && (
|
||||
<div class="step-images">
|
||||
<GalleryK images={step.images} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<!-- Footer information -->
|
||||
<footer class="mt-12 pt-6 border-t border-gray-200">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<span class="text-sm text-gray-500">
|
||||
<Translate>Created</Translate>: {
|
||||
new Date(howto._created).toLocaleDateString()
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span>
|
||||
<Translate>Found useful by</Translate>: {
|
||||
howto.votedUsefulBy.length
|
||||
}
|
||||
<Translate>people</Translate>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</BaseLayout>
|
||||
</BaseLayout>
|
||||
|
||||
@ -4,44 +4,6 @@
|
||||
- no react or additional dependencies
|
||||
- IHowto: import { IHowto } from "@/model/howto.js"
|
||||
- For text, use {text} (import { i18n as Translate } from "@polymech/astro-base")
|
||||
- data is provided via `import { getCollection } from 'astro:content'
|
||||
const items = await getCollection('howtos')`
|
||||
- data is provided via `import { getCollection } from 'astro:content', eg: const items = await getCollection('howtos')`
|
||||
|
||||
### Example Tailwind Sidebar
|
||||
|
||||
<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.1"/>
|
||||
</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>
|
||||
|
||||
## Todos
|
||||
|
||||
- [ ] create minimal Astro component, a sidebar using flowbit (see example) for the given interface ("IHowto") and sample data ../components/libary/howto.astro, use the 'category' field, save as ../components/howtos/sidebar2.astro
|
||||
- [ ] improve layout and css
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
kbotd --preferences ./todos-howto.md \
|
||||
kbotd --preferences ./todos.md \
|
||||
--include=./howto.ts \
|
||||
--include=./Detail.astro \
|
||||
--include=./howto.json \
|
||||
--disable=terminal,git,npm,user,interact,search,email,web \
|
||||
--disableTools=read_file,read_files,list_files,file_exists,web \
|
||||
--disableTools=read_files,list_files,file_exists,web \
|
||||
--model=anthropic/claude-3.7-sonnet
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user