refactor: header into modular partials

4 files changed, 51 insertions, 47 deletions

diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 35d997e8..d2205e9b 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,23 +1,7 @@
 <header class="pagefind-exclude">
-  <!-- Header Title -->
+  <!-- Logo & Title -->
   <div class="flex flex-col items-center gap-2">
-    <!-- Logo -->
-    <div class="group relative w-full flex flex-col items-center">
-      <div class="group-hover:opacity-30 transition-opacity duration-500">
-          {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
-      </div>
-      <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500
-          w-[20rem] absolute top-0 bottom-0
-          flex flex-col items-center justify-center markdown-body">
-          <p class="text-center text-xl font-extrabold font-italic">
-              {{ T "homePageQuote.content" . | markdownify }}
-          </p>
-          <p class="w-full m-0 text-right text-sm text-secondary">
-              {{ T "homePageQuote.source" . | markdownify }}
-          </p>
-      </div>
-    </div>
-    <!-- Site Name -->
+    {{ partial "header/hoverable-logo" . }}
     <a class="text-8 font-900 text-center tracking-widest
         xerox hover:no-underline"
         href="{{ .Site.LanguagePrefix }}/"
@@ -26,35 +10,8 @@
   </div>
   <!-- Navigation -->
   {{ $navOffset := "pl-6" }}
-  {{ $langButtonSize := "w-4 h-4" }}
   <div class="flex justify-center items-center gap-3 text-size-sm md:text-size-base {{ $navOffset }}">
-      <nav class="my-4 flex justify-center items-center w-fit rounded-4 overflow-hidden">
-        {{ range .Site.Params.nav }}
-        <a class="inline-block py-1 px-[0.35rem] md:px-2 first:pl-3 last:pr-3
-            block hover:no-underline text-nowrap
-            {{ if strings.Contains $.Page.RelPermalink .link }}
-            text-[var(--text-color)] bg-[var(--block-background-color)]
-            {{ else }}
-            text-[var(--background-color)] bg-[var(--text-color)]
-            {{ end }}"
-        href="{{ .link }}" target="{{ .target }}" data-umami-event="💊 Click header navigation">{{ .name }}</a>
-        {{ end }}
-      </nav>
-
-      {{- $lang := .Site.Language.Lang -}}
-      {{- $switch := dict
-        "en" (dict "url" "/zh/" "label" "ZH" "title" "查看中文博客")
-        "zh" (dict "url" "/en/" "label" "EN" "title" "View English Blog") -}}
-      {{- $entry := index $switch $lang -}}
-      <a
-          href="{{ $entry.url }}"
-          data-umami-event="🌍 Switch Language"
-          class="block rounded-full text-center hover:no-underline {{ $langButtonSize }}
-            bg-neutral/10 border-1 border-[var(--text-color)] border-solid
-            bg-[var(--block-background-color)] leading-[0.6rem]"
-            title="{{ $entry.title }}"
-      >
-        <span class="text-size-[0.5rem] font-extrabold">{{ $entry.label }}</span>
-      </a>
+      {{ partial "header/navigation" . }}
+      {{ partial "header/language-switch" . }}
   </div>
 </header>
diff --git a/layouts/_partials/header/hoverable-logo.html b/layouts/_partials/header/hoverable-logo.html
new file mode 100644
index 00000000..d04ae6ac
--- /dev/null
+++ b/layouts/_partials/header/hoverable-logo.html
@@ -0,0 +1,15 @@
+<div class="group relative w-full flex flex-col items-center">
+  <div class="group-hover:opacity-30 transition-opacity duration-500">
+      {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
+  </div>
+  <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500
+      w-[20rem] absolute top-0 bottom-0
+      flex flex-col items-center justify-center markdown-body">
+      <p class="text-center text-xl font-extrabold font-italic">
+          {{ T "homePageQuote.content" . | markdownify }}
+      </p>
+      <p class="w-full m-0 text-right text-sm text-secondary">
+          {{ T "homePageQuote.source" . | markdownify }}
+      </p>
+  </div>
+</div>
diff --git a/layouts/_partials/header/language-switch.html b/layouts/_partials/header/language-switch.html
new file mode 100644
index 00000000..49f4c92a
--- /dev/null
+++ b/layouts/_partials/header/language-switch.html
@@ -0,0 +1,17 @@
+{{ $langButtonSize := "w-4 h-4" }}
+
+{{- $lang := .Site.Language.Lang -}}
+{{- $switch := dict
+  "en" (dict "url" "/zh/" "label" "ZH" "title" "查看中文博客")
+  "zh" (dict "url" "/en/" "label" "EN" "title" "View English Blog") -}}
+{{- $entry := index $switch $lang -}}
+<a
+    href="{{ $entry.url }}"
+    data-umami-event="🌍 Switch Language"
+    class="block rounded-full text-center hover:no-underline {{ $langButtonSize }}
+      bg-neutral/10 border-1 border-[var(--text-color)] border-solid
+      bg-[var(--block-background-color)] leading-[0.6rem]"
+    title="{{ $entry.title }}"
+>
+  <span class="text-size-[0.5rem] font-extrabold">{{ $entry.label }}</span>
+</a>
diff --git a/layouts/_partials/header/navigation.html b/layouts/_partials/header/navigation.html
new file mode 100644
index 00000000..b3e03aeb
--- /dev/null
+++ b/layouts/_partials/header/navigation.html
@@ -0,0 +1,15 @@
+<nav class="my-4 flex justify-center items-center w-fit rounded-4 overflow-hidden">
+  {{ range .Site.Params.nav }}
+  <a class="inline-block py-1 px-[0.35rem] md:px-2 first:pl-3 last:pr-3
+      block hover:no-underline text-nowrap
+      {{ if strings.Contains $.Page.RelPermalink .link }}
+      text-[var(--text-color)] bg-[var(--block-background-color)]
+      {{ else }}
+      text-[var(--background-color)] bg-[var(--text-color)]
+      {{ end }}"
+      href="{{ .link }}"
+      target="{{ .target }}"
+      data-umami-event="💊 Click header navigation"
+  >{{ .name }}</a>
+  {{ end }}
+</nav>