deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): transition blogpost titles

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-08 23:32:20 +01:00
parent a98b8f5143
commit aece417bff
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/blog.astro
View File

@ -18,7 +18,9 @@ const allBlogposts = await getCollection('blog');
{ {
allBlogposts.map((post) => ( allBlogposts.map((post) => (
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<h2 class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl"> <h2
transition:name={post.data.title}
class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
<a href={`/blog/${post.slug}/`}>{post.data.title}</a> <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
</h2> </h2>
<p class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400"> <p class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">

2
src/pages/blog/[...slug].astro
View File

@ -27,7 +27,7 @@ const descriptionMeta =
<BaseLayout title={title} description={descriptionMeta}> <BaseLayout title={title} description={descriptionMeta}>
<div class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl"> <div class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl">
<h1 class="text-4xl font-bold">{title}</h1> <h1 transition:name={title} class="text-4xl font-bold">{title}</h1>
<Content components={components} /> <Content components={components} />
</div> </div>
</BaseLayout> </BaseLayout>