Add View Transitions

Author: WebDevSimplified

src/components/BlogPost.astro

@@ -13,25 +13,28 @@ export interface Props {
 
 const { title, date, updatedDate, tags, url } = Astro.props
 const siteUrl = Astro.site.href
+const transitionId = new URL(url).pathname.replaceAll("/", "_").replace(/_$/, "")
 ---
 
 <div class="layout">
   <article class="content">
     <div>
       <header>
-        <h1 class="title">{title}</h1>
-        <p class={`publish-date ${updatedDate && "old-date"}`}>
+        <h1 class="title" style={{ 'view-transition-name': `blog-title-${transitionId}` }}>{title}</h1>
+        <span class={`publish-date ${updatedDate && "old-date"}`} style={{ 'view-transition-name': `blog-publish-date-${transitionId}` }}>
           {dateFormatter.format(new Date(date))}
-        </p>
+        </span>
+        <br />
         {
           updatedDate && (
-            <p class="publish-date">
+            <span class="publish-date" style={{ 'view-transition-name': `blog-update-date-${transitionId}` }}>
               Updated: {dateFormatter.format(new Date(updatedDate))}
-            </p>
+            </span>
           )
         }
         <div style="margin-bottom: 1rem">
           <TagBar
+            transitionId={transitionId}
             tags={tags.map(tag => {
               return { name: tag }
             })}

src/components/BlogPostPreview.jsx

@@ -2,6 +2,8 @@ import TagBar from "./TagBar.jsx"
 import dateFormatter from "../utils/dateFormatter.js"
 
 export default function BlogPostPreview({ post }) {
+  const transitionId = post.url.replaceAll("/", "_").replace(/_$/, "")
+
   return (
     <article className="blog-preview-wrapper">
       <header
@@ -14,7 +16,12 @@ export default function BlogPostPreview({ post }) {
           textAlign: "left",
         }}
       >
-        <h2 className="preview-title">
+        <h2
+          className="preview-title"
+          style={{
+            viewTransitionName: `blog-title-${transitionId}`,
+          }}
+        >
           <a className="preview-title" href={post.url}>
             {post.title}
           </a>
@@ -31,15 +38,23 @@ export default function BlogPostPreview({ post }) {
           <span
             style={{
               textDecoration: post.updatedDate ? "line-through" : "none",
+              viewTransitionName: `blog-publish-date-${transitionId}`,
             }}
           >
             {dateFormatter.format(post.date)}
           </span>
           {post.updatedDate && (
-            <>Updated: {dateFormatter.format(post.updatedDate)}</>
+            <span
+              style={{
+                viewTransitionName: `blog-update-date-${transitionId}`,
+              }}
+            >
+              Updated: {dateFormatter.format(post.updatedDate)}
+            </span>
           )}
         </p>
         <TagBar
+          transitionId={transitionId}
           marginTop=".25em"
           tags={post.tags.map(tag => {
             return { name: tag }

src/components/Tag.jsx

@@ -1,6 +1,11 @@
 import "./tag.css"
 
-export default function Tag({ tag, onTagSelect, marginTop = ".875em" }) {
+export default function Tag({
+  tag,
+  onTagSelect,
+  marginTop = ".875em",
+  transitionId,
+}) {
   return (
     <>
       {onTagSelect && (
@@ -16,7 +21,14 @@ export default function Tag({ tag, onTagSelect, marginTop = ".875em" }) {
       <label
         className="tag-label"
         htmlFor={onTagSelect && `tag-${tag.name}`}
-        style={{ marginTop }}
+        style={{
+          marginTop,
+          viewTransitionName: transitionId
+            ? `blog-tag-${tag.name
+                .replace(" ", "_")
+                .replace(".", "_")}-${transitionId}`
+            : undefined,
+        }}
       >
         <span
           className="tag-name"

src/components/TagBar.jsx

@@ -5,12 +5,13 @@ const WRAPPER_STYLES = {
   flexWrap: "wrap",
 }
 
-export default function TagBar({ tags, onTagSelect, marginTop }) {
+export default function TagBar({ tags, onTagSelect, marginTop, transitionId }) {
   return (
     <div style={WRAPPER_STYLES}>
       {tags.map(tag => {
         return (
           <Tag
+            transitionId={transitionId}
             marginTop={marginTop}
             key={tag.name}
             tag={tag}

src/styles/blog.css

@@ -418,3 +418,13 @@ details {
     margin-top: 0.5rem;
   }
 }
+
+@view-transition {
+  navigation: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @view-transition {
+    navigation: none;
+  }
+}