diff --git a/package-lock.json b/package-lock.json index 7eec1c8..b743ed7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "astro": "5.0.0-beta.5", "fuse.js": "^7.0.0", "github-slugger": "^2.0.0", + "marked": "^15.0.3", "remark-collapse": "^0.1.2", "remark-toc": "^9.0.0", "satori": "^0.10.14", @@ -6179,6 +6180,17 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/marked": { + "version": "15.0.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.3.tgz", + "integrity": "sha512-Ai0cepvl2NHnTcO9jYDtcOEtVBNVYR31XnEA3BndO7f5As1wzpcOceSUM8FDkNLJNIODcLpDTWay/qQhqbuMvg==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/mdast-util-definitions": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz", diff --git a/package.json b/package.json index 9c2bd4e..fe3d84f 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "astro": "5.0.0-beta.5", "fuse.js": "^7.0.0", "github-slugger": "^2.0.0", + "marked": "^15.0.3", "remark-collapse": "^0.1.2", "remark-toc": "^9.0.0", "satori": "^0.10.14", diff --git a/src/components/Slides.astro b/src/components/Slides.astro new file mode 100644 index 0000000..9c0bd3d --- /dev/null +++ b/src/components/Slides.astro @@ -0,0 +1,40 @@ +--- +import { Fragment } from "react"; + +interface Slide { + id: number; + name: string; + alternativeText: string | null; + caption: string | null; + width: number; + height: number; + url: string; +} + +const { slides } = Astro.props; +--- + +
+
+ { + slides.map((slide: Slide) => ( + +
+ {slide.alternativeText + {slide.caption && ( +

+ {slide.caption} +

+ )} +
+ + )) + } +
+
diff --git a/src/content/config.ts b/src/content/config.ts index a04d1b7..c96c7a3 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -25,7 +25,7 @@ const products = defineCollection({ loader: strapiLoader({ contentType: "product", filter: `filters[stores][slug][$eq]=${markketplace.STORE_SLUG}`, - populate: 'SEO.socialImage' + populate: 'SEO.socialImage,Thumbnail,Slides' }), }); diff --git a/src/pages/products/[slug].astro b/src/pages/products/[slug].astro new file mode 100644 index 0000000..f585e3f --- /dev/null +++ b/src/pages/products/[slug].astro @@ -0,0 +1,102 @@ +--- +import type { CollectionEntry } from "astro:content"; +import Layout from "@layouts/Layout.astro"; +import Main from "@layouts/Main.astro"; +import Header from "@components/Header.astro"; +import Footer from "@components/Footer.astro"; +import Pagination from "@components/Pagination.astro"; +// import Card from "@components/Card"; +import { markketplace, SITE } from "@config"; +import HeroImage from "@components/HeroImage.astro"; +import Hr from "@components/Hr.astro"; +import Slides from "@components/Slides.astro"; + +import { marked } from "marked"; + +import { getCollection } from "astro:content"; +import type Store from "@interfaces/Store"; +import { slugifyStr } from "@utils/slugify"; +import type Product from "@interfaces/Product"; + +export interface Props { + currentPage: number; + totalPages: number; + stores: CollectionEntry<"stores">[]; + product?: Product; +} + +export async function getStaticPaths() { + const products = await getCollection("products"); + + const productsResult = products.map((product: { data: Product }) => ({ + params: { + slug: `${product.data.slug || slugifyStr(product.data.Name)}`, + }, + props: { product: product }, + })); + + return [...productsResult]; +} + +const { currentPage, totalPages, product } = Astro.props; + +const stores = await getCollection("stores"); +const store = stores.find( + (store: { data: Store }) => store.data.slug == markketplace.STORE_SLUG +); + +const htmlDescription = marked.parse(product?.data?.Description); + +console.log({ product, slide: product.data.Slides, t: product.data.Thumbnail }); +--- + + +
+
+
+ { + store?.data?.SEO?.socialImage && ( + + ) + } +

+ {product?.data?.Name} +

+
+
+ { + product?.data?.Slides?.length > 0 && ( +
+

Product Images

+ +
+ ) + } + +
+
+ + + +