generated from polymech/site-template
410 lines
14 KiB
Plaintext
410 lines
14 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import BaseLayout from "./BaseLayout.astro";
|
|
import { createMarkdownComponent } from "@/base/index.js";
|
|
import { translate } from "@/base/i18n.js";
|
|
import Wrapper from "@/components/containers/Wrapper.astro";
|
|
|
|
import Translate from "@/components/polymech/i18n.astro";
|
|
import Readme from "@/components/polymech/readme.astro";
|
|
import GalleryK from "@/components/polymech/GalleryK.astro";
|
|
import Resources from "@/components/polymech/resources.astro";
|
|
import Specs from "@/components/polymech/specs.astro";
|
|
import TabButton from "@/components/polymech/tab-button.astro";
|
|
import TabContent from "@/components/polymech/tab-content.astro";
|
|
|
|
import StoreEntries from "@/components/store/StoreEntries.astro";
|
|
import {
|
|
IComponentConfigEx,
|
|
group_by_path,
|
|
group_path,
|
|
} from "@/model/component/component.jsmponent.js";
|
|
|
|
import "flowbite";
|
|
|
|
import {
|
|
I18N_SOURCE_LANGUAGE,
|
|
SHOW_3D_PREVIEW,
|
|
SHOW_FILES,
|
|
SHOW_GALLERY,
|
|
SHOW_RENDERINGS,
|
|
SHOW_LICENSE,
|
|
SHOW_DESCRIPTION,
|
|
SHOW_TABS,
|
|
SHOW_SPECS,
|
|
SHOW_DEBUG,
|
|
SHOW_SAMPLES,
|
|
SHOW_RESOURCES,
|
|
SHOW_CHECKOUT,
|
|
SHOW_README,
|
|
SHOW_RELATED,
|
|
DEFAULT_LICENSE,
|
|
isRTL,
|
|
} from "config/config.js";
|
|
|
|
const { frontmatter: item, ...rest } = Astro.props;
|
|
|
|
const content = await translate(
|
|
item.body || "",
|
|
I18N_SOURCE_LANGUAGE,
|
|
Astro.currentLocale,
|
|
);
|
|
const Body = createMarkdownComponent(content) as any;
|
|
|
|
const str_debug =
|
|
"```json\n" +
|
|
JSON.stringify(
|
|
{
|
|
...item,
|
|
config: null,
|
|
},
|
|
null,
|
|
2,
|
|
) +
|
|
"\n```";
|
|
|
|
const Content_Debug = await createMarkdownComponent(str_debug);
|
|
const view = "store";
|
|
const items = await getCollection(view); //.filter((i) => item.rel !== i.id);
|
|
//const group_id = group_path(item);
|
|
const others = await group_by_path(items, Astro.currentLocale);
|
|
---
|
|
|
|
<BaseLayout frontmatter={item} description={item.description} {...rest} class="">
|
|
<Wrapper>
|
|
<section>
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-2 just xl:grid-cols-2 gap-2 ">
|
|
<div class="flex flex-col gap-2 h-full justify-between">
|
|
<div>
|
|
<article class="markdown-content bg-white rounded-xl p-4">
|
|
<h1
|
|
class="text-neutral-500 font-semibold mb-2 text-2xl"
|
|
>
|
|
<span><Translate>{`${item.title}`}</Translate></span>
|
|
{
|
|
isRTL(Astro.currentLocale) && (
|
|
<div class="text-neutral-500 font-semibold mb-2">
|
|
"{item.title}"
|
|
</div>
|
|
)
|
|
}
|
|
</h1>
|
|
<Body />
|
|
</article>
|
|
</div>
|
|
|
|
<div class="gap-2 flex flex-col h-full justify-end">
|
|
|
|
{
|
|
SHOW_3D_PREVIEW &&
|
|
item.Preview3d &&
|
|
item.cad &&
|
|
item.cad[0] &&
|
|
item.cad[0][".html"] && (
|
|
<a
|
|
href={item.cad[0][".html"]}
|
|
title="link to your page"
|
|
aria-label="your label"
|
|
class="relative group overflow-hidden pl-4 h-14 flex space-x-6 items-center bg-white hover:bg-neutral-200 duration-300 rounded-xl w-full justify-between"
|
|
>
|
|
<span class="relative uppercase text-xs text-neutral-600">
|
|
<Translate>3D Preview</Translate>
|
|
</span>
|
|
<div
|
|
aria-hidden="true"
|
|
class="w-12 text-orange-600 transition duration-300 -translate-y-7 group-hover:translate-y-7"
|
|
>
|
|
<div class="h-14 flex">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="size-6 m-auto fill-white"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="h-14 flex">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="size-6 m-auto fill-white"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
{
|
|
SHOW_CHECKOUT && item.checkout && (
|
|
<a
|
|
href={item.checkout}
|
|
title="link to your page"
|
|
aria-label="your label"
|
|
class="relative group overflow-hidden pl-4 h-14 flex space-x-6 items-center bg-orange-500 hover:bg-black duration-300 rounded-xl w-full justify-between"
|
|
>
|
|
<span class="relative uppercase text-xs text-white">
|
|
<Translate>Add to cart</Translate>
|
|
</span>
|
|
<div
|
|
aria-hidden="true"
|
|
class="w-12 text-white transition duration-300 -translate-y-7 group-hover:translate-y-7"
|
|
>
|
|
<div class="h-14 flex">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="size-6 m-auto fill-white"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="h-14 flex">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="size-6 m-auto fill-white"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
</div>
|
|
{
|
|
SHOW_LICENSE && (
|
|
<div class="space-y-2">
|
|
<div class="bg-white rounded-xl p-4">
|
|
<h3 class="text-lg text-neutral-600 uppercase tracking-tight">
|
|
<Translate>License</Translate>
|
|
</h3>
|
|
<p class="text-neutral-500 mt-4 text-sm">
|
|
{item.license || DEFAULT_LICENSE}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
{
|
|
SHOW_RENDERINGS && (
|
|
<div
|
|
class="flex-1 h-full bg-white"
|
|
style="height: 100%; width: 100%;"
|
|
>
|
|
<GalleryK
|
|
images={item.assets.renderings}
|
|
gallerySettings={{ SHOW_TITLE: false }}
|
|
item={item}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
{
|
|
item.assets.showcase && item.assets.showcase.length > 0 && (
|
|
<section>
|
|
<div class="mb-2 md:mb-16 mt-0 md:mt-16 p-2 md:p-4 border-b border-gray-200 dark:border-gray-700 bg-white rounded-xl">
|
|
<GalleryK
|
|
images={item.assets.showcase}
|
|
lightboxSettings={{
|
|
SHOW_TITLE: false,
|
|
SHOW_DESCRIPTION: false,
|
|
SIZES_THUMB: "w-32 h-32",
|
|
}}
|
|
gallerySettings={{
|
|
SHOW_TITLE: false,
|
|
SHOW_DESCRIPTION: false,
|
|
}}
|
|
item={item}
|
|
/>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<section id="tabs-view">
|
|
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
|
|
<ul
|
|
class="flex flex-wrap -mb-px text-sm font-medium text-center"
|
|
id="default-styled-tab"
|
|
data-tabs-toggle="#default-styled-tab-content"
|
|
data-tabs-active-classes="text-orange-600 hover:text-orange-600 dark:text-purple-500 dark:hover:text-purple-500 border-orange-600 dark:border-purple-500"
|
|
data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
|
|
role="tablist"
|
|
>
|
|
{SHOW_README && item.readme && <TabButton title="Overview" />}
|
|
{SHOW_SPECS && <TabButton title="Specs" />}
|
|
{SHOW_GALLERY && <TabButton title="Gallery" />}
|
|
{SHOW_RESOURCES && <TabButton title="Resources" />}
|
|
{
|
|
SHOW_SAMPLES && item.assets.samples.length > 0 && (
|
|
<TabButton title="Samples" />
|
|
)
|
|
}
|
|
{SHOW_DEBUG && <TabButton title="Debug" />}
|
|
</ul>
|
|
</div>
|
|
<div id="default-styled-tab-content">
|
|
{SHOW_README && item.readme && <TabContent title="Overview" class="content">
|
|
{
|
|
(
|
|
<Readme markdown={item.readme} data={item} />
|
|
)
|
|
}
|
|
</TabContent>
|
|
}
|
|
{
|
|
SHOW_SPECS && (
|
|
<TabContent
|
|
title="Specs"
|
|
class="bg-white rounded-xl dark:bg-gray-800"
|
|
>
|
|
<Specs frontmatter={item} />
|
|
</TabContent>
|
|
)
|
|
}
|
|
{
|
|
SHOW_GALLERY && (
|
|
<TabContent title="Gallery" class="p-4 md:p-4 rounded-lg bg-white">
|
|
<GalleryK images={item.assets.gallery} item={item} />{" "}
|
|
</TabContent>
|
|
)
|
|
}
|
|
{
|
|
SHOW_SAMPLES && (
|
|
<TabContent
|
|
title="Samples"
|
|
class="p-4 bg-white rounded-xl dark:bg-gray-800"
|
|
>
|
|
<GalleryK images={item.assets.samples} item={item} />
|
|
</TabContent>
|
|
)
|
|
}
|
|
{
|
|
SHOW_RESOURCES && (
|
|
<TabContent
|
|
title="Resources"
|
|
class="p-4 bg-white rounded-xl dark:bg-gray-800"
|
|
>
|
|
<Resources frontmatter={item} />
|
|
</TabContent>
|
|
)
|
|
}
|
|
{
|
|
SHOW_DEBUG && (
|
|
<TabContent
|
|
title="Debug"
|
|
class="rounded-lg bg-white p-4 dark:bg-gray-800"
|
|
>
|
|
<Content_Debug />
|
|
</TabContent>
|
|
)
|
|
}
|
|
</div>
|
|
<script>
|
|
window.addEventListener("hashchange", () => {
|
|
const hash = window.location.hash.substring(1);
|
|
if (hash) {
|
|
const tabTrigger = document.querySelector(
|
|
`a[href="#${hash}"], a[data-tabs-target="#${hash}"]`,
|
|
);
|
|
if (tabTrigger) {
|
|
setTimeout(() => {
|
|
(tabTrigger as HTMLElement).click();
|
|
}, 100);
|
|
}
|
|
}
|
|
});
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const hash = window.location.hash;
|
|
if (hash) {
|
|
const tabTrigger = document.querySelector(
|
|
`a[href="${hash}"], a[data-tabs-target="${hash}"]`,
|
|
);
|
|
if (tabTrigger) {
|
|
setTimeout(() => {
|
|
(tabTrigger as HTMLElement).click();
|
|
}, 100);
|
|
}
|
|
}
|
|
document.querySelectorAll("a[data-tabs-target]").forEach((tab) => {
|
|
tab.addEventListener("click", () => {
|
|
const href = tab.getAttribute("href");
|
|
if (href) {
|
|
window.location.hash = href;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
<hr />
|
|
<h1 class="p-4 text-xs"> <Translate>Related</Translate>
|
|
</h1>
|
|
{
|
|
SHOW_RELATED && (
|
|
<section id="item_related" class="bg-blue-50 p-4 rounded-2xl">
|
|
{Object.keys(others).map((relKey) => (
|
|
<section>
|
|
<h4
|
|
aria-hidden="true"
|
|
class="text-xs p-4 text-neutral-500"
|
|
>
|
|
{relKey}
|
|
</h4>
|
|
<div class="grid sm:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 gap-8">
|
|
{others[relKey].map((post) => (
|
|
<StoreEntries
|
|
key={post.id}
|
|
url={`/${Astro.currentLocale}/${view}/${post.id}`}
|
|
title={post.data.title}
|
|
price={post.data.price}
|
|
type={post.data.type}
|
|
alt={post.data.title}
|
|
model={post.data}
|
|
selected={post.id === item.rel}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</section>
|
|
)
|
|
}
|
|
</Wrapper>
|
|
</BaseLayout>
|