From b1355436e96f2dfa777e843b53896d0bb71628e3 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sat, 4 Apr 2026 03:03:29 +0700 Subject: feat: replace font-andika feat: replace noise image with lighter paper texture refactor: put colors in tailwind theme block --- internal/tailwind/transformer.go | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'internal') diff --git a/internal/tailwind/transformer.go b/internal/tailwind/transformer.go index c53ded1..c9da9df 100644 --- a/internal/tailwind/transformer.go +++ b/internal/tailwind/transformer.go @@ -20,19 +20,19 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader, switch node := n.(type) { case *ast.Heading: classes := map[int]string{ - 1: "font-andika text-4xl font-bold text-main-hard mb-3 tracking-[.0125rem]", - 2: "font-andika text-3xl font-bold text-main-hard mb-1 tracking-[.0125rem]", - 3: "font-andika text-2xl font-medium text-main-hard mb-0.8 tracking-[.0125rem]", - 4: "font-andika text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]", - 5: "font-andika text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]", - 6: "font-andika text-base font-medium text-secondary mb-0.5", + 1: "font-gentium text-4xl font-bold text-main-hard mb-3 tracking-[.0125rem]", + 2: "font-gentium text-3xl font-bold text-main-hard mb-1 tracking-[.0125rem]", + 3: "font-gentium text-2xl font-medium text-main-hard mb-0.8 tracking-[.0125rem]", + 4: "font-gentium text-xl font-medium text-main-medium mb-0.5 tracking-[.0125rem]", + 5: "font-gentium text-base font-medium text-main-medium mb-0.5 italic tracking-[.0125rem]", + 6: "font-gentium text-base font-medium text-secondary mb-0.5", } if class, ok := classes[node.Level]; ok { node.SetAttribute([]byte("class"), []byte(class)) } case *ast.Paragraph: - node.SetAttribute([]byte("class"), []byte("text-base/[2] font-andika tracking-[.0125rem] -indent-8 ml-4 mb-8")) + node.SetAttribute([]byte("class"), []byte("text-base/[2] font-gentium tracking-[.0125rem] -indent-8 ml-4 mb-8")) case *ast.List: if node.IsOrdered() { @@ -42,16 +42,16 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader, } case *ast.ListItem: - node.SetAttribute([]byte("class"), []byte("text-base/[2] font-andika tracking-[.0125rem]")) + node.SetAttribute([]byte("class"), []byte("text-base/[2] font-gentium tracking-[.0125rem]")) case *ast.Blockquote: - node.SetAttribute([]byte("class"), []byte("border-l-2 border-main-medium bg-background-dark p-1 mb-2 italic")) + node.SetAttribute([]byte("class"), []byte("border-l-2 border-main-medium bg-paper bg-background-dark p-1 mb-2 italic font-thin")) case *ast.CodeSpan: - node.SetAttribute([]byte("class"), []byte("bg-background-dark")) + node.SetAttribute([]byte("class"), []byte("bg-paper bg-background-dark")) case *ast.CodeBlock, *ast.FencedCodeBlock: - node.SetAttribute([]byte("class"), []byte("bg-background-dark p-1 rounded-lg overflow-x-auto mb-4")) + node.SetAttribute([]byte("class"), []byte("bg-paper bg-background-dark p-1 rounded-lg overflow-x-auto mb-4")) case *ast.Link: if bytes.HasPrefix(node.Destination, []byte{'.', '/'}) { @@ -66,7 +66,7 @@ func (t *TailwindTransformer) Transform(node *ast.Document, reader text.Reader, case *ast.Emphasis: switch node.Level { case 1: - node.SetAttribute([]byte("class"), []byte("italic")) + node.SetAttribute([]byte("class"), []byte("italic font-thin")) case 2: node.SetAttribute([]byte("class"), []byte("font-bold")) case 3: -- cgit v1.3.1+13 From ad6528e1ba16ac9857dff879276834b1b5161382 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 5 Apr 2026 04:42:31 +0700 Subject: feat: redesign catalog sidebar feat: add indicators on catalog if user liked or viewed the page feat: add accent colors for each theme --- internal/router/handlers/api-v1-blog-search.go | 2 + static/input.css | 27 ++++- views/pages/blog-catalogue.html | 158 ++++++++++++++++++++----- views/partials/catalogue-blog-cards.html | 18 +-- 4 files changed, 164 insertions(+), 41 deletions(-) (limited to 'internal') diff --git a/internal/router/handlers/api-v1-blog-search.go b/internal/router/handlers/api-v1-blog-search.go index a0316e2..1e8a480 100644 --- a/internal/router/handlers/api-v1-blog-search.go +++ b/internal/router/handlers/api-v1-blog-search.go @@ -91,7 +91,9 @@ func (r *BlogSearchHandler) Render(c *fiber.Ctx, supplements *router.Supplements "Thumbnail": page.Metadata.Thumbnail, "Tags": page.Metadata.Tags, "LikeCount": supplements.ClientCache.GetLikeCount(page.FileName), + "Liked": supplements.ClientCache.GetLikeStatus(c.IP(), page.FileName), "ViewCount": supplements.ClientCache.GetViewCount(page.FileName), + "Viewed": supplements.ClientCache.GetViewStatus(c.IP(), page.FileName), }) break } diff --git a/static/input.css b/static/input.css index 11de22c..375caa4 100644 --- a/static/input.css +++ b/static/input.css @@ -1,6 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400;1,700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap'); @import "tailwindcss"; +@plugin "@tailwindcss/forms"; @theme { --font-m-plus: "M PLUS Rounded 1c", sans-serif; @@ -13,6 +14,14 @@ --color-background-medium: var(--color-background-medium); --color-background-light: var(--color-background-light); --color-secondary: var(--color-secondary); + --color-accent-light: var(--color-accent-light); + --color-accent-deep: var(--color-accent-deep); + --color-main-light-hard: var(--color-main-light-hard); + --color-main-light-medium: var(--color-main-light-medium); + --color-main-light-soft: var(--color-main-light-soft); + --color-main-dark-hard: var(--color-main-dark-hard); + --color-main-dark-medium: var(--color-main-dark-medium); + --color-main-dark-soft: var(--color-main-dark-soft); } html { @@ -78,6 +87,8 @@ body { } [data-theme="olive"] { + --color-accent-light: var(--color-lime-300); + --color-accent-deep: var(--color-lime-600); --color-main-dark-hard: #4b513a; --color-main-dark-medium: #8a9d8a; --color-main-dark-soft: #a5b8a5; @@ -106,6 +117,8 @@ body { } [data-theme="lettuce"] { + --color-accent-light: var(--color-lime-300); + --color-accent-deep: var(--color-lime-600); --color-main-dark-hard: #384a0c; --color-main-dark-medium: #617c1f; --color-main-dark-soft: #9bb665; @@ -134,6 +147,8 @@ body { } [data-theme="night"] { + --color-accent-light: var(--color-indigo-900); + --color-accent-deep: var(--color-indigo-500); --color-main-light-hard: var(--color-sky-100); --color-main-light-medium: var(--color-sky-200); --color-main-light-soft: var(--color-sky-300); @@ -162,6 +177,8 @@ body { } [data-theme="ram"] { + --color-accent-light: var(--color-orange-800); + --color-accent-deep: var(--color-orange-300); --color-main-light-hard: #fefad8; --color-main-light-medium: #f6e4c5; --color-main-light-soft: #e8d4b8; @@ -190,6 +207,8 @@ body { } [data-theme="lilac"] { + --color-accent-light: var(--color-indigo-300); + --color-accent-deep: var(--color-indigo-800); --color-main-dark-hard: #343b58; --color-main-dark-medium: #414868; --color-main-dark-soft: #6c6e75; @@ -650,12 +669,12 @@ body[data-theme~="ram"] .leaflet-tile { min-width: fit-content; } - .ar-gt-0\.8\:min-w-\[10dvh\] { - min-width: 10dvh; + .ar-gt-0\.8\:min-w-1\/10 { + min-width: 10%; } - .ar-gt-0\.8\:max-w-\[20dvh\] { - max-width: 20dvh; + .ar-gt-0\.8\:max-w-1\/4 { + max-width: 25%; } .ar-gt-0\.8\:items-center { diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html index 2584bda..2f0b45f 100644 --- a/views/pages/blog-catalogue.html +++ b/views/pages/blog-catalogue.html @@ -1,53 +1,155 @@ {{ define "body" }}
-
+
- {{ .L.BlogSearch.TagsHeader }} -
-
- -
- {{- range .Tags }} -
- -
- {{- end }} -
-
-
{{ .L.BlogSearch.OrderByHeader }}
-
- +
+
-
- +
+
-
- +
+
-
- +
+ +
+
+
+
+ +
+
+
+
+ {{ .L.BlogSearch.TagsHeader }} +
- +
+ {{- range .Tags }}
- +
+ {{- end }}
-
- +
+
-
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html index 4333c77..7096c0d 100644 --- a/views/partials/catalogue-blog-cards.html +++ b/views/partials/catalogue-blog-cards.html @@ -4,26 +4,26 @@
-
+
Smiley Thumbs Up Streamline Icon: https://streamlinehq.com - - - - - + + + + + {{ .LikeCount }}
-
+
View Eye 1 Streamline Icon: https://streamlinehq.com - - + + {{ .ViewCount }}
-- cgit v1.3.1+13 From 81a9147c5406e3b2f2441373b935d7c5de2780da Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 5 Apr 2026 04:57:27 +0700 Subject: feat: use accent colors for glightbox tooltip --- internal/glightbox/html_renderer.go | 4 ++-- static/input.css | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'internal') diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index ac34880..f71a8f2 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -135,12 +135,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, w.WriteString(strings.ReplaceAll(`
-
+
`+strings.Join(elements, "\n")+`
-
+
- + - - - + + + + - - + + +