Gernated pages dynamically

calimania · Oct 30, 2024 · e79ea0a · e79ea0a
1 parent 6c1365b
commit e79ea0a
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 137 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -16,9 +16,9 @@ const { noMarginTop = false } = Astro.props;
   <div class="footer-wrapper">
     <Socials centered />
     <div class="copyright-wrapper">
-      <span>Copyright &#169; {currentYear}</span>
+      <span>Copyleft &#169; {currentYear}</span>
       <span class="separator">&nbsp;|&nbsp;</span>
-      <span>All rights reserved.</span>
+      <span>Some rights reserved.</span>
     </div>
   </div>
 </footer>

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,11 +1,9 @@
-import { SITE, markketplace } from "@config";
-import { defineCollection, z } from "astro:content";
+import { markketplace } from "@config";
+import { defineCollection } from "astro:content";
 
 import { strapiLoader } from "../lib/strapi-loader";
 
-// Define the Strapi posts collection
-// This sets up a custom loader for Strapi content
-const strapiPosts = defineCollection({
+const posts = defineCollection({
   loader: strapiLoader({ contentType: "article", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}` }),
 });
 
@@ -17,26 +15,4 @@ const stores = defineCollection({
   loader: strapiLoader({ contentType: "store", filter: `filters[slug][$eq]=${markketplace.STORE_SLUG}` }),
 });
 
-const blog = defineCollection({
-  type: "content",
-  schema: ({ image }) =>
-    z.object({
-      author: z.string().default(SITE.author),
-      pubDatetime: z.date(),
-      modDatetime: z.date().optional().nullable(),
-      title: z.string(),
-      featured: z.boolean().optional(),
-      draft: z.boolean().optional(),
-      tags: z.array(z.string()).default(["others"]),
-      ogImage: image()
-        .refine(img => img.width >= 1200 && img.height >= 630, {
-          message: "OpenGraph image must be at least 1200 X 630 pixels!",
-        })
-        .or(z.string())
-        .optional(),
-      description: z.string(),
-      canonicalURL: z.string().optional(),
-    }),
-});
-
-export const collections = { blog, strapiPosts, pages, stores };
+export const collections = { posts, pages, stores };
diff --git a/src/interfaces/Page.ts b/src/interfaces/Page.ts
@@ -26,6 +26,10 @@ export default interface Page {
       }
     }
   },
+  SEO: {
+    metaDescription: string,
+    metaTitle: string,
+  },
   createdAt: string;
   updatedAt: string;
   publishedAt: string;

diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -0,0 +1,5 @@
+import type Store from './Store';
+import type Page from './Page';
+import type Product from './Product';
+
+export type { Store, Page, Product };
diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
@@ -0,0 +1,48 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import type { Page, Store } from "@interfaces/index";
+import {
+  BlocksRenderer,
+  type BlocksContent,
+} from "@strapi/blocks-react-renderer";
+import Layout from "@layouts/Layout.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Breadcrumbs from "@components/Breadcrumbs.astro";
+import Hr from "@components/Hr.astro";
+
+export interface Props {
+  page: CollectionEntry<"page">;
+}
+
+export async function getStaticPaths() {
+  const pages = await getCollection("pages");
+
+  return pages.map((page: { data: CollectionEntry<"page"> }) => ({
+    params: { slug: page.data.slug },
+    props: { page: page.data },
+  }));
+}
+
+const stores = await getCollection("stores");
+const store = stores?.[0]?.data as unknown as Store;
+
+const { page } = Astro.props;
+---
+
+<Layout>
+  <Header store={store} activeNav={page.slug} />
+
+  <Breadcrumbs />
+  <main id="main-content">
+    <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+      <h1 class="text-2xl tracking-wider sm:text-3xl">{page.Title}</h1>
+    </section>
+
+    <section class="">
+      <BlocksRenderer content={page?.Content || ([] as BlocksContent[])} />
+    </section>
+    <Hr />
+  </main>
+</Layout>
+<Footer />
diff --git a/src/pages/about.astro b/src/pages/about.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,7 +6,6 @@ import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import Socials from "@components/Socials.astro";
-import getSortedPosts from "@utils/getSortedPosts";
 import { SITE, SOCIALS } from "@config";
 import { getCollection } from "astro:content";
 import type Store from "../interfaces/Store";
@@ -15,27 +14,23 @@ import {
   BlocksRenderer,
   type BlocksContent,
 } from "@strapi/blocks-react-renderer";
+import { slugifyStr } from "@utils/slugify";
 
 const stores = await getCollection("stores");
 const store = stores?.[0]?.data as unknown as Store;
 
-const posts = await getCollection("blog");
-
-const sortedPosts = getSortedPosts(posts);
-
-const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
-const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
+const posts = await getCollection("posts");
 
 const socialCount = SOCIALS.filter(social => social.active).length;
 
 const pages = await getCollection("pages");
+
 const homePage = pages.find(
-  page => (page as unknown as { data: Page }).data.slug === "home"
+  (page: { data: Page }) => page.data.slug === "home"
 ) as unknown as { data: Page };
 
 const links = store?.Links || [];
-const products = store?.products?.data || [];
-
+// const products = store?.products?.data || [];
 ---
 
 <Layout>
@@ -64,10 +59,7 @@ const products = store?.products?.data || [];
 
       <p>
         <strong>
-          {
-            store?.Description ||
-              "A simple and minimal Markketplace theme."
-          }
+          {store?.Description || "A simple and minimal Markketplace theme."}
         </strong>
       </p>
       {
@@ -79,14 +71,14 @@ const products = store?.products?.data || [];
           />
         )
       }
-      </section>
-      <section class="">
-        <BlocksRenderer
-          content={homePage?.data?.Content || ([] as BlocksContent[])}
-        />
-      </section>
-      <Hr />
-      <section>
+    </section>
+    <section class="">
+      <BlocksRenderer
+        content={homePage?.data?.Content || ([] as BlocksContent[])}
+      />
+    </section>
+    <Hr />
+    <section>
       {
         links && links.length > 0 && (
           <div class="mb-12 mt-6">
@@ -105,7 +97,7 @@ const products = store?.products?.data || [];
         )
       }
 
-      {
+      <!-- {
         products && products.length > 0 && (
           <div class="mb-12 mt-6">
             <h2>Products</h2>
@@ -123,19 +115,9 @@ const products = store?.products?.data || [];
             )}
           </div>
         )
-      }
+      } -->
 
-      <!-- <p>
-        Read the blog posts or check
-        <LinkButton
-          className="underline decoration-dashed underline-offset-4 hover:text-skin-accent"
-          href="https://github.com/satnaing/astro-paper#readme"
-        >
-          README
-        </LinkButton> for more info.
-      </p> -->
       {
-        // only display if at least one social link is enabled
         socialCount > 0 && (
           <div class="social-wrapper">
             <div class="social-links">Social Links:</div>
@@ -147,54 +129,54 @@ const products = store?.products?.data || [];
 
     <Hr />
 
-    <section class="pt-10 mb-10">
-      <p>
-        <LinkButton
-          className="underline decoration-dashed underline-offset-4 hover:text-skin-accent"
-          href="http://github.com/calimania/markketplace-astro"
-        >
-          Built with Markketplace-astro -
-        </LinkButton>
-         a minimal, responsive, accessible and SEO-friendly Astro blog theme, compatible
-        with Markketplace/Strapi. This theme follows best practices and provides
-        accessibility out of the box. Light and dark mode are supported by default.
-        Moreover, additional color schemes can also be configured.
-      </p>
-    </section>
-
     <Hr />
 
     {
-      featuredPosts.length > 0 && (
+      pages.length > 0 && (
         <>
           <section id="featured">
-            <h2>Featured</h2>
+            <h2>Pages</h2>
             <ul>
-              {featuredPosts.map(({ data, slug }) => (
+              {pages.map(page => (
                 <Card
-                  href={`/posts/${slug}/`}
-                  frontmatter={data}
+                  href={`/${page.data.slug}/`}
+                  frontmatter={{
+                    author: "x",
+                    tags: ["x"],
+                    title: page.data.Title,
+                    pubDatetime: new Date(page.data.createdAt),
+                    modDatetime: new Date(page.data.updatedAt),
+                    description: page.data.SEO?.metaDescription || "",
+                  }}
                   secHeading={false}
                 />
               ))}
             </ul>
           </section>
-          {recentPosts.length > 0 && <Hr />}
+          {posts.length > 0 && <Hr />}
         </>
       )
     }
 
     {
-      recentPosts.length > 0 && (
+      posts.length > 0 && (
         <section id="recent-posts">
           <h2>Recent Posts</h2>
           <ul>
-            {recentPosts.map(
-              ({ data, slug }, index) =>
+            {console.log({ posts: posts[0].data })}
+            {posts.map(
+              ({ data, id }, index) =>
                 index < SITE.postPerIndex && (
                   <Card
-                    href={`/posts/${slug}/`}
-                    frontmatter={data}
+                    href={`/posts/${id}/${slugifyStr(data.Title)}`}
+                    frontmatter={{
+                      author: "x",
+                      tags: ["aa"],
+                      title: data.Title,
+                      pubDatetime: new Date(data.createdAt),
+                      modDatetime: new Date(data.updatedAt),
+                      description: data.SEO?.metaDescription || "",
+                    }}
                     secHeading={false}
                   />
                 )
@@ -215,6 +197,21 @@ const products = store?.products?.data || [];
         </svg>
       </LinkButton>
     </div>
+
+    <section class="mb-10 pt-10">
+      <p>
+        <LinkButton
+          className="underline decoration-dashed underline-offset-4 hover:text-skin-accent"
+          href="http://github.com/calimania/markketplace-astro"
+        >
+          Built with Markketplace-astro -
+        </LinkButton>
+        a minimal, responsive, accessible and SEO-friendly Astro blog theme, compatible
+        with Markketplace/Strapi. This theme follows best practices and provides
+        accessibility out of the box. Light and dark mode are supported by default.
+        Moreover, additional color schemes can also be configured.
+      </p>
+    </section>
   </main>
 
   <Footer />

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,7 +11,12 @@
       "@layouts/*": ["layouts/*"],
       "@pages/*": ["pages/*"],
       "@styles/*": ["styles/*"],
-      "@utils/*": ["utils/*"]
+      "@utils/*": [
+        "utils/*"
+      ],
+      "@interfaces/*": [
+        "interfaces/*"
+      ]
     }
   }
 }