strict typescript

src/components/BlogHeader.astro

@@ -15,8 +15,6 @@ const { title, date, slug } = Astro.props;
 		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
 	</h2>
 	<h3>
-		<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
-
 		🗓️ <FormattedDate date={date} />
 	</h3>
 </div>

src/components/PostPreview.astro

@@ -1,4 +1,6 @@
 ---
+import { Tag } from 'src/content/config';
+
 import BlogHeader from '@components/BlogHeader.astro';
 import Tags from '@components/Tags.astro';
 
@@ -6,7 +8,7 @@ interface Post {
 	data: {
 		title: string;
 		pubDate: Date;
-		tags: string[];
+		tags: Tag[];
 	};
 	slug: string;
 }

src/components/Tags.astro

@@ -1,6 +1,8 @@
 ---
+import { Tag } from 'src/content/config';
+
 interface Props {
-	tags: string[];
+	tags: Tag[];
 }
 
 const { tags } = Astro.props;
@@ -8,7 +10,7 @@ const { tags } = Astro.props;
 
 <div class="tag-container">
 	{
-		tags.sort().map((tag: string) => (
+		tags.sort().map((tag: Tag) => (
 			<a class="tag" href={`/archive/${tag}?page=1`}>
 				#{tag}
 			</a>

src/content/config.ts

@@ -1,27 +1,29 @@
 import { z, defineCollection } from 'astro:content';
 
+export enum Tag {
+	'Apps' = 'Apps',
+	'Digital Life' = 'Digital Life',
+	'Gaming' = 'Gaming',
+	'Learning' = 'Learning',
+	'Life' = 'Life',
+	'MacOS' = 'MacOS',
+	'Music' = 'Music',
+	'Making Stuff' = 'Making Stuff',
+	'Mental Health' = 'Mental Health',
+	'Movies & TV' = 'Movies & TV',
+	'Programming' = 'Programming',
+	'Tech' = 'Tech',
+	'Tutorial' = 'Tutorial',
+	'Web Dev' = 'Web Dev',
+	// only for filtering
+	all = 'all',
+}
+
 const blogCollection = defineCollection({
 	schema: z.object({
 		title: z.string(),
 		pubDate: z.string().transform((str) => new Date(str)),
-		tags: z.array(
+		tags: z.array(z.nativeEnum(Tag)),
-			z.enum([
-				'Apps',
-				'Digital Life',
-				'Gaming',
-				'Learning',
-				'Life',
-				'MacOS',
-				'Music',
-				'Making Stuff',
-				'Mental Health',
-				'Movies & TV',
-				'Programming',
-				'Tech',
-				'Tutorial',
-				'Web Dev',
-			])
-		),
 	}),
 });
 

src/pages/archive/[tag].astro

@@ -1,19 +1,25 @@
 ---
 import { getCollection } from 'astro:content';
+import { Tag as TagEnum } from '../../content/config';
 
 import Layout from '@layouts/Layout.astro';
 import FormattedDate from '@components/FormattedDate.astro';
 
-const { tag } = Astro.params;
+const { tag }: { tag?: TagEnum } = Astro.params;
 
-const page = Number.parseInt(Astro.url.searchParams.get('page'));
+const page = Number.parseInt(Astro.url.searchParams.get('page') || '1');
 const prevPage = page - 1;
 const nextPage = page + 1;
 
 const posts = await getCollection('blog', ({ data }) => {
-	if (tag === 'all') {
+	if (!tag) {
+		return false;
+	}
+
+	if (tag === TagEnum.all) {
 		return true;
 	}
+
 	return data.tags.includes(tag);
 });
 

tsconfig.json

@@ -3,6 +3,7 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"strictNullChecks": true,
+		"strict": true,
 		"paths": {
 			"@components/*": ["src/components/*"],
 			"@layouts/*": ["src/layouts/*"],