generated from polymech/site-template
141 lines
4.4 KiB
Plaintext
141 lines
4.4 KiB
Plaintext
---
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
import { IHowto,asset_local_rel } from "@/model/howto/howto/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 Sidebar from "@/components/howtos/sidebar2.astro";
|
|
|
|
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">
|
|
<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="">
|
|
{
|
|
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>
|
|
|
|
</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>
|
|
</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>
|
|
</Wrapper>
|
|
</BaseLayout> |