Blog page added & first post published

2026-04-20 01:40:34 +02:00
parent 8509d6776e
commit e86c12663f
16 changed files with 687 additions and 93 deletions
@@ -1,101 +1,72 @@
 ---
-// Supports weights 100-800
-import '@fontsource-variable/jetbrains-mono/wght.css';
+import { getCollection } from 'astro:content';

-import '@/styles/global.css';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import ArticleCard from '@/components/ArticleCard.astro';
+import Header from '@/components/Header.astro';
+import LatestArticle from '@/components/LatestArticle.astro';

-import { Image } from 'astro:assets';
+const allPosts = await getCollection('blog');
+const posts = allPosts.sort(
+  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()
+);

-import profileImg from '@/assets/profile-picture.jpg';
-
-const githubLink = 'https://github.com/jrdx0';
-const workLink = 'https://walcu.com';
+const [latest, ...articles] = posts;
 ---

-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>jrdx0</title>
-  </head>
-  <body>
-    <header>
-      <div class="profile">
-        <Image src={profileImg} alt="Profile picture" width={32} height={32} />
-        <h1>Jared&lt;<a href={githubLink} target="_blank">@jrdx0</a>&gt;</h1>
-      </div>
+<BaseLayout>
+  <Header />

-      <div class="status">
-        <div class="bullet"></div>
-        <span>
-          Status: Working at
-          <span class="working-at">
-            <a href={workLink} target="_blank">Walcu</a>
-          </span>
-        </span>
-      </div>
-    </header>
-    <main></main>
-    <footer></footer>
-  </body>
-</html>
+  {
+    latest && (
+      <LatestArticle
+        id={latest.id}
+        title={latest.data.title}
+        description={latest.data.description}
+      />
+    )
+  }
+
+  {
+    articles.length > 0 && (
+      <section class="feed">
+        <h2>Más artículos</h2>
+        <ul>
+          {articles.map(({ id, data }) => (
+            <li>
+              <ArticleCard
+                id={id}
+                title={data.title}
+                description={data.description}
+                pubDate={data.pubDate}
+              />
+            </li>
+          ))}
+          <li class="feed-cap" />
+        </ul>
+      </section>
+    )
+  }
+</BaseLayout>

 <style>
-  header {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+  .feed h2 {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.075rem;
+    margin-bottom: 1.125rem;
+    text-transform: uppercase;
  }

-  .profile {
-    align-items: center;
-    display: flex;
-    gap: 0.8rem;
+  .feed ul {
+    list-style: none;
  }

-  .profile img {
-    border-radius: 100%;
+  .feed li {
+    border-top: 1px solid var(--border);
  }

-  .profile h1 {
-    color: #f2f2f2;
-    font-size: 1rem;
-    font-weight: 500;
-  }
-
-  .profile a {
-    color: #f2f2f2;
-  }
-
-  .status {
-    align-items: center;
-    color: #53a4b2;
-    display: flex;
-    font-size: 0.85rem;
-    font-weight: 300;
-    gap: 0.5rem;
-  }
-
-  .bullet {
-    background-color: #53a4b2;
-    border-radius: 100%;
-    height: 0.3rem;
-    width: 0.3rem;
-  }
-
-  .working-at {
-    font-weight: 800;
-  }
-
-  .working-at a {
-    color: #53a4b2;
-  }
-
-  @media (max-width: 450px) {
-    header {
-      flex-direction: column;
-      gap: 0.5rem;
-    }
+  .feed-cap {
+    padding: 0;
  }
 </style>