From 6800e399ed670a1535b18446e4f308e83a6cf918 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 18 Sep 2023 12:50:14 -0500
Subject: [PATCH] some basic view transition support

---
 .../social-feed/src/components/Article.astro  | 16 +++++--
 .../src/components/ArticleHeader.astro        |  4 +-
 .../social-feed/src/components/Card.astro     | 30 ++++++++++---
 .../src/components/SplitLayout.astro          | 11 ++---
 examples/social-feed/src/layouts/Base.astro   | 42 +++++++++++--------
 .../social-feed/src/pages/post/[slug].astro   | 19 ++++++---
 examples/social-feed/src/style/theme.css      |  5 +++
 7 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/examples/social-feed/src/components/Article.astro b/examples/social-feed/src/components/Article.astro
index 369f5c47c..e7491cda0 100644
--- a/examples/social-feed/src/components/Article.astro
+++ b/examples/social-feed/src/components/Article.astro
@@ -1,6 +1,6 @@
 ---
 import ArticleHeader from './ArticleHeader.astro';
-import type { Article, Post } from '../content/config.js';
+import type { Article } from '../content/config.js';
 
 export interface Props {
 	article: Article;
@@ -13,9 +13,9 @@ const { Content } = await article.render();
 
 <article>
 	<ArticleHeader {article} class="header" />
-		<div class="e-content">
-			<Content />
-		</div>
+	<div class="e-content">
+		<Content />
+	</div>
 </article>
 
 <style>
@@ -24,6 +24,14 @@ const { Content } = await article.render();
 		flex-direction: column;
 		gap: var(--theme-space-lg);
 		padding-block: var(--theme-space-md);
+		width: 100%;
+		max-width: var(--theme-size-content-3);
+		margin-inline: auto;
+	}
+
+	.e-content {
+		max-width: var(--theme-size-content-3);
+		margin-inline: auto;
 	}
 
 	.e-content > :global(* + *) {
diff --git a/examples/social-feed/src/components/ArticleHeader.astro b/examples/social-feed/src/components/ArticleHeader.astro
index 9830a763e..f55b7b914 100644
--- a/examples/social-feed/src/components/ArticleHeader.astro
+++ b/examples/social-feed/src/components/ArticleHeader.astro
@@ -41,7 +41,7 @@ const { text: readingTime } = await getReadingTime(article.body);
 		</p>
 	</div>
 
-	<h1 class="p-name">{article.data.title}</h1>
+	<h1 class="p-name">article.data.title}</h1>
 
 	{article.data.categories?.length > 0 && <TagList tags={article.data.categories} />}
 </header>
@@ -93,7 +93,7 @@ const { text: readingTime } = await getReadingTime(article.body);
 
 	@media (min-width: 640px) {
 		.cover {
-		margin-block-end: var(--theme-space-sm);
+			margin-block-end: var(--theme-space-sm);
 		}
 
 		.p-author {
diff --git a/examples/social-feed/src/components/Card.astro b/examples/social-feed/src/components/Card.astro
index ab899c3fc..54495030c 100644
--- a/examples/social-feed/src/components/Card.astro
+++ b/examples/social-feed/src/components/Card.astro
@@ -11,14 +11,16 @@ export interface Props extends HTMLAttributes<'article'> {
 	post: Post;
 }
 
-const { post, ...attrs } = Astro.props;
+const { post, class: className, ...attrs } = Astro.props;
 
 const { pubDate, categories = [] } = post.data;
 const cover = 'cover' in post.data && post.data.cover;
 const title = 'title' in post.data && post.data.title;
+
+const postUrl = `/post/${post.slug}/`;
 ---
 
-<article class="h-entry" {...attrs}>
+<article class:list={['h-entry', className]} transition:name={`card-${post.slug}`} {...attrs}>
 	<header class="p-author h-card">
 		<Image {...settings.avatar} width={120} class="u-photo" />
 		<strong class="p-name">{settings.name}</strong>
@@ -35,12 +37,24 @@ const title = 'title' in post.data && post.data.title;
 		isArticle(post) ? (
 			<p class="p-summary">{post.data.description}</p>
 		) : (
-			post.render().then(({ Content }) => <div class="e-content"><Content /></div>)
+			post.render().then(({ Content }) => (
+				<div class="e-content">
+					<Content />
+				</div>
+			))
 		)
 	}
 	<footer>
-		<a href={`/post/${post.slug}/`} class="u-url">Full {post.collection === 'articles' ? 'article' : 'note'}</a>
-		<a href={`javascript: navigator.clipboard.writeText(window.location.href + "post/${post.slug}/");`}>
+		{
+			Astro.url.pathname !== postUrl && (
+				<a href={`/post/${post.slug}/`} class="u-url">
+					Full {post.collection === 'articles' ? 'article' : 'note'}
+				</a>
+			)
+		}
+		<a
+			href={`javascript: navigator.clipboard.writeText(window.location.href + "post/${post.slug}/");`}
+		>
 			<Icon icon="share" size="1.5rem" />
 			<span class="sr-only">Share this post</span>
 		</a>
@@ -49,6 +63,7 @@ const title = 'title' in post.data && post.data.title;
 
 <style>
 	article {
+		max-width: var(--theme-size-content-2);
 		padding: var(--theme-space-sm) var(--theme-space-sm) var(--theme-space-md);
 		background-color: var(--theme-bg-accent);
 		border-radius: var(--theme-radius-xl);
@@ -65,7 +80,7 @@ const title = 'title' in post.data && post.data.title;
 		row-gap: var(--theme-space-2xs);
 		column-gap: var(--theme-space-sm);
 	}
-	.u-photo {
+	.h-card .u-photo {
 		grid-area: avatar;
 		width: var(--theme-space-xl);
 		height: var(--theme-space-xl);
@@ -95,4 +110,7 @@ const title = 'title' in post.data && post.data.title;
 		align-items: center;
 		justify-content: space-between;
 	}
+	footer > *:only-child {
+		margin-inline-start: auto;
+	}
 </style>
diff --git a/examples/social-feed/src/components/SplitLayout.astro b/examples/social-feed/src/components/SplitLayout.astro
index 130940326..40137474e 100644
--- a/examples/social-feed/src/components/SplitLayout.astro
+++ b/examples/social-feed/src/components/SplitLayout.astro
@@ -16,20 +16,17 @@ const { reverse = false, class: className, ...attrs } = Astro.props;
 	div {
 		display: flex;
 		flex-direction: column;
+		align-items: center;
 		gap: var(--theme-space-lg);
 		margin: 0 auto;
 		width: 100%;
-		max-width: var(--theme-content-width);
+		max-width: var(--theme-size-content-3);
 	}
 
 	@media (min-width: 50em) {
 		div {
-			display: grid;
-			grid-template-columns: 12rem 1fr;
-		}
-
-		div.reverse {
-			grid-template-columns: 1fr 12rem;
+			flex-direction: row;
+			align-items: initial;
 		}
 	}
 </style>
diff --git a/examples/social-feed/src/layouts/Base.astro b/examples/social-feed/src/layouts/Base.astro
index f2be423cb..b71ed924b 100644
--- a/examples/social-feed/src/layouts/Base.astro
+++ b/examples/social-feed/src/layouts/Base.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 import settings from '../settings';
 import '../style/theme.css';
 import '../style/global.css';
@@ -22,6 +23,7 @@ const { title = settings.name } = Astro.props;
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
+		<ViewTransitions />
 
 		<!-- Canonical URL -->
 		<link rel="canonical" href={canonicalURL} />
@@ -63,23 +65,27 @@ const { title = settings.name } = Astro.props;
 			<slot />
 		</main>
 		<Footer />
+		<style>
+			html {
+				scrollbar-gutter: stable;
+			}
+
+			body {
+				display: flex;
+				flex-direction: column;
+				gap: var(--theme-space-lg);
+			}
+
+			.header,
+			main {
+				padding-inline: var(--theme-space-sm-lg);
+			}
+
+			main {
+				width: 100%;
+				max-width: 55rem;
+				margin-inline: auto;
+			}
+		</style>
 	</body>
-
-	<style>
-		body {
-			display: flex;
-			flex-direction: column;
-			gap: var(--theme-space-lg);
-		}
-
-		.header, main {
-			padding-inline: var(--theme-space-sm-lg);
-		}
-
-		main {
-			width: 100%;
-			max-width: 55rem;
-			margin-inline: auto;
-		}
-	</style>
 </html>
diff --git a/examples/social-feed/src/pages/post/[slug].astro b/examples/social-feed/src/pages/post/[slug].astro
index 5aae2799f..52c6812f4 100644
--- a/examples/social-feed/src/pages/post/[slug].astro
+++ b/examples/social-feed/src/pages/post/[slug].astro
@@ -31,7 +31,7 @@ const { title } = isArticle(post) && post.data;
 		<span>Back to feed</span>
 	</a>
 
-	{isArticle(post) ? (<Article article={post} />) : (<div class="card"><Card {post} /></div>)}
+	{isArticle(post) ? <Article article={post} /> : <Card {post} class="card" />}
 
 	{
 		(next || prev) && (
@@ -45,7 +45,11 @@ const { title } = isArticle(post) && post.data;
 				{next && (
 					<a href={`/post/${next.slug}`} class="next">
 						<span>Next post</span>
-						<Icon icon="arrow-right" size="var(--theme-space-md)" color="var(--theme-accent-dark)" />
+						<Icon
+							icon="arrow-right"
+							size="var(--theme-space-md)"
+							color="var(--theme-accent-dark)"
+						/>
 					</a>
 				)}
 			</footer>
@@ -68,12 +72,15 @@ const { title } = isArticle(post) && post.data;
 
 	.card {
 		width: 100%;
-		max-width: 60ch;
-		margin-inline: auto;
-		padding-block: var(--theme-space-md);
+		margin: var(--theme-space-md) auto;
 	}
 
-	.prev, .next {
+	.center {
+		margin-inline: auto;
+	}
+
+	.prev,
+	.next {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
diff --git a/examples/social-feed/src/style/theme.css b/examples/social-feed/src/style/theme.css
index 9d5fb81b0..78c752ca5 100644
--- a/examples/social-feed/src/style/theme.css
+++ b/examples/social-feed/src/style/theme.css
@@ -26,6 +26,11 @@
   --theme-shadow-md: 2px 2px 10px rgba(0, 0, 0, 0.1);
   --theme-shadow-lg: 2px 2px 20px rgba(0, 0, 0, 0.2);
 
+	/* Content Sizes */
+	--theme-size-content-1: 30ch;
+	--theme-size-content-2: 45ch;
+	--theme-size-content-3: 65ch;
+
   /* Type Scale */
 	/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   --theme-text-sm: clamp(0.83rem, calc(0.76rem + 0.36vw), 1.04rem);