MatthiesenXYZ
/
astro-hashnode
1
0
Fork 0
Code Issues Pull Requests Packages Releases 9 Activity

Add better transition animations

This commit is contained in:
Adam Matthiesen 2024-03-13 23:17:34 -07:00
parent b7eec6bb98
commit a6d03c605a
No known key found for this signature in database
GPG Key ID: 3F53281CB3936013
6 changed files with 55 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package/src/components/Author.astro
View File

@ -20,16 +20,24 @@ const { post } = Astro.props;
height={50} height={50}
class="rounded-3xl mr-3" class="rounded-3xl mr-3"
loading="eager" loading="eager"
transition:animate={"fade"}
transition:name={'author:' + post.author.profilePicture}
/> />
<div class="mt-3 flex"> <div class="mt-3 flex">
<span>{post.author.name}</span> <span transition:animate={"fade"}
transition:name={'author:' + post.author.name}
>{post.author.name}</span>
<span class="mx-3 block font-bold text-slate-500">.</span> <span class="mx-3 block font-bold text-slate-500">.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start"> <div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start" >
<span>{getFormattedDate(post.publishedAt)}</span> <span transition:animate={"fade"}
transition:name={'hero:' + post.publishedAt}
>{getFormattedDate(post.publishedAt)}</span>
<span class="mx-3 block font-bold text-slate-500">.</span> <span class="mx-3 block font-bold text-slate-500">.</span>
<span>{post.readTimeInMinutes} min read</span> <span transition:animate={"fade"}
transition:name={'hero:' + post.readTimeInMinutes}
>{post.readTimeInMinutes} min read</span>
</div> </div>
</div> </div>

41
package/src/components/Header.astro
View File

@ -7,6 +7,27 @@ const aboutPageData = await getAboutPage();
const baseURL = import.meta.env.BASE_URL; const baseURL = import.meta.env.BASE_URL;
const pathname = new URL(Astro.request.url).pathname;
// remove leading and trailing slash
const removeTrailingAndLeadingSlash = (str:string) => {
// define checked string as the original string
let checkedStr = str;
// remove leading slash
if (str.startsWith("/")) {
checkedStr = str.slice(1);
}
// remove trailing slash
if (str.endsWith("/")) {
checkedStr = str.slice(0, -1);
}
// return checked string
return checkedStr;
}
const currentPath = removeTrailingAndLeadingSlash(pathname);
--- ---
<header class="flex bg-blue-200 w-full p-3"> <header class="flex bg-blue-200 w-full p-3">
<h1 class="text-2xl"> <h1 class="text-2xl">
@ -35,8 +56,22 @@ const baseURL = import.meta.env.BASE_URL;
</a> </a>
</h1> </h1>
<div class="ml-5 pt-0.5 text-lg"> <div class="ml-5 pt-0.5 text-lg">
<a class="mr-3" href={baseURL}>Home</a> <a
<a class="mr-3" href={`${baseURL}blog`}>Blog</a> class=`mr-3 ${currentPath === "" ? "font-bold" : ""}`
{aboutPageData && <a href={`${baseURL}blog/about/`}>About</a>} href={baseURL}
>Home
</a>
<a
class=`mr-3 ${currentPath === "blog" ? "font-bold" : ""}`
href={`${baseURL}blog`}
>Blog
</a>
{ aboutPageData && (
<a
class=`mr-3 ${currentPath === "blog/about" ? "font-bold" : ""}`
href={`${baseURL}blog/about`}
>About
</a>
) }
</div> </div>
</header> </header>

1
package/src/components/PostCard.astro
View File

@ -26,6 +26,7 @@ const p = await getPost(post.slug);
src={p.coverImage.url} src={p.coverImage.url}
alt={post.title} alt={post.title}
inferSize={true} inferSize={true}
transition:name={'hero:' + p.coverImage.url}
/> />
<div class="flex flex-col m-4"> <div class="flex flex-col m-4">
<p class="mb-2 text-lg">{post.brief}</p> <p class="mb-2 text-lg">{post.brief}</p>

2
package/src/layouts/Layout.astro
View File

@ -62,7 +62,7 @@ const { pageTitle, hideFooter, hideHeader, ogImage } = Astro.props as AstroHashn
</head> </head>
<body> <body>
<div class="flex flex-col"> <div class="flex flex-col">
{!hideHeader && <Header />} {!hideHeader && <Header transition:animate="none" />}
<div class="flex flex-wrap flex-col mt-0 mr-auto mb-0 ml-auto lg:w-[60%]"> <div class="flex flex-wrap flex-col mt-0 mr-auto mb-0 ml-auto lg:w-[60%]">
<slot /> <slot />
</div> </div>

3
package/src/pages/blog/[slug].astro
View File

@ -28,11 +28,12 @@ const post = await getPost(slug);
alt={post.title} alt={post.title}
inferSize={true} inferSize={true}
loading="eager" loading="eager"
transition:name={'hero:' + post.coverImage.url}
/> />
<h1 class="text-4xl font-bold pt-5">{post.title}</h1> <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
<h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2> <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
<Author post={post} /> <Author post={post}/>
<div class="flex flex-wrap justify-center items-center mt-5 mb-5"> <div class="flex flex-wrap justify-center items-center mt-5 mb-5">
{post.tags && post.tags.map((tag) => <Tag tag={tag} />)} {post.tags && post.tags.map((tag) => <Tag tag={tag} />)}

1
package/src/pages/ssr-pages/[slug].astro
View File

@ -27,6 +27,7 @@ const post = await getPost(checkSlug(slug));
alt={post.title} alt={post.title}
inferSize={true} inferSize={true}
loading="eager" loading="eager"
transition:name={'hero:' + post.coverImage.url}
/> />
<h1 class="text-4xl font-bold pt-5">{post.title}</h1> <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
<h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2> <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>