Merge pull request #148 from gethinode/color

Transparent navbar
Fix linting issues
2025-10-16 06:23:11 +00:00 · 2023-02-16 09:44:04 +01:00 · 2023-02-16 09:36:19 +01:00 · 2023-02-16 09:28:38 +01:00 · 2023-02-16 09:28:13 +01:00 · 2023-02-16 09:27:55 +01:00
19 changed files with 86 additions and 43 deletions
--- a/assets/js/navbar.js
+++ b/assets/js/navbar.js
@@ -0,0 +1,16 @@
+const navbar = document.querySelector('.navbar')
+const toggler = document.getElementById('main-nav-toggler')
+
+// set the navbar background color to opaque when scrolling past a breakpoint
+window.onscroll = () => {
+  if (window.scrollY > 75) {
+    navbar.classList.add('nav-active')
+  } else {
+    navbar.classList.remove('nav-active')
+  }
+}
+
+// set the navbar background color to opaque when expanded
+toggler.onclick = () => {
+  navbar.classList.toggle('navbar-expanded')
+}
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -2,6 +2,15 @@

 // Source: https://jsfiddle.net/njhgr40m/

+.navbar {
+    transition: 0.5s ease-in-out;
+    background-color: none;
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-body-bg);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
    border: 0 !important;
@@ -80,4 +89,8 @@
    }
 }

+.nav-spacing {
+    width: 26px;
+}
+
 // stylelint-enable annotation-no-unknown
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -16,13 +16,13 @@
    sections = ["blog", "projects"]
    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
    fullCover = false
+    style = ""
 # toml-docs-end home

 # toml-docs-start navigation
 [navigation]
    logo = "/img/logo_icon.svg"
    color = "body"
-    style = "light"
    fixed = true
    offset = "4em"
    search = true
--- a/config/_default/server.toml
+++ b/config/_default/server.toml
@@ -32,6 +32,11 @@ for = '/**'
        fullscreen=(), \
        payment=() \
        """
-    Cache-Control = "public, max-age=31536000"
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
    Access-Control-Allow-Origin = "*"
 # toml-docs-end server-config
--- a/content/en/blog/extra-shortcodes.md
+++ b/content/en/blog/extra-shortcodes.md
@@ -164,6 +164,12 @@ echo "goodbye"
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

+## Docs
+
+Use the `docs` shortcode to display the content of a `toml` or `scss` file:
+
+{{< docs name="theme-colors" file="config/_default/params.toml" >}}
+
 ## Icon

 As an example, the following shortcodes show a square check, a brand logo, and a circle check.
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -63,6 +63,8 @@
  translation: "Dunkel"
 - id: colorAuto
  translation: "Automatisch"
+- id: toggleMainNav
+  translation: "Hauptmenü anzuzeigen oder auszublenden"

 # 404 page
 - id: pageNotFound
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -54,7 +54,7 @@
 - id: paginationLast
  translation: "Last"
 - id: toggleSidebar
-  translation: "Toggle sidebar navigation"  
+  translation: "Toggle sidebar navigation"
 - id: colorMode
  translation: "Color mode"
 - id: colorLight
@@ -63,6 +63,8 @@
  translation: "Dark"
 - id: colorAuto
  translation: "Auto"
+- id: toggleMainNav
+  translation: "Toggle main navigation"

 # 404 page
 - id: pageNotFound
--- a/i18n/nl.yaml
+++ b/i18n/nl.yaml
@@ -54,7 +54,7 @@
 - id: paginationLast
  translation: "Laatste"
 - id: toggleSidebar
-  translation: "Toon of verberg navigatie"  
+  translation: "Toon of verberg navigatie"
 - id: colorMode
  translation: "Modus"
 - id: colorLight
@@ -63,6 +63,8 @@
  translation: "Donker"
 - id: colorAuto
  translation: "Automatisch"
+- id: toggleMainNav
+  translation: "Toon of verberg hoofdnavigatie"

 # 404 page
 - id: pageNotFound
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,12 +7,12 @@
    </head>

    <body>
-        <div class="d-flex flex-column min-vh-100">
+        <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
            <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                {{- partial "assets/navbar.html" (dict
                    "page" .
                    "fixed" (string .Site.Params.navigation.fixed)
-                    "color" (default "white" .Site.Params.navigation.color)
+                    "color" (.Site.Params.navigation.color)
                    "style" (default "light" .Site.Params.navigation.style))
                -}}
            </div>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -6,7 +6,7 @@
        {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
        {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
        <h1>{{ .Title }}</h1>
-        <small class="text-muted text-uppercase">
+        <small class="text-body-secondary text-uppercase">
            {{ $datestr | i18n "postedOnDate" -}}
            {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
            {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
@@ -42,7 +42,7 @@
            {{ partial "utilities/git.html" . }}
        </div>
    {{ else }}
-        <div class="row row-cols-2 mt-5">
+        <div class="row row-cols-2 mt-5 mb-3">
            <div class="col">
                {{ with .NextInSection -}}
                    {{ $next := . -}}
--- a/layouts/partials/assets/card.html
+++ b/layouts/partials/assets/card.html
@@ -44,7 +44,7 @@
    {{- if eq $keywords "full" }}{{ $maxTags = 1 -}}
    {{- else if eq $keywords "tags" }}{{ $maxTags = 3 }}{{ end -}}

-    <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-muted{{ end }} text-uppercase">
+    <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-body-secondary{{ end }} text-uppercase">
        {{- if in (slice "full" "publication") $keywords -}}
            {{- partial "utilities/date.html" (dict "date" $page.Date "format" "long") -}}&nbsp;&bull;
            {{- $page.ReadingTime | lang.FormatNumber 0 }} {{ i18n "minutesShort" }} {{ i18n "read" -}}
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -3,7 +3,6 @@
    "page"          Required object reference to the current page.
    "menus"         Optional name of the menu configuration, defaults to "main".
    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
-    "style"         Optional style of the navbar, either "light" (default) or "dark".
    "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
    "color"         Optional background color of the navbar, either "primary", "secondary", "success",
                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
@@ -37,13 +36,6 @@
    {{- errorf "Invalid value for param 'size': %s" $size -}}
 {{- end -}}

-{{- $style := "light" -}}
-{{- with .style }}{{ $style = . }}{{ end -}}
-{{- $supportedStyles := slice "light" "dark" -}}
-{{- if not (in $supportedStyles $style) -}}
-    {{- errorf "Invalid value for param 'style': %s" $style -}}
-{{- end -}}
-
 {{- $fixedParam := "false" -}}
 {{- $fixed := false -}}
 {{- with .fixed }}{{ $fixedParam = . }}{{ end -}}
@@ -53,9 +45,6 @@
    {{- errorf "Invalid value for param 'fixed': %s" $fixedParam -}}
 {{- end -}}

-{{- $inverseStyle := "light" -}}
-{{- if eq $style "light" }}{{ $inverseStyle = "dark" }}{{ end -}}
-
 {{- $color := "" -}}
 {{- with .color -}}
    {{- $color = . -}}
@@ -97,6 +86,9 @@
            <button class="navbar-toggler collapsed ms-n3" 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") -}}
            </button>
+        {{- else -}}
+            <!-- Insert spacing to center logo correctly on smaller screens -->
+            <div class="nav-spacing d-{{ $size }}-none"></div>
        {{- end -}}

        <!-- Insert the brand logo or name -->
@@ -109,8 +101,8 @@
        </a>

        <!-- Insert main navigation toggler -->
-		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="Toggle main navigation">
+		<button id="main-nav-toggler" class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
 			<span class="toggler-icon top-bar emphasis"></span>
 			<span class="toggler-icon middle-bar emphasis"></span>
 			<span class="toggler-icon bottom-bar emphasis"></span>
--- a/layouts/partials/assets/toc.html
+++ b/layouts/partials/assets/toc.html
@@ -1,6 +1,6 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
-    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-muted sticky-top">
+    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
        <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
        {{ .TableOfContents }}
    </div>
--- a/layouts/shortcodes/docs.html
+++ b/layouts/shortcodes/docs.html
@@ -70,7 +70,7 @@
        </li>
    </ul>
    <div class="border-start border-end border-bottom mb-3">
-        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} bg-light" id="body-{{ $id }}">
+        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
            {{- highlight (trim $match "\r\n") "toml" "" -}}
        </div>
        <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>
--- a/layouts/shortcodes/example.html
+++ b/layouts/shortcodes/example.html
@@ -32,7 +32,7 @@
        </div>
    {{- end -}}
    <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
-        <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
+        <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
        <!-- <div class="d-flex ms-auto">
            <button type="button" class="mt-0 me-0 border-0" title="Copy to clipboard">
                <i class="fa-regular fa-clipboard"></i>
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -29,7 +29,7 @@
                            </div>
                            <div class="col">
                                {{ if ne $year $lastYear }}
-                                    <p class="text-muted mt-5">{{ $year }}</p>
+                                    <p class="text-body-secondary mt-5">{{ $year }}</p>
                                    {{ $.Scratch.Set "lastYear" $year }}
                                {{ end }}
                                <a href="{{ .Permalink | relURL }}">{{ if .Draft }}{{ T "draft" | upper }}: {{end}}{{ .Title | markdownify }}</a>
--- a/netlify.toml
+++ b/netlify.toml
@@ -49,7 +49,12 @@
            fullscreen=(), \
            payment=() \
            """
-        Cache-Control = "public, max-age=31536000"
+        cache-control = """\
+            max-age=0, \
+            no-cache, \
+            no-store, \
+            must-revalidate \
+            """
        Access-Control-Allow-Origin = "*"

 [context.deploy-preview]
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.9.0-alpha2",
+  "version": "0.9.0-alpha3",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.9.0-alpha2",
+      "version": "0.9.0-alpha3",
      "hasInstallScript": true,
      "license": "MIT",
      "devDependencies": {
@@ -388,9 +388,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "18.11.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
-      "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g==",
+      "version": "18.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
+      "integrity": "sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==",
      "dev": true
    },
    "node_modules/@types/normalize-package-data": {
@@ -5128,9 +5128,9 @@
      }
    },
    "node_modules/stylelint-config-standard-scss": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
-      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
+      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
      "dev": true,
      "dependencies": {
        "stylelint-config-recommended-scss": "^9.0.0",
@@ -5912,9 +5912,9 @@
      "dev": true
    },
    "@types/node": {
-      "version": "18.11.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
-      "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g==",
+      "version": "18.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
+      "integrity": "sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==",
      "dev": true
    },
    "@types/normalize-package-data": {
@@ -9350,9 +9350,9 @@
      }
    },
    "stylelint-config-standard-scss": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
-      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
+      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
      "dev": true,
      "requires": {
        "stylelint-config-recommended-scss": "^9.0.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.9.0-alpha2",
+  "version": "0.9.0-beta",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -75,4 +75,4 @@
  "otherDependencies": {
    "hugo": "0.110.0"
  }
-}
+}
Author	SHA1	Message	Date
Mark Dumay	0abf604d2a	Merge pull request #148 from gethinode/color Transparent navbar	2023-02-16 09:44:04 +01:00
mark	ca51130286	Fix linting issues	2023-02-16 09:36:19 +01:00
mark	28e96deb73	Bump package version	2023-02-16 09:28:38 +01:00
mark	9173b6eaaa	Add optional style for homepage	2023-02-16 09:28:13 +01:00
mark	492420d13f	Remove redundant style element	2023-02-16 09:27:55 +01:00
mark	d2ec492827	Remove redundant style element	2023-02-16 09:27:38 +01:00
mark	d12cdc7a76	Suppor transparent navbar	2023-02-16 07:23:36 +01:00
Mark Dumay	a4f49ffb18	Merge pull request #147 from gethinode/dependabot/npm_and_yarn/stylelint-config-standard-scss-7.0.1 Bump stylelint-config-standard-scss from 7.0.0 to 7.0.1	2023-02-14 18:22:10 +01:00
dependabot[bot]	6599912985	Bump stylelint-config-standard-scss from 7.0.0 to 7.0.1 Bumps [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss) from 7.0.0 to 7.0.1. - [Release notes](https://github.com/stylelint-scss/stylelint-config-standard-scss/releases) - [Changelog](https://github.com/stylelint-scss/stylelint-config-standard-scss/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint-scss/stylelint-config-standard-scss/compare/v7.0.0...v7.0.1) --- updated-dependencies: - dependency-name: stylelint-config-standard-scss dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-02-14 14:10:02 +00:00
Mark Dumay	b7ef39a61c	Merge pull request #146 from gethinode/color Refinement	2023-02-14 06:26:53 +01:00
mark	d4bf047b09	Bump package version	2023-02-14 06:21:06 +01:00
mark	9df3426f41	Fix centering of logo on smaller screens	2023-02-14 06:20:06 +01:00
mark	d7f887c6f6	Revise cache settings in server header	2023-02-14 04:38:13 +01:00
mark	25dfbb3ed3	Revert back to hugo-installer (see #124 )	2023-02-14 04:37:33 +01:00
mark	4e48065605	Add spacing below prev/next links	2023-02-13 06:54:26 +01:00
mark	929a86e6b7	Add docs example	2023-02-13 06:52:28 +01:00
mark	e0895d9751	Enable color mode for docs	2023-02-13 06:52:21 +01:00
mark	7a1925594b	Replace text-muted with text-body-secondary	2023-02-13 06:47:35 +01:00
mark	913813c602	Switch to hugo-bin	2023-02-13 05:20:17 +01:00