view transition draft

src/components/Avatar.astro

@@ -0,0 +1,30 @@
+---
+import { Image } from 'astro:assets';
+
+import portrait from '../img/portrait.jpg';
+
+interface Props {
+	size: number;
+}
+
+const { size } = Astro.props;
+---
+
+<Image
+	src={portrait}
+	alt="Illustrated portrait of a person with glasses and a beard, wearing a red and black plaid shirt. The background is a solid green color."
+	class="portrait"
+	width={`${size}`}
+	height={`${size}`}
+/>
+
+<style>
+	.portrait {
+		display: block;
+		margin: auto;
+		border-radius: 200px;
+	}
+	a > svg {
+		transform: translateY(0.18rem);
+	}
+</style>

src/components/BlogHeader.astro

@@ -4,9 +4,9 @@ import { format, add } from 'date-fns';
 import CalendarIcon from '../img/svg/calendar.svg';
 
 interface Props {
-	title: String;
+	title: string;
 	date: Date;
-	slug?: String;
+	slug?: string;
 }
 
 const { title, date, slug } = Astro.props;

src/components/Header.astro

@@ -1,37 +1,54 @@
 ---
+import Avatar from './Avatar.astro';
 const { pathname } = Astro.url;
 
 interface Props {}
 
 interface NavLink {
 	label: string;
-	icon: string;
+
 	path: string;
 }
 
 const navLinks: NavLink[] = [
-	{ label: 'Home', icon: 'person', path: '' },
-	{ label: 'Blog', icon: 'pen', path: 'blog' },
-	{ label: 'Now', icon: 'clock', path: 'now' },
+	{ label: 'Blog', path: 'blog' },
+	{ label: 'Now', path: 'now' },
+	{ label: 'Projects', path: 'projects' },
 ];
 
 const pathComponents = pathname.split('/').slice(1);
 ---
 
 <header>
-	<h1>ghall.blog</h1>
+	<div>
+		{
+			pathComponents[0] !== '' ? (
+				<a href="/" transition:name="my-avatar">
+					<Avatar size={60} />
+				</a>
+			) : null
+		}
+	</div>
 	<nav>
 		{
 			navLinks.map((link) => (
 				<li>
-					<a
-						href={`/${link.path}`}
-						class={pathComponents[0] === link.path ? 'selected' : null}
-					>
+					<a href={`/${link.path}`}>
 						<span>{link.label}</span>
 					</a>
+					{pathComponents[0] === link.path ? (
+						<div class="underline" transition:name="menu-selection-indicator" />
+					) : null}
 				</li>
 			))
 		}
 	</nav>
 </header>
+
+<style>
+	.underline {
+		height: 2px;
+		width: 100%;
+		background-color: var(--orange);
+	}
+</style>

src/components/LatestPost.astro

@@ -9,10 +9,11 @@
       )
       .then((data) => {
         const item = data.querySelector('item');
+				console.log(item)
         this.latestPost = {
           link: item.querySelector('link').textContent,
           body: item.querySelector('description').textContent,
-          pubDate: item.querySelector('pubDate').textContent,
+          
         };
       })
       .catch((error) => {
@@ -27,7 +28,6 @@
 			<h2>Latest Mastodon Post</h2>
 			<p x-html="latestPost.body"></p>
 			<a x-bind:href="latestPost.link" target="_blank">View Post</a>
-			<small x-text="latestPost.pubDate"></small>
 		</div>
 	</template>
 	<template x-if="!latestPost">

src/components/PostPreview.astro

@@ -19,9 +19,7 @@ const { post } = Astro.props;
 const { data, slug } = post;
 ---
 
-<article>
-	<div>
-		<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
-		<Tags tags={data.tags} />
-	</div>
+<article transition:name={slug}>
+	<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
+	<Tags tags={data.tags} />
 </article>