Merge pull request #254 from gethinode/develop

Sections

README.md

@@ -116,7 +116,7 @@ Hinode is inspired by the following themes:
 
 ## Donate
 
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
 
 ## License
 

config/_default/languages.toml

@@ -11,7 +11,7 @@
         link = "about"
         caption = "About"
     [en.params.footer]
-        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
+        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
         socialTitle = "Follow me"
         socialCaption = "I work on everything coding and tweet developer memes"
 # toml-docs-end lang-param
@@ -26,6 +26,6 @@
         link = "over-mij"
         caption = "Over mij"
     [nl.params.footer]
-        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
+        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
         socialTitle = "Volg mij"
         socialCaption = "Ik doe aan programmeren en tweet memes"

config/_default/params.toml

@@ -40,6 +40,7 @@
         title = "Blog"
         sort = "date"
         reverse = true
+        nested = true
         cols = 3
         color = ""
         padding = "0"
@@ -53,8 +54,10 @@
         title = "Projects"
         sort = "title"
         reverse = false
+        nested = true
         cols = 1
-        color = "body-tertiary"
+        background = "body-tertiary"
+        color = "body"
         padding = "3"
         header = "none"
         footer = "tags"

content/en/blog/_index.md

@@ -1,4 +1,5 @@
 ---
 author: Mark Dumay
 title: Blog
+nested: true
 ---

i18n/en.yaml

@@ -31,6 +31,8 @@
   translation: "More Features"
 - id: moreGuides
   translation: "More Guides"
+- id: moreOpensource
+  translation: "More Features"
 - id: moreProjects
   translation: "More Projects"
 - id: moreUsers
@@ -62,7 +64,7 @@
 - id: toggleSidebar
   translation: "Toggle sidebar navigation"
 - id: colorMode
-  translation: "Color mode"
+  translation: "Toggle theme"
 - id: colorLight
   translation: "Light"
 - id: colorDark

i18n/nl.yaml

@@ -56,7 +56,7 @@
 - id: toggleSidebar
   translation: "Toon of verberg navigatie"
 - id: colorMode
-  translation: "Modus"
+  translation: "Pas modus aan"
 - id: colorLight
   translation: "Licht"
 - id: colorDark

layouts/_default/baseof.html

@@ -33,19 +33,23 @@
                     <div class="d-flex flex-column flex-fill">
                         {{ block "main" . }}{{ end -}}
                     </div>
-                    <div class="">
-                        {{- partial "footer/social.html" . -}}
-                        {{- partial "footer/footer.html" . -}}
-                    </div>
+                    {{ if not .Site.Params.main.footerBelowFold }}
+                        <div class="">
+                            {{- partial "footer/social.html" . -}}
+                            {{- partial "footer/footer.html" . -}}
+                        </div>
+                    {{ end }}
                 {{ end -}}
             {{ else -}}
                 <div class="d-flex flex-column flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
                     {{ block "main" . }}{{ end -}}
                 </div>
-                <div class="">
-                    {{- partial "footer/social.html" . -}}
-                    {{- partial "footer/footer.html" . -}}
-                </div>
+                {{ if not .Site.Params.main.footerBelowFold }}
+                    <div class="">
+                        {{- partial "footer/social.html" . -}}
+                        {{- partial "footer/footer.html" . -}}
+                    </div>
+                {{ end }}
             {{ end -}}
         </div>
 
@@ -53,9 +57,16 @@
             <div class="">
                 {{ block "main" . }}{{ end -}}
             </div>
-            {{- partial "footer/social.html" . -}}
-            {{- partial "footer/footer.html" . -}}
-        {{ end -}}
+            <div class="">
+                {{- partial "footer/social.html" . -}}
+                {{- partial "footer/footer.html" . -}}
+            </div>
+        {{ else if .Site.Params.main.footerBelowFold }}
+            <div class="">
+                {{- partial "footer/social.html" . -}}
+                {{- partial "footer/footer.html" . -}}
+            </div>
+        {{ end }}
 
         {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
     </body>

layouts/_default/list.html

@@ -1,9 +1,12 @@
 {{- define "main" -}}
     {{- partial "assets/section-list.html" (dict 
         "page" .
-        "section" .Section
+        "section" .Type
         "home" false
+        "nested" .Params.Nested
         "title" .Title
+        "description" .Description
+        "content" .Content
         "paginate" true)
     -}}
 {{- end -}}

layouts/docs/list.html

@@ -1,10 +0,0 @@
-<!-- Hugo considers all first-level directories to be a root section. As such, as "/en/docs/" is considered to be a
-     branch bundle, despite it not having an "_index.md" page. Being a branch bundle, Hugo uses a list template to
-    render the "/en/docs/" page. This overwrites the alias defined in "/en/docs/<ver>/getting-started/introduction/". 
-    
-    This empty list template is deliberately added to the "/layouts/docs/" directory to prevent Hugo from generating 
-    a list page for "/en/docs/" (all other nested sections). This enables the alias defined in 
-    "/en/docs/<version>/getting-started/introduction/".
-
-    See https://gohugo.io/content-management/sections/ for more details.
-    -->

layouts/index.html

@@ -6,11 +6,13 @@
     {{- $page := . -}}
 
     {{- range $index, $section := site.Params.home.sections -}}
-        {{- $pages := where site.RegularPages "Type" "in" $section -}}
-        {{- $sectionURL := "" -}}
-        {{- range $p := first 1 $pages -}}
-            {{- $sectionURL = $p.Parent.RelPermalink -}}
-        {{- end -}}
+        {{- $sectionPage := site.GetPage "section" $section -}}
+        {{- $sectionURL := $sectionPage.RelPermalink -}}
+        {{- $title := $sectionPage.Title -}}
+        {{- $thumbnail := $sectionPage.Params.Thumbnail -}}
+        {{- $icon := $sectionPage.Params.Icon -}}
+        {{- $description := $sectionPage.Description -}}
+        {{- $content := $sectionPage.Content -}}
 
         {{- $moreTitle := (T (printf "more%s" (strings.FirstUpper $section))) -}}
 
@@ -18,6 +20,10 @@
             "page" $page 
             "section" $section 
             "home" true 
+            "nested" true 
+            "thumbnail" $thumbnail
+            "icon" $icon
+            "content" $content
             "moreTitle" $moreTitle
             "sectionURL" $sectionURL)
         -}}

layouts/partials/assets/card-group.html

@@ -58,8 +58,6 @@
 {{- else if eq $cols 4 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" -}}
 {{- else if eq $cols 5 }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ end -}}
 
-{{- $title := .title -}}
-
 {{- $paginate := false -}}
 {{- with .paginate -}}
     {{- if ne (printf "%T" .) "bool" -}}
@@ -90,7 +88,6 @@
 {{- $orientation := .orientation -}}
 
 <div class="container-fluid p-4 px-xxl-0">
-    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
     {{ $paginator := "" }}
     {{ if $paginate }}
         {{ $paginator = $page.Paginate $list }}
@@ -107,13 +104,14 @@
                 "footer" $footer
                 "orientation" $orientation
             ) -}}
-            {{- if $element.IsPage -}}
+            
+            {{- if $element.Permalink -}}
                 {{- $params = merge $params (dict "path" $element.File.Path) -}}
             {{- else -}}
                 {{- $params = merge $params (dict
                     "title" $element.Title
-                    "href" (or $element.Permalink "#!")
-                    "description" $element.Description
+                    "href" $element.Permalink
+                    "description" (or $element.Description $element.Content)
                     "thumbnail" $element.Params.thumbnail
                     "icon" $element.Params.icon
                 ) -}}

layouts/partials/assets/card.html

@@ -5,7 +5,7 @@
     The shortcode supports the following arguments:
     "path"          Optional path of the page, override with other parameters.
     "title"         Required title of the card.
-    "href"          Required address for the button or hyperlink.
+    "href"          Optional address for the button or hyperlink.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
                     "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
@@ -28,10 +28,17 @@
     {{- $color := .color -}}
     {{- $description := .description -}}
     
-    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
+    {{- if $href -}}
+        <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
+                <p class="card-title fs-5 fw-bold">{{ $title }}</p>
+            {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
+        </a>
+    {{- else -}}
+        <div>
             <p class="card-title fs-5 fw-bold">{{ $title }}</p>
-        {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
-    </a>
+            {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
+        </div>
+    {{- end -}}
 {{- end -}}
 
 <!-- Inline partial to render the card's header or footer -->
@@ -109,10 +116,6 @@
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
 
-{{- if not $href -}}
-    {{- errorf "partial [assets/card.html] - Missing value for param 'href'" -}}
-{{- end -}}
-
 {{- $class := .class -}}
 
 {{- $padding := "auto" -}}

layouts/partials/assets/list.html

@@ -53,10 +53,6 @@
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
         <div class="container ratio-section d-flex flex-column">
-            {{ if eq $index 0 }}
-                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-            {{ end }}
-
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-6{{ if $odd }} order-last{{ end }}">
                     {{- $style := "reveal fade-bottom" -}}
@@ -78,9 +74,6 @@
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
         <div class="container d-flex flex-column">
-            {{ if eq $index 0 }}
-                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-            {{ end }}
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-12 text-center">
                     {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "mode" $item.Params.colormode) }}

layouts/partials/assets/nav.html

@@ -76,7 +76,6 @@
     {{ end -}}
 {{ end -}}
 
-{{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
 <div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto pt-5 pb-5">
     {{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
     <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>

layouts/partials/assets/navbar.html

@@ -188,7 +188,7 @@
                         <li class="nav-item">
                             {{- $external := ne $url.Host $baseurl.Host -}}
                             <a class="nav-link {{ if $active }}active{{ end }}"
-                                href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if $external }}target="_blank" {{ end }}>
+                                href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if $external }}target="_blank" rel="noopener noreferrer" {{ end }}>
                                 {{- with $pre}}{{ . }}{{ end -}}
                                 <span {{if $active }} class="active"{{end}}>{{ .Name }}</span>
                                 {{- with $post}}{{ . }}{{ end -}}

layouts/partials/assets/section-header.html

@@ -0,0 +1,46 @@
+{{- $title := .title -}}
+{{- $thumbnail := .thumbnail -}}
+{{- $icon := .icon -}}
+{{- $sectionHeader := .sectionHeader -}}
+{{- $description := .description -}}
+{{- $content := .content -}}
+
+{{- define "partials/section-header-img.html" -}}
+    {{- $title := .title -}}
+    {{- $thumbnail := .thumbnail -}}
+    {{- $icon := .icon -}}
+    {{ $padding := 5 }}
+
+    {{- if $thumbnail -}}
+        {{- partial "assets/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="text-secondary fw-bold">
+            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-10x" $icon)) -}}
+        </div>
+    {{- end -}}
+{{- end -}}
+
+<div class="container-fluid p-4 px-xxl-0">
+    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+    {{ with $description }} <p class="lead mb-5">{{ . }}</p>{{ end }}
+    {{- if $content -}}
+        <div class="row row-cols-1 row-cols-lg-3 pt-5">
+            <div class="col col-lg-3 d-none d-lg-block"></div>
+            <div class="col col-sm-12 col-lg-6 text-center">
+                <div class="row row-cols-1{{ if ne $sectionHeader "justify-content-center" }} row-cols-sm-2{{ end }} row-gap-5 p-0 align-items-center flex-fill">
+                    {{- if eq $sectionHeader "justify-content-center" -}}
+                        <div class="col p-0 w-50 mx-auto pb-5">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
+                        <div class="col fs-md-5 fs-6">{{ $content }}</div>
+                    {{- else if eq $sectionHeader "justify-content-end" -}}
+                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
+                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
+                    {{- else -}}
+                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
+                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
+                    {{- end -}}
+                </div>
+            </div>
+            <div class="col col-lg-3 d-none d-lg-block"></div>
+        </div>
+    {{- end -}}
+</div>

layouts/partials/assets/section-list.html

@@ -6,9 +6,14 @@
     {{ errorf "partial [assets/section-list.html] - Invalid value for param 'home'"}}
 {{ end }}
 {{- $title := .title -}}
+{{- $icon := .icon -}}
+{{- $thumbnail := .thumbnail -}}
+{{- $sectionHeader := .sectionHeader -}}
+{{- $description := .description -}}
+{{- $content := .content -}}
 {{- $moreTitle := .moreTitle -}}
 {{- $sectionURL := .sectionURL -}}
-
+{{- $nested := .nested | default true -}}
 {{- $paginate := true -}}
 {{- $sort := "date" -}}
 {{- $order := "desc" -}}
@@ -30,8 +35,10 @@
 
 {{- with (index site.Params.sections $section) -}}
     {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
+    {{- with index . "sectionHeader" }}{{ $sectionHeader = . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
     {{- if (index . "reverse") }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
+    {{- if $home }}{{- if (isset . "nested") }}{{ $nested = (index . "nested") }}{{ end -}}{{ end -}}
     {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
@@ -48,8 +55,20 @@
     {{- with index . "vertical" }}{{ $vertical = . }}{{ end -}}
     {{- with index . "width" }}{{ $width = . }}{{ end -}}
 {{- end -}}
+{{ if ne (printf "%T" $nested) "bool" }}
+    {{ errorf "partial [assets/section-list.html] - Invalid value for param 'nested'"}}
+{{ end }}
+
+{{ $list := "" }}
+{{ if $nested }}
+    {{ $list = where site.RegularPages "Type" "in" $section }}
+{{ else if $home }}
+    {{ $sectionPage := site.GetPage "section" $section }}
+    {{ $list = $sectionPage.RegularPages }}
+{{ else }}
+    {{ $list = $page.RegularPages }}
+{{ end }}
 
-{{ $list := where site.RegularPages "Type" "in" $section }}
 {{ $max := (len $list) -}}
 {{ if eq $max 0 }}
     {{- $bundle := site.GetPage $section -}}
@@ -74,6 +93,11 @@
         "page" $page
         "list" $list
         "title" $title
+        "icon" $icon
+        "thumbnail" $thumbnail
+        "sectionHeader" $sectionHeader
+        "description" $description
+        "content" $content
         "class" $style
         "color" $color
         )
@@ -82,6 +106,8 @@
 
     <div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
         <div class="container-xxl flex-fill p-0">
+            {{- partial "assets/section-header.html" $params -}}
+            
             {{ if eq $layout "card" }}
                 {{- $partial = "assets/card-group.html" -}}
                 {{- $params = merge $params (dict 

layouts/partials/footer/social.html

@@ -7,7 +7,7 @@
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}
-                <a href="{{ .URL | relLangURL }}" target="_blank" rel="noopener" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
+                <a href="{{ .URL | relLangURL }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
                     {{ .Pre | safeHTML }}
                 </a>
             {{ end -}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.12.10",
+  "version": "0.13.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.12.10",
+      "version": "0.13.0",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",

package.json

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