slides in the product description page

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

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;
+---
+
+<div class="relative mx-auto w-full max-w-4xl">
+  <div class="flex space-x-4 overflow-x-scroll">
+    {
+      slides.map((slide: Slide) => (
+        <Fragment>
+          <div class="md:w-1/2 lg:w-1/3 w-full flex-shrink-0">
+            <img
+              src={slide.url}
+              alt={slide.alternativeText || slide.name}
+              width={slide.width}
+              height={slide.height}
+              class="rounded-lg object-cover shadow-lg"
+            />
+            {slide.caption && (
+              <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                {slide.caption}
+              </p>
+            )}
+          </div>
+        </Fragment>
+      ))
+    }
+  </div>
+</div>

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'
   }),
 });
 

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 });
+---
+
+<Layout
+  title={`Product | ${product?.data?.title}`}
+  meta={{
+    title: `Markkët Product | ${product?.data?.title}`,
+    description:
+      product?.data?.SEO?.metaDescription || store?.data?.Description,
+  }}
+>
+  <Header activeNav="pages" store={store} />
+  <main id="main-content">
+    <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+      {
+        store?.data?.SEO?.socialImage && (
+          <HeroImage
+            image={product?.data?.Thumbnail}
+            title={product?.data?.Name}
+          />
+        )
+      }
+      <h1 class="text-2xl tracking-wider sm:text-3xl">
+        {product?.data?.Name}
+      </h1>
+      <div set:html={htmlDescription} />
+      <Hr />
+      {
+        product?.data?.Slides?.length > 0 && (
+          <section class="my-10">
+            <h2 class="mb-4 text-xl font-bold">Product Images</h2>
+            <Slides slides={product?.data?.Slides} />
+          </section>
+        )
+      }
+      <button
+        class="brand-yellow bg-accent-600 mt-6 rounded-lg px-4 py-2 text-white hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2"
+        disabled
+      >
+        Coming Soon
+      </button>
+    </section>
+  </main>
+
+  <Pagination
+    {currentPage}
+    {totalPages}
+    prevUrl={`/blog${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}/`}
+    nextUrl={`/blog/${currentPage + 1}/`}
+  />
+
+  <Footer noMarginTop={totalPages > 1} activeNav="x" />
+</Layout>

src/pages/products/index.astro

@@ -17,7 +17,7 @@ export interface Props {
 }
 
 import { getCollection } from "astro:content";
-import type Store from "../interfaces/Store";
+import type Store from "@interfaces/Store";
 import { slugifyStr } from "@utils/slugify";
 import { markketplace } from "@config";
 
@@ -28,8 +28,6 @@ const store = stores.find(
 
 const products = await getCollection("products");
 
-console.log({ products });
-
 const { currentPage, totalPages } = Astro.props;
 ---
 
@@ -66,7 +64,7 @@ const { currentPage, totalPages } = Astro.props;
       {
         products.map(({ data }) => (
           <Card
-            href={`/store/${data.slug || slugifyStr(data.Name)}`}
+            href={`/products/${data.slug || slugifyStr(data.Name)}`}
             tags={[]}
             frontmatter={{
               author: "x",
@@ -76,7 +74,7 @@ const { currentPage, totalPages } = Astro.props;
               description: data.SEO?.metaDescription || data.Description || "",
               SEO: {
                 ...data.SEO,
-                metaTitle: data.SEO?.metaTitle || data.title || "Store",
+                metaTitle: data.SEO?.metaTitle || data.Name || "Store",
                 socialImage: {
                   url: data.SEO?.socialImage?.url || data.Thumbnail?.url,
                 },

src/styles/base.css

@@ -165,9 +165,21 @@ prose-code: rounded prose-code:bg-skin-card prose-code:bg-opacity-75 prose-code:
     color: #fbda0d !important;
   }
 
+
   .brand-blue {
     color: #0157ad;
   }
+/*** Buttons ***/
+button.brand-yellow {
+  border: 1px solid;
+  border-color: #fbda0d !important;
+}
+
+button.brand-yellow:hover {
+  color: #0157ad !important;
+  background-color: white;
+  border-color: #0157ad !important;
+}
 }
 
 @layer components {