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 <[email protected]>
satnaing · Jul 14, 2024 · 0d5ea52 · 0d5ea52
1 parent 7b045a0
commit 0d5ea52
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -8,6 +8,7 @@ export type Site = {
  title: string;
  ogImage?: string;
  lightAndDarkMode: boolean;
+ postPerIndex: number;
  postPerPage: number;
  scheduledPostMargin: number;
 };