first commit

2025-04-07 15:50:13 -06:00
commit c2421d79c5
124 changed files with 12129 additions and 0 deletions
--- a/src/components/blog/LastPost.astro
+++ b/src/components/blog/LastPost.astro
@@ -0,0 +1,83 @@
+---
+const allPosts = await Astro.glob("../../pages/blog/posts/*.md");
+
+import Tag from "../ui/Tag.astro";
+import ReadMore from "../ui/ReadMore.astro";
+import Capsule from "../ui/Capsule.astro";
+import DatePub from "./DatePub.astro";
+
+// Get the latest post using reduce
+const latestPost = allPosts.reduce((latest, current) => {
+  const latestDate = new Date(latest.frontmatter.pubDate).getTime();
+  const currentDate = new Date(current.frontmatter.pubDate).getTime();
+  return currentDate > latestDate ? current : latest;
+});
+
+const tags = [...new Set(latestPost.frontmatter.tags ?? [])];
+const languages = [...new Set(latestPost.frontmatter.languages ?? [])];
+const image = latestPost.frontmatter.image.url;
+const imageAlt =
+  latestPost.frontmatter.image.alt || latestPost.frontmatter.title;
+---
+
+{
+  latestPost && (
+    <div
+      style={{ backgroundImage: `url(${image})` }}
+      class="h-full hover:shadow-[0_20px_50px_rgba(13,_188,_130,_0.2)] flex flex-col overflow-hidden rounded-2xl bg-gradient-to-br bg-center bg-cover transition-all ease-in-out duration-200"
+      role="article"
+      aria-labelledby="post-title"
+    >
+      <article class="h-full flex flex-col justify-between max-sm:bg-zinc-900 max-sm:relative min-sm:bg-gradient-to-t from-black/95 from-25% to-transparent max-sm:from-60% p-8 max-md:p-6 max-sm:mp-0 max-sm:p-0">
+        <a
+          href=""
+          class="min-sm:hidden relative top-0 left-0 w-full h-auto -z-0"
+          aria-hidden="true"
+        >
+          <img
+            src={image}
+            alt={imageAlt}
+            class="w-full h-auto"
+            loading="lazy"
+          />
+        </a>
+        <div
+          class="w-full flex pb-5 gap-2 flex-wrap justify-end z-10 max-sm:px-6 max-sm:pt-6"
+          role="list"
+          aria-label="Programming languages"
+        >
+          {languages.map((language: unknown) => (
+            <Capsule lang={language?.toString() || ""} />
+          ))}
+        </div>
+
+        <a
+          href={latestPost.url}
+          class="text-mint-50 gap-3 h-full flex items-end max-sm:px-6  rounded-lg transition-all"
+          aria-label={`Read article: ${latestPost.frontmatter.title}`}
+        >
+          <div class="gap-3 flex flex-col justify-end drop-shadow-[1px_6px_1px_rgba(0,_0,_0,_0.3)]">
+            <DatePub date={latestPost.frontmatter.pubDate} class="text-mint-50" />
+            <h2
+              id="post-title"
+              class="text-4xl max-xl:text-3xl max-sm:text-2xl font-bold"
+            >
+              <span>{latestPost.frontmatter.title}</span>
+            </h2>
+            <ReadMore class="text-mint-50" />
+          </div>
+        </a>
+
+        <div
+          class="gap-2 mt-3 justify-start items-center flex flex-row flex-wrap max-sm:px-6 max-sm:pb-6"
+          role="list"
+          aria-label="Article tags"
+        >
+          {tags.map((tag) => (
+            <Tag tag={tag} forceDark="true">{tag}</Tag>
+          ))}
+        </div>
+      </article>
+    </div>
+  )
+}