view transition draft

src/pages/blog/[...slug].astro

@@ -15,18 +15,18 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 
-const { data } = post;
+const { data, slug } = post;
 
 const { Content } = await post.render();
 ---
 
 <Layout title={data.title}>
-	<BlogHeader title={data.title} date={data.pubDate} />
-	<article>
+	<article transition:name={slug}>
+		<BlogHeader title={data.title} date={data.pubDate} />
 		<Content />
+		<a href="https://notbyai.fyi/">
+			<i class="not-by-ai"></i>
+		</a>
+		<Tags tags={data.tags} />
 	</article>
-	<a href="https://notbyai.fyi/">
-		<i class="not-by-ai"></i>
-	</a>
-	<Tags tags={data.tags} />
 </Layout>

src/pages/blog/archive/[tag].astro

@@ -50,7 +50,7 @@ posts.sort(
 	<ul>
 		{
 			posts.map(({ slug, data }) => (
-				<li>
+				<li transition:name={slug}>
 					<a href={`/posts/${slug}`}>{data.title}</a> -
 					<span>
 						{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
@@ -60,3 +60,9 @@ posts.sort(
 		}
 	</ul>
 </Layout>
+
+<style>
+	ul {
+		list-style: none;
+	}
+</style>