dizplaying tags page

src/components/Footer.astro

@@ -6,7 +6,7 @@ const currentYear = new Date().getFullYear();
 
 export interface Props {
   noMarginTop?: boolean;
-  activeNav: string;
+  activeNav?: string;
 }
 
 const { activeNav, noMarginTop = false } = Astro.props;

src/interfaces/Store.ts

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

src/layouts/TagPosts.astro

@@ -6,13 +6,15 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Card from "@components/Card";
 import Pagination from "@components/Pagination.astro";
-import { SITE } from "@config";
+import { SITE, markketplace } from "@config";
 import { getCollection } from "astro:content";
 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: { data: Store }) => store.data.slug === markketplace.STORE_SLUG
+)?.data;
 
 export interface Props {
   currentPage: number;
@@ -22,7 +24,13 @@ export interface Props {
   tagName: string;
 }
 
-const { currentPage, totalPages, paginatedPosts, tag, tagName } = Astro.props;
+const {
+  currentPage,
+  totalPages,
+  paginatedPosts,
+  tag = "all",
+  tagName,
+} = Astro.props;
 ---
 
 <Layout title={`Tag: ${tagName} | ${SITE.title}`}>
@@ -38,9 +46,9 @@ const { currentPage, totalPages, paginatedPosts, tag, tagName } = Astro.props;
         paginatedPosts.map(({ data, id }) => (
           <Card
             href={`/posts/${id}-${slugifyStr(data.Title)}`}
+            tags={data.Tags.map((tag: { Label: string }) => tag.Label)}
             frontmatter={{
               author: "x",
-              tags: data.Tags.map(tag => tag.Label),
               title: data.Title,
               pubDatetime: new Date(data.createdAt),
               modDatetime: new Date(data.updatedAt),

src/pages/search.astro

@@ -29,5 +29,5 @@ const searchList = posts.map(({ data, id }) => ({
   <Main pageTitle="Search" pageDesc="Search any article ...">
     <SearchBar client:load searchList={searchList} />
   </Main>
-  <Footer />
+  <Footer activeNav="search" />
 </Layout>

src/pages/tags/[tag]/[page].astro

@@ -8,22 +8,38 @@ import getPagination from "@utils/getPagination";
 
 export interface Props {
   post: CollectionEntry<"posts">;
-  tag: string;
+  tag?: string;
   tagName: string;
 }
 
 export async function getStaticPaths() {
   const posts = await getCollection("posts");
-
   const tags = getUniqueTags(posts);
 
+  // Handle case with no tags
+  if (!tags.length) {
+    return [
+      {
+        params: { tag: "all", page: "1" },
+        props: { tag: "all", tagName: "All Posts", page: "1" },
+      },
+    ];
+  }
+
   return tags.flatMap(({ tag, tagName }) => {
     const tagPosts = getPostsByTag(posts, tag);
     const totalPages = getPageNumbers(tagPosts.length);
 
-    return totalPages.map(page => ({
-      params: { tag, page },
-      props: { tag, tagName },
+    return totalPages.map(pageNum => ({
+      params: {
+        tag: tag || "all",
+        page: String(pageNum),
+      },
+      props: {
+        tag,
+        tagName,
+        page: String(pageNum),
+      },
     }));
   });
 }
@@ -33,12 +49,12 @@ const { tag, tagName } = Astro.props;
 
 const posts = await getCollection("posts");
 
-const postsByTag = getPostsByTag(posts, tag);
+const postsByTag = getPostsByTag(posts, tag || "all");
 
 const pagination = getPagination({
   posts: postsByTag,
   page,
 });
 ---
 
-<TagPosts {...pagination} {tag} {tagName} />
+<TagPosts {...pagination} tag={tag || "all"} tagName={tagName || "all"} />

src/pages/tags/[tag]/index.astro

@@ -7,15 +7,22 @@ import getUniqueTags from "@utils/getUniqueTags";
 
 export async function getStaticPaths() {
   const posts = await getCollection("posts");
-
   const tags = getUniqueTags(posts);
 
-  return tags.map(({ tag, tagName }) => {
-    return {
-      params: { tag },
-      props: { tag, tagName, posts },
-    };
-  });
+  // Add default "all" tag
+  const allTags = [
+    { tag: "all", tagName: "All Posts" },
+    ...tags.filter(tag => tag.tag && tag.tag.length > 0), // Filter out empty tags
+  ];
+
+  return allTags.map(({ tag, tagName }) => ({
+    params: { tag: tag || "all" }, // Ensure tag is never empty
+    props: {
+      tag: tag || "all",
+      tagName: tagName || "All Posts",
+      posts: tag === "all" ? posts : getPostsByTag(posts, tag),
+    },
+  }));
 }
 
 const { tag, tagName, posts } = Astro.props;

src/utils/getPostsByTag.ts

@@ -3,7 +3,7 @@ import { slugifyStr } from "./slugify";
 
 const getPostsByTag = (posts: CollectionEntry<"posts">[], tag: string) =>
   posts.filter(post => {
-    const tags = post.data.Tags.map(tag => slugifyStr(tag.Label));
+    const tags = post.data.Tags.map((post_tag: { Label: string }) => slugifyStr(post_tag.Label));
     return tags.includes(tag);
   })