Add back-home link and Ler mais recommendations on posts

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: lucis

public/.assetsignore

@@ -1,2 +1,3 @@
-_worker.js
 _routes.json
+_worker.js
+.DS_Store

src/components/RecommendedPosts.astro

@@ -0,0 +1,83 @@
+---
+import type { BlogEntry } from "../lib/posts";
+import { getPostSlug } from "../lib/posts";
+
+interface Props {
+  posts: BlogEntry[];
+}
+
+const { posts } = Astro.props;
+---
+
+{
+  posts.length > 0 && (
+    <section class="mt-16 max-w-3xl mx-auto w-full px-4 md:px-0">
+      <div class="text-center mb-8">
+        <span class="text-black text-2xl">•</span>
+        <h2 class="mt-4 text-2xl font-bold font-serif text-black">Ler mais</h2>
+      </div>
+
+      <div class="hidden md:block space-y-3">
+        {posts.map((post) => {
+          const slug = getPostSlug(post);
+          const hasImage = Boolean(post.data.image?.trim());
+
+          return (
+            <article class="border border-gray-100 rounded-lg overflow-hidden hover:bg-gray-50 transition-colors duration-200 delay-75">
+              <a href={`/blog/${slug}`} class="block p-6">
+                <div class="flex gap-4 items-center">
+                  {hasImage && (
+                    <div class="w-20 h-20 flex-shrink-0">
+                      <img
+                        src={post.data.image}
+                        alt={post.data.title}
+                        width="80"
+                        height="80"
+                        class="w-full h-full object-cover rounded-lg"
+                        loading="lazy"
+                        decoding="async"
+                      />
+                    </div>
+                  )}
+                  <div class="flex-1 min-w-0">
+                    <h3 class="text-lg font-bold text-gray-900 font-serif leading-tight line-clamp-2">
+                      {post.data.title}
+                    </h3>
+                  </div>
+                </div>
+              </a>
+            </article>
+          );
+        })}
+      </div>
+
+      <div class="md:hidden grid gap-6 grid-cols-1 sm:grid-cols-2">
+        {posts.map((post) => {
+          const slug = getPostSlug(post);
+          const hasImage = Boolean(post.data.image?.trim());
+
+          return (
+            <a href={`/blog/${slug}`} class="block group">
+              <div class="space-y-2">
+                {hasImage && (
+                  <img
+                    src={post.data.image}
+                    alt={post.data.title}
+                    width="300"
+                    height="200"
+                    class="w-full h-40 object-cover rounded-lg group-hover:opacity-90 transition-opacity"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                )}
+                <h3 class="text-lg font-bold text-gray-900 font-serif leading-tight line-clamp-2">
+                  {post.data.title}
+                </h3>
+              </div>
+            </a>
+          );
+        })}
+      </div>
+    </section>
+  )
+}

src/lib/posts.ts

@@ -68,3 +68,14 @@ export function getAuthorNames(post: BlogEntry): string {
 export function getPostSlug(post: BlogEntry): string {
   return post.id.replace(/\.mdx?$/i, "");
 }
+
+export async function getRecommendedPosts(
+  currentSlug: string,
+  limit = 3,
+): Promise<BlogEntry[]> {
+  const posts = await getPublishedPosts();
+
+  return posts
+    .filter((post) => getPostSlug(post) !== currentSlug)
+    .slice(0, limit);
+}

src/pages/blog/[slug].astro

@@ -2,13 +2,15 @@
 import { getCollection, render } from "astro:content";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import BlogPostLayout from "../../layouts/BlogPostLayout.astro";
+import RecommendedPosts from "../../components/RecommendedPosts.astro";
 import {
   DEFAULT_AUTHOR_NAME,
   DEFAULT_AVATAR,
   formatLongDate,
   getAuthorAvatar,
   getAuthorNames,
   getPostSlug,
+  getRecommendedPosts,
   SITE_DEFAULT_IMAGE,
 } from "../../lib/posts";
 
@@ -25,12 +27,14 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { title, date, image } = post.data;
+const slug = getPostSlug(post);
 const formattedDate = formatLongDate(date);
 const description = `Escrito em ${formattedDate}`;
-const canonical = `https://blog.lucis.dev/blog/${getPostSlug(post)}`;
+const canonical = `https://blog.lucis.dev/blog/${slug}`;
 const hasImage = Boolean(image?.trim());
 
 const { Content } = await render(post);
+const recommended = await getRecommendedPosts(slug, 3);
 
 const authorName = getAuthorNames(post) || DEFAULT_AUTHOR_NAME;
 const authorAvatar = getAuthorAvatar(post) || DEFAULT_AVATAR;
@@ -58,6 +62,28 @@ const jsonLd = {
 >
   <article class="w-full flex flex-col gap-20 container mx-auto px-4 md:px-0 py-12 lg:py-12 bg-white">
     <div class="w-full flex flex-col gap-12 max-w-3xl lg:mx-auto">
+      <a
+        href="/"
+        class="inline-flex items-center text-sm text-gray-600 hover:text-black transition-colors w-fit"
+        aria-label="Voltar para a home"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 mr-2"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Home</span>
+      </a>
+
       <h1 class="text-5xl font-bold font-serif">{title}</h1>
       <div class="flex items-center gap-4">
         <img
@@ -90,5 +116,7 @@ const jsonLd = {
     <BlogPostLayout>
       <Content />
     </BlogPostLayout>
+
+    <RecommendedPosts posts={recommended} />
   </article>
 </BaseLayout>