Skip to content

Commit 718756c

Browse files
markdumaymarkdumay
authored
Merge pull request #1650 from gethinode/develop
feat: introduce list building block
2 parents 56c941b + f0d3cd3 commit 718756c

File tree

15 files changed

+470
-99
lines changed

15 files changed

+470
-99
lines changed

‎component-library/bookshop.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import "modules/bookshop/components/cta/cta";
66
@import "modules/bookshop/components/faq/faq";
77
@import "modules/bookshop/components/hero/hero";
8+
@import "modules/bookshop/components/list/list";
89
@import "modules/bookshop/components/panels/panels";
910
@import "modules/bookshop/components/releases/releases";
1011
@import "modules/bookshop/components/separator/separator";

‎component-library/components/list/list.bookshop.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Metadata about this component, to be used in the CMS
2+
spec:
3+
structures:
4+
- content_blocks
5+
label: Liar
6+
description: List section
7+
icon: post
8+
tags: []
9+
10+
# Defines the structure of this component, as well as the default values
11+
blueprint:
12+
heading:
13+
preheading:
14+
heading:
15+
content:
16+
align:
17+
width:
18+
hide-empty:
19+
input:
20+
section:
21+
nested:
22+
keywords:
23+
categories:
24+
tags:
25+
reverse:
26+
sort:
27+
hook:
28+
limit:
29+
background:
30+
backdrop:
31+
color:
32+
subtle:
33+
cover:
34+
class:
35+
width:
36+
justify:
37+
theme:
38+
sortable:
39+
paginate:
40+
pagination:
41+
pagination-select:
42+
searchable:
43+
wrap:

‎component-library/components/list/list.hugo.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
{{/*
2+
Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
3+
Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
4+
Visit gethinode.com/license for more details.
5+
*/}}
6+
7+
{{ $error := false }}
8+
9+
{{/* Initialize arguments */}}
10+
{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "list" "args" .)}}
11+
{{ if or $args.err $args.warnmsg }}
12+
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
13+
"partial" "component-library/components/list/list.hugo.html"
14+
"warnid" "warn-invalid-arguments"
15+
"msg" "Invalid arguments"
16+
"details" ($args.errmsg | append $args.warnmsg)
17+
"file" page.File
18+
)}}
19+
{{ $error = $args.err }}
20+
{{ end }}
21+
22+
{{/* Initialize global arguments */}}
23+
{{- $padding := partial "utilities/GetPadding.html" -}}
24+
25+
{{/* Ensure to include the simple-datatables module */}}
26+
{{/* TODO: fix add module handling, requires propagating scratch variables to correct page */}}
27+
{{ partial "utilities/AddModule.html" (dict "page" $args._page "module" "simple-datatables" ) }}
28+
29+
{{/* Initialize local variables */}}
30+
{{ $pages := slice }}
31+
{{ $result := partial "assets/live-pages.html" (dict
32+
"page" $args._page
33+
"section" $args.input.section
34+
"nested" $args.input.nested
35+
"keywords" $args.input.keywords
36+
"categories" $args.input.categories
37+
"tags" $args.input.tags
38+
"sort" $args.input.sort
39+
"reverse" $args.input.reverse
40+
)}}
41+
{{ $pages = $result.pages }}
42+
43+
{{ if and $args.limit $args.paginate }}
44+
{{ partial "utilities/LogWarn.html" (dict
45+
"partial" "component-library/components/list/list.hugo.html"
46+
"msg" "Limit is ignored when paginate is set"
47+
"file" page.File
48+
)}}
49+
{{ end }}
50+
51+
{{/* Limit list to max elements */}}
52+
{{- $count := len $pages -}}
53+
{{- $max := $count -}}
54+
{{- $max = math.Min ($args.limit | default $count) $count -}}
55+
{{- if not $args.paginate -}}
56+
{{- $pages = first $max $pages -}}
57+
{{- end -}}
58+
59+
{{/* Main code */}}
60+
{{ if not $error }}
61+
{{ if or (gt (len $pages) 0) (not $args.hideEmpty) }}
62+
{{- partial "assets/section-title.html" (dict
63+
"heading" $args.heading
64+
"justify" $args.justify
65+
"class" (printf "pb-%d" $padding.y))
66+
-}}
67+
{{ if gt (len $pages) 0 }}
68+
{{ $content := "" }}
69+
{{ if $args.hook }}
70+
{{ $content = partial $args.hook (dict "pages" $pages) }}
71+
{{ else }}
72+
{{ $content = "| Title | Description |\n|-|-|\n" }}
73+
{{ range $pages }}
74+
{{ $content = printf "%s[%s](#%s) | %s |\n" $content .LinkTitle .RelPermalink .Description }}
75+
{{ end }}
76+
{{ end }}
77+
78+
{{- /* Define main breakpoint */ -}}
79+
{{- $args.page.Scratch.Set "breakpoint" (partialCached "utilities/GetBreakpoint.html" .) }}
80+
81+
{{ $pagination := $args.pagination | default 10 }}
82+
{{ $paginate := and $args.paginate (gt (len $pages) $pagination) }}
83+
{{ $sortable := and $args.sortable (gt (len $pages) 1) }}
84+
{{ $searchable := and $args.searchable (gt (len $pages) 1) }}
85+
86+
{{ partial "assets/table.html" (dict
87+
"page" (or $args.page page)
88+
"input" $content
89+
"breakpoint" $args.breakpoint
90+
"class" $args.class
91+
"sortable" $sortable
92+
"paginate" $paginate
93+
"pagination" (cond $paginate $pagination "")
94+
"pagination-select" (cond $paginate $args.paginationSelect "")
95+
"searchable" $searchable
96+
"wrap" $args.wrap
97+
"_default" $args.default
98+
) }}
99+
{{ else }}
100+
<p class="pt-{{ $padding.y }}">{{- T "emptyList" }}.</p>
101+
{{ end }}
102+
{{ end }}
103+
{{ end }}

‎component-library/components/list/list.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
section.list {
2+
.table {
3+
--bs-table-bg: transparent;
4+
--bs-table-border-color: var(--bs-table-color);
5+
6+
th:first-child, td:first-child {
7+
padding-left: 0;
8+
}
9+
10+
th:last-child, .td:last-child {
11+
padding-right: 0;
12+
}
13+
14+
th {
15+
border-bottom-color: var(--bs-table-border-color) !important;
16+
}
17+
}
18+
19+
20+
[class^="table-responsive-"] {
21+
width: 100%;
22+
}
23+
24+
.datatable-top, .datatable-bottom {
25+
padding-left: 0;
26+
padding-right: 0;
27+
padding-bottom: 2rem;
28+
}
29+
}

‎data/structures/table.yml‎

Lines changed: 17 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@ comment: >-
44
and `searchable` require the module `simple-datatables`.
55
arguments:
66
page:
7-
type:
8-
- '*hugolib.pageState'
9-
- '*hugolib.pageForShortcode'
10-
optional: false
11-
comment: Page to display the breadcrumb for.
127
group: partial
138
input:
149
type:
@@ -18,64 +13,46 @@ arguments:
1813
comment: Table input in markdown format.
1914
group: partial
2015
breakpoint:
21-
type: select
22-
optional: true
2316
position: 0
24-
comment: >-
25-
By default, the table shortcode is responsive for all viewports. When a
26-
breakpoint is set, the table will behave normally and not scroll
27-
horizontally from the provided breakpoint and up. Use `none` to disable
28-
this behavior. You can specify multiple breakpoints when using positional
29-
arguments.
30-
options:
31-
values:
32-
- none
33-
- sm
34-
- md
35-
- lg
36-
- xl
37-
- xxl
3817
class:
39-
type: string
40-
optional: true
41-
comment: Class attribute of the table element, e.g. `table-striped-columns w-auto`.
4218
sortable:
43-
type: bool
44-
optional: true
45-
comment: Toggle the ability to sort the columns.
4619
release: v0.24.13
20+
paginate:
21+
release: v1.23.0
22+
pagination:
23+
release: v1.23.0
24+
pagination-select:
25+
release: v1.23.0
26+
searchable:
27+
release: v0.24.13
28+
wrap:
29+
# deprecated arguments
4730
paging:
4831
type: bool
4932
optional: true
5033
comment: Whether paging is enabled for the table.
5134
release: v0.24.13
35+
deprecated: v1.23.0
36+
alternative: paginate
5237
pagingOptionPerPage:
5338
type: int
5439
optional: true
5540
comment: >-
5641
Sets the maximum number of rows to display on each page. Requires
5742
`paging = true`.
5843
release: v0.27.8
44+
deprecated: v1.23.0
45+
alternative: pagination
5946
pagingOptionPageSelect:
6047
type: string
6148
optional: true
6249
comment: >-
6350
Sets the per page options in the dropdown. Must be an array of integers or
6451
arrays in the format [label (string), value (int)]. Requires
65-
`paging = true`.
52+
`paginate = true`.
6653
release: v0.27.8
67-
searchable:
68-
type: bool
69-
optional: true
70-
comment: Toggle the ability to search the dataset.
71-
release: v0.24.13
72-
wrap:
73-
type: bool
74-
optional: true
75-
comment: >-
76-
Toggle the last column to wrap to a new row on smaller devices. This
77-
setting is not compatible with data tables.
78-
release: v0.28.0
54+
deprecated: v1.23.0
55+
alternative: pagination-select
7956
body:
8057
type: string
8158
optional: false

‎exampleSite/content/en/blocks/list.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
_schema: default
3+
title: List
4+
description: Use the list content block to show a list of articles.
5+
icon: fas list
6+
modules: ["simple-datatables"]
7+
---
8+
9+
## Overview
10+
11+
The `list` content block renders a list of articles. Add the following configuration to your page's frontmatter to enable data table features:
12+
13+
```yml
14+
---
15+
modules: ["simple-datatables"]
16+
---
17+
```
18+
19+
<!-- markdownlint-disable MD037 -->
20+
{{< example-bookshop lang="bookshop" >}}
21+
22+
```yml
23+
- _bookshop_name: list
24+
heading:
25+
title: Recent articles
26+
align: start
27+
input:
28+
section: blog
29+
reverse: false
30+
sort: title
31+
hide-empty: false
32+
background:
33+
color: primary
34+
subtle: true
35+
justify: start
36+
sortable: true
37+
paginate: true
38+
searchable: true
39+
```
40+
41+
{{< /example-bookshop >}}
42+
<!-- markdownlint-enable MD037 -->
43+
44+
## Arguments
45+
46+
The content block supports the following arguments:
47+
48+
{{< args bookshop-list >}}

‎exampleSite/content/en/blog/components.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ As an example, the following shortcode displays a responsive table that uses adv
3232

3333
<!-- markdownlint-disable MD037 MD058 -->
3434
{{< example lang="markdown" >}}
35-
{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
35+
{{</* table sortable="true" paginate="true" searchable="true" pagination=5 */>}}
3636
| # | Heading |
3737
|-----|---------|
3838
| 1. | Item 1 |

‎exampleSite/content/fr/blog/components.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Hinode propose plusieurs shortcodes en plus des [éléments Bootstrap]({{% relre
3333

3434
<!-- markdownlint-disable MD037 MD058 -->
3535
{{< example lang="markdown" >}}
36-
{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
36+
{{</* table sortable="true" paginate="true" searchable="true" pagination=5 */>}}
3737
| # | Heading |
3838
|-----|---------|
3939
| 1. | Item 1 |

‎exampleSite/content/nl/blog/components.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Het volgende voorbeeld gebruikt een shortcode om een responsieve tabel met geava
3131

3232
<!-- markdownlint-disable MD037 MD058 -->
3333
{{< example lang="markdown" >}}
34-
{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
34+
{{</* table sortable="true" paginate="true" searchable="true" pagination=5 */>}}
3535
| # | Kop |
3636
|-----|---------|
3737
| 1. | Item 1 |

0 commit comments

Comments
 (0)