aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/assets/base-style.css6
-rw-r--r--www/assets/color-scheme.ts86
-rw-r--r--www/assets/partials/preview/article.css2
-rw-r--r--www/assets/real-home.css2
-rw-r--r--www/assets/single.css6
-rw-r--r--www/config/_default/hugo.yaml5
-rw-r--r--www/layouts/_default/baseof.html9
-rw-r--r--www/layouts/_default/single.html8
-rw-r--r--www/layouts/partials/css-res.html9
-rw-r--r--www/layouts/partials/css.html10
-rw-r--r--www/layouts/partials/highlight.html6
-rw-r--r--www/layouts/partials/js.html4
-rw-r--r--www/layouts/real-home/home.html2
13 files changed, 95 insertions, 60 deletions
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 @@
<title>{{ block "title" . }}
{{ .Site.Title }}
{{ end }}</title>
- {{ with resources.Get "catppuccin-latte.css" | minify | fingerprint }}
- <style>{{ printf `@import url(%s);` .RelPermalink | safeCSS }}</style>
- {{ end }}
- {{ with resources.Get "catppuccin-mocha.css" | minify | fingerprint }}
- <style>{{ printf `@import url(%s) (prefers-color-scheme: dark);` .RelPermalink | safeCSS }}</style>
- {{ end }}
+ {{ partial "js.html" "color-scheme.ts" }}
+ {{ partial "css-res.html" (partial "highlight.html" dict) }}
{{ partial "css.html" "base-style.css" }}
{{ block "head" . }}
{{ end }}
</head>
<body>
- {{ partial "js.html" "color-scheme.ts" }}
<div id="slogan">
<span>🙃The world is full of pain, but we can fix it with love!</span>
</div>
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" . }}
<h1 class="post-title">{{ .Title }}</h1>
<hr/>
- <p class="post-info"><span class="created">{{ partial "date.html" .Date }}</span> <span class="last-updated">Last updated: {{ partial "date.html" .Lastmod }}</span></p>
+ <p class="post-info">
+ <span class="created">{{ partial "date.html" .Date }}</span> |
+ <span class="words">{{ .WordCount }} words</span>
+ {{ if ne .Lastmod .Date }}
+ <span class="last-updated">Last updated: {{ partial "date.html" .Lastmod }}</span>
+ {{ end}}
+ </p>
{{ .Content }}
<hr class="end-hr"/>
{{ 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 }}
+ <link href="{{ .RelPermalink }}" rel="stylesheet" integrity="{{ .Data.Integrity }}">
+ {{ end }}
+ {{ else }}
+ <link href="{{ .RelPermalink }}" rel="stylesheet">
+ {{ 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 }}
- <link href="{{ .RelPermalink }}" rel="stylesheet" integrity="{{ .Data.Integrity }}">
- {{ end }}
- {{ else }}
- <link href="{{ .RelPermalink }}" rel="stylesheet">
- {{ 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 @@
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}"></script>
{{ end }}
{{ else }}
- <script src="{{ (. | js.Build dict) .RelPermalink }}"></script>
+ {{ with . | js.Build }}
+ <script src="{{ .RelPermalink }}"></script>
+ {{ 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 @@
<section class="mono-link">
<h2>Other Links</h2>
<ul>
- <li><a rel="noopener noreferrer" href="{{ .RelPermalink }}">{{ .RelPermalink }}</a>
+ <li><a rel="noopener noreferrer" href="{{ .RelPermalink }}">{{ .Permalink }}</a>
: home page, aka the one you are reading, built with <a rel="noopener noreferrer"
href="https://gohugo.io">hugo</a>.</li>
<li><a rel="noopener noreferrer" href="{{ absURL "/git/" }}">{{ absURL "/git/" }}</a>
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-31 03:08:46 +0000