From 3efa05cc101688c32fc531af0122023d3ce82f08 Mon Sep 17 00:00:00 2001 From: David Legrand <1110600+davlgd@users.noreply.github.com> Date: Mon, 15 Jan 2024 14:10:02 +0100 Subject: [PATCH] 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 --- src/config.ts | 1 + .../blog/how-to-configure-astropaper-theme.md | 21 +++++++++++-------- src/pages/search.astro | 6 ++++-- src/types.ts | 1 + src/utils/getSortedPosts.ts | 3 ++- src/utils/getUniqueTags.ts | 5 +++-- src/utils/postFilter.ts | 11 ++++++++++ 7 files changed, 34 insertions(+), 14 deletions(-) create mode 100644 src/utils/postFilter.ts diff --git a/src/config.ts b/src/config.ts index 0f5f526..be055eb 100644 --- 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 index 5d5c206..9ffc4b5 100644 --- 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 index 505289a..f61930f 100644 --- 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 index 7ae52a9..72ba2f0 100644 --- 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 index fdfea57..8fa5266 100644 --- 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 index 48b4278..a4b103a 100644 --- a/src/utils/getUniqueTags.ts +++ b/src/utils/getUniqueTags.ts @@ -1,5 +1,6 @@ import { slugifyStr } from "./slugify"; import type { CollectionEntry } from "astro:content"; +import postFilter from "./postFilter"; interface Tag { tag: string; @@ -7,8 +8,8 @@ interface Tag { } 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 new file mode 100644 index 0000000..3b24ccc --- /dev/null +++ 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;