refactor: Add typescript to the code

.prettierrc.mjs

@@ -3,6 +3,12 @@
 export default {
   plugins: ["prettier-plugin-astro"],
   overrides: [
+    {
+      files: ["**/tsconfig.json", "**/tsconfig.*.json"],
+      options: {
+        parser: "jsonc",
+      },
+    },
     {
       files: "*.astro",
       options: {

src/components/LinkButton.astro

@@ -1,4 +1,9 @@
 ---
+interface Props {
+  href: string | URL;
+  text: string;
+}
+
 const { href, text } = Astro.props;
 ---
 

src/components/PostCard.astro

@@ -1,4 +1,10 @@
 ---
+import type { BlogPost } from "../types/BlogPost.ts";
+
+interface Props {
+  post: BlogPost;
+}
+
 const { post } = Astro.props;
 ---
 

src/components/PostCards.astro

@@ -1,5 +1,10 @@
 ---
-import PostCard from "../components/PostCard.astro";
+import PostCard from "@components/PostCard.astro";
+import type { BlogPost } from "../types/BlogPost.ts";
+
+interface Props {
+  posts: BlogPost[];
+}
 
 const { posts } = Astro.props;
 ---

src/components/Tags.astro

@@ -1,6 +1,10 @@
 ---
 import LinkButton from "./LinkButton.astro";
 
+interface Props {
+  tags: string[];
+}
+
 const { tags } = Astro.props;
 ---
 

src/layouts/BaseLayout.astro

@@ -1,8 +1,12 @@
 ---
-import Hamburger from "../components/Hamburger.astro";
-import Navigation from "../components/Navigation.astro";
+import Hamburger from "@components/Hamburger.astro";
+import Navigation from "@components/Navigation.astro";
 
-import "../styles/global.scss";
+import "@styles/global.scss";
+
+interface Props {
+  title: string;
+}
 
 const { title } = Astro.props;
 ---
@@ -93,7 +97,7 @@ const { title } = Astro.props;
 </style>
 
 <script>
-  document.querySelector(".hamburger").addEventListener("click", () => {
-    document.querySelector(".nav-links").classList.toggle("expanded");
+  document.querySelector(".hamburger")?.addEventListener("click", () => {
+    document.querySelector(".nav-links")?.classList.toggle("expanded");
   });
 </script>

src/layouts/PostLayout.astro

@@ -1,6 +1,11 @@
 ---
+import type { Frontmatter } from "../types/BlogPost.ts";
 import BaseLayout from "./BaseLayout.astro";
-import Tags from "../components/Tags.astro";
+import Tags from "@components/Tags.astro";
+
+interface Props {
+  frontmatter: Frontmatter;
+}
 
 const { frontmatter } = Astro.props;
 ---
@@ -13,7 +18,11 @@ const { frontmatter } = Astro.props;
       >
       <p class="description">{frontmatter.description}</p>
     </header>
-    <img src={frontmatter.image.url} width="200" alt={frontmatter.image.alt} />
+    <img
+      src={frontmatter.image?.url}
+      width="200"
+      alt={frontmatter.image?.alt}
+    />
     <main class="post-content">
       <slot />
     </main>

src/pages/blog.astro

@@ -1,9 +1,10 @@
 ---
-import PostCards from "../components/PostCards.astro";
-import Layout from "../layouts/BaseLayout.astro";
+import type { BlogPost } from "../types/BlogPost.ts";
+import PostCards from "@components/PostCards.astro";
+import Layout from "@layouts/BaseLayout.astro";
 
 const allPosts = Object.values(
-  import.meta.glob("../pages/posts/*.md", { eager: true }),
+  import.meta.glob<BlogPost>("../pages/posts/*.md", { eager: true }),
 );
 
 const pageTitle = "My Blog";

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Layout from "../layouts/BaseLayout.astro";
+import Layout from "@layouts/BaseLayout.astro";
 
 // Page variables
 const pageTitle = "Hello there!";

src/pages/tags/[tag].astro

@@ -1,10 +1,11 @@
 ---
-import PostCards from "../../components/PostCards.astro";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import PostCards from "@components/PostCards.astro";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import type { BlogPost } from "../../types/BlogPost.ts";
 
 export async function getStaticPaths() {
   const allPosts = Object.values(
-    import.meta.glob("../posts/*.md", { eager: true }),
+    import.meta.glob<BlogPost>("../posts/*.md", { eager: true }),
   );
 
   const uniqueTags = [

src/pages/tags/index.astro

@@ -1,9 +1,10 @@
 ---
-import BaseLayout from "../../layouts/BaseLayout.astro";
-import Tags from "../../components/Tags.astro";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import Tags from "@components/Tags.astro";
+import type { BlogPost } from "../../types/BlogPost.ts";
 
 const allPosts = Object.values(
-  import.meta.glob("../posts/*.md", { eager: true }),
+  import.meta.glob<BlogPost>("../posts/*.md", { eager: true }),
 );
 
 const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];

src/types/BlogPost.ts

@@ -0,0 +1,16 @@
+import type { MarkdownInstance } from "astro";
+
+export interface Image {
+  url: string;
+  alt?: string;
+}
+
+export interface Frontmatter {
+  title: string;
+  description?: string;
+  pubDate: string;
+  tags: string[];
+  image?: Image;
+}
+
+export type BlogPost = MarkdownInstance<Frontmatter>;

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "**/*.astro",
+    ".astro/types.d.ts"
+  ],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@layouts/*": ["src/layouts/*"],
+      "@styles/*": ["src/styles/*"]
+    },
+    "verbatimModuleSyntax": true,
+    "plugins": [
+      {
+        "name": "@astrojs/ts-plugin"
+      }
+    ]
+  }
+}