Merge pull request #12 from milan-codes/dev

milan-codes · web-flow · commit 351ba4d73316 · 2025-02-25T11:40:29.000+01:00
Astro 5
diff --git a/astro.config.mjs b/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"],
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/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"
   }
 }
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -1,13 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-	<style>
-    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
-  </style>
+<svg width="327" height="330" viewBox="0 0 327 330" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18.6978" y="18.6976" width="92.0496" height="310.667" rx="46.0248" fill="#262626"/>
+<rect y="65.0889" width="92.0496" height="230.05" rx="46.0248" transform="rotate(-45 0 65.0889)" fill="#262626"/>
+<rect x="261.911" y="1.90735e-05" width="92.0496" height="230.05" rx="46.0248" transform="rotate(45 261.911 1.90735e-05)" fill="#262626"/>
+<circle cx="262.485" cy="65.4415" r="46.7439" fill="#FD600F"/>
+<circle cx="259.608" cy="180.504" r="46.7439" fill="#FD600F"/>
+<path d="M258.889 328.646C300.887 296.428 307.551 214.063 305.633 176.908H258.17C260.088 214.063 253.424 296.428 211.426 328.646H258.889Z" fill="#FD600F"/>
 </svg>
diff --git a/src/components/Announcement.astro b/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>
diff --git a/src/components/BlogPost.astro b/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
diff --git a/src/components/BlogPostCard.astro b/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)}
diff --git a/src/components/LatestBlogPost.astro b/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>
diff --git a/src/components/Navbar.astro b/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>
diff --git a/src/components/Projects.astro b/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>
diff --git a/src/content.config.ts b/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),
diff --git a/src/content/announcements/internships.md b/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!
diff --git a/src/content/blog/introduction-to-big-o.md b/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
diff --git a/src/env.d.ts b/src/env.d.ts
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -1,4 +1,6 @@
 ---
+import "../styles/global.css";
+
 export interface Props {
   title: string;
 }
diff --git a/src/pages/announcement/[...slug].astro b/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}>
diff --git a/src/pages/blog/[...slug].astro b/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}>
diff --git a/src/pages/blog/index.astro b/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>
diff --git a/src/pages/index.astro b/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}`}
         />
       ))
   }
diff --git a/src/pages/tags/[tag].astro b/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} />)}
diff --git a/src/styles/global.css b/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";
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,3 +1,5 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const { post } = Astro.props;`
`11`	`11`	`<div`
`12`	`12`	`class="my-2 flex items-center justify-between text-gray-600 dark:text-gray-400"`
`13`	`13`	`>`
`14`		- <a class="hover:underline" href={`/blog/${post.slug}`}>
	`14`	+ <a class="hover:underline" href={`/blog/${post.id}`}>
`15`	`15`	`{post.data.title}`
`16`	`16`	`</a>`
`17`	`17`	`{formatDate(post.data.pubDate)}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import ArrowUpRight from "./ArrowUpRight.astro";`
`6`	`6`	`aria-label="Navigation bar"`
`7`	`7`	`class="sticky top-0 z-10 bg-gray-50 py-4 dark:bg-[#0a0a0a]"`
`8`	`8`	`>`
`9`		`- <ul class="flex gap-4 font-medium lowercase text-gray-900 dark:text-gray-100">`
	`9`	`+ <ul class="flex gap-4 font-medium text-gray-900 lowercase dark:text-gray-100">`
`10`	`10`	`<li>`
`11`	`11`	`<a class="py-2 hover:underline" href="/"> Home </a>`
`12`	`12`	`</li>`