Merge pull request #1009 from gethinode/develop

Support rounding of card icons

data/structures/card.yml

@@ -157,6 +157,12 @@ arguments:
     optional: true
     comment: >-
       Font Awesome icon, displayed on top or the left of the card.
+  iconRounded:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.24.8
+    comment: Stack the icon in a round container.
   align:
     type: select
     parent: cascade

exampleSite/hugo_stats.json

@@ -52,6 +52,7 @@
       "use"
     ],
     "classes": [
+      "%!s(MISSING)",
       "accordion",
       "accordion-body",
       "accordion-button",
@@ -134,13 +135,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",
@@ -190,6 +189,7 @@
       "fa-arrow-left",
       "fa-arrow-right",
       "fa-bootstrap",
+      "fa-circle",
       "fa-circle-check",
       "fa-code",
       "fa-docker",
@@ -202,6 +202,7 @@
       "fa-globe",
       "fa-heart",
       "fa-house",
+      "fa-inverse",
       "fa-link",
       "fa-linkedin",
       "fa-magnifying-glass",
@@ -211,6 +212,9 @@
       "fa-share-nodes",
       "fa-sort",
       "fa-square-check",
+      "fa-stack",
+      "fa-stack-1x",
+      "fa-stack-2x",
       "fa-sun",
       "fa-up-right-from-square",
       "fa-whatsapp",

go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/gethinode/mod-katex v1.1.0 // indirect
 	github.com/gethinode/mod-leaflet v1.1.0 // indirect
 	github.com/gethinode/mod-lottie v1.5.4 // indirect
-	github.com/gethinode/mod-utils/v2 v2.3.8 // indirect
+	github.com/gethinode/mod-utils/v2 v2.3.10 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )

go.sum

@@ -224,6 +224,10 @@ github.com/gethinode/mod-utils/v2 v2.3.7 h1:FFsUPO7NBp9Bhjovf0Ki5hnDGfeMKV/3RNz1
 github.com/gethinode/mod-utils/v2 v2.3.7/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/gethinode/mod-utils/v2 v2.3.8 h1:zAiDRCb3SsP9z6PUkCaiRLHOpqFhVf0xVhVOoTZNmAI=
 github.com/gethinode/mod-utils/v2 v2.3.8/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.9 h1:Z9uAr6S0wunlkfKHa2D/U83fBV6Ivtf+7sjBAcrddrg=
+github.com/gethinode/mod-utils/v2 v2.3.9/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.10 h1:+coUXdgAbLEE8Tvb3Rfk/1Nr6oDVreXI2sil0pa/n2Q=
+github.com/gethinode/mod-utils/v2 v2.3.10/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 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/partials/assets/card-group.html

@@ -34,6 +34,7 @@
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
 {{- $buttonType := .buttonType -}}
+{{- $iconRounded := .iconRounded }}
 {{- $hook := .hook | default "assets/card.html" }}
 
 <!-- Override arguments -->

layouts/partials/assets/card.html

@@ -20,6 +20,7 @@
 {{- $href := .href -}}
 {{- $icon := .icon -}}
 {{- $iconStyle := "" -}}
+{{- $iconRounded := .iconRounded | default false -}}
 {{- $align := .align | default "start" -}}
 {{- $style := .style | default "" -}}
 {{- $sizes := .sizes | default "100vw" -}}
@@ -127,20 +128,53 @@
 <!-- Main code -->
 {{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}
 
+{{ $stack := "fa-2x" }}
+
 {{- if hasPrefix $orientation "horizontal" -}}
+    {{ $col1 := "" }}
+    {{ $col2 := "" }}
+
+    {{ if $thumbnail }}
+        {{ if eq $orientation "horizontal-sm" }}
+            {{ $stack = "fa-1x" }}
+            {{ $col1 = "col-4 col-md-2" }}
+            {{ $col2 = "col-8 col-md-10" }}
+        {{ else }}
+            {{ $col1 = "col-4" }}
+            {{ $col2 = "col-8" }}
+        {{ end }}
+    {{ else if $icon }}
+        {{ if eq $orientation "horizontal-sm" }}
+            {{ $stack = "fa-1x" }}
+            {{ $col1 = "col-2" }}
+            {{ $col2 = "col-10" }}
+        {{ else }}
+            {{ $col1 = "col-4" }}
+            {{ $col2 = "col-8" }}
+        {{ end }}
+
+    {{ end }}
+
     <!-- Render horizontal card -->
     <div class="card {{ $colorStyle }} {{ $class }}">
-        <div class="row g-0 row-cols-1 h-100{{ if $button }} pb-5{{ end }}">
-            <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else }}col-4{{ end }}">
-                {{- if $thumbnail -}}
+        <div class="row g-0 row-cols-2 h-100{{ if $button }} pb-5{{ end }}">
+            {{- if $thumbnail -}}
+                <div class="{{ $col1 }}">
                     {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
-                {{- else if $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>
+            {{- else if $icon -}}
+                <div class="{{ $col1 }}">
+                    <div class="card-icon {{ if $iconRounded }}fa-stack {{ $stack }} mx-auto{{ else }}fa-wrapper h-100 {{ end }} p-{{ $padding }} d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
+                        {{ if $iconRounded }}
+                            {{- partial "assets/icon.html" (dict "icon" "fas circle fa-stack-2x") -}}
+                            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-stack-1x fa-inverse" $icon)) -}}
+                        {{ else }}
+                            {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+                        {{ end }}
                     </div>
-                {{- end -}}
-            </div>
-            <div class="{{ if eq $orientation "horizontal-sm" }}col-8 col-md-10{{ else }}col-8{{ end }}">
+                </div>
+            {{- end -}}
+            <div class="{{ $col2 }}">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100 flex-fill">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="flex-fill">
@@ -173,8 +207,13 @@
         {{- if $thumbnail -}}
             {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
-            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }} {{ if $iconRounded }}fa-stack {{ $stack }}{{ end }} w-100">
+                {{ if $iconRounded }}
+                    {{- partial "assets/icon.html" (dict "icon" (printf "fas circle fa-stack-2x %s")) -}}
+                    {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-stack-1x fa-inverse" $icon)) -}}
+                {{ else }}
+                    {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+                {{ end }}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">

layouts/partials/assets/helpers/image-dimension.html

@@ -53,7 +53,11 @@
             {{ warnf "Cannot find vector image resource: %q" $url -}}
         {{ else }}
             {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
-            {{ $dims = $dims | append (printf "%sx500" $width) }}
+            {{ if $width }}
+                {{ $dims = $dims | append (printf "%sx500" $width) }}
+            {{ else }}
+                {{ $dims = $dims | append "500" }}
+            {{ end }}
         {{ end }}
     {{ end }}
 {{ else if $ratio }}

layouts/partials/assets/sidebar.html

@@ -26,8 +26,8 @@
     {{- $group := .group -}}
     {{- $data := .menu -}}
 
-    {{- $doc_slug := urls.JoinPath  $baseURL ($group.title | urlize) -}}
-    {{- $href := or $group.link (partial "utilities/GetStaticURL" (dict "url" $doc_slug)) -}}
+    {{- $doc_slug := urls.JoinPath $baseURL ($group.title | urlize) -}}
+    {{- $href := or $group.link $doc_slug -}}
     {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
 
     <li class="mb-1">
@@ -78,10 +78,10 @@
         {{ if hasPrefix . "http" }}
             {{ $href = . }}
         {{ else }}
-            {{- $href = (partial "utilities/GetStaticURL" (dict "url" (urls.JoinPath $baseURL .))) -}}
+            {{- $href = urls.JoinPath $baseURL . -}}
         {{ end }}
     {{ else }}
-        {{- $href =  partial "utilities/GetStaticURL" (dict "url" (urls.JoinPath $baseURL ($title | urlize))) -}}
+        {{- $href = urls.JoinPath $baseURL ($title | urlize) -}}
     {{ end }}
     {{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}
 
@@ -121,7 +121,8 @@
     <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
         {{- $sectionBreak := false -}}
         {{- $level := 0 -}}
-        {{- $baseURL := relLangURL (path.Join $section $version) }}
+        {{ $baseURL := $page.Scratch.Get "baseURL" | default "/" -}}
+        {{ $baseURL = urls.JoinPath "/" (strings.TrimPrefix $baseURL (urls.JoinPath $section $version | relLangURL)) }}
 
         <ul class="list-unstyled ps-0">
         {{- range $index, $item := $data -}}

layouts/partials/head/seo.html

@@ -14,7 +14,7 @@
 {{ $.Scratch.Set "description" $description -}}
 
 {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
-{{ with $thumbnail -}}
+{{ if $thumbnail -}}
     {{ $imgURL := index (partial "assets/helpers/image-dimension.html" (dict "url" $thumbnail "width" 1280 "height" 640 "page" .)) "target" }}
     {{ $.Scratch.Set "thumbnail" ($imgURL | absURL) -}}
 {{ else -}}

layouts/partials/utilities/git.html

@@ -0,0 +1,5 @@
+{{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
+{{ $lastmodstr | i18n "lastModified" -}}
+{{ with .GitInfo }}
+&bull;&nbsp;<a href="{{ site.Params.docs.github | default site.Params.schema.github }}/commit/{{ .Hash }}">{{ .Subject }} ({{ .AbbreviatedHash }})</a>
+{{ end -}}

layouts/shortcodes/card-group.html

@@ -29,6 +29,7 @@
 {{- $subtle := .Get "subtle" | default false -}}
 {{- $button := .Get "button" | default false -}}
 {{- $buttonType := .Get "buttonType" | default "" -}}
+{{- $iconRounded := .Get "iconRounded" | default false -}}
 
 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}
@@ -58,5 +59,6 @@
     "subtle" $subtle
     "button" $button
     "buttonType" $buttonType
+    "iconRounded" $iconRounded
     ) 
 -}}

layouts/shortcodes/card.html

@@ -21,6 +21,7 @@
 {{- $gutter := partial "utilities/GetArgParent" (dict "page" . "arg" "gutter") | default "0" -}}
 {{- $header := partial "utilities/GetArgParent" (dict "page" . "arg" "header") | default "full" -}}
 {{- $icon := .Get "icon" -}}
+{{- $iconRounded := partial "utilities/GetArgParent" (dict "page" . "arg" "iconRounded") | default false -}}
 {{- $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 -}}
@@ -64,6 +65,7 @@
         "description" $description
         "ratio" $ratio
         "icon" $icon
+        "iconRounded" $iconRounded
         "align" $align
         "style" $style
         "subtle" $subtle

netlify.toml

@@ -82,8 +82,8 @@
 	# Redirected in exampleSite/config/_default/hugo.toml
 	# srcdir = ""
 
-[[plugins]]
-    package = "@netlify/plugin-lighthouse"
+# [[plugins]]
+    # package = "@netlify/plugin-lighthouse"
     # [plugins.inputs]
     # output_path = "reports/lighthouse.html"
 # toml-docs-end plugins

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.4",
+  "version": "0.24.8",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -69,14 +69,13 @@
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^6.0.0",
     "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.2",
-    "cssnano-preset-advanced": "^7.0.2",
+    "cssnano": "^7.0.3",
+    "cssnano-preset-advanced": "^7.0.3",
     "hugo-bin": "0.124.0",
     "purgecss-whitelister": "^2.4.0"
   },
   "devDependencies": {
     "@gethinode/netlify-plugin-dartsass": "^0.3.0",
-    "@netlify/plugin-lighthouse": "^6.0.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -94,7 +93,6 @@
   },
   "optionalDependencies": {
     "@gethinode/netlify-plugin-dartsass": "^0.3.0",
-    "@netlify/plugin-lighthouse": "*",
     "fsevents": "*",
     "netlify-plugin-hugo-cache-resources": "^0.2.1"
   },