New Code Editor and fun

src/components/PostComponent.astro

@@ -0,0 +1,37 @@
+---
+import {CollectionEntry} from "astro:content"
+import {l} from "../util/util";
+import {astroI18n} from "astro-i18n";
+import {Image} from "astro:assets";
+import TagComponent from "./TagComponent.astro";
+
+interface Props {
+    post: CollectionEntry<'announcements'>
+}
+
+const { post } = Astro.props as Props;
+---
+
+<a href={l(`/announcements/${post.slug.split("/").slice(1).join("/")}`)}>
+    <div class="p-4 flex flex-row">
+        {post.data.image != null ? (
+            <div class="flex-shrink-0 pr-2">
+                <Image src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
+            </div>
+        ) : null}
+        <div>
+            <h2 class="text-2xl font-bold">{post.data.title}</h2>
+            <div class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
+                day: "numeric",
+                month: "long",
+                year: "numeric"
+            }).format(post.data.created)}</div>
+            <div>{post.data.description}</div>
+            <div>
+                {post.data.tags.map((tag) => (
+                        <TagComponent tag={tag} />
+                ))}
+            </div>
+        </div>
+    </div>
+</a>