Astro 5

astro.config.mjs

@@ -1,16 +1,18 @@
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 import partytown from "@astrojs/partytown";
 import { remarkReadingTime } from "./remark-reading-time.mjs";
 
 // https://astro.build/config
 export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
   integrations: [
-    tailwind(),
     partytown({
       config: {
         forward: ["dataLayer.push"],

package.json

@@ -15,29 +15,30 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@astrojs/partytown": "^2.1.2",
-    "@astrojs/tailwind": "^5.1.3",
-    "astro": "^4.16.17",
+    "@astrojs/partytown": "^2.1.3",
+    "@fontsource-variable/roboto-mono": "^5.1.1",
+    "@tailwindcss/vite": "^4.0.8",
+    "astro": "^5.3.1",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "tailwindcss": "^3.4.16"
+    "tailwindcss": "^4.0.8"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/js": "^9.17.0",
-    "@tailwindcss/typography": "^0.5.15",
-    "@typescript-eslint/parser": "^8.18.1",
-    "astro-eslint-parser": "^1.1.0",
-    "eslint": "^9.17.0",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@eslint/js": "^9.21.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@typescript-eslint/parser": "^8.25.0",
+    "astro-eslint-parser": "^1.2.1",
+    "eslint": "^9.21.0",
     "eslint-plugin-astro": "^1.3.1",
     "husky": "^9.1.7",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.2",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "rehype-katex": "^7.0.1",
-    "rehype-mathjax": "^6.0.0",
+    "rehype-mathjax": "^7.1.0",
     "remark-math": "^6.0.0",
-    "typescript-eslint": "^8.18.1"
+    "typescript-eslint": "^8.25.0"
   }
 }

src/components/Announcement.astro

@@ -14,7 +14,7 @@ const { announcement } = Astro.props;
   <h1 class="text-gray-600 dark:text-gray-400">
     {announcement.data.description}
   </h1>
-  <div class="prose my-8 text-gray-600 dark:prose-invert dark:text-gray-400">
+  <div class="prose dark:prose-invert my-8 text-gray-600 dark:text-gray-400">
     <slot />
   </div>
 </div>

src/components/BlogPost.astro

@@ -1,12 +1,13 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { formatDate } from "../utils";
+import { render } from "astro:content";
 
 interface Props {
   post: CollectionEntry<"blog">;
 }
 const { post } = Astro.props;
-const { remarkPluginFrontmatter } = await post.render();
+const { remarkPluginFrontmatter } = await render(post);
 ---
 
 <div>
@@ -21,7 +22,7 @@ const { remarkPluginFrontmatter } = await post.render();
     {remarkPluginFrontmatter.readingTime}
   </h1>
   <div
-    class="prose my-8 max-w-none text-gray-600 dark:prose-invert dark:text-gray-400"
+    class="prose dark:prose-invert my-8 max-w-none text-gray-600 dark:text-gray-400"
   >
     <slot />
   </div>
@@ -36,7 +37,7 @@ const { remarkPluginFrontmatter } = await post.render();
   </ul>
   <hr />
   <div
-    class="prose my-8 max-w-none text-gray-600 dark:prose-invert dark:text-gray-400"
+    class="prose dark:prose-invert my-8 max-w-none text-gray-600 dark:text-gray-400"
   >
     If you have any questions or comments, or you would like to point out any
     errors in any of the blog posts, please reach out to me at <a

src/components/BlogPostCard.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 <div
   class="my-2 flex items-center justify-between text-gray-600 dark:text-gray-400"
 >
-  <a class="hover:underline" href={`/blog/${post.slug}`}>
+  <a class="hover:underline" href={`/blog/${post.id}`}>
     {post.data.title}
   </a>
   {formatDate(post.data.pubDate)}

src/components/LatestBlogPost.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 <div class="my-4">
   <a
     href="/blog"
-    class="lowercase text-gray-900 hover:underline dark:text-gray-100">posts</a
+    class="text-gray-900 lowercase hover:underline dark:text-gray-100">posts</a
   >
   <BlogPostCard post={post} />
 </div>

src/components/Navbar.astro

@@ -6,7 +6,7 @@ import ArrowUpRight from "./ArrowUpRight.astro";
   aria-label="Navigation bar"
   class="sticky top-0 z-10 bg-gray-50 py-4 dark:bg-[#0a0a0a]"
 >
-  <ul class="flex gap-4 font-medium lowercase text-gray-900 dark:text-gray-100">
+  <ul class="flex gap-4 font-medium text-gray-900 lowercase dark:text-gray-100">
     <li>
       <a class="py-2 hover:underline" href="/"> Home </a>
     </li>

src/components/Projects.astro

@@ -45,6 +45,6 @@ const projects: Project[] = [
 ---
 
 <div class="my-8">
-  <h1 class="lowercase text-gray-900 dark:text-gray-100">Projects</h1>
+  <h1 class="text-gray-900 lowercase dark:text-gray-100">Projects</h1>
   {projects.map((project) => <ProjectCard project={project} />)}
 </div>

src/content/config.ts → src/content.config.ts

@@ -1,7 +1,8 @@
+import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
 
 const blogCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/blog" }),
   schema: z.object({
     title: z.string().min(1),
     description: z.string().min(1),
@@ -12,7 +13,10 @@ const blogCollection = defineCollection({
 });
 
 const announcementCollection = defineCollection({
-  type: "content",
+  loader: glob({
+    pattern: "**/[^_]*.{md,mdx}",
+    base: "./src/content/announcements",
+  }),
   schema: z.object({
     title: z.string().min(1),
     description: z.string().min(1),

src/content/announcements/internships.md

@@ -2,6 +2,7 @@
 title: "Internships and entry level positions"
 description: "Seeking challenging internships and entry-level positions to apply and enhance my coding skills"
 show: false
+slug: internships
 ---
 
 Hi! My name is Milan, I'm a motivated and ambitious second-year CS student with a strong desire to gain practical experience in the field. Seeking challenging internships and entry-level positions to apply and enhance my coding skills, contribute to real-world projects, and learn from industry professionals. Committed to delivering high-quality work, collaborating effectively in team environments, and continuously expanding my knowledge. If you think I'd be a good fit in your team, contact me at milanherke@protonmail.com!

src/content/blog/introduction-to-big-o.md

@@ -4,6 +4,7 @@ pubDate: 2023-07-04
 description: "What do we mean by efficient algorithms? How does the runtime of an algorithm grow as its input size grows?"
 tags: ["big-o", "complexity-analysis"]
 draft: false
+slug: a-brief-introduction-to-big-o
 ---
 
 # Table Of Contents

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import "../styles/global.css";
+
 export interface Props {
   title: string;
 }

src/pages/announcement/[...slug].astro

@@ -1,17 +1,18 @@
 ---
 import { getCollection } from "astro:content";
 import AnnouncementLayout from "../../layouts/AnnouncementLayout.astro";
+import { render } from "astro:content";
 
 export async function getStaticPaths() {
   const announcements = await getCollection("announcements");
   return announcements.map((entry) => ({
-    params: { slug: entry.slug },
+    params: { slug: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
 <AnnouncementLayout announcement={entry}>

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

@@ -1,17 +1,18 @@
 ---
 import { getCollection } from "astro:content";
 import PostLayout from "../../layouts/PostLayout.astro";
+import { render } from "astro:content";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog");
   return blogEntries.map((entry) => ({
-    params: { slug: entry.slug },
+    params: { slug: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
 <PostLayout post={entry}>

src/pages/blog/index.astro

@@ -16,7 +16,7 @@ const tags = [...new Set(posts.map((post) => post.data.tags).flat())];
 
 <BaseLayout title="Milán Herke - Blog">
   <Navbar />
-  <h1 class="mb-1 mt-4 lowercase text-gray-900 dark:text-gray-100">Posts</h1>
+  <h1 class="mt-4 mb-1 text-gray-900 lowercase dark:text-gray-100">Posts</h1>
   <Tags tags={tags} />
   {orderedPosts.map((post) => <BlogPostCard post={post} />)}
 </BaseLayout>

src/pages/index.astro

@@ -29,7 +29,7 @@ const announcements = await getCollection(
       announcements.map((announcement) => (
         <Popup
           text={announcement.data.description}
-          href={`/announcement/${announcement.slug}`}
+          href={`/announcement/${announcement.id}`}
         />
       ))
   }

src/pages/tags/[tag].astro

@@ -25,7 +25,7 @@ const allPosts = await getCollection(
 
 <BaseLayout title="Milán Herke - Blog">
   <Navbar />
-  <h1 class="mb-6 mt-4 lowercase text-gray-900 dark:text-gray-100">
+  <h1 class="mt-4 mb-6 text-gray-900 lowercase dark:text-gray-100">
     Posts tagged with {tag}
   </h1>
   {allPosts.map((post) => <BlogPostCard post={post} />)}

src/styles/global.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@import "@fontsource-variable/roboto-mono";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-sans: "Roboto Mono Variable", "sans-serif";
+}

tsconfig.json

@@ -1,3 +1,5 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
 }