feat(HTD-54): add related posts (#78)

* feat(HTD-54): add related posts

* fix(HTD-54): add missing key

* fix(HTD-54): typo

* fix(HTD-54): filter out current post from related post content

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

@@ -1,4 +1,5 @@
 import { Container } from '@/components/elements/container';
+import { RelatedPosts } from '@/components/sections/blog/related-posts';
 import { SinglePostHero } from '@/components/sections/blog/single-post-hero';
 import { getPostBySlug, getAllPostsMeta } from '@/lib/mdx';
 
@@ -21,7 +22,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
   return (
     <Container>
       <SinglePostHero post={post} />
-
+      <RelatedPosts tags={post.tags} currentPostSlug={post.slug} />
       {/* <div>{post.content}</div> */}
     </Container>
   );

src/components/modules/blog-card/blog-card.styles.ts

@@ -1,6 +1,7 @@
 'use client';
 
-import { styled } from '@/styles';
+import { Image } from '@/components/elements/image';
+import { screens, styled } from '@/styles';
 
 export const StyledBlogCardWrapper = styled.article`
   display: flex;
@@ -19,15 +20,18 @@ export const StyledBlogCardWrapper = styled.article`
 `;
 
 export const StyledBlogCardFigure = styled.figure`
-  height: 217px;
+  height: 174px;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
+
+  @media (min-width: ${screens.lg}) {
+    height: 217px;
+  }
 `;
 
-export const StyledBlogCardImage = styled.img`
+export const StyledBlogCardImage = styled(Image)`
   width: 100%;
-  height: 100%;
 `;
 
 export const StyledBlogCardTag = styled.span`

src/components/modules/blog-card/index.tsx

@@ -14,11 +14,11 @@ import { ArrowRight } from '@/components/elements/icon';
 import { Text } from '@/components/elements/text';
 import { formatDateLongMonthYear } from '@/lib/utils/formatMonthYearDate';
 
-export const BlogCard = ({ title, text, image, date, tag }: BlogCardProps) => {
+export const BlogCard = ({ title, text, image, date, tag, slug }: BlogCardProps) => {
   return (
     <StyledBlogCardWrapper>
       <StyledBlogCardFigure>
-        <StyledBlogCardImage src={image.src} alt={image.alt} loading="lazy" />
+        <StyledBlogCardImage width={386} height={217} src={image.src} alt={image.alt ?? title} loading="lazy" />
         <StyledBlogCardTag>{tag}</StyledBlogCardTag>
       </StyledBlogCardFigure>
       <StyledBlogCardContentWrapper>
@@ -32,7 +32,14 @@ export const BlogCard = ({ title, text, image, date, tag }: BlogCardProps) => {
           {text}
         </Text>
         <StyledBlogCardButtonWrapper>
-          <Button $variant="secondary" $small icon={ArrowRight}>
+          <Button
+            as="link"
+            href={`/blog/${slug}`}
+            aria-label={`Read more about ${title}`}
+            $variant="secondary"
+            $small
+            icon={ArrowRight}
+          >
             Read more
           </Button>
         </StyledBlogCardButtonWrapper>

src/components/sections/blog/related-posts/index.tsx

@@ -0,0 +1,42 @@
+import { StyledRelatedPostWrapper, StyledRelatedPostsGrid } from './related-posts.styles';
+
+import Stack from '@/components/elements/stack';
+import { BlogCard } from '@/components/modules/blog-card';
+import { HeadingBlock } from '@/components/modules/heading-block';
+import { getRelatedPosts } from '@/lib/mdx';
+
+interface RelatedPostsProps {
+  tags: string[];
+  currentPostSlug: string;
+}
+
+export const RelatedPosts = async ({ tags, currentPostSlug }: RelatedPostsProps) => {
+  const relatedPosts = await getRelatedPosts({ tags, currentPostSlug });
+
+  if (relatedPosts.length === 0) {
+    return null;
+  }
+
+  return (
+    <StyledRelatedPostWrapper>
+      <Stack $gap="32px" $gapxl="48px">
+        <HeadingBlock title="Related `*content*`" $align="center" $isContentCentered />
+        <StyledRelatedPostsGrid>
+          {relatedPosts.length &&
+            relatedPosts.map(post => (
+              <BlogCard
+                key={post.slug}
+                title={post.title}
+                slug={post.slug}
+                image={{ src: `/images/${post.coverImage}`, alt: post.title }}
+                date={post.date}
+                tag={post.tags[0]}
+                // TODO(gerald): Replace with the excerpt when working on blog post content
+                text="Sometimes things crash when they're running inside a Docker container though, and then all of a sudden it can get much more difficult to work out why, or what the hell to do next."
+              />
+            ))}
+        </StyledRelatedPostsGrid>
+      </Stack>
+    </StyledRelatedPostWrapper>
+  );
+};

src/components/sections/blog/related-posts/related-posts.styles.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { screens, styled } from '@/styles';
+
+export const StyledRelatedPostWrapper = styled.section`
+  padding: 32px 0;
+  margin: 32px 0;
+
+  @media (min-width: ${screens['lg']}) {
+    padding: 48px 0;
+    margin: 48px 0;
+  }
+`;
+
+export const StyledRelatedPostsGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr; /* 1 column on mobile */
+  gap: 24px;
+
+  @media (min-width: ${screens['lg']}) {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+
+  & article {
+    max-width: 434px;
+  }
+`;

src/lib/mdx/index.ts

@@ -65,3 +65,17 @@ export const getAllPostsMeta = async () => {
   }
   return posts;
 };
+
+export const getRelatedPosts = async ({ tags, currentPostSlug }: { tags: string[]; currentPostSlug: string }) => {
+  const allPosts = await getAllPostsMeta();
+
+  const filteredPosts = allPosts
+    .filter(post => post.slug !== currentPostSlug)
+    .filter(post => {
+      return tags.some(tag => post.tags.includes(tag));
+    })
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 3);
+
+  return filteredPosts;
+};