Blog

.gitignore

@@ -22,3 +22,6 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+#local
+local

package.json

@@ -8,16 +8,19 @@
 		"preview": "astro preview",
 		"astro": "astro",
 		"format": "prettier --write .",
-		"format:check": "prettier ."
+		"format:check": "prettier --check ."
 	},
 	"dependencies": {
+		"@astrojs/rss": "^4.0.14",
 		"@astrojs/starlight": "^0.36.2",
 		"@astrojs/starlight-tailwind": "^4.0.2",
 		"@tailwindcss/vite": "^4.1.17",
 		"astro": "^5.15.4",
+		"remove-markdown": "^0.6.2",
 		"tailwindcss": "^4.1.17"
 	},
 	"devDependencies": {
+		"@tailwindcss/typography": "^0.5.19",
 		"prettier": "3.6.2",
 		"prettier-plugin-astro": "0.14.1"
 	}

src/components/BlogContentFormatting.astro

@@ -0,0 +1,5 @@
+<div
+	class="prose dark:prose-invert prose-lg prose-zinc max-w-none dark:prose-code:bg-zinc-800 prose-code:bg-zinc-200"
+>
+	<slot />
+</div>

src/components/BlogPostCard.astro

@@ -0,0 +1,32 @@
+---
+import type { BlogPostInfo } from "../scripts/blogpost";
+
+interface Props {
+	post: BlogPostInfo;
+}
+
+const { post } = Astro.props;
+
+const PREVIEW_LEN = 150;
+
+let contentPreview = post.markdownRemovedContent;
+
+if (post.rawContent.length > PREVIEW_LEN) {
+	contentPreview = contentPreview.substring(0, 150) + "...";
+}
+---
+
+<a href={post.url}>
+	<div class="rounded flex flex-col gap-2 hover:text-red-500">
+		<div class="font-bold text-2xl">
+			{post.title}
+		</div>
+
+		<span class="dark:text-zinc-300 text-zinc-600 mr-1 text-sm italic">
+			{post.author}, {post.date.toLocaleDateString("de-EN")}
+		</span>
+		<div class="dark:text-zinc-200 text-zinc-700 mt-5">
+			{contentPreview}
+		</div>
+	</div>
+</a>

src/components/BlogPostList.astro

@@ -0,0 +1,39 @@
+---
+import { type BlogPostInfo } from "../scripts/blogpost";
+import BlogPostCard from "./BlogPostCard.astro";
+
+interface Props {
+	posts: BlogPostInfo[];
+	maxItems?: number;
+	sort?: "date" | "dateDesc" | "default";
+}
+
+let { maxItems, sort = "date", posts } = Astro.props;
+
+function sortByDate() {
+	posts.sort(function (a, b) {
+		return new Date(b.date).getTime() - new Date(a.date).getTime();
+	});
+}
+
+if (sort === "date") {
+	sortByDate();
+} else if (sort === "dateDesc") {
+	sortByDate();
+	posts.reverse();
+}
+
+if (maxItems) {
+	posts = posts.slice(0, maxItems);
+}
+---
+
+<ul class="grid sm:grid-cols-2 xl:grid-cols-3 gap-15">
+	{
+		posts.map((post) => (
+			<li class="flex">
+				<BlogPostCard post={post} />
+			</li>
+		))
+	}
+</ul>

src/components/Footer.astro

@@ -4,6 +4,7 @@ import MenixAnimatedLogo from "./reusable/MenixAnimatedLogo.astro";
 import Factory from "../assets/icons/factory.svg";
 import GhLogo from "../assets/icons/github-logo.svg";
 import Download from "../assets/icons/download.svg";
+import RssIcon from "../assets/icons/rss.svg";
 
 const links = [
 	{
@@ -18,9 +19,14 @@ const links = [
 	},
 	{
 		icon: GhLogo,
-		text: "Github org",
+		text: "Github",
 		href: "https://github.com/menix-os",
 	},
+	{
+		icon: RssIcon,
+		text: "RSS",
+		href: "https://menix-os.org/rss.xml",
+	},
 ];
 ---
 

src/components/Frontpage.astro

@@ -3,8 +3,12 @@ import { Image } from "astro:assets";
 import HeroImage from "../assets/images/menix-in-qemu-cropped.png";
 import Button from "./reusable/Button.astro";
 import MenixGear from "../assets/logos/menix-gear.svg";
+import BlogPostList from "./BlogPostList.astro";
+import { loadPostInfos } from "../scripts/blogpost";
 
 const gearSize = 350;
+
+const posts = loadPostInfos();
 ---
 
 <main class="min-h-screen">
@@ -44,6 +48,17 @@ const gearSize = 350;
 			/>
 		</div>
 	</section>
+
+	<section class="mx-auto my-20 max-w-[1080px] px-10">
+		<div class="text-3xl dark:text-zinc-100 text-zinc-900 my-10">
+			<h3 class="mb-5 text-center sm:text-left">Recent blog posts</h3>
+			<hr class="dark:text-zinc-700 text-zinc-300" />
+		</div>
+
+		<div>
+			<BlogPostList posts={posts} maxItems={3} sort={"date"} />
+		</div>
+	</section>
 </main>
 
 <style>

src/components/ButtonsBar.astro → src/components/NavButtonsBar.astro

@@ -3,8 +3,8 @@ import NavLink from "./reusable/NavLink.astro";
 import GithubLogo from "../assets/icons/github-logo.svg";
 
 const links = [
-	{ text: "Downloads", href: "https://download.menix-os.org", newtab: true },
-	{ text: "Docs", href: "/docs" },
+	{ text: "Blog", href: "/blog" },
+	{ text: "Handbook", href: "/docs" },
 	{
 		text: "Code",
 		href: "https://github.com/menix-os/menix",
@@ -14,7 +14,7 @@ const links = [
 ];
 ---
 
-<ul class="flex gap-5 items-center">
+<ul class="flex gap-1 sm:gap-5 items-center">
 	{
 		links.map((link) => (
 			<li class="flex">