Merge pull request #1278 from d-oit/data-table-options

feat: simple-datatable options for paging

assets/scss/common/_variables.scss

@@ -25,6 +25,8 @@ strong {
 $black:                       #000 !default;
 $btn-toggle-color:              $black !default;
 
+$card-color:                    var(--bs-body-color);
+
 $carousel-dark-indicator-active-bg:  #fff !default;
 $carousel-dark-caption-color:        #fff !default;
 $carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;

assets/scss/components/_nav.scss

@@ -1,4 +1,8 @@
-.nav-tabs > .nav-link.active {
+.nav-tabs .nav-tabs {
+    border: none;
+}
+
+.nav-tabs .nav-link.active {
     border-bottom-color: var(--bs-body-bg) !important;
     border-bottom-style: solid !important;
     z-index: 1;
@@ -12,13 +16,13 @@
     column-gap: var(--#{$prefix}nav-callout-gap) !important;
 }
 
-.nav-callout > .tab-content {
+.nav-callout + .tab-content {
     background-color: var(--#{$prefix}nav-callout-bg);
     padding: 2 * $spacer;
     margin-top: 0 !important;
 }
 
-.nav-callout > .nav-link {
+.nav-callout .nav-link {
     display: flex;
     text-align: start;
     vertical-align: text-top;
@@ -27,7 +31,7 @@
     border-bottom: none;
 }
 
-.nav-callout > .nav-link.active {
+.nav-callout .nav-link.active {
     background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-bg) 50%, transparent 0);
     background-size: 50% (3 * $spacer);
     background-repeat: no-repeat;
@@ -53,7 +57,7 @@
     }
 }
 
-.nav-callout > .accordion-item {
+.nav-callout .accordion-item {
     margin-top: 2 * $spacer;
     margin-bottom: 2 * $spacer;
     border: none;

config/_default/params.toml

@@ -219,7 +219,6 @@
     font-src = ["fonts.gstatic.com"]
     frame-src = [
         "player.cloudinary.com",
-        "player.vimeo.com",
         "www.youtube-nocookie.com",
         "www.youtube.com"
     ]
@@ -228,7 +227,17 @@
         "*.imgix.net",
         "*.imagekit.io",
         "*.cloudinary.com",
-        "i.vimeocdn.com",
         "i.ytimg.com"
     ]
-# toml-docs-end csp
+# toml-docs-end csp
+
+[modules.vimeo]
+    local = true
+    integration = "optional"
+    state = "async"
+    url = "https://player.vimeo.com/api/player.js"
+
+[modules.vimeo.csp]
+    frame-src = ["player.vimeo.com"]
+    img-src = ["i.vimeocdn.com"]
+    script-src = ["player.vimeo.com"]

config/_default/server.toml

@@ -11,12 +11,12 @@
         default-src 'none'; \
         font-src 'self' fonts.gstatic.com; \
         form-action 'self'; \
-        frame-src player.cloudinary.com player.vimeo.com www.youtube-nocookie.com www.youtube.com; \
+        frame-src player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
-        img-src 'self' *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.vimeocdn.com i.ytimg.com tile.openstreetmap.org; \
+        img-src 'self' *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
         media-src 'self'; \
         object-src 'none'; \
-        script-src 'self' *.google-analytics.com *.googletagmanager.com; \
+        script-src 'self' *.google-analytics.com *.googletagmanager.com player.vimeo.com; \
         style-src 'self' www.youtube.com; \
         """
     Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '

data/structures/file.yml

@@ -38,3 +38,8 @@ arguments:
     type: string
     optional: true
     comment: Class attribute of the tab control that wraps the file element.
+  options:
+    type: string
+    optional: true
+    comment: Hugo highlighting options.
+    release: v0.27.6

data/structures/table.yml

@@ -35,6 +35,21 @@ arguments:
     optional: true
     comment: Whether paging is enabled for the table.
     release: v0.24.13
+  pagingOptionPerPage:
+    type: int
+    optional: true
+    comment: >-
+      Sets the maximum number of rows to display on each page. Requires
+      `paging = true`.
+    release: v0.27.8 
+  pagingOptionPageSelect:
+    type: string
+    optional: true
+    comment: >-
+      Sets the per page options in the dropdown. Must be an array of integers or
+      arrays in the format [label (string), value (int)]. Requires
+      `paging = true`. 
+    release: v0.27.8 
   searchable:
     type: bool
     optional: true

exampleSite/config/_default/params.toml

@@ -195,5 +195,4 @@
     hinode = "https://gethinode.com"
 
 [modules.cookieyes]
-    # local = true
+    url = "https://cdn-cookieyes.com/client_data/a54b5553f349dd13bd225f8e/script.js"
-    url = "https://cdn-cookieyes.com/client_data/a54b5553f349dd13bd225f8e/script.js"

exampleSite/config/_default/server.toml

@@ -11,12 +11,12 @@
         default-src 'none'; \
         font-src 'self' fonts.gstatic.com; \
         form-action 'self'; \
-        frame-src player.cloudinary.com player.vimeo.com www.youtube-nocookie.com www.youtube.com; \
+        frame-src player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
-        img-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.vimeocdn.com i.ytimg.com tile.openstreetmap.org; \
+        img-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
         media-src 'self'; \
         object-src 'none'; \
-        script-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com; \
+        script-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com player.vimeo.com; \
         style-src 'self' 'unsafe-inline' www.youtube.com; \
         """
     Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '

exampleSite/content/en/blog/bootstrap-elements.md

@@ -483,23 +483,3 @@ As an example, the following shortcode displays an Elephants video hosted by Clo
 {{</* video host="cloudinary" account="demo" id="elephants" autoplay=true */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
-
-## Vimeo
-
-As an example, the following shortcode displays a Vimeo video.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* vimeo id="55073825" autoplay=true autotitle=true */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Youtube
-
-As an example, the following shortcode displays a Hugo quickstart guide.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* youtube id="w7Ft2ymGmfc" autoplay=true autotitle=true */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

exampleSite/content/en/blog/components.md

@@ -31,7 +31,7 @@ As an example, the following shortcode displays a responsive table that uses adv
 
 <!-- markdownlint-disable MD037 MD058 -->
 {{< example lang="markdown" >}}
-{{</* table sortable="true" paging="true" searchable="true" */>}}
+{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
 |  #  | Heading |
 |-----|---------|
 |  1. | Item 1  |

exampleSite/content/nl/blog/components.md

@@ -0,0 +1,92 @@
+---
+author: Mark Dumay
+title: Componenten
+date: 2023-09-23
+description: Gebruik shortcodes om diverse componenten vanuit een externe softwarebibliotheek toe te voegen.
+tags: ["bootstrap", "shortcode"]
+thumbnail:
+  url: img/puzzle.jpg
+  author: Ryoji Iwata
+  authorURL: https://unsplash.com/@ryoji__iwata
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/5siQcvSxCP8
+modules: ["leaflet", "lottie", "simple-datatables"]
+---
+
+Hinode bevat meerdere shortcodes naast de generieke Bootstrap elementen. Zie de [officiële documentatie]({{% param "links.hinode_docs" %}}) voor meer informatie.
+
+## Animatie
+
+Het volgende voorbeeld gebruikt een shortcode om een animatie te tonen, die afspeelt zodra je er met de muis overheen beweegt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Gegevenstabellen
+
+Het volgende voorbeeld gebruikt een shortcode om een responsieve tabel met geavanceerde mogelijkheden te tonen.
+
+<!-- markdownlint-disable MD037 MD058 -->
+{{< example lang="markdown" >}}
+{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
+|  #  | Kop     |
+|-----|---------|
+|  1. | Item 1  |
+|  2. | Item 2  |
+|  3. | Item 3  |
+|  4. | Item 4  |
+|  5. | Item 5  |
+|  6. | Item 6  |
+|  7. | Item 7  |
+|  8. | Item 8  |
+|  9. | Item 9  |
+| 10. | Item 10  |
+| 11. | Item 11  |
+| 12. | Item 12  |
+| 13. | Item 13  |
+| 14. | Item 14  |
+| 15. | Item 15  |
+| 16. | Item 16  |
+| 17. | Item 17  |
+| 18. | Item 18  |
+| 19. | Item 19  |
+| 20. | Item 20  |
+| 21. | Item 21  |
+| 22. | Item 22  |
+| 23. | Item 23  |
+| 24. | Item 24  |
+| 25. | Item 25  |
+| 26. | Item 26  |
+| 27. | Item 27  |
+| 28. | Item 28  |
+| 29. | Item 29  |
+| 30. | Item 30  |
+{{</* /table */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Formule (KaTeX)
+
+Het volgende voorbeeld gebruikt Markdown om twee formules met behulp van KaTeX op de server te genereren.
+
+{{< example lang="markdown" >}}
+Dit is een inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formule
+
+Dit is geen inline formule:
+
+$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
+$$\forall x \in X, \quad \exists y \leq \epsilon$$
+{{< /example >}}
+
+## Kaart
+
+Het volgende voorbeeld gebruikt een shortcode om een interactieve kaart van Amsterdam te tonen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

exampleSite/hugo_stats.json

@@ -495,6 +495,7 @@
       "accordéon",
       "alert",
       "alerte",
+      "animatie",
       "animation",
       "badge",
       "barre-de-navigation",
@@ -560,6 +561,7 @@
       "footer-file-collapse-1",
       "formula-katex",
       "formule-katex",
+      "gegevenstabellen",
       "groupe-de-boutons",
       "groupe-de-cartes",
       "how-do-we-use-cookies",
@@ -571,6 +573,7 @@
       "indicateur-de-chargement",
       "infobulle",
       "invite-de-commandes",
+      "kaart",
       "language-selector",
       "leaflet-map-0",
       "lien",
@@ -580,13 +583,13 @@
       "map",
       "mark",
       "nav",
-      "nav-0",
       "nav-0-0",
       "nav-0-1",
       "nav-0-2",
       "nav-0-btn-0",
       "nav-0-btn-1",
       "nav-0-btn-2",
+      "nav-nav-0",
       "navbar",
       "navbar-0-collapse",
       "navbar-mode",
@@ -618,10 +621,8 @@
       "tooltip",
       "types-of-cookies-we-use",
       "video",
-      "vimeo",
       "what-are-cookies",
-      "your-rights",
+      "your-rights"
-      "youtube"
     ]
   }
 }

go.mod

@@ -6,13 +6,13 @@ require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
 	github.com/gethinode/mod-bootstrap v1.3.1 // indirect
 	github.com/gethinode/mod-csp v1.0.3 // indirect
-	github.com/gethinode/mod-flexsearch/v2 v2.0.1 // indirect
+	github.com/gethinode/mod-flexsearch/v2 v2.0.2 // indirect
 	github.com/gethinode/mod-fontawesome v1.10.0 // indirect
 	github.com/gethinode/mod-google-analytics v1.1.3 // indirect
 	github.com/gethinode/mod-katex v1.1.2 // indirect
 	github.com/gethinode/mod-leaflet v1.2.0 // indirect
 	github.com/gethinode/mod-lottie v1.5.11 // indirect
-	github.com/gethinode/mod-simple-datatables v1.0.14 // indirect
+	github.com/gethinode/mod-simple-datatables v1.1.0 // indirect
 	github.com/gethinode/mod-utils/v2 v2.8.3 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240501124520-961c3ae84a87 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect

go.sum

@@ -82,6 +82,8 @@ github.com/gethinode/mod-flexsearch v1.12.1 h1:clkGUWaNPe9Dt/66Apy7oH9NwVQfnD6Op
 github.com/gethinode/mod-flexsearch v1.12.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-flexsearch/v2 v2.0.1 h1:5unGUSb1tX1LBtKygnLfdt7CnVJuFKSt6VXiKRxdojc=
 github.com/gethinode/mod-flexsearch/v2 v2.0.1/go.mod h1:d7MMkVlz0l6cEk76e0mkveEsDxGfu5Sv+HUIhoGguhE=
+github.com/gethinode/mod-flexsearch/v2 v2.0.2 h1:5FkLbjORwKvK544H/yaAltyIB7eptRPxxh5VcfDDeqM=
+github.com/gethinode/mod-flexsearch/v2 v2.0.2/go.mod h1:d7MMkVlz0l6cEk76e0mkveEsDxGfu5Sv+HUIhoGguhE=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
@@ -260,6 +262,8 @@ github.com/gethinode/mod-simple-datatables v1.0.13 h1:3GTn46Zh56SFzCUP7CUSrmp/Zo
 github.com/gethinode/mod-simple-datatables v1.0.13/go.mod h1:a2qIdYegX5gBubGbspuHv/2UA/8O89oUG/U5hd7jLK8=
 github.com/gethinode/mod-simple-datatables v1.0.14 h1:332WtbaQtTm7VP0b7zYfpogTBcOEetkJrNd01K4d/JE=
 github.com/gethinode/mod-simple-datatables v1.0.14/go.mod h1:mP3yjAdVE1G6JHfv8VVsRmvaPlPwddXknI675AuVs2I=
+github.com/gethinode/mod-simple-datatables v1.1.0 h1:Qc8eJOcVjxIHNfgrZf/bKe8+spCLrJTVwsC8d9ct7i0=
+github.com/gethinode/mod-simple-datatables v1.1.0/go.mod h1:8q/6f3uAPNTTP5NjEJOuXr6tEWelRFLJfzVJ3AODMlQ=
 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=

i18n/de.yaml

@@ -155,3 +155,7 @@
   translation: Tipp
 - id: warning
   translation: Warnung
+
+# Image
+- id: image
+  translation: Bild

i18n/en.yaml

@@ -160,4 +160,8 @@
 - id: tip
   translation: Tip
 - id: warning
-  translation: Warning
+  translation: Warning
+
+# Image
+- id: image
+  translation: image

i18n/fr.yaml

@@ -149,3 +149,7 @@
   translation: "Commentaire"
 - id: supportedValues
   translation: "Valeurs supportées"
+
+# Image
+- id: image
+  translation: image

i18n/nl.yaml

@@ -160,3 +160,7 @@
   translation: Tip
 - id: warning
   translation: Waarschuwing
+
+# Image
+- id: image
+  translation: Bild

layouts/partials/assets/card-group.html

@@ -143,7 +143,7 @@
                     "style" $args.style
                     "align" $args.align
                     "button" $args.button
-                    "buttonLabel" $args.buttonLabel
+                    "buttonLabel" $element.buttonLabel
                     "buttonType" $args.buttonType
                     "iconRounded" $args.iconRounded
                 ) -}}

layouts/partials/assets/carousel-item.html

@@ -20,10 +20,11 @@
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait -}}
 {{- $loading := .loading | default "eager" -}}
+{{- $title := .caption | default (T "image") -}}
 
 <!-- Main code -->
 <div class="carousel-item{{ if $active }} active{{ end }}" {{ if not $active }} fetchpriority="low"{{ end }}>
-    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "class" "d-block w-100" "portrait" $portrait "loading" $loading) }}
+    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "class" "d-block w-100" "portrait" $portrait "loading" $loading "title" $title) }}
     <div class="carousel-caption gradient"></div>
     {{ with $caption }}
         <div class="carousel-caption d-none d-md-block">

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

@@ -16,6 +16,7 @@
 {{- $modes := .modes -}}
 {{- $plain := .plain | default false }}
 {{- $anchor := .anchor }}
+{{- $alt := or $title $caption (T "image") }}
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
 {{- $fileAnchor := "" -}}
@@ -71,7 +72,7 @@
         {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
         {{ with $height }}height="{{ . }}"{{ end }}
         {{ with $width }}width="{{ . }}"{{ end }}
-        {{ with (or $title $caption) }}alt="{{ . }}"{{ end }}>
+        {{ with $alt }}alt="{{ . }}"{{ end }}>
 {{- else }}
     <svg class="{{ $class }}">
         <use href="{{ $fallbackURL }}#{{ $fileAnchor }}"></use>

layouts/partials/assets/link.html

@@ -18,10 +18,10 @@
 {{ if not $u.Scheme }}
     {{ $b := urls.Parse site.BaseURL }}
     {{ $destination = strings.TrimPrefix $b.Path $destination }}
+    {{ $destination = path.Clean $destination }}
 {{ else }}
     {{ $destination = (strings.TrimPrefix (strings.TrimSuffix "/" site.BaseURL) $destination) }}
 {{ end }}
-{{ $destination = path.Clean $destination }}
 {{ if not $destination }}{{ $destination = "/" }}{{ end }}
 
 {{- $target := "" -}}

layouts/partials/assets/nav.html

@@ -52,46 +52,48 @@
         <div class="d-none d-lg-block">
     {{ 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 }}>
+    <ul 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 }}>
         {{- range $index, $item := $list -}}
             {{ $show := eq $index 0}}
-            <button class="nav-link {{ if not $wrap }} text-nowrap{{ end }}{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
+            <li class="nav-item" role="presentation">
-                    type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+                <button class="nav-link {{ if not $wrap }} text-nowrap{{ end }}{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
-                {{ $item.Title }}
+                        type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
-            </button>
+                    {{ $item.Title }}
+                </button>
+            </li>
         {{ end -}}
+    </ul>
 
-        <div class="tab-content {{ if eq $type "tabs" }}border border-bottom-0  p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+    <div class="tab-content {{ if eq $type "tabs" }}border border-bottom-0  p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
-            {{ range $index, $item := $list }}
+        {{ range $index, $item := $list }}
-                {{ $header := $item.Title }}
+            {{ $header := $item.Title }}
-                {{ $body := $item.Content }}
+            {{ $body := $item.Content }}
-                {{ $show := eq $index 0}}
+            {{ $show := eq $index 0}}
-                {{- $thumbnail := "" -}}
+            {{- $thumbnail := "" -}}
-                {{ if reflect.IsMap $item.Params.Thumbnail }}{{ $thumbnail = $item.Params.Thumbnail.url }}{{ else }}{{ $thumbnail = $item.Params.Thumbnail }}{{ end }}
+            {{ if reflect.IsMap $item.Params.Thumbnail }}{{ $thumbnail = $item.Params.Thumbnail.url }}{{ else }}{{ $thumbnail = $item.Params.Thumbnail }}{{ end }}
-                <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
+            <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
-                    {{- if eq $pane "persona" -}}
+                {{- if eq $pane "persona" -}}
-                        {{- partial "assets/persona.html" (dict  
+                    {{- partial "assets/persona.html" (dict  
-                            "title" $item.Title
+                        "title" $item.Title
-                            "class" $class
+                        "class" $class
-                            "color" $color
+                        "color" $color
-                            "href" $item.Params.href
+                        "href" $item.Params.href
-                            "content" (partial "utilities/GetDescription.html" (dict "page" $item))
+                        "content" (partial "utilities/GetDescription.html" (dict "page" $item))
-                            "thumbnail" $thumbnail
+                        "thumbnail" $thumbnail
-                        ) -}}
+                    ) -}}
-                    {{- else -}}
+                {{- else -}}
-                        {{ $illustration := (partial "utilities/GetIllustration.html" (dict "item" $item)) }}
+                    {{ $illustration := (partial "utilities/GetIllustration.html" (dict "item" $item)) }}
-                        {{ if $illustration }}
+                    {{ if $illustration }}
-                            <div class="row">
+                        <div class="row">
-                                <div class="col-12 col-lg-10 order-1 order-lg-0">{{- (or $item.Description $item.Content) -}}</div>
+                            <div class="col-12 col-lg-10 order-1 order-lg-0">{{- (or $item.Description $item.Content) -}}</div>
-                                <div class="col-12 col-lg-2 order-0 order-lg-1">{{ $illustration | safeHTML }}</div>
+                            <div class="col-12 col-lg-2 order-0 order-lg-1">{{ $illustration | safeHTML }}</div>
-                            </div>
+                        </div>
-                        {{ else }}
+                    {{ else }}
-                            {{- (or $item.Description $item.Content) -}}
+                        {{- (or $item.Description $item.Content) -}}
-                        {{ end }}
+                    {{ end }}
-                    {{- end -}}
+                {{- end -}}
-                </div>    
+            </div>    
-            {{ end }}
+        {{ end }}
-        </div>
     </div>
 
     {{ if eq $type "callout" }}</div>{{ end }}

layouts/partials/assets/navbar-item.html

@@ -85,7 +85,7 @@
             "size" "sm"
         )}}
     {{ else }}
-        {{ cond $menuURL "<a" "<div" | safeHTML }} class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{ . }}{{ end }}" 
+        {{ cond (ne $menuURL "") "<a" "<div" | safeHTML }} class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{ . }}{{ end }}" 
             {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
             data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
             {{ if $menuURL }} href="{{ $menuURL }}{{ $params | safeHTML }}"{{ with $externalHref }} {{ . | safeHTML }}{{ end }}{{ end }} {{ $button | safeHTML }}>
@@ -100,6 +100,6 @@
             <span {{ if $isActive }} class="active"{{ end }}>{{ if or (not $isIcon) $plain }}{{ $menu.Name }}{{ end }}</span>
             {{- with $menu.Post }}{{ . }}{{ end -}}
             {{- if not $isIcon }}&nbsp;{{ $suffix }}{{ end -}}
-        {{ cond $menuURL "</a>" "</div>" | safeHTML }}
+        {{ cond (ne $menuURL "") "</a>" "</div>" | safeHTML }}
     {{ end }}
 {{ end }}

layouts/partials/assets/navbar.html

@@ -18,14 +18,14 @@
 {{- define "partials/navbar-mode.html" -}}
     {{- $id := .id | default "navbar-mode" -}}
 
-    <div class="d-flex mode-switch align-items-center" id="{{ $id }}">
+    <li class="d-flex mode-switch align-items-center" id="{{ $id }}">
-        <input type="checkbox" class="checkbox navbar-mode-selector" id="{{ $id }}-checkbox" />
+        <input type="checkbox" class="checkbox navbar-mode-selector" id="{{ $id }}-checkbox" aria-label="{{ T "colorMode" }}" />
         <label class="label" for="{{ $id }}-checkbox">
             {{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}
             {{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}
             <div class="ball"></div>
         </label>
-    </div>
+    </li>
 {{- end -}}
 
 <!-- Inline partial to render the version switcher -->
@@ -295,12 +295,16 @@
                         </li>
                         <li><hr class="dropdown-divider-bg"></li>
     
-                        <a class="nav-link d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
+                        <li class="d-{{ $size }}-none">
+                            <a class="nav-link" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
                             {{ partial "assets/icon.html" (dict "icon" "fas magnifying-glass fa-fw") }}&nbsp;{{ T "ui_search" }}
-                        </a>
+                            </a>
-                        <a class="nav-link d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
+                        </li>
+                        <li class="d-none d-{{ $size }}-block">
+                            <a class="nav-link" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
                             {{ partial "assets/icon.html" (dict "icon" "fas magnifying-glass fa-fw") }}
-                        </a>
+                            </a>
+                        </li>
                     {{ end -}}
                 </ul>
             </div>

layouts/partials/assets/table.html

@@ -10,7 +10,8 @@
 {{ $sortable := .sortable | default false }}
 {{ $paging := .paging | default false }}
 {{ $searchable := .searchable | default false }}
-
+{{ $pagingOptionPerPage := .pagingOptionPerPage }}
+{{ $pagingOptionPerPageSelect := .pagingOptionPerPageSelect }}
 {{- $responsiveVals := slice "table-responsive" "table-responsive-none" "table-responsive-sm" "table-responsive-md" "table-responsive-lg" "table-responsive-xl" "table-responsive-xxl" -}}
 {{- $responsive := intersect $args $responsiveVals -}}
 {{- $main := complement $responsive $args -}}
@@ -30,7 +31,11 @@
 
 {{ $attributes := "" }}
 {{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
-{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $paging }}
+    {{ $attributes = printf "%s data-table-paging=true" $attributes }}
+    {{ $attributes := printf "%s data-table-paging-option-perPage=%s" $attributes $pagingOptionPerPage }}
+    {{ if (ne $pagingOptionPerPageSelect "") }}{{ $attributes := printf "%s data-table-paging-option-perPageSelect=%d" $attributes $pagingOptionPerPageSelect }}{{ end }}
+{{ end }}
 {{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
 
 {{- $new := printf `<table class="%s" %s` $target (trim $attributes " ") -}}

layouts/partials/footer/scripts.html

@@ -121,7 +121,7 @@
 {{ if not $error }}
     <!-- include external scripts first -->
     {{ range $mod, $cfg := $config.modules }}
-        {{ if eq (index $cfg "integration") $args.type }}
+        {{ if in $modules $mod }}
             {{ if or (index $cfg "local") (not hugo.IsServer) }}
                 {{ with index $cfg "url" }}
                     {{ partial "templates/script.html" (dict "link" . "category" (index $cfg "category") "state" (index $cfg "state")) }}

layouts/shortcodes/file.html

@@ -38,6 +38,7 @@
 {{- $full := true -}}
 {{ if isset .Params "full" }}{{ $full = partial "utilities/CastBool.html" (.Get "full") }}{{ end -}}
 {{- $class := .Get "class" | default "" -}}
+{{- $options := .Get "options" -}}
 
 {{ if not (fileExists $file) }}
     {{ warnf "Cannot find file: '%q'. See %s" $file $.Position }}
@@ -65,7 +66,7 @@
     </ul>
     <div class="border-start border-end border-bottom mb-3">
         <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
-            {{- highlight (trim $content "\r\n") $lang "" -}}
+            {{- highlight (trim $content "\r\n") $lang $options -}}
         </div>
         <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>
     </div>

layouts/shortcodes/nav.html

@@ -60,19 +60,23 @@
 {{ end }}
 
 <!-- Main code -->
-<div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+<div class="{{ with $type }} nav-{{ . }}{{ end }}">
     {{ if $vertical }}<div class="row"><div class="col-auto">{{ end }}
+    <ul 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 }}>
     {{- range $index, $item := $items -}}
         {{- $header := partial "utilities/GetVal.html" $item -}}
         {{- $itemDisabled := in $disabled $index -}}
-        <button class="nav-link{{ if not $wrap }} text-nowrap{{ end }}{{ if eq $index $showID }} active{{ end }}{{ if $itemDisabled}} disabled {{end }}" id="{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#{{ $id }}-{{ $index }}" 
+        <li class="nav-item" role="presentation">
-                type="button" role="tab" aria-controls="{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+            <button class="nav-link{{ if not $wrap }} text-nowrap{{ end }}{{ if eq $index $showID }} active{{ end }}{{ if $itemDisabled}} disabled {{end }}" id="{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#{{ $id }}-{{ $index }}" 
-            {{ $header }}
+                    type="button" role="tab" {{ if $hasContent }}aria-controls="{{ $id }}-{{ $index }}"{{ end }} aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
-        </button>
+                {{ $header }}
+            </button>
+        </li>
     {{ end -}}
+    </ul>
     {{ if $vertical }}</div><div class="col">{{ end }}
         {{- if $hasContent -}}
-        <div class="tab-content w-100 {{ if not $vertical }} {{ end }}{{ if eq $type "tabs" }}border border-bottom-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+        <div class="tab-content w-100 {{ if eq $type "tabs" }}border p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
             {{- $inner | safeHTML -}}
         </div>
     {{- end -}}

layouts/shortcodes/table.html

@@ -18,6 +18,8 @@
 {{ $sortable := false }}
 {{ $paging := false }}
 {{ $searchable := false }}
+{{ $pagingOptionPerPage := 10 }}
+{{ $pagingOptionPerPageSelect := "" }}
 
 {{- if .IsNamedParams -}}
     {{ $breakpoint = .Get "breakpoint" }}
@@ -25,6 +27,8 @@
     {{ if isset .Params "sortable" }}{{ $sortable = partial "utilities/CastBool.html" (.Get "sortable") }}{{ end }}
     {{ if isset .Params "paging" }}{{ $paging = partial "utilities/CastBool.html" (.Get "paging") }}{{ end }}
     {{ if isset .Params "searchable" }}{{ $searchable = partial "utilities/CastBool.html" (.Get "searchable") }}{{ end }}
+    {{ if isset .Params "pagingOptionPerPage" }}{{ $pagingOptionPerPage = (.Get "pagingOptionPerPage") }}{{ end }}
+    {{ if isset .Params "pagingOptionPerPageSelect" }}{{ $pagingOptionPerPageSelect = (.Get "OptionPerPageSelect") }}{{ end }}
 {{ else }}
     {{ $breakpoint = .Get 0 }}
 {{ end }}
@@ -39,9 +43,16 @@
 
 {{ $attributes := "" }}
 {{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
-{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $paging }}
+    {{ $attributes = printf "%s data-table-paging=true" $attributes }}
+    {{ $attributes = printf "%s data-table-paging-option-perPage=%d" $attributes $pagingOptionPerPage }}
+    {{ if (ne $pagingOptionPerPageSelect "") }}
+        {{ $attributes = printf "%s data-table-paging-option-perPageSelect=%s" $attributes $pagingOptionPerPageSelect }}
+    {{ end }}
+{{ end }}
 {{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
 
+
 {{- $new := printf `<table class="%s" %s` $target (trim $attributes " ") -}}
 {{ $input := replaceRE $regex $new $input 1 -}}
 

netlify.toml

@@ -43,12 +43,12 @@
         default-src 'none'; \
         font-src 'self' fonts.gstatic.com; \
         form-action 'self'; \
-        frame-src player.cloudinary.com player.vimeo.com www.youtube-nocookie.com www.youtube.com; \
+        frame-src player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
-        img-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.vimeocdn.com i.ytimg.com tile.openstreetmap.org; \
+        img-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
         media-src 'self'; \
         object-src 'none'; \
-        script-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com; \
+        script-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com player.vimeo.com; \
         style-src 'self' 'unsafe-inline' www.youtube.com; \
         """
     Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.27.2",
+  "version": "0.27.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.27.2",
+      "version": "0.27.8",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",
         "cssnano-preset-advanced": "^7.0.6",
-        "hugo-bin": "0.133.3",
+        "hugo-bin": "0.133.5",
         "purgecss-whitelister": "^2.4.0"
       },
       "devDependencies": {
@@ -3855,9 +3855,9 @@
       }
     },
     "node_modules/hugo-bin": {
-      "version": "0.133.3",
+      "version": "0.133.5",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.133.3.tgz",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.133.5.tgz",
-      "integrity": "sha512-5Jd52s5FWQRSlj4xQh73claNnIMQWcILqO7bzruVV/wRdbLItZN3dXVP/TZ510wg0ebL0rBGt0/P4clbLlClvg==",
+      "integrity": "sha512-6LpV7smMEaE0wFgzo0B3QHjcJYoH9I76edNI6xPZroDysxv1UV12nzb0Zw5YEr5TwL9PDQjg1aYzJrQjaXbLWQ==",
       "funding": [
         {
           "type": "github",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.27.2",
+  "version": "0.27.8",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -73,7 +73,7 @@
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "cssnano-preset-advanced": "^7.0.6",
-    "hugo-bin": "0.133.3",
+    "hugo-bin": "0.133.5",
     "purgecss-whitelister": "^2.4.0"
   },
   "devDependencies": {