Hubert Chen
2b8e238e72
add thumbhash use `github.com/galdor/go-thumbhash` and `github.com/evanw/thumbhash`
database:
add `thumbhash` column for `files` table
image:
add `EncodeThumbHash()` function use `go.n16f.net/thumbhash`
router:
add `/api/task/files/thumbhash` endpoint to check thumbhask
task:
add `CheckThumbHash()` function
web/scripts:
add thumbhash logic for `load_*` scripts
add `thumbhash.js` from `https://github.com/evanw/thumbhash/blob/main/js/thumbhash.js`, edited
web/styles/gallery:
add thumbhash transition when thumbnail loaded
adjust style for wrapped imgs
web/templates:
add `role="main"` for gallery and artwork id pages
render thumbhash script for gallery pages
140 lines
6.2 KiB
Cheetah
140 lines
6.2 KiB
Cheetah
{{ define "artwork_id" }}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta property="og:site_name" content="trpic">
|
|
{{ if .Artwork.Edges.Posts }}
|
|
{{ $post := index .Artwork.Edges.Posts 0 }}
|
|
{{ if $post.Title }}
|
|
{{ if .Artwork.Edges.Socials }}
|
|
{{ $social := index .Artwork.Edges.Socials 0 }}
|
|
<title>{{ $post.Title }} - {{ $social.DisplayName }}</title>
|
|
<meta property="og:title" name="twitter:title" content="{{ $post.Title }} - {{ $social.DisplayName }}">
|
|
{{ else }}
|
|
<title>{{ $post.Title }} - unknown author</title>
|
|
<meta property="og:title" name="twitter:title" content="{{ $post.Title }} - unknown author">
|
|
{{ end }}
|
|
{{ else if .Artwork.Edges.Socials }}
|
|
{{ $social := index .Artwork.Edges.Socials 0 }}
|
|
<title>{{ $social.DisplayName }}'s artwork</title>
|
|
<meta property="og:title" name="twitter:title" content="{{ $social.DisplayName }}'s artwork">
|
|
{{ else }}
|
|
<title>unknown author's artwork</title>
|
|
<meta property="og:title" name="twitter:title" content="unknown author's artwork">
|
|
{{ end }}
|
|
{{ if $post.Text }}
|
|
<meta property="og:description" name="description" content="{{ $post.Text }}">
|
|
<meta name="twitter:description" content="{{ $post.Text }}">
|
|
{{ end }}
|
|
{{ else }}
|
|
<title>unknown author's artwork</title>
|
|
<meta property="og:title" name="twitter:title" content="unknown author's artwork">
|
|
{{ if gt (len .Artwork.Edges.Files) 1 }}
|
|
<meta property="og:description" name="description" content="with {{ len .Artwork.Edges.Files }} files">
|
|
<meta name="twitter:description" content="with {{ len .Artwork.Edges.Files }} files">
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ if .Artwork.Edges.Files }}
|
|
{{ $file := index .Artwork.Edges.Files .PhotoIndex }}
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta property="og:image:width" content="{{ $file.Width }}">
|
|
<meta property="og:image:height" content="{{ $file.Height }}">
|
|
<meta property="twitter:image:width" content="{{ $file.Width }}">
|
|
<meta property="twitter:image:height" content="{{ $file.Height }}">
|
|
<meta property="og:image" name="twitter:image" content="{{ $.BaseURL }}/files/{{ $file.IDStr }}.{{ $file.Ext }}">
|
|
{{ end }}
|
|
<meta property="og:url" name="twitter:url" content="{{ .BaseURL }}/artworks/{{ .Artwork.ID }}">
|
|
<meta name="artwork"
|
|
id="{{ .Artwork.ID }}"
|
|
private="{{ .Artwork.Private }}"
|
|
sensitive="{{ .Artwork.Sensitive }}"
|
|
>
|
|
{{ range $index, $social := .Artwork.Edges.Socials }}
|
|
<meta name="social-{{ $index }}"
|
|
id="{{ $social.ID }}"
|
|
platform="{{ $social.Platform }}"
|
|
display_name="{{ $social.DisplayName }}"
|
|
username="{{ $social.Username }}"
|
|
user_id="{{ $social.UserID }}"
|
|
url="{{ $social.URL }}"
|
|
avatar_url="{{ $social.AvatarURL }}"
|
|
banner_url="{{ $social.BannerURL }}"
|
|
>
|
|
{{ end }}
|
|
{{ range $index, $file := .Artwork.Edges.Files }}
|
|
<meta name="file-{{ $index }}"
|
|
id_str="{{ $file.IDStr }}"
|
|
thumbed="{{ $file.Thumbed }}"
|
|
filename="{{ $file.Filename }}"
|
|
ext="{{ $file.Ext }}"
|
|
size_str="{{ $file.SizeStr }}"
|
|
quality="{{ $file.Quality }}"
|
|
width="{{ $file.Width }}"
|
|
height="{{ $file.Height }}"
|
|
aspect_ratio="{{ $file.AspectRatio }}"
|
|
elongation_ratio="{{ $file.ElongationRatio }}"
|
|
>
|
|
{{ end }}
|
|
{{ range $index, $post := .Artwork.Edges.Posts }}
|
|
<meta name="post-{{ $index }}"
|
|
id="{{ $post.ID }}"
|
|
time="{{ $post.Time }}"
|
|
title="{{ $post.Title }}"
|
|
text="{{ $post.Text }}"
|
|
platform="{{ $post.Platform }}"
|
|
post_id="{{ $post.PostID }}"
|
|
url="{{ $post.URL }}"
|
|
>
|
|
{{ end }}
|
|
{{ range $index, $tag := .Artwork.Edges.Tags }}
|
|
<meta name="tag-{{ $index }}"
|
|
id="{{ $tag.ID }}"
|
|
text="{{ $tag.Text }}"
|
|
>
|
|
{{ end }}
|
|
{{ "base" | .RenderStyle }}
|
|
{{ "artwork_id" | .RenderStyle }}
|
|
{{ "base" | .RenderScript }}
|
|
{{ "artwork_id" | .RenderScript }}
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<p>当前未启用 JavaScript</p>
|
|
<p>您可以前往 <a href="/noscript/artworks/{{ .Artwork.ID }}">noscript/artworks/{{ .Artwork.ID }}</a> 页面浏览作品</p>
|
|
</noscript>
|
|
<div id="preview" role="main">
|
|
<div id="preview-header">
|
|
<div id="controls">
|
|
<a href="/"><button id="back-btn"><svg viewBox="0 -960 960 960"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg></button></a>
|
|
</div>
|
|
<div id="controls">
|
|
<button id="download-btn"><svg viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg></button>
|
|
<button id="delete-btn" style="display:none"><svg viewBox="0 -960 960 960"><path d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg></button>
|
|
<button id="sidebar-btn"><svg viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm280-80h280v-560H480v560Z"/></svg></button>
|
|
</div>
|
|
</div>
|
|
<div id="preview-view">
|
|
<div id="nav-controls">
|
|
<span id="prev-btn"><</span>
|
|
<span id="next-btn">></span>
|
|
</div>
|
|
<div id="image-wrapper">
|
|
<img id="preview-img">
|
|
</div>
|
|
</div>
|
|
<div id="sidebar">
|
|
<div id="sidebar-content">
|
|
<span id="img-author"></span>
|
|
<span id="img-source"></span>
|
|
<span id="img-tag"></span>
|
|
<span id="img-info"></span>
|
|
{{ template "img_setting" . }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|