Merge pull request #734 from gethinode/develop

Extend card style configuration

assets/js/navbar.js

@@ -1,8 +1,14 @@
 const navbar = document.querySelector('.navbar')
 const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+const colorsBG = ['body', 'secondary', 'tertiary']
 
 if (navbar !== null && togglers !== null) {
+  // initialize background color
+  const color = (navbar.getAttribute('data-navbar-color') || 'body')
+  const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
+  navbar.style.setProperty('--bs-navbar-expanded-color', bg)
+
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
     if (window.scrollY > 75) {

assets/scss/common/_styles.scss

@@ -22,13 +22,13 @@ a:active {
 }
 
 .fullscreen {
-    --navbar-offset: #{$navbar-offset};
+    --overlay-offset: #{$overlay-offset};
 
-    min-height: calc(100vh - var(--navbar-offset));
+    min-height: calc(100vh - var(--overlay-offset));
 }
 
 .main-content {
-    margin-top: $navbar-offset;
+    margin-top: $overlay-offset;
 }
 
 $utilities: map-merge(

assets/scss/common/_variables-dart.scss

@@ -20,6 +20,7 @@ strong {
 
 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
+$overlay-offset:                h.$overlay-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;
 $success:                       h.$success;

assets/scss/components/_img.scss

@@ -19,3 +19,11 @@
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
 }
+
+.background-img {
+    --overlay-offset: #{$overlay-offset};
+
+    height: calc(100vh - var(--overlay-offset));
+    width: 100vw;
+    object-fit: cover;
+}

assets/scss/components/_navbar.scss

@@ -2,13 +2,20 @@
 
 // Source: https://jsfiddle.net/njhgr40m/
 
+
 .navbar {
+    --bs-navbar-expanded-color: var(--bs-body-bg);
+
     transition: 0.5s ease-in-out;
     background-color: transparent;
+
+    @each $state, $val in $theme-colors {
+        --bs-navbar-color-#{$state}: #{$val};
+    }
 }
 
 .nav-active, .navbar-expanded {
-    background-color: var(--bs-body-bg);
+    background-color: var(--bs-navbar-expanded-color);
 }
 
 .nav-link {
@@ -31,6 +38,30 @@
     box-shadow: $box-shadow-sm;
 }
 
+.navbar-overlay-dark {
+    --bs-navbar-color: #{$navbar-dark-color};
+    --bs-navbar-hover-color: #{$navbar-dark-hover-color};
+    --bs-navbar-disabled-color: #{$navbar-dark-disabled-color};
+    --bs-navbar-active-color: #{$navbar-dark-active-color};
+    --bs-navbar-brand-color: #{$navbar-dark-brand-color};
+    --bs-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+    --bs-navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+}
+
+.navbar-overlay-light, .navbar-overlay-dark.nav-active, .navbar-overlay-dark.navbar-expanded {
+    --bs-navbar-color: #{$navbar-light-color};
+    --bs-navbar-hover-color: #{$navbar-light-hover-color};
+    --bs-navbar-disabled-color: #{$navbar-light-disabled-color};
+    --bs-navbar-active-color: #{$navbar-light-active-color};
+    --bs-navbar-brand-color: #{$navbar-light-brand-color};
+    --bs-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+}
+
+.nav-item .vr {
+    color: var(--bs-navbar-color);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);

config/_default/params.toml

@@ -63,6 +63,8 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    overlay = false
+    overlayMode = "dark"
     horizontal = false
     offset = "5.5rem"
     search = true

data/structures/card.yml

@@ -157,19 +157,39 @@ arguments:
     optional: true
     comment: >-
       Font Awesome icon, displayed on top or the left of the card.
+  align:
+    type: select
+    optional: true
+    default: start
+    release: v0.23.0-alpha2
+    comment: Icon alignment.
+    options:
+      values:
+        - start
+        - end
+        - center
+  style:
+    type: string
+    optional: true
+    release: v0.23.0-alpha2
+    comment: Icon style.
   orientation:
     type: select
     optional: true
     default: stacked
     parent: cascade
-    comment: >-
-      Placement of the thumbnail or icon.
+    comment: Placement of the thumbnail or icon.
     options:
       values:
         - stacked
         - horizontal
         - horizontal-sm
         - none
+  subtle:
+    type: bool
+    optional: true
+    release: v0.23.0-alpha2
+    comment: Apply subtle background colors.
 body:
   optional: true
   comment: >-

data/structures/navbar.yml

@@ -100,6 +100,26 @@ arguments:
     default: false
     comment: Flag to indicate the navbar should stick to the top.
     group: partial
+  overlay:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to indicate if the navbar should render as an overlay on the current
+      page.
+    group: partial
+    release: v0.22.6
+  overlayMode:
+    type: select
+    optional: true
+    default: dark
+    comment: Color mode of the overlay.
+    options:
+      values:
+        - light
+        - dark
+    group: partial
+    release: v0.23.0
   logo:
     type: path
     optional: true

exampleSite/config/_default/params.toml

@@ -52,6 +52,8 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    overlay = false
+    overlayMode = "dark"
     horizontal = false
     offset = "5.5rem"
     search = true

exampleSite/hugo_stats.json

@@ -26,7 +26,6 @@
       "mark",
       "meta",
       "nav",
-      "nil",
       "noscript",
       "ol",
       "p",
@@ -63,6 +62,7 @@
       "alert-dismissible",
       "align-items-center",
       "align-items-end",
+      "align-items-start",
       "align-middle",
       "align-self-center",
       "align-self-end",
@@ -126,13 +126,11 @@
       "col-3",
       "col-4",
       "col-6",
-      "col-8",
       "col-9",
       "col-auto",
       "col-lg-2",
       "col-lg-4",
       "col-lg-8",
-      "col-md-10",
       "col-md-2",
       "col-md-3",
       "col-md-4",

go.mod

@@ -9,8 +9,8 @@ require (
 	github.com/gethinode/mod-fontawesome v1.8.0 // indirect
 	github.com/gethinode/mod-katex v1.0.5 // indirect
 	github.com/gethinode/mod-leaflet v0.4.0 // indirect
-	github.com/gethinode/mod-lottie v1.4.0 // indirect
-	github.com/gethinode/mod-utils v1.0.1 // indirect
+	github.com/gethinode/mod-lottie v1.4.1 // indirect
+	github.com/gethinode/mod-utils v1.0.3 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 // indirect
 	github.com/twbs/bootstrap v5.3.2+incompatible // indirect
 )

go.sum

@@ -116,10 +116,16 @@ github.com/gethinode/mod-lottie v1.3.0 h1:vQ8CXkjdp2IeFskTzu+ZnKOEio8GtN08urVK+o
 github.com/gethinode/mod-lottie v1.3.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
 github.com/gethinode/mod-lottie v1.4.0 h1:0Ls1Q/8p0gQpuX9+dtfNGKcjBNeymjE7gERdnN3lCCE=
 github.com/gethinode/mod-lottie v1.4.0/go.mod h1:57eu6glS5oxkew2dB1P2zsbhw444aRX0XfuyDe7k/dk=
+github.com/gethinode/mod-lottie v1.4.1 h1:RzCjYsxFPqyBsYAcdPeUP0rvF+hD9eEl7NrxuaRiKQQ=
+github.com/gethinode/mod-lottie v1.4.1/go.mod h1:QjKlEmYbekrNGwa9EdFlPcXxwWWcraJUQ6xIL+syA60=
 github.com/gethinode/mod-utils v1.0.0 h1:cqHm2xS5uDiJzRm1KfHaNbq6uMVDKLhQa8/BuTZ1nhY=
 github.com/gethinode/mod-utils v1.0.0/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.1 h1:jhZGlGFHHL1f5HXbBMXfiZ2gCz4TVafAzjnRPTIBSEE=
 github.com/gethinode/mod-utils v1.0.1/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
+github.com/gethinode/mod-utils v1.0.2 h1:0b3i+/bBHY1Td9N6khDbL1nf3d5HGc4QzI4BbEWHoU4=
+github.com/gethinode/mod-utils v1.0.2/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
+github.com/gethinode/mod-utils v1.0.3 h1:FF6lnam0Bcdj7G1E5P+qi5ByPrl1npL+3uS5YoPx1C0=
+github.com/gethinode/mod-utils v1.0.3/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 h1:H/qVR5O4BXjRjD+5PZB+r4ug2BSJ2Of4RtwOntd+OKo=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=

layouts/_default/baseof.html

@@ -70,7 +70,9 @@
             <div class="d-flex flex-column {{ if $fullCover }} fullscreen{{ end }}{{ if .IsHome }} {{ .Site.Params.home.style }}{{ end }}">
                 {{- partial "assets/navbar.html" (dict
                     "page" .
-                    "fixed" (string site.Params.navigation.fixed)
+                    "fixed" site.Params.navigation.fixed
+                    "overlay" site.Params.navigation.overlay
+                    "overlayMode" site.Params.navigation.overlayMode
                     "color" site.Params.navigation.color
                     "style" (default "light" site.Params.navigation.style)
                     "size" (default "md" site.Params.navigation.size))

layouts/partials/assets/card-group.html

@@ -27,6 +27,9 @@
 {{- $orientation := .orientation -}}
 {{- $ratio := .ratio -}}
 {{- $wrapper := .wrapper | default "p-0" -}}
+{{- $style := .style -}}
+{{- $align := .align -}}
+{{- $subtle := .subtle }}
 {{- $loading := .loading -}}
 
 <!-- Override arguments -->
@@ -90,6 +93,9 @@
                 "orientation" $orientation
                 "padding" $padding
                 "ratio" $ratio
+                "subtle" $subtle
+                "style" $style
+                "align" $align
             ) -}}
             {{- $params = merge $params $element }}
 
@@ -102,7 +108,7 @@
                 </div>
             {{- end -}}
         {{- end -}}
-        {{- print $cards | safeHTML }}
+        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
     </div>
 
     {{ if $paginate }}

layouts/partials/assets/card.html

@@ -19,12 +19,24 @@
 {{- $header := .header | default "full" -}}
 {{- $href := .href -}}
 {{- $icon := .icon -}}
+{{- $iconStyle := "" -}}
+{{- $align := .align | default "start" -}}
+{{- $style := .style | default "" -}}
 {{- $loading := .loading -}}
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := .padding | default "auto" -}}
 {{- $ratio := .ratio -}}
 {{- $thumbnail := .thumbnail -}}
 {{- $title := .title -}}
+{{- $subtle := .subtle -}}
+{{- $colorStyle := "" -}}
+{{ if $color }}
+    {{ if $subtle }}
+        {{- $colorStyle = printf "bg-%s-subtle text-%s-emphasis" $color $color -}}
+    {{ else }}
+        {{- $colorStyle = printf "bg-%s text-bg-%s" $color $color -}}
+    {{ end }}
+{{ end }}
 
 <!-- Override arguments -->
 {{- $page := "" }}
@@ -42,6 +54,13 @@
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
 
+{{ if (hasPrefix $orientation "horizontal") }}
+    {{ if not $style }}{{ $style = "fa-fluid fa-fw" }}{{ end }}
+{{ else }}
+    {{ if not $style }}{{ $style = "fa-4x" }}{{ end }}
+    {{- $iconStyle = "pb-3" -}}
+{{ end }}
+
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
 <!-- Inline partial to render the card's body -->
@@ -100,18 +119,18 @@
 
 {{- if hasPrefix $orientation "horizontal" -}}
     <!-- Render horizontal card -->
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    <div class="card {{ $colorStyle }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
-            <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
+            <div class="{{ if eq $orientation "horizontal-sm" }}col-2{{ else }}col-4{{ end }}">
                 {{- if $thumbnail -}}
                     {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
                 {{- else if $icon -}}
-                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
+                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
                     </div>
                 {{- end -}}
             </div>
-            <div class="col-8{{ if eq  $orientation "horizontal-sm" }} col-md-10{{ end }}">
+            <div class="{{ if eq $orientation "horizontal-sm" }}col-10{{ else }}col-8{{ end }}">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="h-100">
@@ -124,12 +143,12 @@
     </div>
 {{- else -}}
     <!-- Render stacked / default card -->
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- if $thumbnail -}}
             {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
-            <div class="card-icon  p-{{ $padding }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}
+            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">

layouts/partials/assets/list.html

@@ -76,7 +76,7 @@
                         {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "title" $item.Title "mode" $item.Params.colormode "loading" $loading) }}
                     </div>
                     <div class="col-12 p-3">
-                        {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (partial "utilities/GetDescription.html" $item)) }}
+                        {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
                     </div>
                 </div>
             </div>

layouts/partials/assets/navbar.html

@@ -110,6 +110,8 @@
 
 {{- $size := .size | default "md" -}}
 {{- $fixed := .fixed | default false -}}
+{{- $overlay := .overlay | default false -}}
+{{- $overlayMode := .overlayMode | default "dark" -}}
 {{- $color := .color | default "" -}}
 {{- $search := .search | default site.Params.navigation.search -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
@@ -170,7 +172,13 @@
 <!-- Main code -->
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
-    <nav class="navbar {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    <nav class="navbar p-4
+        {{ if $overlay }}navbar-overlay-{{ $overlayMode }}{{ else }}{{ with $color }}bg-{{ . }}{{ end }}{{ end }}
+        {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}
+        {{ if $contrast }}navbar-contrast{{ end }}"
+        {{ with $theme }}data-bs-theme="{{ . }}"{{ end }}
+        {{ 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">

layouts/partials/head/stylesheet.html

@@ -26,8 +26,10 @@
     {{- errorf "partial [head/stylesheet.html] - Invalid value for site param 'style.darkModeTint': %s" site.Params.style.darkModeTint -}}
 {{ end}}
 
-{{- $navbarOffset := "0em" -}}
-{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
+{{- $navbarOffset := "0rem" -}}
+{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}{{ end }}
+{{- $overlayOffset := $navbarOffset -}}
+{{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
     "theme-font"              (default "Inter" site.Params.style.themeFont)
     "font-size-base"          (default "1rem" site.Params.style.fontSizeBase)
@@ -39,8 +41,9 @@
     "danger"                  (default "#dc3545" site.Params.style.danger)
     "light"                   (default "#f8f9fa" site.Params.style.light)
     "dark"                    (default "#212529" site.Params.style.dark)
-    "navbar-height"           (site.Params.navigation.offset | default "4em")
+    "navbar-height"           (site.Params.navigation.offset | default "4rem")
     "navbar-offset"           $navbarOffset
+    "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")))
     "dark-mode-shade"         (default "0%" site.Params.style.darkModeShade)

layouts/shortcodes/card-group.html

@@ -24,6 +24,9 @@
 {{- $header := .Get "header" | default "" -}}
 {{- $footer := .Get "footer" | default "" -}}
 {{- $orientation := .Get "orientation" | default "" -}}
+{{- $align := .Get "align" | default "start" -}}
+{{- $style := .Get  "style" | default "" -}}
+{{- $subtle := .Get "subtle" | default false -}}
 
 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}

layouts/shortcodes/card.html

@@ -21,6 +21,9 @@
 {{- $gutter := partial "utilities/GetArgParent" (dict "page" . "arg" "gutter") | default "0" -}}
 {{- $header := partial "utilities/GetArgParent" (dict "page" . "arg" "header") | default "full" -}}
 {{- $icon := .Get "icon" -}}
+{{- $align := partial "utilities/GetArgParent" (dict "page" . "arg" "align") | default "start" -}}
+{{- $style := partial "utilities/GetArgParent" (dict "page" . "arg" "style") | default "" -}}
+{{- $subtle := partial "utilities/GetArgParent" (dict "page" . "arg" "subtle") | default false -}}
 {{- $loading := .Get "loading" -}}
 {{- $orientation := partial "utilities/GetArgParent" (dict "page" . "arg" "orientation") | default "stacked" -}}
 {{- $padding := partial "utilities/GetArgParent" (dict "page" . "arg" "padding") | default "auto" -}}
@@ -59,6 +62,9 @@
         "description" $description
         "ratio" $ratio
         "icon" $icon
+        "align" $align
+        "style" $style
+        "subtle" $subtle
         "thumbnail" $thumbnail
         "loading" $loading
         "alt" $alt

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.22.4",
+  "version": "0.23.0-alpha2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.22.4",
+      "version": "0.23.0-alpha2",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.22.4",
+  "version": "0.23.0-alpha2",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",