Revert "Add View Transitions"

This reverts commit 117e19a.

Author: WebDevSimplified

src/components/BlogPost.astro

@@ -13,28 +13,25 @@ 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" style={{ 'view-transition-name': `blog-title-${transitionId}` }}>{title}</h1>
-        <span class={`publish-date ${updatedDate && "old-date"}`} style={{ 'view-transition-name': `blog-publish-date-${transitionId}` }}>
+        <h1 class="title">{title}</h1>
+        <p class={`publish-date ${updatedDate && "old-date"}`}>
           {dateFormatter.format(new Date(date))}
-        </span>
-        <br />
+        </p>
         {
           updatedDate && (
-            <span class="publish-date" style={{ 'view-transition-name': `blog-update-date-${transitionId}` }}>
+            <p class="publish-date">
               Updated: {dateFormatter.format(new Date(updatedDate))}
-            </span>
+            </p>
           )
         }
         <div style="margin-bottom: 1rem">
           <TagBar
-            transitionId={transitionId}
             tags={tags.map(tag => {
               return { name: tag }
             })}

src/components/BlogPostPreview.jsx

@@ -2,8 +2,6 @@ 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
@@ -16,12 +14,7 @@ export default function BlogPostPreview({ post }) {
           textAlign: "left",
         }}
       >
-        <h2
-          className="preview-title"
-          style={{
-            viewTransitionName: `blog-title-${transitionId}`,
-          }}
-        >
+        <h2 className="preview-title">
           <a className="preview-title" href={post.url}>
             {post.title}
           </a>
@@ -38,23 +31,15 @@ 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 && (
-            <span
-              style={{
-                viewTransitionName: `blog-update-date-${transitionId}`,
-              }}
-            >
-              Updated: {dateFormatter.format(post.updatedDate)}
-            </span>
+            <>Updated: {dateFormatter.format(post.updatedDate)}</>
           )}
         </p>
         <TagBar
-          transitionId={transitionId}
           marginTop=".25em"
           tags={post.tags.map(tag => {
             return { name: tag }

src/components/Tag.jsx

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

src/components/TagBar.jsx

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

src/styles/blog.css

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