Merge 9efb85e5c9 into 6cfbf4d946

Add scrolling over TOC

.github/labeller.yml

@@ -1,6 +1,7 @@
 i18n:
-  - i18n/*
+- changed-files:
+  - any-glob-to-any-file: i18n/*
 
 documentation:
-  - "*.md"
+- changed-files:
-  - exampleSite/content/*
+  - any-glob-to-any-file: '**/*.md'

CHANGELOG.md

@@ -12,7 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Automatic support for WebP images ([#693](https://github.com/jpanther/congo/pull/693))
 - Warning when building if links to Markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
 - Ability to share articles to Telegram and Line ([#719](https://github.com/jpanther/congo/pull/719))
-- New icon for `line`([#719](https://github.com/jpanther/congo/pull/719))
+- New icons for `line` and `google-scholar` ([#719](https://github.com/jpanther/congo/pull/719), [#755](https://github.com/jpanther/congo/pull/755))
+- Table of contents will now scroll if taller than the browser height ([#733](https://github.com/jpanther/congo/pull/733))
 - Korean translation ([#731](https://github.com/jpanther/congo/pull/731))
 
 ### Changed
@@ -21,7 +22,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - ⚠️ Author params block in language configuration has been moved to `params.author` ([#704](https://github.com/jpanther/congo/pull/704))
 - Refactored image logic into a new `picture.html` partial ([#693](https://github.com/jpanther/congo/pull/693))
 - Upgrade to ChartJS v4.4.1 ([#736](https://github.com/jpanther/congo/pull/736))
-- Upgrade to Tailwind v3.3.6 ([#737](https://github.com/jpanther/congo/pull/737))
+- Upgrade to Tailwind v3.3.7 ([#737](https://github.com/jpanther/congo/pull/737), [#752](https://github.com/jpanther/congo/pull/752))
+- Updated Japanese translation ([#750](https://github.com/jpanther/congo/pull/750))
 
 ### Fixed
 

assets/css/compiled/main.css

@@ -1,6 +1,6 @@
 /*! Congo v2.7.6 | MIT License | https://github.com/jpanther/congo */
 
-/*! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.3.7 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1137,6 +1137,12 @@ body:has(#menu-controller:checked) {
 
 /* Table of Contents */
 
+.toc {
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
+
 .toc ul,
 .toc li {
   list-style-type: none;

assets/css/main.css

@@ -59,6 +59,12 @@ body:has(#menu-controller:checked) {
 }
 
 /* Table of Contents */
+.toc {
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
+
 .toc ul,
 .toc li {
   @apply list-none px-0 leading-snug;

assets/icons/google-scholar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="currentColor" d="M390.9 298.5c0 0 0 .1 .1 .1c9.2 19.4 14.4 41.1 14.4 64C405.3 445.1 338.5 512 256 512s-149.3-66.9-149.3-149.3c0-22.9 5.2-44.6 14.4-64h0c1.7-3.6 3.6-7.2 5.6-10.7c4.4-7.6 9.4-14.7 15-21.3c27.4-32.6 68.5-53.3 114.4-53.3c33.6 0 64.6 11.1 89.6 29.9c9.1 6.9 17.4 14.7 24.8 23.5c5.6 6.6 10.6 13.8 15 21.3c2 3.4 3.8 7 5.5 10.5zm26.4-18.8c-30.1-58.4-91-98.4-161.3-98.4s-131.2 40-161.3 98.4L0 202.7 256 0 512 202.7l-94.7 77.1z"/></svg>

config/_default/languages.en.toml

@@ -59,4 +59,5 @@ title = "Congo"
   #   { whatsapp = "https://wa.me/phone-number" },
   #   { x-twitter = "https://twitter.com/username" },
   #   { youtube = "https://youtube.com/username" },
+  #   { google-scholar = "https://scholar.google.com/citations?user=user-id"}
   # ]

exampleSite/config/_default/params.toml

@@ -19,7 +19,7 @@ enableQuicklink = true
 fingerprintAlgorithm = "sha256"
 
 [header]
-  layout = "basic" # valid options: basic, hamburger, hybrid, custom
+  layout = "hybrid" # valid options: basic, hamburger, hybrid, custom
   # logo = "img/logo.jpg"
   # logoDark = "img/dark-logo.jpg"
   showTitle = true

exampleSite/content/samples/icons/index.de.md

@@ -40,6 +40,7 @@ Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen fin
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

exampleSite/content/samples/icons/index.es.md

@@ -40,6 +40,7 @@ La lista completa de íconos incorporados y sus nombres correspondientes se pued
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

exampleSite/content/samples/icons/index.ja.md

@@ -40,6 +40,7 @@ Congo は[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポ
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

exampleSite/content/samples/icons/index.md

@@ -40,6 +40,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | gitlab               | {{< icon gitlab >}}               |
 | globe                | {{< icon globe >}}                |
 | google               | {{< icon google >}}               |
+| google-scholar       | {{< icon google-scholar >}}       |
 | hashnode             | {{< icon hashnode >}}             |
 | instagram            | {{< icon instagram >}}            |
 | keybase              | {{< icon keybase >}}              |

i18n/ja.yaml

@@ -47,7 +47,7 @@ sharing:
   email: " Eメールを送る"
   facebook: "Facebookでシェアする"
   linkedin: "LinkedInでシェアする"
-  # mastodon: "Toot on Mastodon"
+  mastodon: "Mastodonに投稿する"
   pinterest: "Pinterestでピンする"
   reddit: "Redditに投稿する"
   twitter: "Twitterに投稿する"

layouts/partials/header/basic.html

@@ -7,105 +7,7 @@
     {{/* Main menu */}}
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
       <ul class="flex flex-col list-none text-end sm:flex-row">
-        {{ if .Site.Menus.main }}
+        {{ partial "header/basic/basic-content.html" . }}
-          {{ range .Site.Menus.main }}
-            {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-              {{ continue }}
-            {{ end }}
-            <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
-              {{ if eq .Params.action "search" }}
-                {{ $.Scratch.Add "searchCount" 1 }}
-                {{ if $.Site.Params.enableSearch | default false }}
-                  <button
-                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                    title="{{ .Title | default (i18n "search.open_button_title") }}"
-                  >
-                    {{ with .Params.icon | default "search" }}
-                      <span
-                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                      >
-                        {{- partial "icon.html" . -}}
-                      </span>
-                    {{- end -}}{{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </button>
-                {{ end }}
-              {{ else if eq .Params.action "appearance" }}
-                {{ $.Scratch.Add "switchCount" 1 }}
-                <button
-                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                  type="button"
-                  aria-label="appearance switcher"
-                >
-                  <span
-                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                    title="{{ i18n "footer.dark_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "moon" }}
-                      {{- partial "icon.html" . -}}
-                    {{- end -}}
-                    {{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                  <span
-                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                    title="{{ i18n "footer.light_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "sun" }}
-                      {{ partial "icon.html" . }}
-                    {{ end }}
-                    {{ if .Params.showName | default true }}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                </button>
-              {{ else if eq .Params.action "locale" }}
-                {{ $.Scratch.Add "localeCount" 1 }}
-                {{ partial "translations.html" . }}
-              {{ else }}
-                <a
-                  href="{{ .URL }}"
-                  title="{{ .Title }}"
-                  {{ with .Params.target }}target="{{ . }}"{{ end }}
-                  >{{ with .Params.icon }}
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{- partial "icon.html" . -}}
-                    </span>
-                  {{- end -}}{{- if .Params.showName | default true -}}
-                    <span
-                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                      >{{ .Name | markdownify | emojify }}</span
-                    >
-                  {{ end }}</a
-                >
-              {{ end }}
-            </li>
-          {{ end }}
-          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-            <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
-              <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
-                <span
-                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                >
-                  {{ partial "icon.html" "search" }}
-                </span>
-              </button>
-            </li>
-          {{ end }}
-        {{ end }}
       </ul>
     {{ end }}
   </nav>

layouts/partials/header/basic/basic-content.html

@@ -0,0 +1,99 @@
+{{ if .Site.Menus.main }}
+    {{ range .Site.Menus.main }}
+    {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
+        {{ continue }}
+    {{ end }}
+    <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
+        {{ if eq .Params.action "search" }}
+        {{ $.Scratch.Add "searchCount" 1 }}
+        {{ if $.Site.Params.enableSearch | default false }}
+            <button
+            id="search-button-{{ $.Scratch.Get "searchCount" }}"
+            title="{{ .Title | default (i18n "search.open_button_title") }}"
+            >
+            {{ with .Params.icon | default "search" }}
+                <span
+                class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                >
+                {{- partial "icon.html" . -}}
+                </span>
+            {{- end -}}{{- if .Params.showName | default true -}}
+                <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+                >
+            {{ end }}
+            </button>
+        {{ end }}
+        {{ else if eq .Params.action "appearance" }}
+        {{ $.Scratch.Add "switchCount" 1 }}
+        <button
+            id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+            type="button"
+            aria-label="appearance switcher"
+        >
+            <span
+            class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+            title="{{ i18n "footer.dark_appearance" }}"
+            >
+            {{ with .Params.icon | default "moon" }}
+                {{- partial "icon.html" . -}}
+            {{- end -}}
+            {{- if .Params.showName | default true -}}
+                <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+                >
+            {{ end }}
+            </span>
+            <span
+            class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+            title="{{ i18n "footer.light_appearance" }}"
+            >
+            {{ with .Params.icon | default "sun" }}
+                {{ partial "icon.html" . }}
+            {{ end }}
+            {{ if .Params.showName | default true }}
+                <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+                >
+            {{ end }}
+            </span>
+        </button>
+        {{ else if eq .Params.action "locale" }}
+        {{ $.Scratch.Add "localeCount" 1 }}
+        {{ partial "translations.html" . }}
+        {{ else }}
+        <a
+            href="{{ .URL }}"
+            title="{{ .Title }}"
+            {{ with .Params.target }}target="{{ . }}"{{ end }}
+            >{{ with .Params.icon }}
+            <span
+                class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+            >
+                {{- partial "icon.html" . -}}
+            </span>
+            {{- end -}}{{- if .Params.showName | default true -}}
+            <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+            >
+            {{ end }}</a
+        >
+        {{ end }}
+    </li>
+    {{ end }}
+    {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+    <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
+        <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+        <span
+            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+        >
+            {{ partial "icon.html" "search" }}
+        </span>
+        </button>
+    </li>
+    {{ end }}
+{{ end }}

layouts/partials/header/hamburger.html

@@ -7,124 +7,7 @@
     {{/* Hamburger menu */}}
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
       <label id="menu-button" for="menu-controller" class="block">
-        <input type="checkbox" id="menu-controller" class="hidden" />
+        {{ partial "header/hamburger/hamburger-content.html" . }}
-        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
-          {{ partial "icon.html" "bars" }}
-        </div>
-        <div
-          id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
-        >
-          <ul
-            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
-          >
-            <li class="mb-1">
-              <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
-                >{{ partial "icon.html" "xmark" }}</span
-              >
-            </li>
-            {{ if .Site.Menus.main }}
-              {{ range .Site.Menus.main }}
-                {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-                  {{ continue }}
-                {{ end }}
-                <li class="mb-1 group">
-                  {{ if eq .Params.action "search" }}
-                    {{ $.Scratch.Add "searchCount" 1 }}
-                    {{ if $.Site.Params.enableSearch | default false }}
-                      <button
-                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                        title="{{ .Title | default (i18n "search.open_button_title") }}"
-                      >
-                        {{ with .Params.icon | default "search" }}
-                          <span
-                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                          >
-                            {{- partial "icon.html" . -}}
-                          </span>
-                        {{- end -}}{{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </button>
-                    {{ end }}
-                  {{ else if eq .Params.action "appearance" }}
-                    {{ $.Scratch.Add "switchCount" 1 }}
-                    <button
-                      id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                      type="button"
-                      aria-label="appearance switcher"
-                    >
-                      <span
-                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                        title="{{ i18n "footer.dark_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "moon" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                      <span
-                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                        title="{{ i18n "footer.light_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "sun" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                    </button>
-                  {{ else if eq .Params.action "locale" }}
-                    {{ $.Scratch.Add "localeCount" 1 }}
-                    {{ partial "translations.html" . }}
-                  {{ else }}
-                    <a
-                      href="{{ .URL }}"
-                      title="{{ .Title }}"
-                      onclick="close_menu()"
-                      {{ with .Params.target }}target="{{ . }}"{{ end }}
-                      >{{ with .Params.icon }}
-                        <span
-                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                        >
-                          {{- partial "icon.html" . -}}
-                        </span>
-                      {{- end -}}{{- if .Params.showName | default true -}}
-                        <span
-                          class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                          >{{ .Name | markdownify | emojify }}</span
-                        >
-                      {{ end }}</a
-                    >
-                  {{ end }}
-                </li>
-              {{ end }}
-              {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-                <li class="mb-1 group">
-                  <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{ partial "icon.html" "search" }}
-                    </span>
-                  </button>
-                </li>
-              {{ end }}
-            {{ end }}
-          </ul>
-        </div>
       </label>
     {{ end }}
   </nav>

layouts/partials/header/hamburger/hamburger-content.html

@@ -0,0 +1,118 @@
+<input type="checkbox" id="menu-controller" class="hidden" />
+<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+    {{ partial "icon.html" "bars" }}
+</div>
+<div
+    id="menu-wrapper"
+    class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
+>
+    <ul
+    class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+    >
+    <li class="mb-1">
+        <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
+        >{{ partial "icon.html" "xmark" }}</span
+        >
+    </li>
+    {{ if .Site.Menus.main }}
+        {{ range .Site.Menus.main }}
+        {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
+            {{ continue }}
+        {{ end }}
+        <li class="mb-1 group">
+            {{ if eq .Params.action "search" }}
+            {{ $.Scratch.Add "searchCount" 1 }}
+            {{ if $.Site.Params.enableSearch | default false }}
+                <button
+                id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                title="{{ .Title | default (i18n "search.open_button_title") }}"
+                >
+                {{ with .Params.icon | default "search" }}
+                    <span
+                    class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                    {{- partial "icon.html" . -}}
+                    </span>
+                {{- end -}}{{- if .Params.showName | default true -}}
+                    <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                    >
+                {{ end }}
+                </button>
+            {{ end }}
+            {{ else if eq .Params.action "appearance" }}
+            {{ $.Scratch.Add "switchCount" 1 }}
+            <button
+                id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                type="button"
+                aria-label="appearance switcher"
+            >
+                <span
+                class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                title="{{ i18n "footer.dark_appearance" }}"
+                >
+                {{ with .Params.icon | default "moon" }}
+                    {{- partial "icon.html" . -}}
+                {{- end -}}
+                {{- if .Params.showName | default true -}}
+                    <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                    >
+                {{ end }}
+                </span>
+                <span
+                class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                title="{{ i18n "footer.light_appearance" }}"
+                >
+                {{ with .Params.icon | default "sun" }}
+                    {{- partial "icon.html" . -}}
+                {{- end -}}
+                {{- if .Params.showName | default true -}}
+                    <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                    >
+                {{ end }}
+                </span>
+            </button>
+            {{ else if eq .Params.action "locale" }}
+            {{ $.Scratch.Add "localeCount" 1 }}
+            {{ partial "translations.html" . }}
+            {{ else }}
+            <a
+                href="{{ .URL }}"
+                title="{{ .Title }}"
+                onclick="close_menu()"
+                {{ with .Params.target }}target="{{ . }}"{{ end }}
+                >{{ with .Params.icon }}
+                <span
+                    class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                >
+                    {{- partial "icon.html" . -}}
+                </span>
+                {{- end -}}{{- if .Params.showName | default true -}}
+                <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                >
+                {{ end }}</a
+            >
+            {{ end }}
+        </li>
+        {{ end }}
+        {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+        <li class="mb-1 group">
+            <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+            <span
+                class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+            >
+                {{ partial "icon.html" "search" }}
+            </span>
+            </button>
+        </li>
+        {{ end }}
+    {{ end }}
+    </ul>
+</div>

layouts/partials/header/hybrid.html

@@ -5,229 +5,13 @@
       {{ partial "logo.html" . }}
     </div>
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
-      {{/* Hamburger menu */}}
       <label id="menu-button" for="menu-controller" class="block sm:hidden">
-        <input type="checkbox" id="menu-controller" class="hidden" />
+        {{/* Hamburger menu */}}
-        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+        {{ partial "header/hamburger/hamburger-content.html" . }}
-          {{ partial "icon.html" "bars" }}
-        </div>
-        <div
-          id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
-        >
-          <ul
-            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
-          >
-            <li class="mb-1">
-              <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
-                >{{ partial "icon.html" "xmark" }}</span
-              >
-            </li>
-            {{ if .Site.Menus.main }}
-              {{ range .Site.Menus.main }}
-                {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-                  {{ continue }}
-                {{ end }}
-                <li class="mb-1 group">
-                  {{ if eq .Params.action "search" }}
-                    {{ $.Scratch.Add "searchCount" 1 }}
-                    {{ if $.Site.Params.enableSearch | default false }}
-                      <button
-                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                        title="{{ .Title | default (i18n "search.open_button_title") }}"
-                      >
-                        {{ with .Params.icon | default "search" }}
-                          <span
-                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                          >
-                            {{- partial "icon.html" . -}}
-                          </span>
-                        {{- end -}}{{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </button>
-                    {{ end }}
-                  {{ else if eq .Params.action "appearance" }}
-                    {{ $.Scratch.Add "switchCount" 1 }}
-                    <button
-                      id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                      type="button"
-                      aria-label="appearance switcher"
-                    >
-                      <span
-                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                        title="{{ i18n "footer.dark_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "moon" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                      <span
-                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                        title="{{ i18n "footer.light_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "sun" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                    </button>
-                  {{ else if eq .Params.action "locale" }}
-                    {{ $.Scratch.Add "localeCount" 1 }}
-                    {{ partial "translations.html" . }}
-                  {{ else }}
-                    <a
-                      href="{{ .URL }}"
-                      title="{{ .Title }}"
-                      onclick="close_menu()"
-                      {{ with .Params.target }}target="{{ . }}"{{ end }}
-                      >{{ with .Params.icon }}
-                        <span
-                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                        >
-                          {{- partial "icon.html" . -}}
-                        </span>
-                      {{- end -}}{{- if .Params.showName | default true -}}
-                        <span
-                          class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                          >{{ .Name | markdownify | emojify }}</span
-                        >
-                      {{ end }}</a
-                    >
-                  {{ end }}
-                </li>
-              {{ end }}
-              {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-                <li class="mb-1 group">
-                  <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{ partial "icon.html" "search" }}
-                    </span>
-                  </button>
-                </li>
-              {{ end }}
-            {{ end }}
-          </ul>
-        </div>
       </label>
       {{/* Basic menu */}}
       <ul class="flex-row hidden list-none text-end sm:flex">
-        {{ if .Site.Menus.main }}
+        {{ partial "header/basic/basic-content.html" . }}
-          {{ range .Site.Menus.main }}
-            {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-              {{ continue }}
-            {{ end }}
-            <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
-              {{ if eq .Params.action "search" }}
-                {{ $.Scratch.Add "searchCount" 1 }}
-                {{ if $.Site.Params.enableSearch | default false }}
-                  <button
-                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                    title="{{ .Title | default (i18n "search.open_button_title") }}"
-                  >
-                    {{ with .Params.icon | default "search" }}
-                      <span
-                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                      >
-                        {{- partial "icon.html" . -}}
-                      </span>
-                    {{- end -}}{{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </button>
-                {{ end }}
-              {{ else if eq .Params.action "appearance" }}
-                {{ $.Scratch.Add "switchCount" 1 }}
-                <button
-                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                  type="button"
-                  aria-label="appearance switcher"
-                >
-                  <span
-                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                    title="{{ i18n "footer.dark_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "moon" }}
-                      {{- partial "icon.html" . -}}
-                    {{- end -}}
-                    {{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                  <span
-                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                    title="{{ i18n "footer.light_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "sun" }}
-                      {{- partial "icon.html" . -}}
-                    {{- end -}}
-                    {{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                </button>
-              {{ else if eq .Params.action "locale" }}
-                {{ $.Scratch.Add "localeCount" 1 }}
-                {{ partial "translations.html" . }}
-              {{ else }}
-                <a
-                  href="{{ .URL }}"
-                  title="{{ .Title }}"
-                  {{ with .Params.target }}target="{{ . }}"{{ end }}
-                  >{{ with .Params.icon }}
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{- partial "icon.html" . -}}
-                    </span>
-                  {{- end -}}{{- if .Params.showName | default true -}}
-                    <span
-                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                      >{{ .Name | markdownify | emojify }}</span
-                    >
-                  {{ end }}</a
-                >
-              {{ end }}
-            </li>
-          {{ end }}
-          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-            <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
-              <button id="search-button-m1" title="{{ i18n "search.open_button_title" }}">
-                <span
-                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                >
-                  {{ partial "icon.html" "search" }}
-                </span>
-              </button>
-            </li>
-          {{ end }}
-
-        {{ end }}
       </ul>
     {{ end }}
   </nav>

package-lock.json

@@ -20,7 +20,7 @@
         "prettier-plugin-tailwindcss": "^0.5.9",
         "quicklink": "^2.3.0",
         "rimraf": "^5.0.5",
-        "tailwindcss": "^3.3.6",
+        "tailwindcss": "^3.3.7",
         "vendor-copy": "^3.0.1"
       },
       "funding": {
@@ -2896,9 +2896,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.6",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.7.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "integrity": "sha512-pjgQxDZPvyS/nG3ZYkyCvsbONJl7GdOejfm24iMt2ElYQQw8Jc4p0m8RdMp7mznPD0kUhfzwV3zAwa80qI0zmQ==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -5199,9 +5199,9 @@
       "dev": true
     },
     "tailwindcss": {
-      "version": "3.3.6",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.7.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "integrity": "sha512-pjgQxDZPvyS/nG3ZYkyCvsbONJl7GdOejfm24iMt2ElYQQw8Jc4p0m8RdMp7mznPD0kUhfzwV3zAwa80qI0zmQ==",
       "dev": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",

package.json

@@ -39,7 +39,7 @@
     "prettier-plugin-tailwindcss": "^0.5.9",
     "quicklink": "^2.3.0",
     "rimraf": "^5.0.5",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.3.7",
     "vendor-copy": "^3.0.1"
   },
   "vendorCopy": [],