Displaying /stores and /products for a store

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/Card.tsx

@@ -1,5 +1,6 @@
 import Tag from './Tag.astro';
 import type { SEO } from '../interfaces/Article';
+import { Fragment } from 'react';
 
 export interface Props {
   href?: string;
@@ -21,7 +22,7 @@ export default function Card({ href, frontmatter, tags, secHeading = true }: Pro
   const imageUrl = SEO?.socialImage?.url;
 
   return (
-    <li className="mb-8">
+    <li className="mb-8 w-full md:w-1/2 px-4">
       <article className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
         <a href={href} className="block group">
           {imageUrl && (
@@ -61,12 +62,15 @@ export default function Card({ href, frontmatter, tags, secHeading = true }: Pro
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5-5 5M6 7l5 5-5 5" />
               </svg>
             </div>
-            <ul>
-              {tags?.map((tag) => {
-                if (!tag) return null;
-                <Tag tag={tag || 'x'} size="sm" />
-              })}
-            </ul>
+            {/* <ul>
+              {
+                tags?.map((tag: string, index: number) => (
+                  <Fragment key={index}>
+                    {tag && <Tag tag={tag} size="sm" />}
+                  </Fragment>
+                ))
+              }
+            </ul> */}
           </div>
         </a>
       </article>

src/components/Footer.astro

@@ -15,8 +15,9 @@ const { activeNav, noMarginTop = false } = Astro.props;
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
   <Hr noPadding />
   <div class="footer-wrapper mb-10">
-    <Socials centered />
+    <br />
     <div class="copyright-wrapper">
+      <Socials centered />
       <span>Copyleft &#169; {currentYear}</span>
       <span class="separator">&nbsp;|&nbsp;</span>
       <span>Some rights reserved.</span>
@@ -26,6 +27,18 @@ const { activeNav, noMarginTop = false } = Astro.props;
           Pages
         </a>
       </span>
+      &nbsp;|&nbsp;
+      <span>
+        <a href="/stores/" class={activeNav === "stores" ? "active" : ""}>
+          Stores
+        </a>
+      </span>
+      &nbsp;|&nbsp;
+      <span>
+        <a href="/products/" class={activeNav === "products" ? "active" : ""}>
+          Products
+        </a>
+      </span>
     </div>
   </div>
 </footer>
@@ -49,4 +62,8 @@ const { activeNav, noMarginTop = false } = Astro.props;
   .separator {
     @apply hidden sm:inline;
   }
+
+  a.active {
+    color: red;
+  }
 </style>

src/components/Header.astro

@@ -8,7 +8,9 @@ export type activeNav = "tags" | "about" | "search" | "pages" | "blog";
 
 export interface Props {
   activeNav?: activeNav;
-  store?: Store;
+  store?: {
+    data: Store;
+  };
 }
 
 const { activeNav, store } = Astro.props;
@@ -20,14 +22,14 @@ const { activeNav, store } = Astro.props;
     <div class="top-nav-wrap">
       <a href="/" class="logo brand-magenta whitespace-nowrap">
         {
-          store?.Logo?.formats?.small ? (
+          store?.data?.Logo?.url ? (
             <img
-              src={`${store.Logo.formats.small.url}`}
-              alt={store.title}
+              src={`${store?.data?.Logo.url}`}
+              alt={store?.data?.title || store?.data?.SEO?.metaTitle}
               width={120}
             />
           ) : (
-            store?.title
+            store?.data?.title || store?.data?.SEO?.metaTitle || SITE.title
           )
         }
       </a>

src/components/LinkButton.astro

@@ -5,6 +5,7 @@ export interface Props {
   ariaLabel?: string;
   title?: string;
   disabled?: boolean;
+  target?: string;
 }
 
 const {
@@ -13,6 +14,7 @@ const {
   ariaLabel,
   title,
   disabled = false,
+  target = "_self",
 } = Astro.props;
 ---
 
@@ -32,6 +34,7 @@ const {
       class:list={["group inline-block hover:text-skin-accent", className]}
       aria-label={ariaLabel}
       title={title}
+      target={target}
     >
       <slot />
     </a>

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/components/Tag.astro

@@ -1,10 +1,10 @@
 ---
 export interface Props {
-  tag: string;
+  tag?: string;
   size?: "sm" | "lg";
 }
 
-const { tag, size = "sm" } = Astro.props;
+const { tag = "", size = "sm" } = Astro.props;
 ---
 
 <li
@@ -20,9 +20,11 @@ const { tag, size = "sm" } = Astro.props;
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class={`${size === "sm" ? " scale-75" : "scale-110"}`}
-      ><path
+    >
+      <path
         d="M16.018 3.815 15.232 8h-4.966l.716-3.815-1.964-.37L8.232 8H4v2h3.857l-.751 4H3v2h3.731l-.714 3.805 1.965.369L8.766 16h4.966l-.714 3.805 1.965.369.783-4.174H20v-2h-3.859l.751-4H21V8h-3.733l.716-3.815-1.965-.37zM14.106 14H9.141l.751-4h4.966l-.752 4z"
-      ></path>
+      >
+      </path>
     </svg>
     &nbsp;<span>{tag}</span>
   </a>

src/content/config.ts

@@ -6,21 +6,35 @@ import { strapiLoader } from "../lib/strapi-loader";
 
 const pages = defineCollection({
   loader: strapiLoader({
-    contentType: "page", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}`,
-    populate: 'SEO.socialImage,store'
+    contentType: "page",
+    filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}`,
+    populate: 'SEO.socialImage'
   }),
 
 });
 
 const stores = defineCollection({
-  loader: strapiLoader({ contentType: "store", filter: `filters[slug][$eq]=${markketplace.STORE_SLUG}` }),
+  loader: strapiLoader({
+    contentType: "store",
+    filter: `filters[active]=true`,
+    populate: 'SEO.socialImage,Logo,URLS'
+  }),
+});
+
+const products = defineCollection({
+  loader: strapiLoader({
+    contentType: "product",
+    filter: `filters[stores][slug][$eq]=${markketplace.STORE_SLUG}`,
+    populate: 'SEO.socialImage,Thumbnail,Slides'
+  }),
 });
 
 const posts = defineCollection({
   loader: strapiLoader({
-    contentType: "article", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}`,
+    contentType: "article",
+    filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}`,
     populate: 'SEO.socialImage,Tags,store'
   }),
 });
 
-export const collections = { posts, pages, stores };
+export const collections = { posts, pages, stores, products };

src/interfaces/Product.ts

@@ -5,5 +5,8 @@ export default interface Product {
   id: number;
   attributes: {
     Name: string;
+    SEO: {
+      metaTitle: string;
+    }
   }
-}
+}

src/interfaces/Store.ts

@@ -8,7 +8,10 @@ export default interface Store {
   slug: string;
   products: { data: [] };
   URLS: { Label: string, URL: string, }[];
-  SEO: {};
+  SEO: {
+    metaTitle: string,
+    metaDescription: string,
+  };
   Logo: {
     id: string,
     url: string,

src/layouts/Layout.astro

@@ -63,7 +63,6 @@ const stores = await getCollection("stores");
 const store = stores.find(
   store => store.data.slug == markketplace.STORE_SLUG
 )?.data;
-console.log({ store });
 ---
 
 <!doctype html>

src/layouts/PostDetails.astro

@@ -14,9 +14,12 @@ import HeroImage from "@components/HeroImage.astro";
 import { BlocksRenderer } from "@strapi/blocks-react-renderer";
 import { getCollection } from "astro:content";
 import type Store from "../interfaces/Store";
+import { markketplace } from "@config";
 
 const stores = await getCollection("stores");
-const store = stores?.[0]?.data as unknown as Store;
+const store = stores.find(
+  (store: Store) => store.data.slug === markketplace.STORE_SLUG
+);
 
 export interface Props {
   post: CollectionEntry<"posts">;

src/layouts/Posts.astro

@@ -8,9 +8,13 @@ import Pagination from "@components/Pagination.astro";
 import Card from "@components/Card";
 import { SITE } from "@config";
 import type Page from "@interfaces/Page";
-import { BlocksRenderer } from "@strapi/blocks-react-renderer";
+import {
+  BlocksRenderer,
+  type BlocksContent,
+} from "@strapi/blocks-react-renderer";
 import HeroImage from "@components/HeroImage.astro";
 import Hr from "@components/Hr.astro";
+import { markketplace } from "@config";
 
 export interface Props {
   currentPage: number;
@@ -23,7 +27,9 @@ import type Store from "../interfaces/Store";
 import { slugifyStr } from "@utils/slugify";
 
 const stores = await getCollection("stores");
-const store = stores?.[0]?.data as unknown as Store;
+const store = stores.find(
+  (store: Store) => store.data.slug === markketplace.STORE_SLUG
+);
 
 const { currentPage, totalPages, paginatedPosts } = Astro.props;
 
@@ -73,7 +79,7 @@ const blogPage: { data: Page } | undefined = pages.find(
             tags={data.Tags.map((tag: { Label: string }) => tag.Label)}
             frontmatter={{
               author: "x",
-              title: data.Title || "---",
+              title: data.Title || data.SEO?.metaTitle || "",
               pubDatetime: new Date(data.createdAt),
               modDatetime: new Date(data.updatedAt),
               description: data.SEO?.metaDescription || "",

src/pages/404.astro

@@ -6,9 +6,12 @@ import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
 import { getCollection } from "astro:content";
 import type Store from "../interfaces/Store";
+import { markketplace } from "@config";
 
 const stores = await getCollection("stores");
-const store = stores?.[0]?.data as unknown as Store;
+const store = stores.find(
+  (store: Store) => store.data.slug === markketplace.STORE_SLUG
+);
 ---
 
 <Layout title={`404 Not Found | ${SITE.title}`}>

src/pages/[slug].astro

@@ -11,6 +11,7 @@ import Header, { type activeNav } from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Breadcrumbs from "@components/Breadcrumbs.astro";
 import Hr from "@components/Hr.astro";
+import { markketplace } from "@config";
 
 export interface Props {
   page: CollectionEntry<"pages">;
@@ -26,7 +27,9 @@ export async function getStaticPaths() {
 }
 
 const stores = await getCollection("stores");
-const store = stores?.[0]?.data as unknown as Store;
+const store = stores.find(
+  (store: Store) => store.data.slug === markketplace.STORE_SLUG
+);
 
 const { page } = Astro.props;
 ---