Merge pull request #161 from gethinode/develop

Separator

config/_default/params.toml

@@ -45,6 +45,7 @@
         orientation = "stacked"
         style = "border-0 card-zoom"
         homepage = 3
+        separator = true
     [projects]
         title = "Projects"
         sort = "title"
@@ -57,6 +58,7 @@
         orientation = "none"
         style = "border-1 card-emphasize"
         homepage = 3
+        separator = false
 # toml-docs-end list
 
 [favicon]

layouts/partials/assets/card-group.html

@@ -15,6 +15,7 @@
     "href"          Optional address for the button or hyperlink. If set, a button is added if the list exceeds the
                     maximum number of cards to display.
     "hrefTitle"     Optional title of the button or hyperlink as companion to href.
+    "separator"     Optional flag to indicate a horizontal line should be added between items on small screens.
 
     In addition, the following arguments are passed to the individual cards.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
@@ -57,20 +58,28 @@
 
 {{- $title := .title -}}
 
-{{ $paginate := false }}
-{{ with .paginate }}
-    {{ if ne (printf "%T" .) "bool" }}
-        {{ errorf "Invalid value for param 'paginate'"}}
-    {{ end }}
-    {{ $paginate = . }}
-{{ end }}
-{{ if not $paginate }}
-    {{ $list = first $max $list }}
-{{ end }}
+{{- $paginate := false -}}
+{{- with .paginate -}}
+    {{- if ne (printf "%T" .) "bool" -}}
+        {{- errorf "Invalid value for param 'paginate'" -}}
+    {{- end -}}
+    {{- $paginate = . -}}
+{{- end -}}
+{{- if not $paginate -}}
+    {{- $list = first $max $list -}}
+{{- end -}}
 
 {{- $moreURL := .href -}}
 {{- $moreTitle := .hrefTitle -}}
 
+{{- $separator := false -}}
+{{- with .separator -}}
+    {{- if ne (printf "%T" .) "bool" -}}
+        {{- errorf "Invalid value for param 'separator'" -}}
+    {{- end -}}
+    {{- $separator = . -}}
+{{- end -}}
+
 {{- $class := .class -}}
 {{- $color := .color -}}
 {{- $padding := .padding -}}
@@ -96,7 +105,7 @@
                         )
                     -}}
                 </div>
-                {{- if (lt $index (sub $max 1)) -}}
+                {{- if and (lt $index (sub $max 1)) $separator -}}
                     <div class="col d-block d-sm-none">
                         <hr>
                     </div>
@@ -121,7 +130,7 @@
                         )
                     -}}
                 </div>
-                {{- if (lt $index (sub $max 1)) -}}
+                {{- if and (lt $index (sub $max 1)) $separator -}}
                     <div class="col d-block d-sm-none">
                         <hr>
                     </div>

layouts/partials/assets/card.html

@@ -129,44 +129,42 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
-<article>
-    {{- if eq $orientation "horizontal" -}}
-        <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-            <div class="row g-0">
-                <div class="col-4">
-                    {{- if $thumbnail -}}
-                        {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
-                    {{- else if $icon -}}
-                        <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
-                        </div>
-                    {{- end -}}
+{{- if eq $orientation "horizontal" -}}
+    <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+        <div class="row g-0">
+            <div class="col-4">
+                {{- if $thumbnail -}}
+                    {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+                {{- else if $icon -}}
+                    <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
                     </div>
-                <div class="col-8">
-                    <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
-                        <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
-                        <div class="h-100">
-                            {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
-                        </div>
-                        <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
+                {{- end -}}
+                </div>
+            <div class="col-8">
+                <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
+                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
+                    <div class="h-100">
+                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
                     </div>
+                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
                 </div>
             </div>
         </div>
-    {{- else -}}
-        <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-            {{- if $thumbnail -}}
-                {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
-            {{- else if $icon -}}
-                <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                    {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
-                </div>
-            {{- end -}}
-            <div class="card-body d-flex flex-column p-{{ $padding }}">
-                {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
-                {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
-                {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
+    </div>
+{{- else -}}
+    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+        {{- if $thumbnail -}}
+            {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
+        {{- else if $icon -}}
+            <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
             </div>
+        {{- end -}}
+        <div class="card-body d-flex flex-column p-{{ $padding }}">
+            {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
+            {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+            {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
         </div>
-    {{- end -}}
-</article>
+    </div>
+{{- end -}}

layouts/partials/assets/section-list.html

@@ -12,6 +12,7 @@
 {{- $paginate := true -}}
 {{- $sort := "date" -}}
 {{- $reverse := true -}}
+{{- $separator := false -}}
 {{- $orientation := "stacked" -}}
 {{- $cols := 3 -}}
 {{- $color := "" -}}
@@ -26,6 +27,7 @@
     {{- with index . "title" }}{{ $title = . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
     {{- if (index . "reverse") }}{{ $reverse = true }}{{ else }}{{ $reverse = false }}{{ end -}}
+    {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
     {{- with index . "color" }}{{ $color = . }}{{ end -}}
@@ -74,6 +76,7 @@
         "title" $title
         "href" $sectionURL
         "hrefTitle" $moreTitle
+        "separator" $separator
         "paginate" $paginate
         "class" $style
         "orientation" $orientation

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.9.5",
+      "version": "0.9.6",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

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