style: Improve code formatting and readability across multiple components

src/components/PostComponent.astro

@@ -1,50 +1,60 @@
 ---
-import type {CollectionEntry} from "astro:content";
-import {l} from "../util/util";
-import {astroI18n} from "astro-i18n";
-import {Image} from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import { l } from "../util/util";
+import { astroI18n } from "astro-i18n";
+import { Image } from "astro:assets";
 import TagComponent from "./TagComponent.astro";
 import P from "./P.astro";
 import Card from "@components/Card.svelte";
 
 interface Props {
-    post: CollectionEntry<"announcements">
+    post: CollectionEntry<"announcements">;
 }
 
-const { post, slim }: {
-    post: CollectionEntry<"announcements">,
-    slim: boolean,
+const {
+    post,
+    slim,
+}: {
+    post: CollectionEntry<"announcements">;
+    slim: boolean;
 } = Astro.props as Props;
 
 const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
 ---
 
-<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1" : ""}`} hoverEffect={false}>
-    <div class={`flex flex-row ${slim ? "":"p-4"}`}>
-        {post.data.image != null
-            ? (
+<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1 backdrop-blur-xl bg-transparent" : ""}`} hoverEffect={false}>
+    <div class={`flex flex-row ${slim ? "" : "p-4"}`}>
+        {
+            post.data.image != null ? (
                 <a href={postUrl}>
                     <div class="flex-shrink-0 pr-2">
-                        <Image transition:name={post.data.title + "-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" />
+                        <Image
+                            transition:name={post.data.title + "-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>
                 </a>
-            )
-            : null}
+            ) : null
+        }
         <div>
             <a href={postUrl} class="flex flex-col items-start">
                 <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
-                <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
-                }).format(post.data.created)}</P>
+                <P class="text-gray-500"
+                    >{
+                        Intl.DateTimeFormat(astroI18n.locale, {
+                            day: "numeric",
+                            month: "long",
+                            year: "numeric",
+                        }).format(post.data.created)
+                    }</P
+                >
                 <P>{post.data.description}</P>
             </a>
             <div class="mt-1" transition:name={post.data.title + "-tags"}>
-                {post.data.tags.map((tag) => (
-                    <TagComponent tag={tag} />
-                ))}
+                {post.data.tags.map((tag) => <TagComponent tag={tag} />)}
             </div>
         </div>
     </div>
-</Card>
+</Card>