feat: navbar logo and title can be configured

chore: add logos to static and update compiled css

assets/css/compiled/main.css

@@ -2122,6 +2122,10 @@ video {
   margin-left: 1rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -3412,6 +3416,14 @@ body {
   }
 }
 
+:is(html[class~="dark"] .dark\:block) {
+  display: block;
+}
+
+:is(html[class~="dark"] .dark\:hidden) {
+  display: none;
+}
+
 :is(html[class~="dark"] .dark\:border-blue-200\/30) {
   border-color: rgb(191 219 254 / 0.3);
 }

exampleSite/hugo.yaml

@@ -75,6 +75,16 @@ menu:
       weight: 3
 
 params:
+  navbar:
+    displayTitle: true
+    displayLogo: true
+    logo:
+      path: images/logo.svg
+      dark: images/logo-dark.svg
+      # link: /
+      # width: 40
+      # height: 20
+
   footer:
     disabled: false
     displayCopyright: true
@@ -94,4 +104,4 @@ params:
 
   editURL:
     disabled: false
-    base: "https://github.com/imfing/hextra/edit/dev/exampleSite/content"
+    base: "https://github.com/imfing/hextra/edit/main/exampleSite/content"

exampleSite/hugo_stats.json

@@ -153,6 +153,7 @@
       "dark:bg-primary-400/10",
       "dark:bg-red-900/30",
       "dark:bg-yellow-700/30",
+      "dark:block",
       "dark:border-blue-200/30",
       "dark:border-gray-100/20",
       "dark:border-neutral-800",
@@ -162,6 +163,7 @@
       "dark:border-yellow-200/30",
       "dark:contrast-more:border-neutral-400",
       "dark:focus:bg-dark",
+      "dark:hidden",
       "dark:hover:bg-gray-100/5",
       "dark:hover:bg-neutral-900",
       "dark:hover:bg-primary-100/5",
@@ -340,6 +342,7 @@
       "min-w-full",
       "ml-1",
       "ml-4",
+      "ml-auto",
       "mr-1",
       "mr-2",
       "mt-1.5",

layouts/partials/navbar.html

@@ -1,12 +1,20 @@
+{{- $logoPath := .Site.Params.navbar.logo.path | default "images/logo.svg" -}}
+{{- $logoLink := .Site.Params.navbar.logo.link | default .Site.Home.RelPermalink -}}
+{{- $logoWidth := .Site.Params.navbar.logo.width | default "20" -}}
+{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
+{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
+
+
 <div class="sticky top-0 z-20 w-full bg-transparent print:hidden">
   <div class="pointer-events-none absolute z-[-1] h-full w-full bg-white shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:bg-dark dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
 
   <nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 max-w-[90rem]">
-    <a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ .Site.Home.RelPermalink }}">
+    <a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
-      {{ partial "utils/icon.html" (dict "name" "hextra" "attributes" "height=20") }}
+      <img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoWidth }}" width="{{ $logoHeight }}" />
-      <span class="mx-2 font-extrabold hidden md:inline select-none" title="{{ .Site.Title }}">
+      <img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoWidth }}" width="{{ $logoHeight }}" />
-        {{- .Site.Title -}}
+      {{- if .Site.Params.navbar.displayTitle -}}
-      </span>
+        <span class="mx-2 font-extrabold hidden md:inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
+      {{- end -}}
     </a>
 
     {{- $currentPage := . -}}
@@ -36,7 +44,7 @@
     {{- end -}}
 
 
-    <button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
+    <button type="button" aria-label="Menu" class="hamburger-menu ml-auto -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
       {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
     </button>
   </nav>

static/images/logo-dark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" fill="white">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m 105.50024,22.224647 c -9.59169,-5.537563 -21.40871,-5.537563 -31.000093,0 L 39.054693,42.689119 C 29.463353,48.226675 23.55484,58.460531 23.55484,69.535642 v 40.928918 c 0,11.07542 5.908513,21.3092 15.499853,26.84652 l 35.445453,20.46446 c 9.591313,5.53732 21.408404,5.53732 31.000094,0 l 35.44507,-20.46446 c 9.59131,-5.53732 15.49985,-15.7711 15.49985,-26.84652 V 69.535642 c 0,-11.075111 -5.90854,-21.308967 -15.49985,-26.846523 z M 34.112797,85.737639 c -1.384445,2.397827 -1.384445,5.352099 0,7.749927 l 24.781554,42.922974 c 1.38437,2.39783 3.942853,3.87496 6.711592,3.87496 h 49.563107 c 2.76905,0 5.3273,-1.47713 6.71144,-3.87496 l 24.78194,-42.922974 c 1.38414,-2.397828 1.38414,-5.3521 0,-7.749927 L 121.88049,42.814746 c -1.38414,-2.397828 -3.94239,-3.874964 -6.71144,-3.874964 H 65.605944 c -2.768739,0 -5.327223,1.477059 -6.711592,3.874964 z" style="stroke-width:0.774993" />
+</svg>

static/images/logo.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m 105.50024,22.224647 c -9.59169,-5.537563 -21.40871,-5.537563 -31.000093,0 L 39.054693,42.689119 C 29.463353,48.226675 23.55484,58.460531 23.55484,69.535642 v 40.928918 c 0,11.07542 5.908513,21.3092 15.499853,26.84652 l 35.445453,20.46446 c 9.591313,5.53732 21.408404,5.53732 31.000094,0 l 35.44507,-20.46446 c 9.59131,-5.53732 15.49985,-15.7711 15.49985,-26.84652 V 69.535642 c 0,-11.075111 -5.90854,-21.308967 -15.49985,-26.846523 z M 34.112797,85.737639 c -1.384445,2.397827 -1.384445,5.352099 0,7.749927 l 24.781554,42.922974 c 1.38437,2.39783 3.942853,3.87496 6.711592,3.87496 h 49.563107 c 2.76905,0 5.3273,-1.47713 6.71144,-3.87496 l 24.78194,-42.922974 c 1.38414,-2.397828 1.38414,-5.3521 0,-7.749927 L 121.88049,42.814746 c -1.38414,-2.397828 -3.94239,-3.874964 -6.71144,-3.874964 H 65.605944 c -2.768739,0 -5.327223,1.477059 -6.711592,3.874964 z" style="stroke-width:0.774993" />
+</svg>