hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-07 01:54:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add panels content block

Browse Source
This commit is contained in:
Mark Dumay
2025-07-06 11:51:37 +02:00
parent 8cffd358aa
commit cd837cf116
7 changed files with 376 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
component-library/bookshop.scss
View File

@@ -5,6 +5,7 @@
@import "modules/bookshop/components/cta/cta";
@import "modules/bookshop/components/faq/faq";
@import "modules/bookshop/components/hero/hero";
@import "modules/bookshop/components/panels/panels";
@import "modules/bookshop/components/releases/releases";
@import "modules/bookshop/components/separator/separator";
@import "modules/bookshop/components/video-message/video-message";

35
component-library/components/panels/panels.bookshop.yml Normal file
View File

@@ -0,0 +1,35 @@
# Metadata about this component, to be used in the CMS
spec:
structures:
- content_blocks
label: Panels
description: Introduction section
icon: check
tags: []
# Defines the structure of this component, as well as the default values
blueprint:
heading:
preheading:
heading:
content:
align:
width:
cols:
icon-rounded:
padding:
background:
backdrop:
color:
subtle:
elements:
- title:
icon:
image:
mode:
content:
tab-type:
ratio:
class:
width:
justify:

81
component-library/components/panels/panels.hugo.html Normal file
View File

@@ -0,0 +1,81 @@
{{/*
Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
Visit gethinode.com/license for more details.
*/}}
{{ $error := false }}
{{/* Initialize arguments */}}
{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "panels" "args" .)}}
{{ if or $args.err $args.warnmsg }}
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
"partial" "component-library/components/panels/panels.hugo.html"
"warnid" "warn-invalid-arguments"
"msg" "Invalid arguments"
"details" ($args.errmsg | append $args.warnmsg)
"file" page.File
)}}
{{ $error = $args.err }}
{{ end }}
{{/* Initialize global arguments */}}
{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
{{/* Initialize local variables */}}
{{ $list := slice }}
{{ $titles := slice }}
{{ $toc := slice }}
{{ $parentID := printf "panel-%v" (cond (isset . "_ordinal") (index . "_ordinal") (md5 (delimit (slice . now) "-"))) }}
{{ $inner := "" }}
{{ range $i, $element := $args.elements }}
{{ $toc = $toc | append (dict "href" "panel-0-1" "level" 2 "title" $element.title) }}
{{ $hero := partial "assets/hero.html" (dict
"page" page
"heading" (dict "title" $element.title "content" $element.content "width" 8 "size" 6)
"background" $args.background
"illustration" (dict "ratio" $args.ratio "icon" $element.icon "image" $element.image "mode" $element.mode)
"order" $args.order
"link-type" $args.linkType
"links" $args.links
"orientation" "horizontal"
"align" "start"
"width" 12
)
}}
{{- $output := partial "assets/nav-item.html" (dict
"page" page
"id" $i
"parent-id" $parentID
"fade" false
"title" $element.title
"show" (eq $i 0)
"raw" $hero
)
-}}
{{ $inner = printf "%s\n%s" $inner $output }}
{{ $titles = $titles | append $element.title }}
{{ end}}
{{ if not $error }}
{{- partial "assets/section-title.html" (dict "heading" $args.heading "justify" $args.justify) -}}
{{- partial "assets/nav.html" (dict
"id" (or $args.id $parentID)
"page" page
"nav-items" $inner
"nav-titles" $titles
"tab-type" $args.tabType
"vertical" $args.vertical
"word-wrap" $args.wordWrap
"class" $args.class
"pane" $args.pane
"width" $args.width
"responsive" $args.responsive
)
-}}
{{ end }}

3
component-library/components/panels/panels.scss Normal file
View File

@@ -0,0 +1,3 @@
.panels .dropdown-toggle {
text-decoration: none !important;
}

2
exampleSite/config/_default/params.toml
View File

@@ -129,7 +129,7 @@
# themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
themeFontPath = "/fonts" # local path
themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
purge = true
purge = false
# toml-docs-end theme-colors
[schema]

189
exampleSite/content/en/blocks/panels.md Normal file
View File

@@ -0,0 +1,189 @@
---
_schema: default
title: Panels
description: Use the panels content block to display multiple toggable panels.
icon: fa folder
---
## Overview
The `panels` content block displays multiple panels that are toggled by a tab control.
<!-- markdownlint-disable MD037 -->
{{< example-bookshop lang="bookshop" >}}
```yml
- _bookshop_name: panels
heading:
preheading: Preheading
title: Heading
content: Panels content. It supports multiple lines.
align: start
background:
color: primary
subtle: true
width: 12
tab-type: underline
ratio: 1x1
elements:
- title: First Panel
image: /img/sunrise.jpg
content: content 1
- title: Second Panel
image: /img/nat-9l98kFByiao-unsplash.jpg
content: content 2
- title: Third Panel
image: /img/pj-accetturo-XpD6Dkui-yg-unsplash.jpg
content: content 3
```
{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->
## Arguments
The content block supports the following arguments:
{{< args bookshop-panels >}}
## Examples
### Tabs
Set `tab-type` to `tabs` to adjust the panel controls.
<!-- markdownlint-disable MD037 -->
{{< example-bookshop lang="bookshop" >}}
```yml
- _bookshop_name: panels
heading:
preheading: Preheading
title: Heading
content: Panels content. It supports multiple lines.
align: start
background:
color: primary
subtle: true
width: 12
tab-type: tabs
ratio: 1x1
elements:
- title: First Panel
image: /img/sunrise.jpg
content: content 1
- title: Second Panel
image: /img/nat-9l98kFByiao-unsplash.jpg
content: content 2
- title: Third Panel
image: /img/pj-accetturo-XpD6Dkui-yg-unsplash.jpg
content: content 3
```
{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->
### Pills
Set `tab-type` to `pills` to adjust the panel controls.
<!-- markdownlint-disable MD037 -->
{{< example-bookshop lang="bookshop" >}}
```yml
- _bookshop_name: panels
heading:
preheading: Preheading
title: Heading
content: Panels content. It supports multiple lines.
align: start
background:
color: primary
subtle: true
width: 12
tab-type: pills
ratio: 1x1
elements:
- title: First Panel
image: /img/sunrise.jpg
content: content 1
- title: Second Panel
image: /img/nat-9l98kFByiao-unsplash.jpg
content: content 2
- title: Third Panel
image: /img/pj-accetturo-XpD6Dkui-yg-unsplash.jpg
content: content 3
```
{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->
### Underline
Set `tab-type` to `underline` to adjust the panel controls.
<!-- markdownlint-disable MD037 -->
{{< example-bookshop lang="bookshop" >}}
```yml
- _bookshop_name: panels
heading:
preheading: Preheading
title: Heading
content: Panels content. It supports multiple lines.
align: start
background:
color: primary
subtle: true
width: 12
tab-type: underline
ratio: 1x1
elements:
- title: First Panel
image: /img/sunrise.jpg
content: content 1
- title: Second Panel
image: /img/nat-9l98kFByiao-unsplash.jpg
content: content 2
- title: Third Panel
image: /img/pj-accetturo-XpD6Dkui-yg-unsplash.jpg
content: content 3
```
{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->
### Callout
Set `tab-type` to `callout` to adjust the panel controls.
<!-- markdownlint-disable MD037 -->
{{< example-bookshop lang="bookshop" >}}
```yml
- _bookshop_name: panels
heading:
preheading: Preheading
title: Heading
content: Panels content. It supports multiple lines.
align: start
background:
color: primary
subtle: true
width: 12
tab-type: callout
ratio: 1x1
elements:
- title: First Panel
image: /img/sunrise.jpg
content: content 1
- title: Second Panel
image: /img/nat-9l98kFByiao-unsplash.jpg
content: content 2
- title: Third Panel
image: /img/pj-accetturo-XpD6Dkui-yg-unsplash.jpg
content: content 3
```
{{< /example-bookshop >}}
<!-- markdownlint-enable MD037 -->

71
exampleSite/hugo_stats.json
View File

@@ -248,6 +248,7 @@
"fa-face-frown",
"fa-facebook",
"fa-fluid",
"fa-folder",
"fa-fw",
"fa-github",
"fa-globe",
@@ -382,10 +383,13 @@
"my-md-0",
"my-md-auto",
"nav",
"nav-callout",
"nav-item",
"nav-link",
"nav-panel",
"nav-pills",
"nav-tabs",
"nav-underline",
"navbar",
"navbar-brand",
"navbar-collapse",
@@ -410,6 +414,12 @@
"p-3",
"p-4",
"p-md-4",
"page-item",
"page-link",
"pagination",
"pagination-terse",
"panel-dropdown",
"panels",
"pb-3",
"pb-4",
"pb-5",
@@ -486,6 +496,7 @@
"table-border-bottom-wrap",
"table-responsive-md",
"table-wrap",
"tabs-dropdown",
"tag-link",
"text-",
"text-bg-body-tertiary",
@@ -585,6 +596,7 @@
"button",
"button-group",
"c4-diagram",
"callout",
"card",
"card-group",
"carousel",
@@ -606,12 +618,20 @@
"data-tables",
"docs",
"documentation",
"dropdown-nav-0",
"dropdown-panel-2ee9d01b31525e9e142a06fb516a25f3",
"dropdown-panel-6bd0e3dd79fbbe23e8326ec646278eaa",
"dropdown-panel-9ca98671ab409eed99d53937469bc0d9",
"dropdown-panel-af7983451ce1ee2d3ccd519c6d76a310",
"dropdown-panel-e709f40b167e00726bc5a37d86287815",
"elements-type",
"entity-relationship-diagram",
"example",
"examples",
"exemple",
"fa-address-card",
"fa-face-frown",
"fa-folder",
"fa-square-check",
"fab-bootstrap",
"fab-docker",
@@ -621,11 +641,11 @@
"fab-medium",
"fab-whatsapp",
"fab-x-twitter",
"faq-9ef13ff2bd73b0e328491bd048c7a1ef",
"faq-9ef13ff2bd73b0e328491bd048c7a1ef-heading-faq-9ef13ff2bd73b0e328491bd048c7a1ef",
"faq-9ef13ff2bd73b0e328491bd048c7a1ef-item-0",
"faq-9ef13ff2bd73b0e328491bd048c7a1ef-item-1",
"faq-9ef13ff2bd73b0e328491bd048c7a1ef-item-2",
"faq-880f1bcbba06b595d55c07260b6272de",
"faq-880f1bcbba06b595d55c07260b6272de-heading-faq-880f1bcbba06b595d55c07260b6272de",
"faq-880f1bcbba06b595d55c07260b6272de-item-0",
"faq-880f1bcbba06b595d55c07260b6272de-item-1",
"faq-880f1bcbba06b595d55c07260b6272de-item-2",
"fas-1",
"fas-2",
"fas-3",
@@ -659,6 +679,7 @@
"fichier",
"fil-dariane",
"file",
"first-panel",
"flowchart",
"footer-docs-collapse-15",
"footer-docs-collapse-16",
@@ -711,6 +732,11 @@
"nav-0-btn-1",
"nav-0-btn-2",
"nav-nav-0",
"nav-panel-2ee9d01b31525e9e142a06fb516a25f3",
"nav-panel-6bd0e3dd79fbbe23e8326ec646278eaa",
"nav-panel-9ca98671ab409eed99d53937469bc0d9",
"nav-panel-af7983451ce1ee2d3ccd519c6d76a310",
"nav-panel-e709f40b167e00726bc5a37d86287815",
"navbar",
"navbar-0-collapse",
"navbar-mode",
@@ -719,8 +745,39 @@
"navigation",
"notification",
"overview",
"panel-2ee9d01b31525e9e142a06fb516a25f3-0",
"panel-2ee9d01b31525e9e142a06fb516a25f3-1",
"panel-2ee9d01b31525e9e142a06fb516a25f3-2",
"panel-2ee9d01b31525e9e142a06fb516a25f3-btn-0",
"panel-2ee9d01b31525e9e142a06fb516a25f3-btn-1",
"panel-2ee9d01b31525e9e142a06fb516a25f3-btn-2",
"panel-6bd0e3dd79fbbe23e8326ec646278eaa-0",
"panel-6bd0e3dd79fbbe23e8326ec646278eaa-1",
"panel-6bd0e3dd79fbbe23e8326ec646278eaa-2",
"panel-6bd0e3dd79fbbe23e8326ec646278eaa-btn-0",
"panel-6bd0e3dd79fbbe23e8326ec646278eaa-btn-1",
"panel-6bd0e3dd79fbbe23e8326ec646278eaa-btn-2",
"panel-9ca98671ab409eed99d53937469bc0d9-0",
"panel-9ca98671ab409eed99d53937469bc0d9-1",
"panel-9ca98671ab409eed99d53937469bc0d9-2",
"panel-9ca98671ab409eed99d53937469bc0d9-btn-0",
"panel-9ca98671ab409eed99d53937469bc0d9-btn-1",
"panel-9ca98671ab409eed99d53937469bc0d9-btn-2",
"panel-af7983451ce1ee2d3ccd519c6d76a310-0",
"panel-af7983451ce1ee2d3ccd519c6d76a310-1",
"panel-af7983451ce1ee2d3ccd519c6d76a310-2",
"panel-af7983451ce1ee2d3ccd519c6d76a310-btn-0",
"panel-af7983451ce1ee2d3ccd519c6d76a310-btn-1",
"panel-af7983451ce1ee2d3ccd519c6d76a310-btn-2",
"panel-e709f40b167e00726bc5a37d86287815-0",
"panel-e709f40b167e00726bc5a37d86287815-1",
"panel-e709f40b167e00726bc5a37d86287815-2",
"panel-e709f40b167e00726bc5a37d86287815-btn-0",
"panel-e709f40b167e00726bc5a37d86287815-btn-1",
"panel-e709f40b167e00726bc5a37d86287815-btn-2",
"persona",
"pie-chart",
"pills",
"projecten",
"projects",
"projets",
@@ -730,6 +787,7 @@
"release",
"requirement-chart",
"réduire",
"second-panel",
"security",
"sequence-diagram",
"spinner",
@@ -738,6 +796,8 @@
"sup",
"sécurité",
"table",
"tabs",
"third-panel",
"third-party-links--use-of-your-information",
"timeline",
"title",
@@ -751,6 +811,7 @@
"tooltip",
"types-de-cookies-que-nous-utilisons",
"types-of-cookies-we-use",
"underline",
"user-journey",
"video",
"video-type",