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

view transition updates #18

Merged
Adammatthiesen merged 4 commits from dev-testing into main 2024-03-14 10:04:22 +00:00
Conversation 2 Commits 4 Files Changed 10 +72 -13
10 changed files with 72 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/friendly-pets-boil.md Normal file
View File

@ -0,0 +1,5 @@
---
"@matthiesenxyz/astro-hashnode": patch
---
view transition updates

14
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,8 +28,9 @@ 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" transition:name={'banner'} transition:animate={'fade'}>{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}/>

4
package/src/pages/blog/about.astro
View File

@ -9,7 +9,9 @@ const data = await getAboutPage();
<Layout pageTitle="About"> <Layout pageTitle="About">
<div class="flex flex-col justify-center p-2"> <div class="flex flex-col justify-center p-2">
<h2 class="text-3xl mb-3">{data.title} Page</h2> <h2 class="text-3xl mb-3"
transition:name={'banner'}
transition:animate={'fade'}>{data.title}</h2>
<div class="about-content"> <div class="about-content">
<Markdown content={data.content.markdown} <Markdown content={data.content.markdown}
components={{ components={{

2
package/src/pages/blog/index.astro
View File

@ -10,7 +10,7 @@ const allPosts = data.publication.posts.edges;
--- ---
<Layout pageTitle="Blog"> <Layout pageTitle="Blog">
<div class="flex flex-col justify-center items-center p-2"> <div class="flex flex-col justify-center items-center p-2">
<h2 class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2> <h2 transition:animate={'fade'} transition:name={'banner'} class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
<Posts allPosts={allPosts}/> <Posts allPosts={allPosts}/>
</div> </div>

8
package/src/pages/index.astro
View File

@ -13,8 +13,14 @@ import background from "../assets/blog.jpg";
height={1080} height={1080}
width={1920} width={1920}
loading="eager" loading="eager"
transition:name={'background:' + background}
transition:animate={'fade'}
/> />
<div class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md"> <div
class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md"
transition:name={'banner'}
transition:animate={'fade'}
>
<div class="flex pb-5 mb-5 text-5xl text-purple-800"> <div class="flex pb-5 mb-5 text-5xl text-purple-800">
<p>Hashnode Blog</p> <p>Hashnode Blog</p>
</div> </div>

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>