From 311dfdcc6b5712dd6085287ada5ebe48e02116c4 Mon Sep 17 00:00:00 2001 From: Yuqian Yang Date: Wed, 26 Feb 2025 19:36:40 +0800 Subject: fix(www): css load blink, code block bg, links. --- www/assets/base-style.css | 6 +-- www/assets/color-scheme.ts | 86 ++++++++++++++++++++------------- www/assets/partials/preview/article.css | 2 +- www/assets/real-home.css | 2 +- www/assets/single.css | 6 ++- www/config/_default/hugo.yaml | 5 +- www/layouts/_default/baseof.html | 9 +--- www/layouts/_default/single.html | 8 ++- www/layouts/partials/css-res.html | 9 ++++ www/layouts/partials/css.html | 10 +--- www/layouts/partials/highlight.html | 6 +++ www/layouts/partials/js.html | 4 +- www/layouts/real-home/home.html | 2 +- 13 files changed, 95 insertions(+), 60 deletions(-) create mode 100644 www/layouts/partials/css-res.html create mode 100644 www/layouts/partials/highlight.html diff --git a/www/assets/base-style.css b/www/assets/base-style.css index 4ee87d6..4c5a730 100644 --- a/www/assets/base-style.css +++ b/www/assets/base-style.css @@ -1,5 +1,7 @@ html { width: 100%; + --fg-color: black; + --bg-color: white; } * { @@ -9,8 +11,6 @@ html { body { width: 100%; margin: 0; - --fg-color: black; - --bg-color: white; color: var(--fg-color); background-color: var(--bg-color); } @@ -88,7 +88,7 @@ nav { vertical-align: middle; } -body[data-theme="dark"] { +html[data-theme="dark"] { --fg-color: white; --bg-color: black; diff --git a/www/assets/color-scheme.ts b/www/assets/color-scheme.ts index 62a1b5c..db6a3aa 100644 --- a/www/assets/color-scheme.ts +++ b/www/assets/color-scheme.ts @@ -1,7 +1,3 @@ -const key = "color-scheme" - -type scheme = "dark" | "light" | null - function createResetTimer(cleanup: () => void, timeout = 1) { let tag = 0 return () => { @@ -12,10 +8,6 @@ function createResetTimer(cleanup: () => void, timeout = 1) { } } -let current = localStorage.getItem(key) as scheme - -let inited = false - function createToast(duration: number = 1): (text: string) => void { const toast = document.createElement("div") toast.className = "toast" @@ -33,40 +25,69 @@ function createToast(duration: number = 1): (text: string) => void { } } -const themeToast = createToast() +const setToast = createToast() + +const key = "force-color-scheme" +const dark = "dark" +const light = "light" +type Scheme = typeof dark | typeof light + +const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + +function fromMediaQuery(value: boolean | null): Scheme { + if (value == null) { value = mediaQuery.matches} + return value ? dark : light +} + +function opposite(scheme: Scheme): Scheme { + return scheme === dark ? light : dark +} + +function updateScheme(theme: Scheme | null): Scheme { + if (theme == null) { theme = fromMediaQuery(null) } + document.querySelector("html")!.dataset["theme"] = theme + return theme +} + +mediaQuery.addEventListener("change", (e) => updateScheme(current || fromMediaQuery(e.matches))) -function setTheme(value: scheme) { - let message = "" +let current: Scheme | null = null + +{ + const saved = localStorage.getItem(key) + if ([null, dark, light].includes(saved)) { + current = saved as never + } else { + console.log(`invalid saved theme: ${saved}`) + localStorage.removeItem(key) + } +} + +updateScheme(current) + +function saveScheme(value: Scheme | null) { current = value if (value == null) { - const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches - value = prefersDarkScheme ? "dark" : "light" - message = `theme: system(${value})` localStorage.removeItem(key) } else { - message = `theme: force(${value})` localStorage.setItem(key, value) } - document.body.dataset["theme"] = value - - if (inited) { - themeToast(message) - } + const real = updateScheme(value) + setToast(`theme: ${current == null ? "system" : "force"}(${real})`) } -setTheme(current) -inited = true - -function next(scheme: scheme): scheme { - switch (scheme) { - case "dark": - return "light" - case "light": - return null - default: - return "dark" +function next(): Scheme | null { + const sys = fromMediaQuery(null) + if (current == null) { + return opposite(sys) + } else { + if (current === sys) { + return null; + } else { + return opposite(current) + } } } @@ -82,9 +103,8 @@ window.addEventListener("load", () => { reset() clicks += 1 if (clicks === 3) { - setTheme(next(current)) + saveScheme(next()) clicks = 0 } }) }) - diff --git a/www/assets/partials/preview/article.css b/www/assets/partials/preview/article.css index 6e93669..9629597 100644 --- a/www/assets/partials/preview/article.css +++ b/www/assets/partials/preview/article.css @@ -31,7 +31,7 @@ } } -body[data-theme="dark"] { +html[data-theme="dark"] { & .article-preview { background-color: hsl(0, 0%, 3%); diff --git a/www/assets/real-home.css b/www/assets/real-home.css index c1355b5..83c865b 100644 --- a/www/assets/real-home.css +++ b/www/assets/real-home.css @@ -54,7 +54,7 @@ text-align: right; } -body[data-theme="dark"] { +html[data-theme="dark"] { & .friend-github { filter: invert(1); } diff --git a/www/assets/single.css b/www/assets/single.css index 09a0e29..70325d1 100644 --- a/www/assets/single.css +++ b/www/assets/single.css @@ -1,10 +1,12 @@ .post-info { margin-block: 0; - font-size: 0.9em; + font-family: monospace; + font-size: 0.95em; display: flex; flex-wrap: wrap; + gap: 1em; - & > .created { + & > .words { margin-inline-end: auto; } } diff --git a/www/config/_default/hugo.yaml b/www/config/_default/hugo.yaml index 3b63838..d66ef30 100644 --- a/www/config/_default/hugo.yaml +++ b/www/config/_default/hugo.yaml @@ -7,6 +7,10 @@ defaultContentLanguage: "en" hasCJKLanguage: true enableEmoji: true +disableKinds: + - taxonomy + - term + frontmatter: lastmod: [ "lastmod", "date", "publishDate" ] @@ -18,7 +22,6 @@ markup: build: noJSConfigInAssets: true - params: jsopts: minify: false diff --git a/www/layouts/_default/baseof.html b/www/layouts/_default/baseof.html index defa6ac..55954d3 100644 --- a/www/layouts/_default/baseof.html +++ b/www/layouts/_default/baseof.html @@ -9,18 +9,13 @@ {{ block "title" . }} {{ .Site.Title }} {{ end }} - {{ with resources.Get "catppuccin-latte.css" | minify | fingerprint }} - - {{ end }} - {{ with resources.Get "catppuccin-mocha.css" | minify | fingerprint }} - - {{ end }} + {{ partial "js.html" "color-scheme.ts" }} + {{ partial "css-res.html" (partial "highlight.html" dict) }} {{ partial "css.html" "base-style.css" }} {{ block "head" . }} {{ end }} - {{ partial "js.html" "color-scheme.ts" }}
🙃The world is full of pain, but we can fix it with love!
diff --git a/www/layouts/_default/single.html b/www/layouts/_default/single.html index 83297cf..1f267eb 100644 --- a/www/layouts/_default/single.html +++ b/www/layouts/_default/single.html @@ -10,7 +10,13 @@ {{ partial "nav.html" . }}

{{ .Title }}

-

{{ partial "date.html" .Date }} Last updated: {{ partial "date.html" .Lastmod }}

+

+ {{ partial "date.html" .Date }} | + {{ .WordCount }} words + {{ if ne .Lastmod .Date }} + Last updated: {{ partial "date.html" .Lastmod }} + {{ end}} +

{{ .Content }}
{{ partial "nav.html" . }} diff --git a/www/layouts/partials/css-res.html b/www/layouts/partials/css-res.html new file mode 100644 index 0000000..6fabf67 --- /dev/null +++ b/www/layouts/partials/css-res.html @@ -0,0 +1,9 @@ +{{ with . | minify }} + {{ if hugo.IsProduction }} + {{ with . | fingerprint }} + + {{ end }} + {{ else }} + + {{ end }} +{{ end }} diff --git a/www/layouts/partials/css.html b/www/layouts/partials/css.html index 5ddd65b..12d3353 100644 --- a/www/layouts/partials/css.html +++ b/www/layouts/partials/css.html @@ -1,9 +1 @@ -{{ with resources.Get . | minify }} - {{ if hugo.IsProduction }} - {{ with . | fingerprint }} - - {{ end }} - {{ else }} - - {{ end }} -{{ end }} +{{ partial "css-res.html" (resources.Get .) }} \ No newline at end of file diff --git a/www/layouts/partials/highlight.html b/www/layouts/partials/highlight.html new file mode 100644 index 0000000..06ab047 --- /dev/null +++ b/www/layouts/partials/highlight.html @@ -0,0 +1,6 @@ +{{ $light := resources.Get "catppuccin-latte.css" }} +{{ $dark := resources.Get "catppuccin-mocha.css" }} +{{ $dark_wrapper_before := resources.FromString "highlight-dark-wapper-before.css" `html[data-theme="dark"] {`}}} +{{ $dark_wrapper_after := resources.FromString "highlight-dark-wapper-after.css" "}"}} +{{ $highlight := slice $light $dark_wrapper_before $dark $dark_wrapper_after | resources.Concat "highlight.css" }} +{{ return $highlight }} diff --git a/www/layouts/partials/js.html b/www/layouts/partials/js.html index a4e8048..16dafa4 100644 --- a/www/layouts/partials/js.html +++ b/www/layouts/partials/js.html @@ -4,6 +4,8 @@ {{ end }} {{ else }} - + {{ with . | js.Build }} + + {{ end }} {{ end }} {{ end }} diff --git a/www/layouts/real-home/home.html b/www/layouts/real-home/home.html index 3de9903..daf3248 100644 --- a/www/layouts/real-home/home.html +++ b/www/layouts/real-home/home.html @@ -66,7 +66,7 @@

Other Links