summaryrefslogtreecommitdiffci
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
-rw-r--r--internal/glightbox/html_renderer.go2
-rw-r--r--internal/tailwind/link_renderer.go49
-rw-r--r--internal/tailwind/transformer.go7
-rw-r--r--internal/templatemanager/templatemanager.go4
-rw-r--r--main.go14
-rw-r--r--static/input.css31
-rw-r--r--views/layouts/general-page.html27
-rw-r--r--views/pages/blog-page.html66
-rw-r--r--views/pages/global-map.html16
-rw-r--r--views/partials/catalogue-blog-cards.html8
-rw-r--r--views/partials/general-page-header.html6
11 files changed, 99 insertions, 131 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 43d4790..3b6a533 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -81,7 +81,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
elements = append(elements, fmt.Sprintf(`
<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s"
data-gallery="gallery-%s" data-title="%s" %s>
- <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-1" alt="webp thumbnail" />
+ <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-0.5" alt="webp thumbnail" />
</a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
if glightboxDescId != "" {
diff --git a/internal/tailwind/link_renderer.go b/internal/tailwind/link_renderer.go
deleted file mode 100644
index ff3d437..0000000
--- a/internal/tailwind/link_renderer.go
+++ /dev/null
@@ -1,49 +0,0 @@
-package tailwind
-
-import (
- "github.com/yuin/goldmark/ast"
- "github.com/yuin/goldmark/renderer"
- "github.com/yuin/goldmark/renderer/html"
- "github.com/yuin/goldmark/util"
-)
-
-type CustomLinkRenderer struct {
- html.Config
-}
-
-func NewCustomLinkRenderer(opts ...html.Option) renderer.NodeRenderer {
- r := &CustomLinkRenderer{
- Config: html.NewConfig(),
- }
- for _, opt := range opts {
- opt.SetHTMLOption(&r.Config)
- }
- return r
-}
-
-func (r *CustomLinkRenderer) renderLink(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
- n := node.(*ast.Link)
- if entering {
- _, _ = w.WriteString("<a href=\"")
- if r.Unsafe || !html.IsDangerousURL(n.Destination) {
- _, _ = w.Write(util.EscapeHTML(util.URLEscape(n.Destination, true)))
- }
- _, _ = w.WriteString(`"`)
- if n.Title != nil {
- _, _ = w.WriteString(` title="`)
- _, _ = w.Write(util.EscapeHTML(n.Title))
- _, _ = w.WriteString(`"`)
- }
- if n.Attributes() != nil {
- html.RenderAttributes(w, n, nil)
- }
- _, _ = w.WriteString(">")
- } else {
- _, _ = w.WriteString("</a>")
- }
- return ast.WalkContinue, nil
-}
-
-func (r *CustomLinkRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
- reg.Register(ast.KindLink, r.renderLink)
-}
diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go
index 23ba1a3..f932533 100644
--- a/internal/tailwind/transformer.go
+++ b/internal/tailwind/transformer.go
@@ -1,9 +1,6 @@
package tailwind
import (
- "bytes"
- "fmt"
-
"github.com/yuin/goldmark/ast"
"github.com/yuin/goldmark/parser"
"github.com/yuin/goldmark/text"
@@ -54,10 +51,6 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader,
node.SetAttribute([]byte("class"), []byte("bg-background-dark p-1 rounded-lg overflow-x-auto mb-4"))
case *ast.Link:
- if bytes.HasPrefix(node.Destination, []byte{'.', '/'}) {
- onclickAttr := fmt.Appendf(make([]byte, 0, 21+len(node.Destination)), "return changeUrl('%s');", node.Destination)
- node.SetAttribute([]byte("onclick"), onclickAttr)
- }
node.SetAttribute([]byte("class"), []byte("text-secondary hover:text-main-dark underline"))
case *ast.Image:
diff --git a/internal/templatemanager/templatemanager.go b/internal/templatemanager/templatemanager.go
index eebc297..4bf9a49 100644
--- a/internal/templatemanager/templatemanager.go
+++ b/internal/templatemanager/templatemanager.go
@@ -37,7 +37,7 @@ func NewTemplateManager(templates ...TemplateManagerTemplates) (*TemplateManager
templateMap := make(map[string]templateManagerRender)
for _, tmplStruct := range templates {
- tmpl := template.New(tmplStruct.Name).Funcs(templateFuncMap)
+ tmpl := template.New("").Funcs(templateFuncMap)
tmpl, err := tmpl.ParseFiles(tmplStruct.Files...)
if err != nil {
return nil, err
@@ -84,7 +84,7 @@ func (tm *TemplateManager) Add(name string, files ...string) error {
return fmt.Errorf("you can't add template without any files")
}
- tmpl := template.New(name).Funcs(templateFuncMap)
+ tmpl := template.New("").Funcs(templateFuncMap)
tmpl, err := tmpl.ParseFiles(files...)
if err != nil {
diff --git a/main.go b/main.go
index a6a30b0..53dbb74 100644
--- a/main.go
+++ b/main.go
@@ -23,9 +23,7 @@ import (
"github.com/golang-migrate/migrate/v4/database/sqlite3"
"github.com/yuin/goldmark"
"github.com/yuin/goldmark/parser"
- "github.com/yuin/goldmark/renderer"
- "github.com/yuin/goldmark/renderer/html"
- "github.com/yuin/goldmark/util"
+ gmhtml "github.com/yuin/goldmark/renderer/html"
_ "github.com/golang-migrate/migrate/v4/source/file"
_ "github.com/mattn/go-sqlite3"
@@ -39,15 +37,9 @@ var (
),
goldmark.WithParserOptions(
parser.WithAutoHeadingID(),
- parser.WithAttribute(),
),
- goldmark.WithRenderer(
- renderer.NewRenderer(
- renderer.WithNodeRenderers(
- util.Prioritized(tailwind.NewCustomLinkRenderer(html.WithUnsafe(), html.WithXHTML()), 50),
- util.Prioritized(html.NewRenderer(html.WithXHTML()), 100),
- ),
- ),
+ goldmark.WithRendererOptions(
+ gmhtml.WithXHTML(),
),
)
b2Client *b2.B2Client
diff --git a/static/input.css b/static/input.css
index 1e7f9fc..36d17b2 100644
--- a/static/input.css
+++ b/static/input.css
@@ -236,22 +236,37 @@ a:hover {
border-style: outset;
}
+.desktop-sidebar-custom {
+ width: 5vw;
+ background-size: calc(var(--squares-and-triangles-background-size) * 1vw);
+}
+
.bg-sidebar {
background-image: var(--squares-and-triangles-background);
background-repeat: var(--squares-and-triangles-background-repeat);
- background-size: calc(var(--squares-and-triangles-background-width-coef) * 1dvw) calc(var(--squares-and-triangles-background-height-coef) * 1dvw);
+ background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw);
}
.logo-custom {
- width: 3.5dvw;
- height: 20dvw;
- font-size: 2.5dvw;
- -webkit-text-stroke: 0.1dvw var(--sidebar-stroke-color);
+ width: 3.5vw;
+ height: 20vw;
+ font-size: 2.5vw;
+ -webkit-text-stroke: 0.1vw var(--sidebar-stroke-color);
writing-mode: sideways-lr;
text-orientation: mixed;
display: block;
}
+.border-left-custom {
+ width: 0.5vw;
+ border-right: 0.3vh dashed var(--main-dark-color);
+}
+
+.border-right-custom {
+ width: 0.5vw;
+ border-left: 0.5vh dotted var(--main-dark-color);
+}
+
.inset-shadow {
box-shadow: inset 0vh 1vh 1vh -1vh rgba(75, 81, 58, 0.5),
inset 1vh 0vh 1vh -1vh rgba(75, 81, 58, 0.5),
@@ -263,8 +278,8 @@ a:hover {
-webkit-text-stroke-color: var(--sidebar-stroke-color);
}
-.text-stroke-\[0\.1dvw\] {
- -webkit-text-stroke-width: 0.1dvw;
+.text-stroke-\[0\.1vw\] {
+ -webkit-text-stroke-width: 0.1vw;
}
.theme-wheel {
@@ -396,7 +411,7 @@ body[data-theme~="ram"] .leaflet-tile {
@media (max-aspect-ratio: 0.8/1) {
.bg-sidebar {
- background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6dvh) calc(var(--squares-and-triangles-background-height-coef) * 1.6dvh);
+ background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
}
.ar-lt-0\.8\:bg-background-light {
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index b163387..88c5de5 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -15,21 +15,12 @@
<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
<script>
- let map = null;
- </script>
-
- <script>
function changeUrl(path, toAppend = false) {
const urlParams = new URLSearchParams(window.location.search);
const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
const newPath = toAppend ? `${newPathname}${path}` : `${path}`;
-
history.pushState({}, '', `${newPath}${urlParams.entries.length == 0 ? '' : '?' + urlParams.toString()}`);
- if (location.pathname == "" || location.pathname == "/") {
- return true;
- }
window.dispatchEvent(new Event('popstate'));
- return false;
};
</script>
@@ -174,20 +165,12 @@
<div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
saya.today
</div>
- <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
- <a href="/{{ .Lang }}" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
- <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
- <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
+ <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
+ <i onclick="changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+ <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+ <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
<i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
- <a href="./" class="xs:!hidden w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
+ <i onclick="changeUrl('/../', true);" class="fas fa-circle-left flex xs:!hidden w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
</div>
<div class="theme-wheel" id="theme-wheel">
<div class="theme-icon" data-theme="olive"></div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 9704502..aadebac 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,3 +1,20 @@
+{{ define "top-embeds" }}
+<script>
+ let galleryMap = new Map();
+ let map;
+
+ window.addEventListener('popout', (e) => {
+ map.remove();
+ galleryMap.forEach((_, g, m) => {
+ g.destroy();
+ });
+ galleryMap.clear();
+ map = null;
+ galleryMap = null;
+ }, {once: true});
+</script>
+{{ end }}
+
{{ define "body" }}
<div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
<p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
@@ -35,17 +52,16 @@
.openPopup();
}
- if (map) {
- map.remove();
- map = null;
- }
-
- setTimeout(() => initLocationMap(
- 'map-container',
- {{ .MapLocationX }},
- {{ .MapLocationY }},
- {{ .MapLocationAreaMeters }}
- ), 1000);
+ document.addEventListener('htmx:afterRequest', (e) => {
+ if (e.detail.target.id == 'general-page-body') {
+ initLocationMap(
+ 'map-container',
+ {{ .MapLocationX }},
+ {{ .MapLocationY }},
+ {{ .MapLocationAreaMeters }}
+ );
+ }
+ }, {once: true});
</script>
{{- end }}
</div>
@@ -54,3 +70,31 @@
{{ define "footer" }}
<div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
{{ end }}
+
+{{ define "bottom-embeds" }}
+<script>
+ let galleryResizeTimeout;
+
+ function resizeCb() {
+ clearTimeout(galleryResizeTimeout);
+ galleryResizeTimeout = setTimeout(() => {
+ if (map !== undefined) {
+ map.invalidateSize();
+ }
+ var oldGalleryMap = new Map(galleryMap);
+ oldGalleryMap.forEach((createFunc, g, map) => {
+ galleryMap.delete(g);
+ g.destroy();
+ createFunc();
+ });
+ }, 300);
+ }
+
+ window.addEventListener('resize', resizeCb);
+
+ document.addEventListener('popout', (e) => {
+ window.removeEventListener('resize', resizeCb);
+ galleryResizeTimeout = null;
+ });
+</script>
+{{ end }}
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 27c8a73..4c6fb5e 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -44,17 +44,11 @@
<div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
saya.today
</div>
- <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
- <a href="/{{ .Lang }}" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
- <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
- <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
- </a>
- <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+ <div class="text-[3dvw] sm:text-2xl ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
+ <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+ <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+ <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+ <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
</div>
<div class="theme-wheel" id="theme-wheel">
<div class="theme-icon" data-theme="olive"></div>
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 5c3bb95..041f3c8 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,12 +1,10 @@
{{- range .BlogPages }}
-<hr class="first-of-type:hidden my-1 border-t-2 border-dotted border-main-dark">
+<hr class="first-of-type:hidden border-t-1 mx-auto">
<div class="m-1 flex flex-row justify-center justify-items-center">
- <a href="{{ .ArticleLink }}" class="w-24 h-24 basis-24 shrink-0 my-2.5 mr-2">
- <img onclick="return changeUrl('{{ .ArticleLink }}');" class="w-full h-full aspect-square cursor-pointer object-cover rounded-lg select-none" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
- </a>
+ <img onclick="changeUrl('{{ .ArticleLink }}');" class="cursor-pointer object-cover rounded-lg select-none w-24 h-24 aspect-square my-2.5 mr-2" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
<div class="grow my-0.5 mx-1 flex flex-col justify-center">
<div class="flex flex-row gap-2 max-w-[100%]">
- <a href="{{ .ArticleLink }}" onclick="return changeUrl('{{ .ArticleLink }}');" class="grow text-base cursor-pointer">
+ <a onclick="changeUrl('{{ .ArticleLink }}');" class="grow text-base cursor-pointer">
<span class="font-extrabold">{{ .Title }}</span>
<span class="font-extrabold select-none text-secondary">//</span>
<span class="italic text-secondary">{{ .ActionDate }}</span>
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index e5488b4..7f6ab8a 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,9 +1,7 @@
<div {{ if .PublishedDate }} hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="#published-date" hx-swap="innerHTML" hx-trigger="load" {{ end }}
class="flex flex-row mb-2">
- <a href="./" class="w-(--text-4xl) h-(--text-4xl) mx-1 my-auto">
- <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl"></i>
- </a>
- <p class="text-4xl font-spectral italic font-extrabold select-none my-auto pl-3 pr-3">//</p>
+ <i onclick="changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-4xl mt-auto mb-auto px-1"></i>
+ <p class="text-4xl font-spectral italic font-extrabold select-none mt-auto mb-auto pl-3 pr-3">//</p>
<p class="text-4xl font-spectral italic text-left mt-auto">{{ .Title }}</p>
<p id="published-date" class="grow text-2xl font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
</div>