design: implement view-transition

macrat · Jun 20, 2024 · 14a0272 · 14a0272
1 parent a104aad
commit 14a0272
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 6 deletions.
diff --git a/builder/template.go b/builder/template.go
@@ -7,6 +7,8 @@ import (
 	"strconv"
 	"strings"
 	"sync"
+	"crypto/sha256"
+	"encoding/base64"
 )
 
 type TemplateLoader struct {
@@ -60,6 +62,11 @@ func NewTemplateLoader(basePath string) (*TemplateLoader, error) {
 		"xmldecralation": func() template.HTML {
 			return template.HTML(`<?xml version="1.0" encoding="UTF-8"?>`)
 		},
+		"shorthash": func(s string) string {
+			hash := sha256.New()
+			hash.Write([]byte(s))
+			return base64.URLEncoding.EncodeToString(hash.Sum(nil)[:8])[:8]
+		},
 	})
 
 	return &TemplateLoader{

diff --git a/templates/base.html b/templates/base.html
@@ -20,13 +20,13 @@
         {{block "head" .}}{{end}}
 
 <style>
+@view-transition {navigation: auto}
 html {
     background-color: #f0ece9;
     color: #331d1d;
     overflow-x: hidden;
     font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'Noto Sans', 'Hiragino Sans', 'Meiryo', sans-serif;
     tab-size: 4;
-    scroll-behavior: smooth;
 }
 body {
     display: flex;

diff --git a/templates/blog/index.html b/templates/blog/index.html
@@ -167,7 +167,7 @@ <h1>blog</h1>
                     {{end}}
                 </ol>
                 <a href="{{.Path}}">
-                    <h2>{{.Title}}</h2>
+                    <h2><span style="view-transition-name: {{.Path | shorthash}}">{{.Title}}</span></h2>
                     {{.Description}}
                 </a>
             </li>

diff --git a/templates/blog/month.html b/templates/blog/month.html
@@ -71,7 +71,7 @@ <h1>{{.Year}}年{{.Month}}月の記事</h1>
             <li><a href="{{.Path}}">
                 <img src="/images{{.Path}}.qr.png" alt="QRコード" class="pageqr" loading="lazy">
                 <time>{{.Published.Format "2006-01-02"}}</time>
-                {{.Title}}
+                <span style="view-transition-name: {{.Path | shorthash}}">{{.Title}}</span>
             </a></li>
         {{end}}
     </ol>

diff --git a/templates/blog/post.html b/templates/blog/post.html
@@ -254,7 +254,7 @@
             <li><a href="/blog/{{.Published.Format "2006"}}">{{.Published.Format "2006"}}</a></li>
             <li><a href="/blog/{{.Published.Format "2006/01"}}">{{.Published.Format "01"}}</a></li>
         </ol>
-        <h1>{{.Title}}</h1>
+        <h1><span style="view-transition-name: {{.Path | shorthash}}">{{.Title}}</span></h1>
         <div class="metadata">
             <time datetime="{{.Published.Format "2006-01-02T15:04:05Z07:00"}}">{{.Published.Format "2006-01-02"}}</time>
             {{- if and (not .Modified.IsZero) (ne (.Published.Format "2006-01-02") (.Modified.Format "2006-01-02"))}}(初版) → <time datetime="{{.Modified.Format "2006-01-02T15:04:05Z07:00"}}">{{.Modified.Format "2006-01-02"}}</time>(改訂)

diff --git a/templates/blog/tagpage.html b/templates/blog/tagpage.html
@@ -35,7 +35,7 @@ <h1>#{{.Tag}} に関する記事の一覧</h1>
         {{range .Posts}}
             <li><a href="{{.Path}}">
                 <time>{{.Published.Format "2006-01-02"}}</time>
-                {{.Title}}
+                <span style="view-transition-name: {{.Path | shorthash}}">{{.Title}}</span>
             </a></li>
         {{end}}
     </ol>

diff --git a/templates/blog/year.html b/templates/blog/year.html
@@ -75,7 +75,7 @@ <h2>{{$idx | add 1}}月</h2>
                         <li><a href="{{.Path}}">
                             <img src="/images{{.Path}}.qr.png" alt="QRコード" class="pageqr" loading="lazy">
                             <time>{{.Published.Format "2006-01-02"}}</time>
-                            {{.Title}}
+                            <span style="view-transition-name: {{.Path | shorthash}}">{{.Title}}</span>
                         </a></li>
                     {{end}}
                     </ol>

diff --git a/templates/photos/detail.html b/templates/photos/detail.html
@@ -71,6 +71,7 @@
                 alt="{{.Metadata.Comment}}"
                 width="{{.Metadata.Width}}"
                 height="{{.Metadata.Height}}"
+                style="view-transition-name: {{.Path | shorthash}}"
                 loading="lazy">
 
             {{.Metadata.DateTime.Format "2006年01月02日"}} - {{.Metadata.Model}}{{if ne .Metadata.LensModel "unknown"}} - {{.Metadata.LensModel}}{{end}} - {{.Metadata.ExposureTime}} - F{{.Metadata.ApertureValue}} - ISO{{.Metadata.ISOSpeedRatings}}

diff --git a/templates/photos/index.html b/templates/photos/index.html
@@ -115,6 +115,7 @@ <h2>{{$date}}</h2>
                         alt="{{.Metadata.Comment}}"
                         width="320"
                         height="320"
+                        style="view-transition-name: {{.Path | shorthash}}"
                         loading="lazy">
                 </a>
             </li>