Merge pull request #903 from gethinode/develop

Fix alignment of color-mode aware brand logo

.github/workflows/lint-build.yml

@@ -51,6 +51,11 @@ jobs:
     - name: Check out repository
       uses: actions/checkout@v4
 
+    - name: Install Go
+      uses: actions/setup-go@v5
+      with:
+        go-version: ">1.0.0"
+      
     - name: Set up Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
@@ -89,6 +94,9 @@ jobs:
         restore-keys: |
           ${{ runner.os }}-${{ env.CACHE_KEY }}
 
+    - name: Display environment
+      run: npm run env
+
     - name: Build main site
       run: npm run build:cache
 

assets/js/analytics.js

@@ -1,69 +1,21 @@
 // Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
 
-{{- define "__ga_js_set_doNotTrack" -}}{{/* This is also used in the async version. */}}
-    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
-    {{- if not $pc.RespectDoNotTrack -}}
+{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
+  {{ with site.Config.Services.GoogleAnalytics.ID }}
+    {{ if strings.HasPrefix (lower .) "ua-" }}
+      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
+    {{ else }}
         var doNotTrack = false;
-    {{- else -}}
-        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
-        var doNotTrack = (dnt == "1" || dnt == "yes");
-    {{- end -}}
-{{- end -}}
-
-{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
-{{- if (and (not hugo.IsServer) (not $pc.Disable)) -}}
-    {{ with .Site.Config.Services.GoogleAnalytics.ID -}}
-        {{ if hasPrefix . "G-"}}
-            {{ template "__ga_js_set_doNotTrack" $ }}
-
-            if (!doNotTrack) {
-                window.dataLayer = window.dataLayer || [];
-
-                function gtag() {
-                    dataLayer.push(arguments);
-                }
-                
-                gtag('js', new Date());
-                gtag('config', '{{ . }}', { 'anonymize_ip': {{- $pc.AnonymizeIP -}} });
-            }
-
-        {{ else if hasPrefix . "UA-" }}
-            {{ template "__ga_js_set_doNotTrack" $ }}
-
-            if (!doNotTrack) {
-                (function(i, s, o, g, r, a, m) {
-                    i['GoogleAnalyticsObject'] = r;
-                    i[r] = i[r] || function() {
-                        (i[r].q = i[r].q || []).push(arguments)
-                    }, i[r].l = 1 * new Date();
-                    a = s.createElement(o),
-                        m = s.getElementsByTagName(o)[0];
-                    a.async = 1;
-                    a.src = g;
-                    m.parentNode.insertBefore(a, m)
-                })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-                
-                {{- if $pc.UseSessionStorage }}
-                    if (window.sessionStorage) {
-                        var GA_SESSION_STORAGE_KEY = 'ga:clientId';
-                        ga('create', '{{ . }}', {
-                            'storage': 'none',
-                            'clientId': sessionStorage.getItem(GA_SESSION_STORAGE_KEY)
-                        });
-                    
-                        ga(function(tracker) {
-                            sessionStorage.setItem(GA_SESSION_STORAGE_KEY, tracker.get('clientId'));
-                        });
-                    }
-                {{ else }}
-                    ga('create', '{{ . }}', 'auto');
-                {{ end -}}
-                {{ if $pc.AnonymizeIP }}
-                    ga('set', 'anonymizeIp', true);
-                {{ end }}
-                
-                ga('send', 'pageview');
-            }
-        {{- end }}
-    {{ end -}}
-{{- end }}
+        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
+          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+          var doNotTrack = (dnt == "1" || dnt == "yes");
+        }
+        if (!doNotTrack) {
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '{{ . }}');
+        }
+    {{ end }}
+  {{ end }}
+{{ end }}

assets/scss/common/_styles.scss

@@ -28,7 +28,7 @@ a:active {
 }
 
 .main-content {
-    margin-top: $overlay-offset;
+    margin-top: var(--navbar-offset);
 }
 
 $utilities: map-merge(

assets/scss/common/_variables-dart.scss

@@ -20,6 +20,8 @@ strong {
 
 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
+$navbar-offset-xs:              h.$navbar-offset-xs;
+$navbar-size:                   h.$navbar-size;
 $overlay-offset:                h.$overlay-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;

assets/scss/components/_breadcrumb.scss

@@ -1,6 +1,6 @@
 // scss-docs-start breadcrumb
 .breadcrumb {
-    padding-top: 0.3 * $navbar-offset;
+    padding-top: calc(0.3 * var(--navbar-offset));
 }
 
 // scss-docs-end breadcrumb

assets/scss/components/_feature.scss

@@ -1,3 +1,3 @@
 .feature {
-    margin-top: 0.3 * $navbar-offset;
+    margin-top: calc(0.3 * var(--navbar-offset));
 }

assets/scss/components/_navbar.scss

@@ -132,6 +132,43 @@
 
 :root {
     --dropdown-horizontal-bg: var(--#{$prefix}light);
+    --navbar-offset: #{$navbar-offset-xs};
+}
+
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer 0 $spacer;
+    width: 100% !important;
+}
+
+.navbar-container {
+    width: 100% !important;
+}
+
+.navbar-brand {
+    margin-right: 0;
+}
+
+@include media-breakpoint-up(#{$navbar-size}) {
+    :root {
+        --navbar-offset: #{$navbar-offset};
+    }
+
+    .navbar-container {
+        width: auto !important;
+    }
+
+    .navbar-title {
+        text-align: initial !important;
+        padding: 0;
+    }
+
+    .navbar-brand {
+        margin-right: var(--bs-navbar-brand-margin-end);
+    }
 }
 
 @if $enable-dark-mode {

assets/scss/components/_sidebar.scss

@@ -1,10 +1,10 @@
 // scss-docs-start sidebar
 .sidebar {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
 }
 
 .sidebar-overflow {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
     max-height: 90vh;
     overflow-y: auto;
 }

assets/scss/helpers/_display.scss

@@ -5,7 +5,7 @@
 // stylelint-disable annotation-no-unknown
 
 // scss-docs-start display-color
-.d-none-light {
+.d-none-light, .d-none-inline-light {
     display: none if($enable-important-utilities, !important, null); 
 }
 
@@ -13,13 +13,21 @@
     display: block if($enable-important-utilities, !important, null);
 }
 
+.d-none-inline-dark {
+    display: inline if($enable-important-utilities, !important, null);
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .d-none-light {
             display: block if($enable-important-utilities, !important, null);
         }
 
-        .d-none-dark {
+        .d-none-inline-light {
+            display: inline if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark, .d-none-inline-dark {
             display: none if($enable-important-utilities, !important, null);
         }
     }

assets/scss/layouts/_type.scss

@@ -3,34 +3,34 @@
 //
 h1 {
     margin-top: $spacer * 2.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h2 {
     margin-top: $spacer * 2;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h3 {
     margin-top: $spacer * 1.75;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h4 {
     margin-top: $spacer * 1.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h5 {
     margin-top: $spacer * 1.25;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h6 {
     margin-top: $spacer;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

data/structures/nav.yml

@@ -18,6 +18,7 @@ arguments:
     type:
       - page.Pages
       - resource.Resources
+      - '[]map[string]interface {}'
     optional: true
     comment: Array of pages to be rendered as nav items.
     group: partial

data/structures/navbar.yml

@@ -118,6 +118,7 @@ arguments:
       values:
         - light
         - dark
+        - none
     group: partial
     release: v0.23.0
   logo:

exampleSite/config/_default/params.toml

@@ -59,6 +59,7 @@
     overlayMode = "dark"
     horizontal = false
     offset = "5.5rem"
+    offsetXS = "5.5rem"
     search = true
     searchModal = false
     breadcrumb = true

go.mod

@@ -5,7 +5,7 @@ go 1.19
 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
 	github.com/gethinode/mod-bootstrap v1.2.5 // indirect
-	github.com/gethinode/mod-flexsearch v1.10.0 // indirect
+	github.com/gethinode/mod-flexsearch v1.11.3 // indirect
 	github.com/gethinode/mod-fontawesome v1.8.1 // indirect
 	github.com/gethinode/mod-katex v1.0.7 // indirect
 	github.com/gethinode/mod-leaflet v1.0.0 // indirect

go.sum

@@ -52,6 +52,14 @@ github.com/gethinode/mod-flexsearch v1.9.0 h1:AE+w7QeZTxh36JNTG+CASDLxaqlCZKn+EU
 github.com/gethinode/mod-flexsearch v1.9.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-flexsearch v1.10.0 h1:ymlHu5G2635D/h2axG4jgpGS+Vvtzxg07SZX8pJOJSo=
 github.com/gethinode/mod-flexsearch v1.10.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.10.1 h1:aZ4WjUxfiCV1eiGjIUdP+lRTlOI/flPc6ABUQ99C+Es=
+github.com/gethinode/mod-flexsearch v1.10.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.0 h1:CQArPhjQRtIZqAK4ysOiBzAB1hi//L4RTelH+ScjbXU=
+github.com/gethinode/mod-flexsearch v1.11.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.1 h1:TtaE6Dv0lH4x73SHDaZpQJLjk52lRu/VoLf6+CXFOLs=
+github.com/gethinode/mod-flexsearch v1.11.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.3 h1:ykxpUg8M4vr1C4QzxJOPGt+1ZmPAD/gOCZoFcZxWoWw=
+github.com/gethinode/mod-flexsearch v1.11.3/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=

layouts/partials/assets/navbar.html

@@ -112,6 +112,7 @@
 {{- $fixed := .fixed | default false -}}
 {{- $overlay := .overlay | default false -}}
 {{- $overlayMode := .overlayMode | default "dark" -}}
+{{- if eq $overlayMode "none" }}{{ $overlayMode = "" }}{{ end }}
 {{- $color := .color | default "" -}}
 {{- $search := .search | default site.Params.navigation.search -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
@@ -183,42 +184,46 @@
         {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
         >
         <div class="container-xxl p-0">
-            <!-- Insert sidebar toggler when applicable -->
-            <div class="d-flex align-items-center">
-                {{- if $page.Scratch.Get "sidebar" -}}
-                    <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+            <div class="d-flex navbar-container justify-content-center">
+                <!-- Insert sidebar toggler when applicable -->
+                <div class="d-flex align-items-center">
+                    {{- if $page.Scratch.Get "sidebar" -}}
+                        <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                        </button>
+                    {{- else -}}
+                        <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                        <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
+                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                        </button>
+                    {{- end -}}
+                </div>
+        
+                <!-- Insert the brand logo or name -->
+                <div class="{{ if (or $logoLight $logo) }}mx-auto{{ else }}flex-grow-1 flex-{{ $size }}-grow-0{{ end }}">
+                    <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
+                        {{- if (and $logoLight $logoDark) -}}
+                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
+                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-inline-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-inline-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                        {{- else if $logo -}}
+                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
+                            <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                        {{- else -}}
+                            <div class="navbar-title fw-bold h-100">{{ $title }}</div>
+                        {{- end -}}
+                    </a>
+                </div>
+        
+                <!-- Insert main navigation toggler -->
+                <div class="d-flex align-items-center">
+                    <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
+                        aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                        <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
+                        <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
+                        <span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
                     </button>
-                {{- else -}}
-                    <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                    <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
-                    </button>
-                {{- end -}}
-            </div>
-    
-            <!-- Insert the brand logo or name -->
-            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
-                {{- if (and $logoLight $logoDark) -}}
-                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
-                    <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                    <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                {{- else if $logo -}}
-                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
-                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                {{- else -}}
-                    <span class="fw-bold">{{ $title }}</span>
-                {{- end -}}
-            </a>
-    
-            <!-- Insert main navigation toggler -->
-            <div class="d-flex">
-                <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
-                    aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-                    <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                    <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                    <span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                </button>
+                </div>
             </div>
     
             <div class="navbar-collapse collapse" id="{{ $id }}-collapse">

layouts/partials/head/stylesheet.html

@@ -27,7 +27,11 @@
 {{ end}}
 
 {{- $navbarOffset := "0rem" -}}
-{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}{{ end }}
+{{- $navbarOffsetXS := "0rem" -}}
+{{- if site.Params.navigation.fixed }}
+    {{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}
+    {{ $navbarOffsetXS = site.Params.navigation.offsetXS | default $navbarOffset }}
+{{ end }}
 {{- $overlayOffset := $navbarOffset -}}
 {{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
@@ -43,6 +47,8 @@
     "dark"                    (default "#212529" site.Params.style.dark)
     "navbar-height"           (site.Params.navigation.offset | default "4rem")
     "navbar-offset"           $navbarOffset
+    "navbar-offset-xs"        $navbarOffsetXS
+    "navbar-size"             (site.Params.navigation.size | default "md")
     "overlay-offset"          $overlayOffset
     "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
     "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.6",
+  "version": "0.23.11",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -67,19 +67,19 @@
   },
   "homepage": "https://gethinode.com",
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
     "@gethinode/netlify-plugin-dartsass": "^0.3.0",
     "@netlify/plugin-lighthouse": "^6.0.0",
     "autoprefixer": "^10.4.19",
-    "cssnano": "^6.1.2",
-    "cssnano-preset-advanced": "^6.1.2",
+    "cssnano": "^7.0.0",
+    "cssnano-preset-advanced": "^7.0.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.121.1",
-    "markdownlint-cli2": "^0.12.1",
+    "hugo-bin": "0.122.4",
+    "markdownlint-cli2": "^0.13.0",
     "netlify-plugin-hugo-cache-resources": "^0.2.1",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^11.0.0",
@@ -87,8 +87,8 @@
     "replace-in-files-cli": "^2.2.0",
     "rimraf": "^5.0.5",
     "shx": "^0.3.4",
-    "stylelint": "^16.3.1",
-    "stylelint-config-standard-scss": "^13.0.0"
+    "stylelint": "^16.4.0",
+    "stylelint-config-standard-scss": "^13.1.0"
   },
   "optionalDependencies": {
     "@gethinode/netlify-plugin-dartsass": "^0.3.0",