From 0d5ea52c23d185c1bbdebd4ecda2b010f05e7744 Mon Sep 17 00:00:00 2001
From: David Legrand <1110600+davlgd@users.noreply.github.com>
Date: Sun, 14 Jul 2024 09:48:49 +0000
Subject: [PATCH] feat: add number of posts config for home page (#281)

* Add a SITE config parameter for posts in index page

* docs: update blog post for `postPerIndex` config

---------

Co-authored-by: satnaing <satnaingdev@gmail.com>
---
 src/config.ts                                         | 1 +
 src/content/blog/how-to-configure-astropaper-theme.md | 1 +
 src/pages/index.astro                                 | 4 ++--
 src/types.ts                                          | 1 +
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index fd78e08..a0341b7 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -8,6 +8,7 @@ export const SITE: Site = {
   title: "AstroPaper",
   ogImage: "astropaper-og.jpg",
   lightAndDarkMode: true,
+  postPerIndex: 4,
   postPerPage: 3,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
 };
diff --git a/src/content/blog/how-to-configure-astropaper-theme.md b/src/content/blog/how-to-configure-astropaper-theme.md
index 9ffc4b5..f717cef 100644
--- a/src/content/blog/how-to-configure-astropaper-theme.md
+++ b/src/content/blog/how-to-configure-astropaper-theme.md
@@ -46,6 +46,7 @@ Here are SITE configuration options
 | `title`               | Your site name                                                                                                                                                                                                                                      |
 | `ogImage`             | Your default OG image for the site. Useful for social media sharing. OG images can be an external image url or they can be placed under `/public` directory.                                                                                        |
 | `lightAndDarkMode`    | Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default.                                                                                                           |
+| `postPerIndex`        | The number of posts to be displayed at the home page under `Recent` section.                                                                                                                                                                        |
 | `postPerPage`         | You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page)                                                                                              |
 | `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin. |
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1ae0874..c7b5261 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,7 +8,7 @@ import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import Socials from "@components/Socials.astro";
 import getSortedPosts from "@utils/getSortedPosts";
-import { SOCIALS } from "@config";
+import { SITE, SOCIALS } from "@config";
 
 const posts = await getCollection("blog");
 
@@ -96,7 +96,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
           <ul>
             {recentPosts.map(
               ({ data, slug }, index) =>
-                index < 4 && (
+                index < SITE.postPerIndex && (
                   <Card
                     href={`/posts/${slug}/`}
                     frontmatter={data}
diff --git a/src/types.ts b/src/types.ts
index f9eaf38..4f644ed 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,6 +8,7 @@ export type Site = {
   title: string;
   ogImage?: string;
   lightAndDarkMode: boolean;
+  postPerIndex: number;
   postPerPage: number;
   scheduledPostMargin: number;
 };