polymech/site-library
1
0
Fork 0
generated from polymech/site-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding bullshit filter

Browse Source
This commit is contained in:
lovebird 2025-03-22 12:16:06 +01:00
parent 6943725a12
commit ded5ac26c4
16 changed files with 1405 additions and 1176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.astro/collections/resources.schema.json
View File

@ -23,7 +23,7 @@
"format": "unix-time"
}
],
"default": "2025-03-21T23:09:43.108Z"
"default": "2025-03-22T10:51:39.637Z"
},
"description": {
"type": "string",

961
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

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

8
src/components/howtos/.kbot/params.json
View File

File diff suppressed because one or more lines are too long

255
src/components/howtos/Detail.astro
View File

@ -1,8 +1,10 @@
---
import fs from "fs";
import path from "path";
import { IHowto, asset_local_rel } from "@/model/howto";
import { IHowto, asset_local_rel } from "@/model/howto.js";
import { Img } from "imagetools/components";
import { sync as write } from "@polymech/fs/write";
import { i18n as Translate } from "@polymech/astro-base";
import { files, forward_slash } from "@polymech/commons";
import BaseLayout from "@/layouts/BaseLayout.astro";
@ -15,146 +17,161 @@ interface Props {
}
const { howto } = Astro.props;
const coverLocaleRel = await asset_local_rel(howto, howto.cover_image);
const howto_abs = HOWTO_FILES_ABS(howto.slug);
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)}`),
);
write("./src/components/howtos/howto_sample.json", howto);
---
<BaseLayout class="markdown-content">
<Wrapper>
<div class="howto-container">
<header class="mb-8">
<h1 class="text-3xl font-bold mb-2">
<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="bg-gray-50 p-4 rounded-lg m-4">
<div class="flex flex-wrap gap-2 mb-4">
{
howto.tags.map((tag) => (
<span class="inline-block text-gray-700 px-2 py-1 rounded-full text-sm mr-2">
<span class="bg-orange-600 text-white text-xs px-3 py-1 rounded-full">
<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>
<!-- 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>
<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>
<a
href={`${HOWTO_FILES_WEB(howto.slug)}`}
target="_blank"
rel="noopener noreferrer"><Translate>Browse Files</Translate></a
>
</div>
<Img
src={coverLocaleRel}
alt={"Cover Image"}
attributes={{
img: {
class: "h-80 w-full object-cover rounded-md",
},
}}
/>
</header>
<!-- Steps -->
<div class="steps-container space-y-12">
<!-- 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>")} />
</Translate>
</p>
<!-- Resources -->
{
howto.steps.map((step, index) => (
<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}
</span>
<Translate>{step.title}</Translate>
howto.files.length > 0 && (
<div class="p-8 mb-8">
<h2 class="text-xl font-semibold mb-2">
<Translate>Resources</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>
)}
<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>
))
)
}
</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>
<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>
{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>
</div>
</article>
</Wrapper>
</BaseLayout>

146
src/components/howtos/Detail2.astro
View File

@ -1,8 +1,10 @@
---
import fs from "fs";
import path from "path";
import { IHowto, asset_local_rel } from "@/model/howto.js";
import { Img } from "imagetools/components";
import { sync as write } from "@polymech/fs/write";
import { i18n as Translate } from "@polymech/astro-base";
import { files, forward_slash } from "@polymech/commons";
import BaseLayout from "@/layouts/BaseLayout.astro";
@ -18,8 +20,10 @@ 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)}`));
model_files = model_files.map((f) =>
forward_slash(`${howto.slug}/${path.relative(path.resolve(howto_abs), f)}`),
);
write("./src/model/howto_sample.json", howto);
---
<BaseLayout class="markdown-content bg-gray-100">
@ -31,11 +35,13 @@ model_files = model_files.map((f) => forward_slash(`${howto.slug}/${path.relativ
<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>
))}
{
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}
@ -52,41 +58,63 @@ model_files = model_files.map((f) => forward_slash(`${howto.slug}/${path.relativ
<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>
<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>
<div set:html={howto.description.replace(/\n/g, "<br>")} />
</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>
)}
{
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>
)
}
<a
href={`${HOWTO_FILES_WEB(howto.slug)}`}
target="_blank"
@ -99,35 +127,51 @@ model_files = model_files.map((f) => forward_slash(`${howto.slug}/${path.relativ
<!-- 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>
<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>
))}
{
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>
{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>Created on</Translate>: {
new Date(howto._created).toLocaleDateString()
}</span
>
<span>
<Translate>Found useful by</Translate> {howto.votedUsefulBy.length} <Translate>people</Translate>
<Translate>Found useful by</Translate>
{howto.votedUsefulBy.length}
<Translate>people</Translate>
</span>
</div>
</footer>
</article>
</Wrapper>
</BaseLayout>

339
src/components/howtos/howto_sample.json Normal file
View File

@ -0,0 +1,339 @@
{
"_createdBy": "gus-merckel",
"mentions": [],
"_deleted": false,
"fileLink": "",
"slug": "cut-out-shapes-out-of-plastic-sheets-with-a-cnc-",
"_modified": "2023-10-27T18:09:36.519Z",
"previousSlugs": [
"cut-out-shapes-out-of-plastic-sheets-with-a-cnc-"
],
"_created": "2023-08-23T18:20:09.098Z",
"description": "In this how to, I will show you our process to cut HDPE Sheets using a X-Carve CNC.\n\nHere is the full video in spanish with subtitles https://www.youtube.com/watch?v=4LrrFz802To ",
"votedUsefulBy": [
"sigolene",
"mattia",
"uillinoispreciousplastics"
],
"creatorCountry": "mx",
"total_downloads": 0,
"title": "Cut out shapes out of plastic sheets with a CNC ",
"time": "< 5 hours",
"files": [],
"difficulty_level": "Medium",
"_id": "038gjWgLjiyYknbEjDeI",
"tags": [
"HDPE"
],
"total_views": 232,
"_contentModifiedTimestamp": "2023-08-23T18:20:09.098Z",
"cover_image": {
"name": "IMG_20200605_142311.jpg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2F038gjWgLjiyYknbEjDeI%2FIMG_20200605_142311.jpg?alt=media&token=c272c174-1adc-45af-967b-771adce7295d",
"type": "image/jpeg",
"fullPath": "uploads/howtos/038gjWgLjiyYknbEjDeI/IMG_20200605_142311.jpg",
"updated": "2021-04-05T15:09:00.605Z",
"size": 124661,
"timeCreated": "2021-04-05T15:09:00.605Z",
"contentType": "image/jpeg"
},
"comments": [],
"moderatorFeedback": "",
"steps": [
{
"title": "Measure the plastic sheet",
"text": "For this step we need to measure our plastic sheet: Height, Width and Thickness. Our X-Carve machine works with the CAM Software EASEL, for me, the easiest software for CNC milling out there. \n\nThe cool thing about Easel (https://easel.inventables.com/) is that you can \"simulate\" your actual material and THEY EVEN HAVE HDPE 2-Colors in their cutting material lists!!\n\n\n",
"images": [
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/1.jpg",
"name": "1.jpg",
"size": 74095,
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:05.766Z",
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F1.jpg?alt=media&token=293d733d-05a5-494a-9340-47f4564f1939",
"updated": "2021-03-26T19:42:05.766Z",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/1.jpg",
"alt": "1.jpg"
},
{
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:05.669Z",
"updated": "2021-03-26T19:42:05.669Z",
"size": 69665,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F2.jpg?alt=media&token=004f50f1-97ac-4df4-9ba9-f463aa4cbca3",
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/2.jpg",
"name": "2.jpg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/2.jpg",
"alt": "2.jpg"
}
],
"_animationKey": "unique1"
},
{
"text": "Using the CNC clamps from the X-Carve, secure the sheet to the table, ",
"_animationKey": "unique2",
"images": [
{
"updated": "2021-03-26T19:42:06.249Z",
"size": 55544,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/3.jpg",
"timeCreated": "2021-03-26T19:42:06.249Z",
"name": "3.jpg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F3.jpg?alt=media&token=0b9c1914-1c75-429e-b34a-1e2b3706edef",
"contentType": "image/jpeg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/3.jpg",
"alt": "3.jpg"
}
],
"title": "Secure sheet "
},
{
"title": "Choosing a file to cut ",
"text": "Now we go to our illustrator, such as Inkscape to design a vector file or download and open source one frome https://thenounproject.com/.\n\nWe download the SVG file, which is an open source vector format and import it to Easel. \n",
"images": [
{
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F4.jpg?alt=media&token=1cd2d49d-9335-4bb1-ac2a-e625322ca604",
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:06.727Z",
"updated": "2021-03-26T19:42:06.727Z",
"name": "4.jpg",
"size": 42952,
"type": "image/jpeg",
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/4.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/4.jpg",
"alt": "4.jpg"
},
{
"size": 69255,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/5.jpg",
"updated": "2021-03-26T19:42:06.833Z",
"timeCreated": "2021-03-26T19:42:06.833Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F5.jpg?alt=media&token=7cca786a-7d47-43bb-900b-b8d101c276b4",
"name": "5.jpg",
"contentType": "image/jpeg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/5.jpg",
"alt": "5.jpg"
}
],
"_animationKey": "unique3"
},
{
"text": "Now with the file we can choose the width we want to carve/cut and then we go to cut and start the wizzard:\n- We check that the sheet is fixed.\n- We also specify the cutting bit, we are using a 1/8 flat flute bit. \n- We tell the machine where the coordinate 0-0 is, which we always choose as the down left corner.\n- We raise the bit, turn on the Router!!!\n\nAND PUM THE MAGIC BEGINS!!",
"title": "Follow the cutting Wizzard",
"images": [
{
"timeCreated": "2021-03-26T19:42:07.493Z",
"size": 72226,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/6.jpg",
"updated": "2021-03-26T19:42:07.493Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F6.jpg?alt=media&token=ba7195dd-7771-435f-a188-057457697332",
"contentType": "image/jpeg",
"type": "image/jpeg",
"name": "6.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/6.jpg",
"alt": "6.jpg"
},
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/7.jpg",
"size": 52424,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F7.jpg?alt=media&token=a3d5820c-cfe2-484e-8f76-f861ab8b756d",
"contentType": "image/jpeg",
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:07.308Z",
"updated": "2021-03-26T19:42:07.308Z",
"name": "7.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/7.jpg",
"alt": "7.jpg"
},
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/8.jpg",
"name": "8.jpg",
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:07.346Z",
"size": 55264,
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F8.jpg?alt=media&token=1c9816d7-3a99-4f41-8d3c-acc2670240f6",
"updated": "2021-03-26T19:42:07.346Z",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/8.jpg",
"alt": "8.jpg"
}
],
"_animationKey": "uniquenisc2v"
},
{
"text": "You take now your glasses or object and postprocess them and of course show it to your friends, family and so on.\n\n\n",
"images": [
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/9.jpg",
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:08.147Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F9.jpg?alt=media&token=4dcfe37d-e1ad-41e5-a590-40b4c37c5e1a",
"name": "9.jpg",
"updated": "2021-03-26T19:42:08.147Z",
"type": "image/jpeg",
"size": 82214,
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/9.jpg",
"alt": "9.jpg"
}
],
"_animationKey": "uniquesgl34",
"title": "Post-production and show case"
},
{
"_animationKey": "uniquem4y0yi",
"title": "Hack it and try it yourself",
"text": "You can try this project with other types of CNC machines, even manual Routers or manual saw, as I did on this video: https://youtu.be/gxkcffQD3eQ, but the important thing is that you share what you do and help this community to grow!!!\n\nShare your ideas and comments!",
"images": [
{
"contentType": "image/jpeg",
"timeCreated": "2021-04-05T15:09:01.445Z",
"fullPath": "uploads/howtos/038gjWgLjiyYknbEjDeI/IMG_20200605_142311.jpg",
"type": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2F038gjWgLjiyYknbEjDeI%2FIMG_20200605_142311.jpg?alt=media&token=f94152ff-f923-4054-a3ad-d8ec588856fa",
"size": 124661,
"updated": "2021-04-05T15:09:01.445Z",
"name": "IMG_20200605_142311.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/IMG_20200605_142311.jpg",
"alt": "IMG_20200605_142311.jpg"
}
]
}
],
"moderation": "accepted",
"user": {
"_modified": "2024-01-08T13:28:33.484Z",
"_id": "gus-merckel",
"subType": "mix",
"moderation": "accepted",
"_deleted": false,
"verified": false,
"type": "workspace",
"location": {
"lat": 19.3935,
"lng": -99.1656
},
"_created": "2024-01-08T13:28:33.484Z",
"geo": {
"latitude": 19.3935,
"lookupSource": "coordinates",
"longitude": -99.1656,
"localityLanguageRequested": "en",
"continent": "North America",
"continentCode": "NA",
"countryName": "Mexico",
"countryCode": "MX",
"principalSubdivision": "Ciudad de Mexico",
"principalSubdivisionCode": "MX-CMX",
"city": "Mexico City",
"locality": "Benito Juarez",
"postcode": "03103",
"plusCode": "76F29RVM+CQ",
"localityInfo": {
"administrative": [
{
"name": "Mexico",
"description": "country in North America",
"isoName": "Mexico",
"order": 2,
"adminLevel": 2,
"isoCode": "MX",
"wikidataId": "Q96",
"geonameId": 3996063
},
{
"name": "Mexico City",
"description": "capital and largest city of Mexico",
"order": 5,
"adminLevel": 4,
"wikidataId": "Q1489",
"geonameId": 3530597
},
{
"name": "Ciudad de Mexico",
"description": "capital and largest city of Mexico",
"isoName": "Ciudad de Mexico",
"order": 6,
"adminLevel": 4,
"isoCode": "MX-CMX",
"wikidataId": "Q1489",
"geonameId": 3527646
},
{
"name": "Benito Juarez",
"description": "territorial demarcation of the Mexico City in Mexico",
"order": 7,
"adminLevel": 6,
"wikidataId": "Q2356998",
"geonameId": 3827406
}
],
"informative": [
{
"name": "North America",
"description": "continent and northern subcontinent of the Americas",
"isoName": "North America",
"order": 1,
"isoCode": "NA",
"wikidataId": "Q49",
"geonameId": 6255149
},
{
"name": "America/Mexico_City",
"description": "time zone",
"order": 3
},
{
"name": "Greater Mexico City",
"description": "geographical object",
"order": 4,
"wikidataId": "Q665894"
},
{
"name": "03103",
"description": "postal code",
"order": 8
}
]
}
},
"data": {
"urls": [
{
"name": "Email",
"url": "mailto:gustavomerckel@gmail.com"
},
{
"name": "Facebook",
"url": "https://www.facebook.com/pl%c3%a1stico-chido-110888520718193"
},
{
"name": "sponsor the work",
"url": "https://www.patreon.com/one_army"
}
],
"description": "Plástico Chido builds and modifies the PP machines, and also experiments with CNC and Laser Cut",
"services": [
{
"welding": false,
"assembling": false,
"machining": false,
"electronics": false,
"molds": false
}
],
"title": "Plástico Chido",
"images": []
},
"detail": {
"services": [],
"urls": []
}
},
"category": {
"label": "uncategorized"
}
}

13
src/components/howtos/todos.md
View File

@ -2,8 +2,13 @@
- for Astro, tailwind
- 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', eg: const items = await getCollection('howtos')`
- [ ] update Detail.astro : improve layout and css
## Todos
Detail.astro
- [ ] when rendering howto.steps, apply a list of filters (some are async)
- [ ] replace all crlf with html line breaks
- [ ] render links via <a>
- [ ] let me transform or reject links (black list)
- [ ] let me filter certain step descriptions for certain words/phrases

5
src/components/howtos/todos.sh
View File

@ -1,12 +1,9 @@
kbotd --preferences ./todos.md \
--include=./howto.ts \
--include=./Detail.astro \
--include=./howto.json \
--include=./howto_sample.json \
--disable=terminal,git,npm,user,interact,search,email,web \
--disableTools=read_file,read_files,list_files,file_exists,web \
--model=gpt-4.5-preview \
--router=openai \
--mode=completion \
--dst=./Detail2.astro

5
src/model/howto.sh
View File

@ -1,7 +1,6 @@
kbotd --preferences ./todos-howto.md \
kbotd --preferences ./todos.md \
--include=./howto.ts \
--include=./howto.json \
--include=./howto_sample.json \
--disable=terminal,git,npm,user,interact,search,email,web \
--disableTools=read_file,read_files,list_files,file_exists,web \
--model=anthropic/claude-3.7-sonnet

104
src/model/howto.ts
View File

@ -76,20 +76,13 @@ export const howtos = async () => {
let howtos = data.v3_howtos as any[]
howtos = howtos.filter((h) => h.moderation == 'accepted');
const tags = data.v3_tags;
let output = {
tags: {},
howtows: {}
}
howtos.forEach((howto: IHowto) => {
const howtoTags: any = [];
for (const ht in howto.tags) {
const gt: any = tags.find((t) => t._id === ht) || { label: 'untagged' };
if (gt) {
howtoTags.push(gt.label || "");
if (!output.tags[gt.label]) {
output.tags[gt.label] = []
}
output.tags[gt.label].push(howto.slug.trim());
}
}
howto.user = data.v3_mappins.find((u) => u._id == howto._createdBy);
@ -253,7 +246,6 @@ export interface IHowto {
difficulty_level: string
_id: string
tags?: Tags
user: any
total_views: number
_contentModifiedTimestamp: string
cover_image: Image
@ -261,6 +253,7 @@ export interface IHowto {
moderatorFeedback: string
steps: Step[]
moderation: string
user?: User
}
export interface Tags {
@ -315,4 +308,95 @@ export interface IOATag {
_createdBy: string
_modified: string
_id: string
}
}
export interface User
{
_modified: string
_id: string
subType: string
moderation: string
_deleted: boolean
verified: boolean
type: string
location: Location
_created: string
geo: Geo
data: Data
detail: Detail
}
export interface Location {
lat: number
lng: number
}
export interface Geo {
latitude: number
lookupSource: string
longitude: number
localityLanguageRequested: string
continent: string
continentCode: string
countryName: string
countryCode: string
principalSubdivision: string
principalSubdivisionCode: string
city: string
locality: string
postcode: string
plusCode: string
localityInfo: LocalityInfo
}
export interface LocalityInfo {
administrative: Administrative[]
informative: Informative[]
}
export interface Administrative {
name: string
description: string
isoName?: string
order: number
adminLevel: number
isoCode?: string
wikidataId: string
geonameId: number
}
export interface Informative {
name: string
description: string
isoName?: string
order: number
isoCode?: string
wikidataId?: string
geonameId?: number
}
export interface Data {
urls: Url[]
description: string
services: Service[]
title: string
images: any[]
}
export interface Url {
name: string
url: string
}
export interface Service {
welding: boolean
assembling: boolean
machining: boolean
electronics: boolean
molds: boolean
}
export interface Detail {
services: any[]
urls: any[]
}

339
src/model/howto_sample.js Normal file
View File

@ -0,0 +1,339 @@
{
"_createdBy": "gus-merckel",
"mentions": [],
"_deleted": false,
"fileLink": "",
"slug": "cut-out-shapes-out-of-plastic-sheets-with-a-cnc-",
"_modified": "2023-10-27T18:09:36.519Z",
"previousSlugs": [
"cut-out-shapes-out-of-plastic-sheets-with-a-cnc-"
],
"_created": "2023-08-23T18:20:09.098Z",
"description": "In this how to, I will show you our process to cut HDPE Sheets using a X-Carve CNC.\n\nHere is the full video in spanish with subtitles https://www.youtube.com/watch?v=4LrrFz802To ",
"votedUsefulBy": [
"sigolene",
"mattia",
"uillinoispreciousplastics"
],
"creatorCountry": "mx",
"total_downloads": 0,
"title": "Cut out shapes out of plastic sheets with a CNC ",
"time": "< 5 hours",
"files": [],
"difficulty_level": "Medium",
"_id": "038gjWgLjiyYknbEjDeI",
"tags": [
"HDPE"
],
"total_views": 232,
"_contentModifiedTimestamp": "2023-08-23T18:20:09.098Z",
"cover_image": {
"name": "IMG_20200605_142311.jpg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2F038gjWgLjiyYknbEjDeI%2FIMG_20200605_142311.jpg?alt=media&token=c272c174-1adc-45af-967b-771adce7295d",
"type": "image/jpeg",
"fullPath": "uploads/howtos/038gjWgLjiyYknbEjDeI/IMG_20200605_142311.jpg",
"updated": "2021-04-05T15:09:00.605Z",
"size": 124661,
"timeCreated": "2021-04-05T15:09:00.605Z",
"contentType": "image/jpeg"
},
"comments": [],
"moderatorFeedback": "",
"steps": [
{
"title": "Measure the plastic sheet",
"text": "For this step we need to measure our plastic sheet: Height, Width and Thickness. Our X-Carve machine works with the CAM Software EASEL, for me, the easiest software for CNC milling out there. \n\nThe cool thing about Easel (https://easel.inventables.com/) is that you can \"simulate\" your actual material and THEY EVEN HAVE HDPE 2-Colors in their cutting material lists!!\n\n\n",
"images": [
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/1.jpg",
"name": "1.jpg",
"size": 74095,
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:05.766Z",
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F1.jpg?alt=media&token=293d733d-05a5-494a-9340-47f4564f1939",
"updated": "2021-03-26T19:42:05.766Z",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/1.jpg",
"alt": "1.jpg"
},
{
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:05.669Z",
"updated": "2021-03-26T19:42:05.669Z",
"size": 69665,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F2.jpg?alt=media&token=004f50f1-97ac-4df4-9ba9-f463aa4cbca3",
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/2.jpg",
"name": "2.jpg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/2.jpg",
"alt": "2.jpg"
}
],
"_animationKey": "unique1"
},
{
"text": "Using the CNC clamps from the X-Carve, secure the sheet to the table, ",
"_animationKey": "unique2",
"images": [
{
"updated": "2021-03-26T19:42:06.249Z",
"size": 55544,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/3.jpg",
"timeCreated": "2021-03-26T19:42:06.249Z",
"name": "3.jpg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F3.jpg?alt=media&token=0b9c1914-1c75-429e-b34a-1e2b3706edef",
"contentType": "image/jpeg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/3.jpg",
"alt": "3.jpg"
}
],
"title": "Secure sheet "
},
{
"title": "Choosing a file to cut ",
"text": "Now we go to our illustrator, such as Inkscape to design a vector file or download and open source one frome https://thenounproject.com/.\n\nWe download the SVG file, which is an open source vector format and import it to Easel. \n",
"images": [
{
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F4.jpg?alt=media&token=1cd2d49d-9335-4bb1-ac2a-e625322ca604",
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:06.727Z",
"updated": "2021-03-26T19:42:06.727Z",
"name": "4.jpg",
"size": 42952,
"type": "image/jpeg",
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/4.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/4.jpg",
"alt": "4.jpg"
},
{
"size": 69255,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/5.jpg",
"updated": "2021-03-26T19:42:06.833Z",
"timeCreated": "2021-03-26T19:42:06.833Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F5.jpg?alt=media&token=7cca786a-7d47-43bb-900b-b8d101c276b4",
"name": "5.jpg",
"contentType": "image/jpeg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/5.jpg",
"alt": "5.jpg"
}
],
"_animationKey": "unique3"
},
{
"text": "Now with the file we can choose the width we want to carve/cut and then we go to cut and start the wizzard:\n- We check that the sheet is fixed.\n- We also specify the cutting bit, we are using a 1/8 flat flute bit. \n- We tell the machine where the coordinate 0-0 is, which we always choose as the down left corner.\n- We raise the bit, turn on the Router!!!\n\nAND PUM THE MAGIC BEGINS!!",
"title": "Follow the cutting Wizzard",
"images": [
{
"timeCreated": "2021-03-26T19:42:07.493Z",
"size": 72226,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/6.jpg",
"updated": "2021-03-26T19:42:07.493Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F6.jpg?alt=media&token=ba7195dd-7771-435f-a188-057457697332",
"contentType": "image/jpeg",
"type": "image/jpeg",
"name": "6.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/6.jpg",
"alt": "6.jpg"
},
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/7.jpg",
"size": 52424,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F7.jpg?alt=media&token=a3d5820c-cfe2-484e-8f76-f861ab8b756d",
"contentType": "image/jpeg",
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:07.308Z",
"updated": "2021-03-26T19:42:07.308Z",
"name": "7.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/7.jpg",
"alt": "7.jpg"
},
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/8.jpg",
"name": "8.jpg",
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:07.346Z",
"size": 55264,
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F8.jpg?alt=media&token=1c9816d7-3a99-4f41-8d3c-acc2670240f6",
"updated": "2021-03-26T19:42:07.346Z",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/8.jpg",
"alt": "8.jpg"
}
],
"_animationKey": "uniquenisc2v"
},
{
"text": "You take now your glasses or object and postprocess them and of course show it to your friends, family and so on.\n\n\n",
"images": [
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/9.jpg",
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:08.147Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F9.jpg?alt=media&token=4dcfe37d-e1ad-41e5-a590-40b4c37c5e1a",
"name": "9.jpg",
"updated": "2021-03-26T19:42:08.147Z",
"type": "image/jpeg",
"size": 82214,
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/9.jpg",
"alt": "9.jpg"
}
],
"_animationKey": "uniquesgl34",
"title": "Post-production and show case"
},
{
"_animationKey": "uniquem4y0yi",
"title": "Hack it and try it yourself",
"text": "You can try this project with other types of CNC machines, even manual Routers or manual saw, as I did on this video: https://youtu.be/gxkcffQD3eQ, but the important thing is that you share what you do and help this community to grow!!!\n\nShare your ideas and comments!",
"images": [
{
"contentType": "image/jpeg",
"timeCreated": "2021-04-05T15:09:01.445Z",
"fullPath": "uploads/howtos/038gjWgLjiyYknbEjDeI/IMG_20200605_142311.jpg",
"type": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2F038gjWgLjiyYknbEjDeI%2FIMG_20200605_142311.jpg?alt=media&token=f94152ff-f923-4054-a3ad-d8ec588856fa",
"size": 124661,
"updated": "2021-04-05T15:09:01.445Z",
"name": "IMG_20200605_142311.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/IMG_20200605_142311.jpg",
"alt": "IMG_20200605_142311.jpg"
}
]
}
],
"moderation": "accepted",
"user": {
"_modified": "2024-01-08T13:28:33.484Z",
"_id": "gus-merckel",
"subType": "mix",
"moderation": "accepted",
"_deleted": false,
"verified": false,
"type": "workspace",
"location": {
"lat": 19.3935,
"lng": -99.1656
},
"_created": "2024-01-08T13:28:33.484Z",
"geo": {
"latitude": 19.3935,
"lookupSource": "coordinates",
"longitude": -99.1656,
"localityLanguageRequested": "en",
"continent": "North America",
"continentCode": "NA",
"countryName": "Mexico",
"countryCode": "MX",
"principalSubdivision": "Ciudad de Mexico",
"principalSubdivisionCode": "MX-CMX",
"city": "Mexico City",
"locality": "Benito Juarez",
"postcode": "03103",
"plusCode": "76F29RVM+CQ",
"localityInfo": {
"administrative": [
{
"name": "Mexico",
"description": "country in North America",
"isoName": "Mexico",
"order": 2,
"adminLevel": 2,
"isoCode": "MX",
"wikidataId": "Q96",
"geonameId": 3996063
},
{
"name": "Mexico City",
"description": "capital and largest city of Mexico",
"order": 5,
"adminLevel": 4,
"wikidataId": "Q1489",
"geonameId": 3530597
},
{
"name": "Ciudad de Mexico",
"description": "capital and largest city of Mexico",
"isoName": "Ciudad de Mexico",
"order": 6,
"adminLevel": 4,
"isoCode": "MX-CMX",
"wikidataId": "Q1489",
"geonameId": 3527646
},
{
"name": "Benito Juarez",
"description": "territorial demarcation of the Mexico City in Mexico",
"order": 7,
"adminLevel": 6,
"wikidataId": "Q2356998",
"geonameId": 3827406
}
],
"informative": [
{
"name": "North America",
"description": "continent and northern subcontinent of the Americas",
"isoName": "North America",
"order": 1,
"isoCode": "NA",
"wikidataId": "Q49",
"geonameId": 6255149
},
{
"name": "America/Mexico_City",
"description": "time zone",
"order": 3
},
{
"name": "Greater Mexico City",
"description": "geographical object",
"order": 4,
"wikidataId": "Q665894"
},
{
"name": "03103",
"description": "postal code",
"order": 8
}
]
}
},
"data": {
"urls": [
{
"name": "Email",
"url": "mailto:gustavomerckel@gmail.com"
},
{
"name": "Facebook",
"url": "https://www.facebook.com/pl%c3%a1stico-chido-110888520718193"
},
{
"name": "sponsor the work",
"url": "https://www.patreon.com/one_army"
}
],
"description": "Plástico Chido builds and modifies the PP machines, and also experiments with CNC and Laser Cut",
"services": [
{
"welding": false,
"assembling": false,
"machining": false,
"electronics": false,
"molds": false
}
],
"title": "Plástico Chido",
"images": []
},
"detail": {
"services": [],
"urls": []
}
},
"category": {
"label": "uncategorized"
}
}

339
src/model/howto_sample.json Normal file
View File

@ -0,0 +1,339 @@
{
"_createdBy": "gus-merckel",
"mentions": [],
"_deleted": false,
"fileLink": "",
"slug": "cut-out-shapes-out-of-plastic-sheets-with-a-cnc-",
"_modified": "2023-10-27T18:09:36.519Z",
"previousSlugs": [
"cut-out-shapes-out-of-plastic-sheets-with-a-cnc-"
],
"_created": "2023-08-23T18:20:09.098Z",
"description": "In this how to, I will show you our process to cut HDPE Sheets using a X-Carve CNC.\n\nHere is the full video in spanish with subtitles https://www.youtube.com/watch?v=4LrrFz802To ",
"votedUsefulBy": [
"sigolene",
"mattia",
"uillinoispreciousplastics"
],
"creatorCountry": "mx",
"total_downloads": 0,
"title": "Cut out shapes out of plastic sheets with a CNC ",
"time": "< 5 hours",
"files": [],
"difficulty_level": "Medium",
"_id": "038gjWgLjiyYknbEjDeI",
"tags": [
"HDPE"
],
"total_views": 232,
"_contentModifiedTimestamp": "2023-08-23T18:20:09.098Z",
"cover_image": {
"name": "IMG_20200605_142311.jpg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2F038gjWgLjiyYknbEjDeI%2FIMG_20200605_142311.jpg?alt=media&token=c272c174-1adc-45af-967b-771adce7295d",
"type": "image/jpeg",
"fullPath": "uploads/howtos/038gjWgLjiyYknbEjDeI/IMG_20200605_142311.jpg",
"updated": "2021-04-05T15:09:00.605Z",
"size": 124661,
"timeCreated": "2021-04-05T15:09:00.605Z",
"contentType": "image/jpeg"
},
"comments": [],
"moderatorFeedback": "",
"steps": [
{
"title": "Measure the plastic sheet",
"text": "For this step we need to measure our plastic sheet: Height, Width and Thickness. Our X-Carve machine works with the CAM Software EASEL, for me, the easiest software for CNC milling out there. \n\nThe cool thing about Easel (https://easel.inventables.com/) is that you can \"simulate\" your actual material and THEY EVEN HAVE HDPE 2-Colors in their cutting material lists!!\n\n\n",
"images": [
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/1.jpg",
"name": "1.jpg",
"size": 74095,
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:05.766Z",
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F1.jpg?alt=media&token=293d733d-05a5-494a-9340-47f4564f1939",
"updated": "2021-03-26T19:42:05.766Z",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/1.jpg",
"alt": "1.jpg"
},
{
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:05.669Z",
"updated": "2021-03-26T19:42:05.669Z",
"size": 69665,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F2.jpg?alt=media&token=004f50f1-97ac-4df4-9ba9-f463aa4cbca3",
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/2.jpg",
"name": "2.jpg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/2.jpg",
"alt": "2.jpg"
}
],
"_animationKey": "unique1"
},
{
"text": "Using the CNC clamps from the X-Carve, secure the sheet to the table, ",
"_animationKey": "unique2",
"images": [
{
"updated": "2021-03-26T19:42:06.249Z",
"size": 55544,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/3.jpg",
"timeCreated": "2021-03-26T19:42:06.249Z",
"name": "3.jpg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F3.jpg?alt=media&token=0b9c1914-1c75-429e-b34a-1e2b3706edef",
"contentType": "image/jpeg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/3.jpg",
"alt": "3.jpg"
}
],
"title": "Secure sheet "
},
{
"title": "Choosing a file to cut ",
"text": "Now we go to our illustrator, such as Inkscape to design a vector file or download and open source one frome https://thenounproject.com/.\n\nWe download the SVG file, which is an open source vector format and import it to Easel. \n",
"images": [
{
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F4.jpg?alt=media&token=1cd2d49d-9335-4bb1-ac2a-e625322ca604",
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:06.727Z",
"updated": "2021-03-26T19:42:06.727Z",
"name": "4.jpg",
"size": 42952,
"type": "image/jpeg",
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/4.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/4.jpg",
"alt": "4.jpg"
},
{
"size": 69255,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/5.jpg",
"updated": "2021-03-26T19:42:06.833Z",
"timeCreated": "2021-03-26T19:42:06.833Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F5.jpg?alt=media&token=7cca786a-7d47-43bb-900b-b8d101c276b4",
"name": "5.jpg",
"contentType": "image/jpeg",
"type": "image/jpeg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/5.jpg",
"alt": "5.jpg"
}
],
"_animationKey": "unique3"
},
{
"text": "Now with the file we can choose the width we want to carve/cut and then we go to cut and start the wizzard:\n- We check that the sheet is fixed.\n- We also specify the cutting bit, we are using a 1/8 flat flute bit. \n- We tell the machine where the coordinate 0-0 is, which we always choose as the down left corner.\n- We raise the bit, turn on the Router!!!\n\nAND PUM THE MAGIC BEGINS!!",
"title": "Follow the cutting Wizzard",
"images": [
{
"timeCreated": "2021-03-26T19:42:07.493Z",
"size": 72226,
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/6.jpg",
"updated": "2021-03-26T19:42:07.493Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F6.jpg?alt=media&token=ba7195dd-7771-435f-a188-057457697332",
"contentType": "image/jpeg",
"type": "image/jpeg",
"name": "6.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/6.jpg",
"alt": "6.jpg"
},
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/7.jpg",
"size": 52424,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F7.jpg?alt=media&token=a3d5820c-cfe2-484e-8f76-f861ab8b756d",
"contentType": "image/jpeg",
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:07.308Z",
"updated": "2021-03-26T19:42:07.308Z",
"name": "7.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/7.jpg",
"alt": "7.jpg"
},
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/8.jpg",
"name": "8.jpg",
"type": "image/jpeg",
"timeCreated": "2021-03-26T19:42:07.346Z",
"size": 55264,
"contentType": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F8.jpg?alt=media&token=1c9816d7-3a99-4f41-8d3c-acc2670240f6",
"updated": "2021-03-26T19:42:07.346Z",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/8.jpg",
"alt": "8.jpg"
}
],
"_animationKey": "uniquenisc2v"
},
{
"text": "You take now your glasses or object and postprocess them and of course show it to your friends, family and so on.\n\n\n",
"images": [
{
"fullPath": "uploads/howtos/pbo0Pe44aTngvlD04kGf/9.jpg",
"contentType": "image/jpeg",
"timeCreated": "2021-03-26T19:42:08.147Z",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2Fpbo0Pe44aTngvlD04kGf%2F9.jpg?alt=media&token=4dcfe37d-e1ad-41e5-a590-40b4c37c5e1a",
"name": "9.jpg",
"updated": "2021-03-26T19:42:08.147Z",
"type": "image/jpeg",
"size": 82214,
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/9.jpg",
"alt": "9.jpg"
}
],
"_animationKey": "uniquesgl34",
"title": "Post-production and show case"
},
{
"_animationKey": "uniquem4y0yi",
"title": "Hack it and try it yourself",
"text": "You can try this project with other types of CNC machines, even manual Routers or manual saw, as I did on this video: https://youtu.be/gxkcffQD3eQ, but the important thing is that you share what you do and help this community to grow!!!\n\nShare your ideas and comments!",
"images": [
{
"contentType": "image/jpeg",
"timeCreated": "2021-04-05T15:09:01.445Z",
"fullPath": "uploads/howtos/038gjWgLjiyYknbEjDeI/IMG_20200605_142311.jpg",
"type": "image/jpeg",
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fhowtos%2F038gjWgLjiyYknbEjDeI%2FIMG_20200605_142311.jpg?alt=media&token=f94152ff-f923-4054-a3ad-d8ec588856fa",
"size": 124661,
"updated": "2021-04-05T15:09:01.445Z",
"name": "IMG_20200605_142311.jpg",
"src": "/resources/howtos/cut-out-shapes-out-of-plastic-sheets-with-a-cnc-/IMG_20200605_142311.jpg",
"alt": "IMG_20200605_142311.jpg"
}
]
}
],
"moderation": "accepted",
"user": {
"_modified": "2024-01-08T13:28:33.484Z",
"_id": "gus-merckel",
"subType": "mix",
"moderation": "accepted",
"_deleted": false,
"verified": false,
"type": "workspace",
"location": {
"lat": 19.3935,
"lng": -99.1656
},
"_created": "2024-01-08T13:28:33.484Z",
"geo": {
"latitude": 19.3935,
"lookupSource": "coordinates",
"longitude": -99.1656,
"localityLanguageRequested": "en",
"continent": "North America",
"continentCode": "NA",
"countryName": "Mexico",
"countryCode": "MX",
"principalSubdivision": "Ciudad de Mexico",
"principalSubdivisionCode": "MX-CMX",
"city": "Mexico City",
"locality": "Benito Juarez",
"postcode": "03103",
"plusCode": "76F29RVM+CQ",
"localityInfo": {
"administrative": [
{
"name": "Mexico",
"description": "country in North America",
"isoName": "Mexico",
"order": 2,
"adminLevel": 2,
"isoCode": "MX",
"wikidataId": "Q96",
"geonameId": 3996063
},
{
"name": "Mexico City",
"description": "capital and largest city of Mexico",
"order": 5,
"adminLevel": 4,
"wikidataId": "Q1489",
"geonameId": 3530597
},
{
"name": "Ciudad de Mexico",
"description": "capital and largest city of Mexico",
"isoName": "Ciudad de Mexico",
"order": 6,
"adminLevel": 4,
"isoCode": "MX-CMX",
"wikidataId": "Q1489",
"geonameId": 3527646
},
{
"name": "Benito Juarez",
"description": "territorial demarcation of the Mexico City in Mexico",
"order": 7,
"adminLevel": 6,
"wikidataId": "Q2356998",
"geonameId": 3827406
}
],
"informative": [
{
"name": "North America",
"description": "continent and northern subcontinent of the Americas",
"isoName": "North America",
"order": 1,
"isoCode": "NA",
"wikidataId": "Q49",
"geonameId": 6255149
},
{
"name": "America/Mexico_City",
"description": "time zone",
"order": 3
},
{
"name": "Greater Mexico City",
"description": "geographical object",
"order": 4,
"wikidataId": "Q665894"
},
{
"name": "03103",
"description": "postal code",
"order": 8
}
]
}
},
"data": {
"urls": [
{
"name": "Email",
"url": "mailto:gustavomerckel@gmail.com"
},
{
"name": "Facebook",
"url": "https://www.facebook.com/pl%c3%a1stico-chido-110888520718193"
},
{
"name": "sponsor the work",
"url": "https://www.patreon.com/one_army"
}
],
"description": "Plástico Chido builds and modifies the PP machines, and also experiments with CNC and Laser Cut",
"services": [
{
"welding": false,
"assembling": false,
"machining": false,
"electronics": false,
"molds": false
}
],
"title": "Plástico Chido",
"images": []
},
"detail": {
"services": [],
"urls": []
}
},
"category": {
"label": "uncategorized"
}
}

47
src/model/todos-howto.md
View File

@ -1,47 +0,0 @@
## Todos
- for Astro, tailwind
- 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')`
### 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

14
src/model/todos.md Normal file
View File

@ -0,0 +1,14 @@
## Todos
- for Astro, tailwind
- no react or additional dependencies
## Todos
Detail.astro
- [ ] when rendering howto.steps, apply a list of filters (some are async)
- [ ] replace all crlf with html line breaks
- [ ] render links via <a>
- [ ] let me transform or reject links (black list)
- [ ] let me filter certain step descriptions for certain words/phrases

2
src/pages/[locale]/howtos/[...path].astro
View File

@ -1,5 +1,5 @@
---
import Layout from '@/components/howtos/Detail.astro'
import Layout from '@/components/howtos/Detail2.astro'
import { getCollection } from 'astro:content'
import { LANGUAGES_PROD as LANGUAGES } from "config/config.js"