fix(www): css load blink, code block bg, links.

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>