Refactor and add more configuration to src/config.mjs

src/components/blog/GridItem.astro

@@ -1,11 +1,12 @@
 ---
 import { Picture } from '@astrojs/image/components';
 
+import { BLOG } from '~/config.mjs';
+import type { Post } from '~/types';
+
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
-import type { Post } from '~/types';
-
 export interface Props {
 	post: Post;
 }
@@ -30,12 +31,18 @@ const image = await findImage(post.image);
 		}
 	</div>
 	<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
-		<a
-			href={getPermalink(post.slug, 'post')}
-			class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-		>
-			{post.title}
-		</a>
+		{
+			BLOG?.post?.disabled ? (
+				post.title
+			) : (
+				<a
+					href={getPermalink(post.slug, 'post')}
+					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+				>
+					{post.title}
+				</a>
+			)
+		}
 	</h3>
 	<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
 </article>

src/components/blog/ListItem.astro

@@ -2,24 +2,27 @@
 import { Picture } from '@astrojs/image/components';
 import PostTags from '~/components/common/Tags.astro';
 
+import { BLOG } from '~/config.mjs';
+import type { Post } from '~/types';
+
 import { getPermalink } from '~/utils/permalinks';
 import { findImage } from '~/utils/images';
 import { getFormattedDate } from '~/utils/utils';
 
-import type { Post } from '~/types';
-
 export interface Props {
 	post: Post;
 }
 
 const { post } = Astro.props;
 const image = await findImage(post.image);
+
+const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 ---
 
 <article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
 	{
 		image && (
-			<a class="relative block group" href={getPermalink(post.slug, 'post')}>
+			<a class="relative block group" href={link ?? 'javascript:void(0)'}>
 				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
 					{image && (
 						<Picture
@@ -38,12 +41,18 @@ const image = await findImage(post.image);
 	<div>
 		<header>
 			<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
-				<a
-					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-					href={getPermalink(post.slug, 'post')}
-				>
-					{post.title}
-				</a>
+				{
+					link ? (
+						<a
+							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+							href={link}
+						>
+							{post.title}
+						</a>
+					) : (
+						post.title
+					)
+				}
 			</h2>
 		</header>
 		<p class="text-md sm:text-lg flex-grow">

src/components/common/Tags.astro

@@ -1,6 +1,7 @@
 ---
 import { getPermalink } from '~/utils/permalinks';
 
+import { BLOG } from '~/config.mjs';
 import type { Post } from '~/types';
 
 export interface Props {
@@ -16,7 +17,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
 		<ul class={className}>
 			{tags.map((tag) => (
 				<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase">
-					<a href={getPermalink(tag, 'tag')}>{tag}</a>
+					{BLOG?.tag?.disabled ? tag : <a href={getPermalink(tag, 'tag')}>{tag}</a>}
 				</li>
 			))}
 		</ul>