feat: hide posts in Prod with future pubDatetime (#234)

* Hide posts when PubDateTime is not reached * refactor: extract filter logic into a file * docs: update SITE config docs --------- Co-authored-by: satnaing <satnaingdev@gmail.com>
satnaing · Jan 15, 2024 · 3efa05c · 3efa05c
1 parent 742baff
commit 3efa05c
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 14 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -8,6 +8,7 @@ export const SITE: Site = {
   ogImage: "astropaper-og.jpg",
   lightAndDarkMode: true,
   postPerPage: 3,
+  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
 };
 
 export const LOCALE = {

diff --git a/src/content/blog/how-to-configure-astropaper-theme.md b/src/content/blog/how-to-configure-astropaper-theme.md
@@ -1,6 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-23T04:58:53Z
+modDatetime: 2024-01-15T13:05:56.066Z
 title: How to configure AstroPaper theme
 slug: how-to-configure-astropaper-theme
 featured: true
@@ -31,20 +32,22 @@ export const SITE = {
   ogImage: "astropaper-og.jpg",
   lightAndDarkMode: true,
   postPerPage: 3,
+  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
 };
 ```
 
 Here are SITE configuration options
 
-| Options            | Description                                                                                                                                                  |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `website`          | Your deployed website url                                                                                                                                    |
-| `author`           | Your name                                                                                                                                                    |
-| `desc`             | Your site description. Useful for SEO and social media sharing.                                                                                              |
-| `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.                    |
-| `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)       |
+| Options               | Description                                                                                                                                                                                                                                         |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `website`             | Your deployed website url                                                                                                                                                                                                                           |
+| `author`              | Your name                                                                                                                                                                                                                                           |
+| `desc`                | Your site description. Useful for SEO and social media sharing.                                                                                                                                                                                     |
+| `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.                                                                                                           |
+| `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. |
 
 ## Configuring locale
 

diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -6,12 +6,14 @@ import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import SearchBar from "@components/Search";
+import getSortedPosts from "@utils/getSortedPosts";
 
-// Retrieve all articles
+// Retrieve all published articles
 const posts = await getCollection("blog", ({ data }) => !data.draft);
+const sortedPosts = getSortedPosts(posts);
 
 // List of items to search in
-const searchList = posts.map(({ data, slug }) => ({
+const searchList = sortedPosts.map(({ data, slug }) => ({
   title: data.title,
   description: data.description,
   data,

diff --git a/src/types.ts b/src/types.ts
@@ -8,6 +8,7 @@ export type Site = {
   ogImage?: string;
   lightAndDarkMode: boolean;
   postPerPage: number;
+  scheduledPostMargin: number;
 };
 
 export type SocialObjects = {

diff --git a/src/utils/getSortedPosts.ts b/src/utils/getSortedPosts.ts
@@ -1,8 +1,9 @@
 import type { CollectionEntry } from "astro:content";
+import postFilter from "./postFilter";
 
 const getSortedPosts = (posts: CollectionEntry<"blog">[]) => {
   return posts
-    .filter(({ data }) => !data.draft)
+    .filter(postFilter)
     .sort(
       (a, b) =>
         Math.floor(

diff --git a/src/utils/getUniqueTags.ts b/src/utils/getUniqueTags.ts
@@ -1,14 +1,15 @@
 import { slugifyStr } from "./slugify";
 import type { CollectionEntry } from "astro:content";
+import postFilter from "./postFilter";
 
 interface Tag {
   tag: string;
   tagName: string;
 }
 
 const getUniqueTags = (posts: CollectionEntry<"blog">[]) => {
-  const filteredPosts = posts.filter(({ data }) => !data.draft);
-  const tags: Tag[] = filteredPosts
+  const tags: Tag[] = posts
+    .filter(postFilter)
     .flatMap(post => post.data.tags)
     .map(tag => ({ tag: slugifyStr(tag), tagName: tag }))
     .filter(

diff --git a/src/utils/postFilter.ts b/src/utils/postFilter.ts
@@ -0,0 +1,11 @@
+import { SITE } from "@config";
+import type { CollectionEntry } from "astro:content";
+
+const postFilter = ({ data }: CollectionEntry<"blog">) => {
+  const isPublishTimePassed =
+    Date.now() >
+    new Date(data.pubDatetime).getTime() - SITE.scheduledPostMargin;
+  return !data.draft && (import.meta.env.DEV || isPublishTimePassed);
+};
+
+export default postFilter;