feat(blog): Show the two most recent blog posts, excluding the current one, at the end of each blog

app/[lang]/blog/[slug]/page.tsx

@@ -10,6 +10,7 @@ import { decodeMdxFilePathData } from '@/lib/utils';
 import { Blog } from '@/components/blog/blog';
 import { Locale } from '@/i18n-config';
 import { getDictionary } from '@/get-dictionary';
+import { getBlogPostItems } from '@/lib/blog';
 import LocalePrettyUrlsCache from '@/lib/locale-pretty-urls-cache';
 
 type Params = {
@@ -45,13 +46,21 @@ export async function generateStaticParams({ params }: Params) {
 
 export default async function Page({ params }: Params) {
   const blogPostItem = await generateBlogPostItem(params.lang, params.slug);
-
   const dictionary = await getDictionary(params.lang);
 
+  // Related blog posts, for now, just the two most recent ones, excluding the current one.
+  const relatedPosts: BlogPostItem[] = getBlogPostItems(params.lang)
+    .filter(
+      (post) => post.data.published && post.urlPath !== blogPostItem.urlPath
+    )
+    .sort((a, b) => (a.data.publishedDate > b.data.publishedDate ? -1 : 1))
+    .slice(0, 2);
+
   return (
     <div className="relative">
       <Blog
         blogPostItem={blogPostItem}
+        relatedPosts={relatedPosts}
         dictionary={dictionary}
         lang={params.lang}
       ></Blog>
@@ -77,7 +86,7 @@ async function generateBlogPostItem(lang: Locale, slug?: string) {
     content: contentHtml,
     data: data as BlogPostItemData,
     filePath: `${slug}.mdx`,
-    urlPath: `${lang}/blog/${slug}`,
+    urlPath: `/${lang}/blog/${slug}`,
   };
   return blogPostItem;
 }

app/[lang]/blog/page.tsx

@@ -55,7 +55,9 @@ export default async function Page({
       </section>
       <div className="relative">
         <div className="gjs-gradient-background absolute w-full h-full" />
-        <BlogList posts={posts}></BlogList>
+        <div className="container mx-auto py-10">
+          <BlogList posts={posts}></BlogList>
+        </div>
       </div>
     </div>
   );

components/blog-list/blog-list.tsx

@@ -2,23 +2,29 @@
 
 import { BlogPostItem } from '@/types/blog';
 import BlogListItem from './blog-list-item';
+import { cn } from '@/lib/utils';
 
-export default function BlogList({ posts }: { posts: BlogPostItem[] }) {
+export default function BlogList({
+  posts,
+  className,
+}: {
+  posts: BlogPostItem[];
+  className?: string;
+}) {
   posts = [...posts]
     .filter((post) => post.data.published)
     .sort((a, b) => (a.data.publishedDate > b.data.publishedDate ? -1 : 1));
 
   return (
-    <>
-      <div className="relative w-full h-full">
-        <div className="container mx-auto py-10">
-          <div className="py-4 grid grid-cols-1 md:grid-cols-2 gap-12">
-            {posts.map((post) => (
-              <BlogListItem key={post.filePath} post={post}></BlogListItem>
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
+    <div
+      className={cn(
+        'relative grid h-full w-full grid-cols-1 gap-12 py-4 md:grid-cols-3',
+        className
+      )}
+    >
+      {posts.map((post) => (
+        <BlogListItem key={post.filePath} post={post}></BlogListItem>
+      ))}
+    </div>
   );
 }

components/blog/blog.tsx

@@ -12,14 +12,16 @@ import Comments from '../comments';
 
 import './blog.scss'; // TODO: This styles will be global even only imported here. We should
 import Link from 'next/link';
+import BlogList from '../blog-list/blog-list';
 
 type Props = {
   blogPostItem: BlogPostItem;
+  relatedPosts: BlogPostItem[];
   dictionary: LangDictionary;
   lang: string;
 };
 
-export function Blog({ blogPostItem, dictionary, lang }: Props) {
+export function Blog({ blogPostItem, relatedPosts, dictionary, lang }: Props) {
   const host = `https://gironajs.com`; // TODO: Put host value on environment variables
   const getFullHref = (post: BlogPostItem) => `${host}/${post.urlPath}`;
   return (
@@ -55,6 +57,11 @@ export function Blog({ blogPostItem, dictionary, lang }: Props) {
         </div>
 
         <Comments lang={lang} />
+
+        <div className="my-10">
+          <h2 className="my-2 flex-1">{dictionary.blog.related_posts_title}</h2>
+          <BlogList posts={relatedPosts} className="md:grid-cols-2"></BlogList>
+        </div>
       </div>
     </div>
   );

dictionaries/ca.json

@@ -40,7 +40,8 @@
     "subtitle_1": "Aquí pots trobar totes les entrades del blog publicades per GironaJS",
     "subtitle_2": "Qualsevol contribució és benvinguda, així que si vols escriure una entrada, si us plau, contacta'ns!",
     "edit_github": "Has trobat una errada? ",
-    "edit_github_link": "Edita-la al Github"
+    "edit_github_link": "Edita-la al Github",
+    "related_posts_title": "Altres blogs que podrien interessar-te..."
   },
   "map": {
     "title": "GironaJS - Mapa 3D de la ciutat",

dictionaries/en.json

@@ -40,7 +40,8 @@
     "subtitle_1": "Here you can find all the blog posts published by GironaJS",
     "subtitle_2": "Any contribution is welcome, so if you want to write a post, please contact us!",
     "edit_github": "Have you found a mistake? ",
-    "edit_github_link": "Edit it on Github!"
+    "edit_github_link": "Edit it on Github!",
+    "related_posts_title": "Other blogs that might interest you..."
   },
   "map": {
     "title": "GironaJS - 3D City Map",