feat: add view transitions

lucsmachado · lucsmachado · commit 913944df78eb · 2024-02-28T14:48:41.000-03:00
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from "astro:transitions";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 
@@ -19,6 +20,7 @@ const { title, description } = Astro.props;
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <ViewTransitions />
   </head>
   <body
     class="bg-slate-900 leading-relaxed text-slate-400 antialiased selection:bg-teal-300 selection:text-teal-900 mx-auto min-h-screen max-w-screen-xl px-6 py-12 md:px-12 md:py-20 lg:px-24 lg:py-0 lg:flex lg:justify-between lg:gap-4"
@@ -30,16 +32,16 @@ const { title, description } = Astro.props;
       <slot />
       <Footer />
     </main>
+    <style is:global>
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base {
+        html {
+          @apply bg-slate-900 text-slate-400 font-sans;
+        }
+      }
+    </style>
   </body>
 </html>
-<style is:global>
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-
-  @layer base {
-    html {
-      @apply bg-slate-900 text-slate-400 font-sans;
-    }
-  }
-</style>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -5,6 +5,8 @@ const metadata = {
   title: "The Lucas Machado Blog",
   description: "Lucas Machado's personal blog.",
 };
+
+const postList = await Astro.glob("../pages/blog/*.md");
 ---
 
 <Layout {...metadata}>
@@ -20,9 +22,13 @@ const metadata = {
         Posts
       </h2>
       <ul>
-        <li>
-          <a href="/blog/why-astro">Why Astro?</a>
-        </li>
+        {
+          postList.map((post) => (
+            <li>
+              <a href={post.url}>{post.frontmatter.title}</a>
+            </li>
+          ))
+        }
       </ul>
     </div>
   </div>
