add view transitions support

Amolith created

Change summary

themes/secluded/layouts/_default/list.html   | 2 +-
themes/secluded/layouts/_default/single.html | 2 +-
themes/secluded/layouts/partials/head.html   | 3 +++
3 files changed, 5 insertions(+), 2 deletions(-)

Detailed changes

themes/secluded/layouts/_default/list.html 🔗 

@@ -30,7 +30,7 @@
             {{- else }}
             <li class="posts-item">
                 <a href="{{.Permalink}}">
-                    <span class="posts-title">{{.Title}}</span>
+                    <span class="posts-title" style="view-transition-name: post-{{ .Title | urlize }}">{{.Title}}</span>
                     <span class="posts-day">{{ if .Site.Params.dateformShort }}{{ .Date.Format .Site.Params.dateformShort }}{{ else }}{{ .Date.Format "Jan 02"}}{{ end }}</span>
                 </a>
                 <p>{{ .Summary | truncate 140 }}</p>

themes/secluded/layouts/_default/single.html 🔗 

@@ -2,7 +2,7 @@
 <div class="wrapper">
     <article>
         <div class="frontmatter">
-            <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+            <h1 class="post-title" style="view-transition-name: post-{{ .Title | urlize }}"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
             <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p>
             <p><strong>Download this post as:</strong> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.pdf">PDF,</a> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.epub">EPUB,</a> or <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.txt">plaintext</a></p>
             {{- if .Params.rss_only }}

themes/secluded/layouts/partials/head.html 🔗 

@@ -19,6 +19,9 @@
     <link rel="pgpkey" href="/{{ $.Site.Params.contact.pgp }}">
     <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett{{ range .Site.Params.clacks }}, {{ . }}{{end}}" />
 
+    <!-- Enable fancy transitions -->
+    <meta name="view-transition" content="same-origin" />
+
     <!-- Social: Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="{{ if .IsHome }}{{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ else }}{{ .Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ end }}" />