From c32961bc05999ae7e366abd55567348bee738649 Mon Sep 17 00:00:00 2001 From: JasterV <49537445+JasterV@users.noreply.github.com> Date: Sun, 1 Jun 2025 19:14:27 +0200 Subject: [PATCH] refactor: Add typescript to the code --- .prettierrc.mjs | 6 ++++++ src/components/LinkButton.astro | 5 +++++ src/components/PostCard.astro | 6 ++++++ src/components/PostCards.astro | 7 ++++++- src/components/Tags.astro | 4 ++++ src/layouts/BaseLayout.astro | 14 +++++++++----- src/layouts/PostLayout.astro | 13 +++++++++++-- src/pages/blog.astro | 7 ++++--- src/pages/index.astro | 2 +- src/pages/tags/[tag].astro | 7 ++++--- src/pages/tags/index.astro | 7 ++++--- src/types/BlogPost.ts | 16 ++++++++++++++++ tsconfig.json | 24 ++++++++++++++++++++++++ 13 files changed, 100 insertions(+), 18 deletions(-) create mode 100644 src/types/BlogPost.ts create mode 100644 tsconfig.json diff --git a/.prettierrc.mjs b/.prettierrc.mjs index 3ce655d..afd1751 100644 --- a/.prettierrc.mjs +++ b/.prettierrc.mjs @@ -3,6 +3,12 @@ export default { plugins: ["prettier-plugin-astro"], overrides: [ + { + files: ["**/tsconfig.json", "**/tsconfig.*.json"], + options: { + parser: "jsonc", + }, + }, { files: "*.astro", options: { diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro index 924488a..d26dfce 100644 --- a/src/components/LinkButton.astro +++ b/src/components/LinkButton.astro @@ -1,4 +1,9 @@ --- +interface Props { + href: string | URL; + text: string; +} + const { href, text } = Astro.props; --- diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro index fda24c2..138ad88 100644 --- a/src/components/PostCard.astro +++ b/src/components/PostCard.astro @@ -1,4 +1,10 @@ --- +import type { BlogPost } from "../types/BlogPost.ts"; + +interface Props { + post: BlogPost; +} + const { post } = Astro.props; --- diff --git a/src/components/PostCards.astro b/src/components/PostCards.astro index c4b73c8..c8d7aa2 100644 --- a/src/components/PostCards.astro +++ b/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; --- diff --git a/src/components/Tags.astro b/src/components/Tags.astro index 2d0a44e..a89e456 100644 --- a/src/components/Tags.astro +++ b/src/components/Tags.astro @@ -1,6 +1,10 @@ --- import LinkButton from "./LinkButton.astro"; +interface Props { + tags: string[]; +} + const { tags } = Astro.props; --- diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 52d64da..bc274b3 100644 --- a/src/layouts/BaseLayout.astro +++ b/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; diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro index f4783fa..ff1dd28 100644 --- a/src/layouts/PostLayout.astro +++ b/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; >

{frontmatter.description}

- {frontmatter.image.alt} + {frontmatter.image?.alt}
diff --git a/src/pages/blog.astro b/src/pages/blog.astro index dca8016..16b5d1d 100644 --- a/src/pages/blog.astro +++ b/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("../pages/posts/*.md", { eager: true }), ); const pageTitle = "My Blog"; diff --git a/src/pages/index.astro b/src/pages/index.astro index 5724c0a..d9f581c 100644 --- a/src/pages/index.astro +++ b/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!"; diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro index 79fd373..a3045e6 100644 --- a/src/pages/tags/[tag].astro +++ b/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("../posts/*.md", { eager: true }), ); const uniqueTags = [ diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro index 4543319..7b3af01 100644 --- a/src/pages/tags/index.astro +++ b/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("../posts/*.md", { eager: true }), ); const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())]; diff --git a/src/types/BlogPost.ts b/src/types/BlogPost.ts new file mode 100644 index 0000000..77a77f9 --- /dev/null +++ b/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; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..b06e8ad --- /dev/null +++ b/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" + } + ] + } +}