From a41248de93257799d42efe5dcbc98acf0da05f37 Mon Sep 17 00:00:00 2001 From: babayaga Date: Sat, 22 Mar 2025 01:06:03 +0100 Subject: [PATCH] howto resources :) --- src/components/howtos/Detail.astro | 254 ++++++++++++++++------------- src/components/howtos/todos.md | 42 +---- src/components/howtos/todos.sh | 6 +- 3 files changed, 142 insertions(+), 160 deletions(-) diff --git a/src/components/howtos/Detail.astro b/src/components/howtos/Detail.astro index 54fa461..7173968 100644 --- a/src/components/howtos/Detail.astro +++ b/src/components/howtos/Detail.astro @@ -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)}`), +); --- - -
-
-

- {howto.title} -

- -
- { - howto.tags.map((tag) => ( - - {tag} - - )) - } -
- -
- {"none"} -
- -
-
- Difficulty: - {howto.difficulty_level} -
-
- Time: - {howto.time} -
-
- Views: {howto.total_views} -
-
- Created by: {howto._createdBy} -
-
- Country: {howto.creatorCountry} -
-
- - -
-

-

')}>
-

-
- - - -
-

Resources

-
+
+
+

+ {howto.title} +

+
{ - howto.files.map((file) => ( - {file.name} - )) - } + howto.tags.map((tag) => ( + + {tag} + + )) + } +
+ +
+ {"none"} +
+ +
+
+ Difficulty: + {howto.difficulty_level} +
+
+ Time: + {howto.time} +
+
+ Views: + {howto.total_views} +
+
+ Created by: + {howto._createdBy} +
+
+ Country: + {howto.creatorCountry} +
- - Browse Files -
- -
- - -
- {howto.steps.map((step, index) => ( -
-

- - {index + 1} - - {step.title} -

- -
-

-

')}>
+ +
+

+

")} + />

- - {step.images && step.images.length > 0 && ( -
- +
+

Resources

+
+ { + howto.files.map((file) => ( + + {file.name} + + )) + }
- )} -
- ))} -
- -
-
-
- - Created: {new Date(howto._created).toLocaleDateString()} - -
-
- - Found useful by: {howto.votedUsefulBy.length} people - + + Browse Files +
+ + + +
+ { + howto.steps.map((step, index) => ( +
+

+ + {index + 1} + + {step.title} +

+ +
+

+ +

")} /> + +

+
+ + {step.images && step.images.length > 0 && ( +
+ +
+ )} +
+ )) + }
+ +
+
+
+ + Created: { + new Date(howto._created).toLocaleDateString() + } + +
+
+ + Found useful by: { + howto.votedUsefulBy.length + } + people + +
+
+
-
-
- \ No newline at end of file + diff --git a/src/components/howtos/todos.md b/src/components/howtos/todos.md index ab46945..74e2ece 100644 --- a/src/components/howtos/todos.md +++ b/src/components/howtos/todos.md @@ -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 - - - - - -## 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 diff --git a/src/components/howtos/todos.sh b/src/components/howtos/todos.sh index 0f797d6..c6339a9 100644 --- a/src/components/howtos/todos.sh +++ b/src/components/howtos/todos.sh @@ -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 -