From 4024d2c05cb0efc65ed2e30489fe0d0f79f290c1 Mon Sep 17 00:00:00 2001
From: Stan Girard <girard.stanislas@gmail.com>
Date: Mon, 23 Oct 2023 22:00:42 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20blog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

added link to rollback
---
 .../pages/blog/{[id] => [slug]}/index.tsx     | 23 ++++++++----
 frontend/pages/blog/index.tsx                 | 36 +++++++++++--------
 2 files changed, 38 insertions(+), 21 deletions(-)
 rename frontend/pages/blog/{[id] => [slug]}/index.tsx (85%)

diff --git a/frontend/pages/blog/[id]/index.tsx b/frontend/pages/blog/[slug]/index.tsx
similarity index 85%
rename from frontend/pages/blog/[id]/index.tsx
rename to frontend/pages/blog/[slug]/index.tsx
index 3eebc7a24..cf4c3dab9 100644
--- a/frontend/pages/blog/[id]/index.tsx
+++ b/frontend/pages/blog/[slug]/index.tsx
@@ -41,6 +41,7 @@ type BlogPostAttributes = {
   createdAt: string;
   updatedAt: string;
   publishedAt: string;
+  slug: string;
   seo: SeoAttributes;
 };
 
@@ -56,7 +57,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
       throw new Error('Network response was not ok');
     }
     const data: { data: BlogPost[] } = await response.json();
-    const paths = data.data.map(post => ({ params: { id: post.id.toString() } }));
+    const paths = data.data.map(post => ({ params: { slug: post.attributes.slug } }));
 
     return {
       paths,
@@ -71,14 +72,21 @@ export const getStaticPaths: GetStaticPaths = async () => {
   }
 };
 
-export const getStaticProps = async (context: { params: { id: string } }) => {
+export const getStaticProps = async (context: { params: { slug: string } }) => {
   try {
-    const response = await fetch(`https://cms.quivr.app/api/blogs/${context.params.id}?populate=seo,seo.metaImage`);
-    const data: { data: BlogPost } = await response.json();
+    const response = await fetch(`https://cms.quivr.app/api/blogs?slug=${context.params.slug}&populate=seo,seo.metaImage`);
+    const data: { data: BlogPost[] } = await response.json();
+
+    // Find the blog post with the exact slug match
+    const blogPost = data.data.find(post => post.attributes.slug === context.params.slug);
+
+    if (!blogPost) {
+      throw new Error('No blog post found for the provided slug');
+    }
 
     return {
       props: {
-        post: data.data,
+        post: blogPost,
       },
     };
   } catch (error) {
@@ -107,10 +115,11 @@ const BlogPostDetail = ({ post }: InferGetStaticPropsType<typeof getStaticProps>
       <header className="bg-white text-zinc-900 py-4 border-b">
         <div className="container mx-auto px-4 md:px-6">
           <nav className="flex items-center justify-between">
-            <div className="text-2xl font-bold">Quivr - Blog</div>
+            <Link href="/blog">
+              <div className="text-2xl font-bold cursor-pointer">Quivr</div>
+            </Link>
             <div className="space-x-4">
               <Link className="text-zinc-900 hover:text-zinc-700" href="https://quivr.app">Try Quivr</Link>
-              <Link className="text-zinc-900 hover:text-zinc-700" href="/blog">Blog</Link>
             </div>
           </nav>
         </div>
diff --git a/frontend/pages/blog/index.tsx b/frontend/pages/blog/index.tsx
index d4e717060..0f28ddada 100644
--- a/frontend/pages/blog/index.tsx
+++ b/frontend/pages/blog/index.tsx
@@ -12,8 +12,11 @@ type BlogPostAttributes = {
   imageUrl: string;
   title: string;
   description: string;
+  slug: string;
+  publishedAt: string;
   seo: {
     metaTitle: string;
+    metaDescription: string;
     metaImage: {
       data: {
         attributes: {
@@ -36,13 +39,15 @@ type BlogPost = {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const getStaticProps = async () => {
   try {
-    const resulting = await fetch("https://cms.quivr.app/api/blogs?populate=seo,seo.metaImage");
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const resulting = await fetch("https://cms.quivr.app/api/blogs?populate=seo,seo.metaImage,slug");
     const data: { data: BlogPost[] } = await resulting.json();
 
+    // Sort blogs by publishedAt in descending order
+    const sortedBlogs = data.data.sort((a, b) => new Date(b.attributes.publishedAt).getTime() - new Date(a.attributes.publishedAt).getTime());
+
     return {
       props: {
-        result: data.data,
+        result: sortedBlogs,
       },
     };
   } catch (error) {
@@ -67,10 +72,11 @@ const Blog = ({ result }: InferGetStaticPropsType<typeof getStaticProps>) => {
         <header className="bg-white text-zinc-900 py-4 border-b">
           <div className="container mx-auto px-4 md:px-6">
             <nav className="flex items-center justify-between">
-              <div className="text-2xl font-bold">Quivr</div>
+              <Link href="/blog">
+                <div className="text-2xl font-bold cursor-pointer">Quivr</div>
+              </Link>
               <div className="space-x-4">
                 <Link className="text-zinc-900 hover:text-zinc-700" href="/">Try Quivr</Link>
-                <Link className="text-zinc-900 hover:text-zinc-700" href="/blog">Blog</Link>
               </div>
             </nav>
           </div>
@@ -81,16 +87,18 @@ const Blog = ({ result }: InferGetStaticPropsType<typeof getStaticProps>) => {
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               {result.map(post => (
                 <div key={post.id}>
-                  <Image
-                    src={`${post.attributes.seo.metaImage.data.attributes.formats.medium.url}`}
-                    alt="Blog Post Image"
-                    width={600}
-                    height={400}
-                    className="w-full rounded-lg object-cover"
-                  />
+                  <Link href={`/blog/${post.attributes.slug}`}>
+                    <Image
+                      src={`${post.attributes.seo.metaImage.data.attributes.formats.medium.url}`}
+                      alt="Blog Post Image"
+                      width={600}
+                      height={400}
+                      className="w-full rounded-lg object-cover cursor-pointer"
+                    />
+                  </Link>
                   <h3 className="text-xl font-bold mb-2 mt-4">{post.attributes.seo.metaTitle}</h3>
-                  <p className="text-zinc-500">{post.attributes.description}</p>
-                  <Link className="text-blue-500 hover:text-blue-700 mt-4" href={`/blog/${post.id}`}>
+                  <p className="text-zinc-500">{post.attributes.seo.metaDescription}</p>
+                  <Link className="text-blue-500 hover:text-blue-700 mt-4" href={`/blog/${post.attributes.slug}`}>
                     Read More
                   </Link>
                 </div>