howto basic shit

This commit is contained in:
lovebird 2025-03-23 00:27:15 +01:00
parent 0167e74b8b
commit 90a2b1c907
10 changed files with 162 additions and 227 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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",

17
package-lock.json generated
View File

@ -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",

View File

@ -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",

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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,137 +75,106 @@ 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>

View File

@ -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

View File

@ -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}`