From 086ec33d7b7b974f06f8e91ff4bbf7a2c2b466e4 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Wed, 9 Oct 2024 11:18:47 +0200
Subject: [PATCH] view transitions with almost no css

---
 styles/input.css                              | 15 +++++++++++++
 styles/output.css                             | 22 +++++++++++++++++++
 templates/blog_post.html                      |  4 ++--
 templates/components/blog_post_preview.html   | 11 ++++++----
 .../components/project_preview_card.html      |  2 +-
 templates/post_tag_list.html                  |  2 +-
 templates/site_footer.html                    |  2 +-
 templates/site_header.html                    |  2 +-
 8 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/styles/input.css b/styles/input.css
index 42fa8e1..21e09c6 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -266,3 +266,18 @@ article a {
     transform: translate(0, 0);
   }
 }
+
+@view-transition {
+  navigation: auto;
+}
+
+/* Define the animation for persistent elements (like the header and title) */
+/* ::view-transition-group(*) { */
+/* transition: transform 3.4s ease-in-out; */
+/* } */
+
+/* ::view-transition-group(blog_post_preview) { */
+/* animation-duration: 5.5s; */
+/* transition: transform 5.4s ease-in-out; */
+/* opacity: 1; */
+/* } */
diff --git a/styles/output.css b/styles/output.css
index 85ef9c9..3169c49 100644
--- a/styles/output.css
+++ b/styles/output.css
@@ -1908,6 +1908,28 @@ article a:visited {
   }
 }
 
+@view-transition {
+  navigation: auto;
+}
+
+/* Define the animation for persistent elements (like the header and title) */
+
+/* ::view-transition-group(*) { */
+
+/* transition: transform 3.4s ease-in-out; */
+
+/* } */
+
+/* ::view-transition-group(blog_post_preview) { */
+
+/* animation-duration: 5.5s; */
+
+/* transition: transform 5.4s ease-in-out; */
+
+/* opacity: 1; */
+
+/* } */
+
 .visited\:text-blue-950:visited {
   color: rgb(11 39 70 );
 }
diff --git a/templates/blog_post.html b/templates/blog_post.html
index 2930557..72b55fd 100644
--- a/templates/blog_post.html
+++ b/templates/blog_post.html
@@ -17,12 +17,12 @@
 {% block content %}
 <article class="mb-6">
   <header class="px-4 max-w-read mx-auto">
-  <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
+  <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold" style="view-transition-name: post_title_{{slug}};">{{title}}</h1>
   <aside class="flex justify-between flex-row">
     {% include "post_tag_list.html" %}
     <section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
       <span>Published on</span>
-      <time datetime="{date}"> {{date|pretty_date}} </time>
+      <time datetime="{date}" style="view-transition-name: post_date_{{slug}}"> {{date|pretty_date}} </time>
     </section>
   </aside>
 </header>
diff --git a/templates/components/blog_post_preview.html b/templates/components/blog_post_preview.html
index 3843892..c7af659 100644
--- a/templates/components/blog_post_preview.html
+++ b/templates/components/blog_post_preview.html
@@ -1,4 +1,7 @@
-<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
+<article
+	class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none"
+	style="view-transition-name:blog_post_preview_{{post.slug}};"
+>
 	<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
@@ -10,13 +13,13 @@
 		{% endmatch %}
 	</aside>
 	<header>
-		<h3 class="text-lg font-bold mb-1 md:text-3xl">
+		<h3 class="text-lg font-bold mb-1 md:text-3xl" style="view-transition-name: post_title_{{post.slug}}">
 		  <a rel="prefetch" href="/{{segment}}/{{post.slug}}" class="text-blue-950 visited:text-purple-700 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
 	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|truncate_md(2)|parse_markdown|safe}}</section>
 	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0 clear-both sm:clear-none">
-    <ul class="inline-block">
+    <ul class="inline-block" style="view-transition-name: post_tags_{{post.slug}}">
      {% for tag in post.metadata.tags %}
       <li class="inline-block">
         <a href="/{{segment}}/tags/{{tag}}" class="text-pink-950 no-underline">#{{tag|capitalize}}</a>
@@ -24,7 +27,7 @@
       {% endfor %}
     </ul>
 		|
-    <time datetime="{{post.metadata.date}}" class="text-pink-950"> {{post.metadata.date|pretty_date}} </time>
+    <time datetime="{{post.metadata.date}}" class="text-pink-950" style="view-transition-name: post_date_{{post.slug}}" > {{post.metadata.date|pretty_date}} </time>
 	</footer>
 </article>
 
diff --git a/templates/components/project_preview_card.html b/templates/components/project_preview_card.html
index a15cc0a..6aa6fb0 100644
--- a/templates/components/project_preview_card.html
+++ b/templates/components/project_preview_card.html
@@ -1,4 +1,4 @@
-<section class="border rounded-md bg-white p-4 break-inside-avoid">
+<section class="border rounded-md bg-white p-4 break-inside-avoid" style="view-transition-name: project_preview_{{project.slug}};">
   <header class="px-4 mb-3"> 
     <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}
diff --git a/templates/post_tag_list.html b/templates/post_tag_list.html
index 56e8632..0b6a324 100644
--- a/templates/post_tag_list.html
+++ b/templates/post_tag_list.html
@@ -1,6 +1,6 @@
 <section class="article-tags text-base">
   {% if tags.len() > 0 %}
-  <ul class="inline">
+  <ul class="inline" style="view-transition-name: post_tags_{{slug}}">
     {% for tag in tags %}
     <li class="inline italic text-blue-700 md:text-lg">
       <a href="/{{segment}}/tags/{{tag}}">#{{tag}}</a>
diff --git a/templates/site_footer.html b/templates/site_footer.html
index 748baa8..b983af1 100644
--- a/templates/site_footer.html
+++ b/templates/site_footer.html
@@ -1,4 +1,4 @@
-<footer class="my-4">
+<footer class="my-4" view-transition-name="site_footer">
   <hr class="mb-4 border-slate-300 mx-5">
   <section class="flex justify-around">
   <p
diff --git a/templates/site_header.html b/templates/site_header.html
index 8b21b41..a2d46e8 100644
--- a/templates/site_header.html
+++ b/templates/site_header.html
@@ -1,4 +1,4 @@
-<header class="min-h-full bg-blue-50 mb-5">
+<header class="min-h-full bg-blue-50 mb-5" view-transition-name="site_header">
   <nav class="flex">
     {% match header_props.back_link %}
     {% when Some with (link) %}