Misc improvements to blog posts & events

src/components/Footer.astro

@@ -12,14 +12,16 @@ export interface Props {
 const { activeNav, noMarginTop = false } = Astro.props;
 ---
 
-<footer class={`${noMarginTop ? "" : "mt-auto"} bg-skin-card dark:bg-skin-fill`}>
+<footer
+  class={`${noMarginTop ? "" : "mt-auto"} bg-skin-card dark:bg-skin-fill`}
+>
   <Hr noPadding />
   <div class="footer-wrapper">
     <br />
     <div class="copyright-wrapper">
       <Socials centered />
       <span>Copyleft &#169; {currentYear}</span>
-      <span class="separator">&nbsp;|&nbsp;</span>
+      <span class="separator">&nbsp;</span>
       <span>Some rights reserved.</span>
       &nbsp;|&nbsp;
       <span>
@@ -28,12 +30,6 @@ const { activeNav, noMarginTop = false } = Astro.props;
         </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

src/layouts/PostDetails.astro

@@ -59,6 +59,18 @@ const layoutProps = {
 };
 ---
 
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const links = document.querySelectorAll("a");
+    links.forEach(link => {
+      if (!link.href?.startsWith(window.location.origin)) {
+        link.setAttribute("rel", "noopener noreferrer");
+        link.setAttribute("target", "_blank");
+      }
+    });
+  });
+</script>
+
 <Layout {...layoutProps}>
   <Header store={store} />
 

src/layouts/Posts.astro

@@ -59,11 +59,17 @@ const blogPage: { data: Page } | undefined = pages.find(
         )
       }
       <h1 class="text-2xl tracking-wider sm:text-3xl">
-        {blogPage?.data?.Title}
+        {blogPage?.data?.Title || "Blog Posts"}
       </h1>
-      <BlocksRenderer
-        content={blogPage?.data?.Content || ([] as BlocksContent[])}
-      />
+      {
+        blogPage?.data?.Content ? (
+          <BlocksRenderer
+            content={blogPage?.data?.Content || ([] as BlocksContent[])}
+          />
+        ) : (
+          "Articles by our contributors"
+        )
+      }
     </section>
     <Hr />
   </main>

src/pages/stores/index.astro

@@ -9,6 +9,10 @@ import Card from "@components/Card";
 import { SITE } from "@config";
 import HeroImage from "@components/HeroImage.astro";
 import Hr from "@components/Hr.astro";
+import {
+  BlocksRenderer,
+  type BlocksContent,
+} from "@strapi/blocks-react-renderer";
 
 export interface Props {
   currentPage: number;
@@ -17,7 +21,8 @@ export interface Props {
 }
 
 import { getCollection } from "astro:content";
-import type Store from "../interfaces/Store";
+import type Store from "@interfaces/Store";
+import type Page from "@interfaces/Page";
 import { slugifyStr } from "@utils/slugify";
 import { markketplace } from "@config";
 
@@ -27,30 +32,50 @@ const store = stores.find(
 );
 
 const { currentPage, totalPages } = Astro.props;
+
+const pages = await getCollection("pages");
+const StorePage: { data: Page } | undefined = pages.find(
+  (page: { data: Page }) => page.data.slug === "stores"
+);
+console.log({ StorePage });
 ---
 
 <Layout
   title={`Posts | ${SITE.title}`}
   meta={{
-    title: "Stores",
-    description: "Meet other stores in our markketplace",
+    title: StorePage?.data?.SEO?.metaTitle || "Stores",
+    description:
+      StorePage?.data?.SEO?.metaDescription ||
+      "Check out the stores in this markkët instance.",
   }}
 >
   <Header activeNav="pages" store={store} />
   <main id="main-content">
-    <section id="about" class="mb-10 max-w-3xl mt-4 prose-img:border-0">
+    <section id="about" class="mb-10 mt-4 max-w-3xl prose-img:border-0">
       {
         store?.data?.SEO?.socialImage && (
           <HeroImage
-            image={store?.data?.SEO?.socialImage}
-            title={store?.data?.title}
+            image={
+              StorePage?.data?.SEO?.socialImage || store?.data?.SEO?.socialImage
+            }
+            title={StorePage?.data?.Title || store?.data?.title}
           />
         )
       }
       <h1 class="text-2xl tracking-wider sm:text-3xl">
-        {store?.data?.title}
+        {StorePage?.data?.Title || store?.data?.title}
       </h1>
-      <p>{store?.data.Description}</p>
+      <div class="mb-5 mt-5">
+        {
+          StorePage?.data?.Content ? (
+            <BlocksRenderer
+              content={StorePage?.data?.Content || ([] as BlocksContent[])}
+            />
+          ) : (
+            "Articles by our contributors"
+          )
+        }
+      </div>
     </section>
     <Hr />
   </main>

src/pages/tags/index.astro

@@ -9,6 +9,11 @@ import { SITE } from "@config";
 import { getCollection } from "astro:content";
 import type Store from "@interfaces/Store";
 import { markketplace } from "@config";
+import HeroImage from "@components/HeroImage.astro";
+import {
+  BlocksRenderer,
+  type BlocksContent,
+} from "@strapi/blocks-react-renderer";
 
 const stores = await getCollection("stores");
 const store: { data: Store } | undefined = stores?.find(
@@ -19,16 +24,55 @@ const posts = await getCollection("posts");
 
 let tags = getUniqueTags(posts);
 
-//  { id: 3, Label: 'Company', Color: 'Magenta' } ] }
-// from posts.Tags
+const pages = await getCollection("pages");
+const TagsPage = pages.find(
+  (page: { data: { title: string } }) => page.data.slug === "tags"
+);
+
+const pageTitle = TagsPage?.data.Title || "Tags";
+const pageDesc =
+  TagsPage?.data?.SEO?.metaDescription || "All the tags used in posts.";
 ---
 
-<Layout title={`Tags | ${SITE.title}`}>
+<Layout
+  title={`Tags | ${SITE.title}`}
+  meta={{
+    title: TagsPage?.data?.SEO?.metaTitle || "Blog",
+    image: TagsPage?.data?.SEO?.socialImage?.url || "",
+    description: TagsPage?.data?.SEO?.metaDescription || "",
+  }}
+>
   <Header activeNav="tags" store={store} />
-  <Main pageTitle="Tags" pageDesc="All the tags used in posts.">
+  <Main pageTitle={pageTitle} pageDesc={pageDesc}>
+    <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+      {
+        TagsPage?.data?.SEO?.socialImage && (
+          <HeroImage
+            image={TagsPage?.data?.SEO?.socialImage}
+            title={TagsPage?.data?.Title}
+          />
+        )
+      }
+    </section>
     <ul>
       {tags.map(({ tag }) => tag && <Tag {tag} size="lg" />)}
     </ul>
+    <div class="mb-5 mt-5">
+      <p class="text-sm text-gray-500">
+        {tags.length} tags found.
+      </p>
+    </div>
+    <div class="mb-5 mt-5">
+      {
+        TagsPage?.data?.Content ? (
+          <BlocksRenderer
+            content={TagsPage?.data?.Content || ([] as BlocksContent[])}
+          />
+        ) : (
+          "Articles by our contributors"
+        )
+      }
+    </div>
   </Main>
   <Footer />
 </Layout>