Refactor and add more configuration to src/config.mjs

README.md

@@ -143,44 +143,51 @@ All commands are run from the root of the project, from a terminal:
 Basic configuration file: `./src/config.mjs`
 
 ```javascript
-export const SITE = {
+const CONFIG = {
 	name: 'Example',
 
   origin: 'https://example.com',
   basePathname: '/', // Change this if you need to deploy to Github Pages, for example
   trailingSlash: false, // Generate permalinks with or without "/" at the end
 
-  title: 'Example - This is the homepage title of Example',
+  title: 'Example - This is the homepage title of Example', // default seo title
-  description: 'This is the homepage description of Example',
+  description: 'This is the homepage description of Example', // default seo description
+	defaultImage: "image.jpg", // default seo image
+
+	defaultTheme: 'system', // Values: "system" | "light" | "dark" | "light:only" | "dark:only"
 
   googleAnalyticsId: false, // or "G-XXXXXXXXXX",
   googleSiteVerificationId: false, // or some value,
-};
-
-export const BLOG = {
-  disabled: false,
-  postsPerPage: 4,
 
 	blog: {
 		disabled: false,
+		postsPerPage: 4,
+
+		list: {
 			pathname: 'blog', // blog main path, you can change this to "articles" (/articles)
+			noindex: false,
+			disabled: false,
 		},
 
 		post: {
-    disabled: false,
 			pathname: '', // empty for /some-post, value for /pathname/some-post
+			noindex: false,
+			disabled: false,
 		},
 
 		category: {
-    disabled: false,
 			pathname: 'category', // set empty to change from /category/some-category to /some-category
+			noindex: true,
+			disabled: false,
 		},
 
 		tag: {
-    disabled: false,
 			pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
+			noindex: true,
+			disabled: false,
 		},
-};
+	},
+}
 ```
 
 <br>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
   "description": "A template to make your website using Astro + Tailwind CSS.",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "private": true,
   "scripts": {
     "dev": "astro dev",

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">
+		{
+			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">
+				{
+					link ? (
 						<a
 							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-					href={getPermalink(post.slug, 'post')}
+							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>

src/config.mjs

@@ -1,6 +1,6 @@
 import defaultImage from './assets/images/default.png';
 
-export const SITE = {
+const CONFIG = {
 	name: 'AstroWind',
 
 	origin: 'https://astrowind.vercel.app',
@@ -9,39 +9,42 @@ export const SITE = {
 
 	title: 'AstroWind — Your website with Astro + Tailwind CSS',
 	description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
-
 	defaultImage: defaultImage,
-	defaultTheme: "system", // "system" | "light" | "dark" | "light:only" | "dark:only"
+
+	defaultTheme: 'system', // Values: "system" | "light" | "dark" | "light:only" | "dark:only"
 
 	googleAnalyticsId: false, // or "G-XXXXXXXXXX",
 	googleSiteVerificationId: 'orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M',
-};
-
-export const BLOG = {
-	disabled: false,
-	postsPerPage: 4,
 
 	blog: {
 		disabled: false,
+		postsPerPage: 4,
+
+		list: {
 			pathname: 'blog', // blog main path, you can change this to "articles" (/articles)
 			noindex: false,
+			disabled: false,
 		},
 
 		post: {
-		disabled: false,
 			pathname: '', // empty for /some-post, value for /pathname/some-post
 			noindex: false,
+			disabled: false,
 		},
 
 		category: {
-		disabled: false,
 			pathname: 'category', // set empty to change from /category/some-category to /some-category
 			noindex: true,
+			disabled: false,
 		},
 
 		tag: {
-		disabled: false,
 			pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
 			noindex: true,
+			disabled: false,
+		},
 	},
 };
+
+export const SITE = { ...CONFIG, blog: undefined };
+export const BLOG = CONFIG.blog;

src/pages/[...blog]/[...page].astro

@@ -10,7 +10,7 @@ import { BLOG_BASE } from '~/utils/permalinks';
 import Title from '~/components/blog/Title.astro';
 
 export async function getStaticPaths({ paginate }) {
-	if (BLOG?.disabled || BLOG?.blog?.disabled) return [];
+	if (BLOG?.disabled || BLOG?.list?.disabled) return [];
 	return paginate(await fetchPosts(), {
 		params: { blog: BLOG_BASE || undefined },
 		pageSize: BLOG.postsPerPage,
@@ -23,7 +23,7 @@ const currentPage = page.currentPage ?? 1;
 const meta = {
 	title: `Blog${currentPage > 1 ? ` — Page ${currentPage}` : ''}`,
 	description: SITE.description,
-	noindex: BLOG?.blog?.noindex || currentPage > 1,
+	noindex: BLOG?.list?.noindex || currentPage > 1,
 	ogType: 'blog',
 };
 ---

src/utils/permalinks.ts

@@ -24,7 +24,7 @@ export const cleanSlug = (text: string) =>
 		.map((slug) => slugify(slug))
 		.join('/');
 
-export const BLOG_BASE = cleanSlug(BLOG?.blog?.pathname);
+export const BLOG_BASE = cleanSlug(BLOG?.list?.pathname);
 export const POST_BASE = cleanSlug(BLOG?.post?.pathname);
 export const CATEGORY_BASE = cleanSlug(BLOG?.category?.pathname);
 export const TAG_BASE = cleanSlug(BLOG?.tag?.pathname);