Merge pull request #1 from renanleonel/develop

feat: view transitions
renanleonel · Mar 9, 2024 · ef81c9c · ef81c9c
2 parents fbd65e4 + 1d7b571
commit ef81c9c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,8 +5,9 @@ interface Props {
 
 const { title } = Astro.props;
 
-import Header from "@/components/Header.astro";
 import Theme from "@/components/Theme.astro";
+import Header from "@/components/Header.astro";
+import { ViewTransitions } from "astro:transitions";
 ---
 
 <!doctype html>
@@ -18,6 +19,7 @@ import Theme from "@/components/Theme.astro";
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <ViewTransitions />
   </head>
   <body
     class="flex flex-col justify-between items-center min-h-screen dark:bg-primary text-neutral-700 dark:text-neutral-200 px-4 md:p-4"

diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
@@ -27,7 +27,7 @@ export const components = {
 ---
 
 <MarkdownLayout frontmatter={post.data}>
-  <div class="prose dark:prose-invert w-full max-w-2xl">
+  <div class="prose dark:prose-invert w-full max-w-2xl" transition:name="post">
     <Content {components} />
   </div>
 </MarkdownLayout>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
@@ -14,7 +14,7 @@ posts = posts.sort(
 ---
 
 <Layout title="posts | renan leonel">
-  <main class="space-y-4">
+  <main class="space-y-4" transition:name="post">
     <h1 class="text-xl font-bold">Posts</h1>
     <div class="space-y-4">
       {