mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-07 01:54:23 +00:00
Add initial content blocks
This commit is contained in:
Mark Dumay
8
component-library/bookshop.scss
Normal file
8
component-library/bookshop.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "modules/bookshop/shared/styles/global";
|
||||
@import "modules/bookshop/components/about/about";
|
||||
@import "modules/bookshop/components/articles/articles";
|
||||
@import "modules/bookshop/components/faq/faq";
|
||||
@import "modules/bookshop/components/hero/hero";
|
||||
@import "modules/bookshop/components/separator/separator";
|
||||
@import "modules/bookshop/components/video-message/video-message";
|
||||
@import "modules/bookshop/theme";
|
||||
39
component-library/components/about/about.bookshop.yml
Normal file
39
component-library/components/about/about.bookshop.yml
Normal file
@@ -0,0 +1,39 @@
|
||||
# Metadata about this component, to be used in the CMS
|
||||
spec:
|
||||
structures:
|
||||
- content_blocks
|
||||
label: About
|
||||
description: About section
|
||||
icon: fingerprint
|
||||
tags: []
|
||||
|
||||
# Defines the structure of this component, as well as the default values
|
||||
blueprint:
|
||||
heading:
|
||||
preheading:
|
||||
title:
|
||||
content:
|
||||
align:
|
||||
placement:
|
||||
width:
|
||||
size:
|
||||
background:
|
||||
backdrop:
|
||||
color:
|
||||
subtle:
|
||||
illustration:
|
||||
image:
|
||||
icon:
|
||||
ratio:
|
||||
class:
|
||||
anchor:
|
||||
mode:
|
||||
order:
|
||||
width:
|
||||
link-type:
|
||||
links:
|
||||
-
|
||||
title:
|
||||
url:
|
||||
icon:
|
||||
force:
|
||||
31
component-library/components/about/about.hugo.html
Normal file
31
component-library/components/about/about.hugo.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{{/*
|
||||
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.
|
||||
*/}}
|
||||
|
||||
{{/* Initialize arguments */}}
|
||||
{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "about" "args" .) }}
|
||||
{{ if or $args.err $args.warnmsg }}
|
||||
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
|
||||
"partial" "component-library/components/about/about.hugo.html"
|
||||
"msg" " Invalid arguments"
|
||||
"details" ($args.errmsg | append $args.warnmsg)
|
||||
"file" page.File
|
||||
)}}
|
||||
{{- end -}}
|
||||
|
||||
{{/* Main code */}}
|
||||
{{ if not $args.error }}
|
||||
{{ partial "assets/hero.html" (dict
|
||||
"heading" $args.heading
|
||||
"background" $args.background
|
||||
"illustration" (merge (dict "ratio" "1x1") $args.illustration)
|
||||
"order" $args.order
|
||||
"link-type" $args.linkType
|
||||
"links" $args.links
|
||||
"orientation" "horizontal"
|
||||
"width" (or .width 8)
|
||||
)
|
||||
}}
|
||||
{{- end -}}
|
||||
3
component-library/components/about/about.scss
Normal file
3
component-library/components/about/about.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.about {
|
||||
scroll-margin-block: var(--navbar-offset);
|
||||
}
|
||||
45
component-library/components/articles/articles.bookshop.yml
Normal file
45
component-library/components/articles/articles.bookshop.yml
Normal file
@@ -0,0 +1,45 @@
|
||||
# Metadata about this component, to be used in the CMS
|
||||
spec:
|
||||
structures:
|
||||
- content_blocks
|
||||
label: Articles
|
||||
description: Articles section
|
||||
icon: post
|
||||
tags: []
|
||||
|
||||
# Defines the structure of this component, as well as the default values
|
||||
blueprint:
|
||||
heading:
|
||||
preheading:
|
||||
heading:
|
||||
content:
|
||||
align:
|
||||
width:
|
||||
hide-empty:
|
||||
input:
|
||||
section:
|
||||
nested:
|
||||
keywords:
|
||||
categories:
|
||||
tags:
|
||||
reverse:
|
||||
sort:
|
||||
more:
|
||||
title:
|
||||
link:
|
||||
cols:
|
||||
padding:
|
||||
max:
|
||||
pagination:
|
||||
paginate:
|
||||
background:
|
||||
backdrop:
|
||||
color:
|
||||
subtle:
|
||||
scroll:
|
||||
bento:
|
||||
cover:
|
||||
header-style:
|
||||
footer-style:
|
||||
orientation:
|
||||
class:
|
||||
109
component-library/components/articles/articles.hugo.html
Normal file
109
component-library/components/articles/articles.hugo.html
Normal file
@@ -0,0 +1,109 @@
|
||||
{{/*
|
||||
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" "articles" "args" .)}}
|
||||
{{ if or $args.err $args.warnmsg }}
|
||||
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
|
||||
"partial" "component-library/components/articles/articles.hugo.html"
|
||||
"msg" "Invalid arguments"
|
||||
"details" ($args.errmsg | append $args.warnmsg)
|
||||
"file" page.File
|
||||
)}}
|
||||
{{ $error = $args.err }}
|
||||
{{ end }}
|
||||
|
||||
{{ $pages := slice }}
|
||||
{{ $pages = partial "assets/live-pages.html" (dict
|
||||
"page" $args.page
|
||||
"section" $args.input.section
|
||||
"nested" $args.input.nested
|
||||
"keywords" $args.input.keywords
|
||||
"categories" $args.input.categories
|
||||
"tags" $args.input.tags
|
||||
"sort" $args.input.sort
|
||||
"reverse" $args.input.reverse
|
||||
)}}
|
||||
|
||||
<!-- Add style definitions -->
|
||||
{{ $styles := slice
|
||||
(dict "ratio" "1x1" "orientation" "overlay" "portrait" false "width" "6")
|
||||
(dict "ratio" "4x3" "orientation" "stacked" "portrait" true "width" "3")
|
||||
(dict "ratio" "1x1" "orientation" "stacked" "portrait" false "width" "3")
|
||||
(dict "ratio" "16x9" "orientation" "stacked" "portrait" true "width" "3")
|
||||
(dict "ratio" "1x1" "orientation" "stacked" "portrait" false "width" "3")
|
||||
}}
|
||||
|
||||
<!-- Define more button -->
|
||||
{{ $moreButton := site.Params.modules.bookshop.articles.moreButton | default false }}
|
||||
{{ $moreTitle := T "more" (pluralize .section) }}
|
||||
{{ $moreLink := .section }}
|
||||
{{ with $args.more }}
|
||||
{{ if .title }}{{ $moreTitle = .title }}{{ end }}
|
||||
{{ if .link }}{{ $moreLink = .link }}{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $paginate := $args.paginate }}
|
||||
{{ if and $paginate page.IsPage }}
|
||||
{{ partial "utilities/LogWarn.html" (dict
|
||||
"partial" "component-library/components/articles/articles.hugo.html"
|
||||
"msg" "Pagination not supported"
|
||||
"file" page.File
|
||||
)}}
|
||||
{{ $paginate = false }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Main code -->
|
||||
{{ if not $error }}
|
||||
<div class="container-xxl p-4 px-xxl-0">
|
||||
{{- partial "assets/section-title.html" (dict
|
||||
"heading" $args.heading
|
||||
"class" "py-5"
|
||||
) -}}
|
||||
|
||||
{{ $partial := "assets/card-group.html" }}
|
||||
{{ $params := dict }}
|
||||
{{- $params = merge $params (dict
|
||||
"page" page
|
||||
"list" $pages
|
||||
"max" $args.max
|
||||
"cols" $args.cols
|
||||
"icon-rounded" $args.iconRounded
|
||||
"href" (cond $moreButton $moreLink "")
|
||||
"href-title" (cond $moreButton $moreTitle "")
|
||||
)}}
|
||||
|
||||
{{ if $args.scroll }}
|
||||
{{ $partial := "assets/stack.html" }}
|
||||
{{ $params = merge $params (dict
|
||||
"header-style" "none"
|
||||
"body-style" "title"
|
||||
"footer-style" "none"
|
||||
"gutter" 1
|
||||
"padding" 3
|
||||
"ratio" "1x1"
|
||||
"orientation" "horizontal-sm"
|
||||
"styles" (cond $args.bento $styles "")
|
||||
) -}}
|
||||
{{ else }}
|
||||
{{ $params = merge $params (dict
|
||||
"header-style" $args.headerStyle
|
||||
"footer-style" $args.footerStyle
|
||||
"padding" $args.padding
|
||||
"class" (or $args.class "border-0")
|
||||
"icon-style" "fa-2x"
|
||||
"align" "start"
|
||||
"orientation" $args.orientation
|
||||
"hook" "assets/live-card.html"
|
||||
"pagination" $args.pagination
|
||||
"paginate" $paginate
|
||||
) -}}
|
||||
{{ end }}
|
||||
{{ partial $partial $params }}
|
||||
</div>
|
||||
{{ end }}
|
||||
8
component-library/components/articles/articles.scss
Normal file
8
component-library/components/articles/articles.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.card-overlay-gradient {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(0, 0, 0, 1));
|
||||
}
|
||||
26
component-library/components/faq/faq.bookshop.yml
Normal file
26
component-library/components/faq/faq.bookshop.yml
Normal file
@@ -0,0 +1,26 @@
|
||||
# Metadata about this component, to be used in the CMS
|
||||
spec:
|
||||
structures:
|
||||
- content_blocks
|
||||
label: FAQ
|
||||
description: Accordion of frequently asked questions
|
||||
icon: expand_more
|
||||
tags: []
|
||||
|
||||
# Defines the structure of this component, as well as the default values
|
||||
blueprint:
|
||||
heading:
|
||||
preheading:
|
||||
title:
|
||||
content:
|
||||
align:
|
||||
width:
|
||||
size:
|
||||
contrast:
|
||||
background:
|
||||
backdrop:
|
||||
color:
|
||||
subtle:
|
||||
items:
|
||||
- title:
|
||||
description:
|
||||
58
component-library/components/faq/faq.hugo.html
Normal file
58
component-library/components/faq/faq.hugo.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{{/*
|
||||
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.
|
||||
*/}}
|
||||
|
||||
{{/* Initialize arguments */}}
|
||||
{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "faq" "args" .)}}
|
||||
{{ if or $args.err $args.warnmsg }}
|
||||
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
|
||||
"partial" "component-library/components/faq/faq.hugo.html"
|
||||
"msg" "Invalid arguments"
|
||||
"details" ($args.errmsg | append $args.warnmsg)
|
||||
"file" page.File
|
||||
)}}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $args.err }}
|
||||
<div class="container-xxl p-4 px-xxl-0">
|
||||
{{ $color := "" }}
|
||||
{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
|
||||
{{- partial "assets/section-title.html" (dict
|
||||
"heading" $args.heading
|
||||
"color" $color
|
||||
"class" "py-5"
|
||||
) -}}
|
||||
|
||||
{{ $class := "" }}
|
||||
{{ $id := printf "faq-%s" (md5 (delimit (slice . now) "-")) }}
|
||||
|
||||
<div id="{{ $id }}" class="accordion accordion-faq {{ if $args.contrast }}accordion-faq-contrast text-white {{ end }}accordion-flush mb-3{{ with $class }} {{ . }}{{ end }} col-12 col-md-6 mx-auto">
|
||||
{{ range $index, $item := $args.items }}
|
||||
<div class="accordion-item">
|
||||
{{- with $item.title -}}
|
||||
<div class="accordion-header m-0" id="{{ $id }}-heading-{{ $id }}">
|
||||
<button class="accordion-button collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#{{ $id }}-item-{{ $index }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="{{ $id }}-item-{{ $index }}"
|
||||
>
|
||||
{{ if $args.color }}<div class="text-{{ $args.color }}">{{ . }}</div>{{ else }}{{ . }}{{ end }}
|
||||
</button>
|
||||
</div>
|
||||
{{- end -}}
|
||||
<div id="{{ $id }}-item-{{ $index }}"
|
||||
class="accordion-collapse collapse"
|
||||
aria-labelledby="{{ $id }}-heading-{{ $index }}"
|
||||
data-bs-parent="#{{ $id }}"
|
||||
>
|
||||
<div class="accordion-body">{{ $item.description | page.RenderString | safeHTML }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
44
component-library/components/faq/faq.scss
Normal file
44
component-library/components/faq/faq.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
$accordion-button-icon-white: url("/icons/accordion-button-icon-white.svg") !default;
|
||||
$accordion-button-active-icon-white: url("/icons/accordion-button-active-icon-white.svg") !default;
|
||||
|
||||
|
||||
.accordion-faq {
|
||||
--#{$prefix}accordion-btn-padding-x: 0;
|
||||
--#{$prefix}accordion-btn-focus-border-color: none;
|
||||
--#{$prefix}accordion-btn-focus-box-shadow: none;
|
||||
--#{$prefix}accordion-body-padding-x: 0;
|
||||
--#{$prefix}accordion-active-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}accordion-active-bg: none;
|
||||
--#{$prefix}accordion-border-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}accordion-bg: none;
|
||||
}
|
||||
|
||||
.accordion-faq .accordion-button {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
|
||||
// note: explicitly suppresses border in Safari
|
||||
.accordion-faq [aria-expanded="true"] {
|
||||
--#{$prefix}accordion-border-color: none;
|
||||
}
|
||||
|
||||
.accordion-faq-contrast {
|
||||
--#{$prefix}accordion-active-color: var(--#{$prefix}white);
|
||||
--#{$prefix}accordion-border-color: white;
|
||||
}
|
||||
|
||||
.accordion-faq-contrast .accordion-button, .accordion-faq-contrast .accordion-body {
|
||||
--#{$prefix}accordion-btn-icon: #{$accordion-button-icon-white};
|
||||
--#{$prefix}accordion-btn-active-icon: #{$accordion-button-active-icon-white};
|
||||
--#{$prefix}accordion-border-color: white;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.accordion-faq .accordion-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
40
component-library/components/hero/hero.bookshop.yml
Normal file
40
component-library/components/hero/hero.bookshop.yml
Normal file
@@ -0,0 +1,40 @@
|
||||
# Metadata about this component, to be used in the CMS
|
||||
spec:
|
||||
structures:
|
||||
- content_blocks
|
||||
label: Hero
|
||||
description: Main page Hero block
|
||||
icon: title
|
||||
tags: []
|
||||
|
||||
# Defines the structure of this component, as well as the default values
|
||||
blueprint:
|
||||
breadcrumb:
|
||||
heading:
|
||||
preheading:
|
||||
title:
|
||||
content:
|
||||
align:
|
||||
placement:
|
||||
width:
|
||||
size:
|
||||
background:
|
||||
backdrop:
|
||||
color:
|
||||
subtle:
|
||||
illustration:
|
||||
image:
|
||||
icon:
|
||||
ratio:
|
||||
class:
|
||||
anchor:
|
||||
mode:
|
||||
width:
|
||||
link-type:
|
||||
links:
|
||||
align:
|
||||
order:
|
||||
overlay-mode:
|
||||
cover:
|
||||
orientation:
|
||||
width:
|
||||
34
component-library/components/hero/hero.hugo.html
Normal file
34
component-library/components/hero/hero.hugo.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{{/*
|
||||
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.
|
||||
*/}}
|
||||
|
||||
{{/* Initialize arguments */}}
|
||||
{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "hero" "args" .) }}
|
||||
{{ if or $args.err $args.warnmsg }}
|
||||
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
|
||||
"partial" "component-library/components/hero/hero.hugo.html"
|
||||
"msg" " Invalid arguments"
|
||||
"details" ($args.errmsg | append $args.warnmsg)
|
||||
"file" page.File
|
||||
)}}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $args.err }}
|
||||
{{ partial "assets/hero.html" (dict
|
||||
"breadcrumb" $args.breadcrumb
|
||||
"heading" $args.heading
|
||||
"background" $args.background
|
||||
"illustration" $args.illustration
|
||||
"align" $args.align
|
||||
"order" $args.order
|
||||
"overlay-mode" $args.overlayMode
|
||||
"cover" $args.cover
|
||||
"link-type" $args.linkType
|
||||
"links" $args.links
|
||||
"orientation" $args.orientation
|
||||
"width" $args.width
|
||||
)
|
||||
}}
|
||||
{{ end }}
|
||||
18
component-library/components/hero/hero.scss
Normal file
18
component-library/components/hero/hero.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.background-img-fluid {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: rgba($dark, 0.8);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
# Metadata about this component, to be used in the CMS
|
||||
spec:
|
||||
structures:
|
||||
- content_blocks
|
||||
label: Separator
|
||||
description: Inserts a horizontal page section separator
|
||||
icon: horizontal_rule
|
||||
tags: []
|
||||
19
component-library/components/separator/separator.hugo.html
Normal file
19
component-library/components/separator/separator.hugo.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{{/*
|
||||
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.
|
||||
*/}}
|
||||
|
||||
{{ $args := partial "utilities/InitArgs.html" (dict "structure" "separator" "args" .) }}
|
||||
{{ if or $args.err $args.warnmsg }}
|
||||
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
|
||||
"partial" "component-library/components/separator/separator.hugo.html"
|
||||
"msg" " Invalid arguments"
|
||||
"details" ($args.errmsg | append $args.warnmsg)
|
||||
"file" page.File
|
||||
)}}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $args.err }}
|
||||
<div class="container-xxl p-0"{{ with $args.theme }} data-bs-theme="{{ . }}"{{ end }}><hr></div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,51 @@
|
||||
# Metadata about this component, to be used in the CMS
|
||||
spec:
|
||||
structures:
|
||||
- content_blocks
|
||||
label: Video
|
||||
description: Video section
|
||||
icon: build
|
||||
tags: []
|
||||
|
||||
# Defines the structure of this component, as well as the default values
|
||||
blueprint:
|
||||
heading:
|
||||
preheading:
|
||||
title:
|
||||
content:
|
||||
align:
|
||||
placement:
|
||||
width:
|
||||
size:
|
||||
background:
|
||||
backdrop:
|
||||
color:
|
||||
subtle:
|
||||
link-type:
|
||||
orientation:
|
||||
icon-rounded:
|
||||
video:
|
||||
host:
|
||||
account:
|
||||
id:
|
||||
autoplay:
|
||||
options:
|
||||
cols:
|
||||
messages:
|
||||
- title:
|
||||
icon:
|
||||
content:
|
||||
link:
|
||||
label:
|
||||
border:
|
||||
width:
|
||||
|
||||
_structures:
|
||||
messages:
|
||||
values:
|
||||
value:
|
||||
title:
|
||||
icon:
|
||||
content:
|
||||
link:
|
||||
label:
|
||||
@@ -0,0 +1,135 @@
|
||||
{{/*
|
||||
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.
|
||||
*/}}
|
||||
|
||||
{{/* Initialize arguments */}}
|
||||
{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "video-message" "args" .) }}
|
||||
{{ if or $args.err $args.warnmsg }}
|
||||
{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
|
||||
"partial" "component-library/components/video-message/video-message.hugo.html"
|
||||
"msg" " Invalid arguments"
|
||||
"details" ($args.errmsg | append $args.warnmsg)
|
||||
"file" page.File
|
||||
)}}
|
||||
{{ end }}
|
||||
|
||||
{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
|
||||
|
||||
{{- define "_partials/inline/video.html" -}}
|
||||
{{ $host := .host }}
|
||||
{{ $account := .account }}
|
||||
{{ $id := .id }}
|
||||
{{ $autoplay := .autoplay }}
|
||||
{{ $options := .options }}
|
||||
{{ $border := .border }}
|
||||
|
||||
{{ if site.Params.env_bookshop_live }}
|
||||
{{/* Define dummy content as we cannot retrieve video data in live mode */}}
|
||||
{{- partial "assets/live-image.html" (dict "url" "/img/placeholder-video.svg" "ratio" "21x9" "wrapper" "text-center mb-4") -}}
|
||||
{{ else }}
|
||||
<div class="video-container{{ if $border }} video-container-border{{ end}}">
|
||||
{{ partial "assets/video.html" (dict
|
||||
"page" page
|
||||
"host" $host
|
||||
"account" $account
|
||||
"id" $id
|
||||
"autoplay" $autoplay
|
||||
"options" $options
|
||||
) -}}
|
||||
{{ if $border }}
|
||||
<div class="video-overlay video-overlay-start"></div>
|
||||
<div class="video-overlay video-overlay-top"></div>
|
||||
<div class="video-overlay video-overlay-end"></div>
|
||||
<div class="video-overlay video-overlay-bottom"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{- define "_partials/inline/messages.html" -}}
|
||||
{{ $list := .list }}
|
||||
{{ $cols := .cols }}
|
||||
{{ $type := .type }}
|
||||
{{ $iconRounded := .iconRounded }}
|
||||
|
||||
{{- partial "assets/card-group.html" (dict
|
||||
"page" page
|
||||
"list" $list
|
||||
"class" "border-0 card-icon card-icon-secondary"
|
||||
"cols" $cols
|
||||
"gutter" ""
|
||||
"padding" "0"
|
||||
"header-style" "none"
|
||||
"footer-style" "none"
|
||||
"icon-style" "fa-fluid fa-fw"
|
||||
"align" "start"
|
||||
"orientation" "horizontal-sm"
|
||||
"button" true
|
||||
"link-type" $type
|
||||
"icon-rounded" $iconRounded
|
||||
) -}}
|
||||
{{ end }}
|
||||
|
||||
<div class="container-xxl p-4 px-xxl-0">
|
||||
{{ $list := slice }}
|
||||
|
||||
{{ range $args.messages }}
|
||||
{{ $path := "" }}
|
||||
{{ $href := "" }}
|
||||
{{ with .link }}{{ if hasPrefix . "http" }}{{ $href = . }}{{ else }}{{ $path = . }}{{ end }}{{ end }}
|
||||
|
||||
{{ $list = $list | append (dict
|
||||
"title" .title
|
||||
"description" (.content | page.RenderString)
|
||||
"icon" .icon
|
||||
"href" $href
|
||||
"path" $path
|
||||
"button-label" .label
|
||||
) }}
|
||||
{{ end}}
|
||||
|
||||
{{- partial "assets/section-title.html" (dict
|
||||
"heading" $args.heading
|
||||
"class" "py-5"
|
||||
) -}}
|
||||
|
||||
{{ if eq $args.orientation "stacked" }}
|
||||
<div class="col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
|
||||
{{ with $args.video }}
|
||||
{{- partial "inline/video.html" (dict
|
||||
"host" .host
|
||||
"account" .account
|
||||
"id" .id
|
||||
"autoplay" .autoplay
|
||||
"options" .options
|
||||
"border" $.border
|
||||
) -}}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
{{- partial "inline/messages.html" (dict "list" $list "cols" $args.cols "type" $args.type "iconRounded" $args.iconRounded) -}}
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="container grid gap-4">
|
||||
<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
|
||||
<div class="col col-{{ $breakpoint.current }}-{{ $args.width }} p-0">
|
||||
{{ with $args.video }}
|
||||
{{- partial "inline/video.html" (dict
|
||||
"host" .host
|
||||
"account" .account
|
||||
"id" .id
|
||||
"autoplay" .autoplay
|
||||
"options" .options
|
||||
"border" $.border
|
||||
) -}}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-4 mt-{{ $breakpoint.current }}-0">
|
||||
{{- partial "inline/messages.html" (dict "list" $list "cols" 1 "type" $args.type "iconRounded" $args.iconRounded) -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
.video-container {
|
||||
--bs-video-border-color: var(--bs-primary);
|
||||
--bs-video-border-width: 1rem;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-container > .video-embedded {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.video-container-border > .video-embedded {
|
||||
width: calc(100% - var(--bs-video-border-width) / 2);
|
||||
height: calc(100% - var(--bs-video-border-width) / 2);
|
||||
margin-left: calc(var(--bs-video-border-width) / 2);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
border: calc(var(--bs-video-border-width) / 2) solid var(--bs-video-border-color);
|
||||
background: var(--bs-video-border-color);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.video-overlay-start {
|
||||
border-bottom-left-radius: $theme-border-radius;
|
||||
border-top-left-radius: $theme-border-radius;
|
||||
width: 1;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.video-overlay-top {
|
||||
width: calc(100% - 1rem);
|
||||
height: 1;
|
||||
left: 1rem;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.video-overlay-bottom {
|
||||
width: calc(100% - 1rem);
|
||||
height: 1;
|
||||
left: 1rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.video-overlay-end {
|
||||
border-bottom-right-radius: $theme-border-radius;
|
||||
border-top-right-radius: $theme-border-radius;
|
||||
width: 1;
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
68
component-library/helpers/component.html
Normal file
68
component-library/helpers/component.html
Normal file
@@ -0,0 +1,68 @@
|
||||
{{/* Adapted from https://github.com/CloudCannon/bookshop/blob/main/hugo/v3/core/helpers/component.html */}}
|
||||
|
||||
{{/*
|
||||
Renders a single Bookshop component,
|
||||
wrapping in in a live editing context tag.
|
||||
|
||||
Expects a slice:
|
||||
[
|
||||
<string>, # Component name
|
||||
<_> # Component props
|
||||
]
|
||||
*/}}
|
||||
|
||||
{{- $component_name := index . 0 -}}
|
||||
{{- $component_props := index . 1 -}}
|
||||
{{- $class := index . 2 | default "p-0" -}}
|
||||
{{- $bgclass := index . 3 | default "" -}}
|
||||
|
||||
{{- $component_path := partial "_bookshop/helpers/component_key" $component_name -}}
|
||||
{{- $flat_component_path := partial "_bookshop/helpers/flat_component_key" $component_name -}}
|
||||
|
||||
{{- $resolved_component := false -}}
|
||||
{{- if templates.Exists ( printf "_partials/%s" $component_path ) -}}
|
||||
{{- $resolved_component = $component_path -}}
|
||||
{{- else if templates.Exists ( printf "_partials/%s" $flat_component_path ) -}}
|
||||
{{- $resolved_component = $flat_component_path -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if $resolved_component -}}
|
||||
{{- $id := index $component_props "id" -}}
|
||||
{{- $cover := index $component_props "cover" -}}
|
||||
{{- $background := index $component_props "background" -}}
|
||||
{{- $backdrop := "" -}}
|
||||
{{- $style := index $component_props "wrapper" -}}
|
||||
{{- $wrapper := $style }}
|
||||
{{ with $background }}
|
||||
{{/* warnf "bg: '%s'" . */}}
|
||||
{{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
|
||||
{{ with $background.backdrop }}{{ $wrapper = "" }}{{ $backdrop = . }}{{ end }}
|
||||
{{ end }}
|
||||
{{/* warnf "wrapper: '%s'" $wrapper */}}
|
||||
{{- $theme := index $component_props "theme" -}}
|
||||
{{- $overlayMode := (or (index $component_props "overlay-mode") page.Params.overlayMode) | default "dark" -}}
|
||||
{{ if not $backdrop }}{{ $overlayMode = page.Params.overlayMode }}{{ end }}
|
||||
{{ if eq $overlayMode "none" }}{{ $overlayMode = "" }}{{ end }}
|
||||
|
||||
{{ (printf "<!--bookshop-live name(%s)-->" $component_name) | safeHTML }}
|
||||
<section {{ with $id }}id="{{ . }}" {{ end }}class="{{ $component_name }} container-fluid {{ $class }} {{ with $wrapper }}{{ . }}{{ end -}}
|
||||
{{- if and $backdrop $overlayMode }} background-container{{ end -}}
|
||||
{{- if $cover }} section-cover d-flex align-items-center{{ end }}"
|
||||
{{ with $overlayMode -}}
|
||||
data-bs-theme="{{ . }}"
|
||||
data-bs-overlay="{{ . }}"
|
||||
{{- else -}}
|
||||
{{- with $theme }}data-bs-theme="{{ . }}"{{ end -}}
|
||||
{{- end -}}
|
||||
>
|
||||
{{- if $backdrop -}}
|
||||
{{ partial "assets/live-image.html" (dict "url" $backdrop "class" (printf "background-img-fluid %s" $bgclass) "title" (T "backgroundImage")) }}
|
||||
{{- end -}}
|
||||
{{ partial $resolved_component $component_props }}
|
||||
</section>
|
||||
{{ "<!--bookshop-live end-->" | safeHTML }}
|
||||
{{- else -}}
|
||||
{{- $file_loc := slicestr $component_path 9 -}}
|
||||
{{- $flat_file_loc := slicestr $flat_component_path 9 -}}
|
||||
{{- partial "_bookshop/errors/err" (printf "Component \"%s\" does not exist.\n Create this component by placing a file in your bookshop at %s or %s" $component_name $file_loc $flat_file_loc) -}}
|
||||
{{- end -}}
|
||||
27
component-library/helpers/partial.html
Normal file
27
component-library/helpers/partial.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{{/* Adapted from https://github.com/CloudCannon/bookshop/blob/main/hugo/v3/core/helpers/partial.html */}}
|
||||
|
||||
{{/*
|
||||
Renders a single Bookshop partial,
|
||||
wrapping in in a live editing context tag.
|
||||
|
||||
Expects a slice:
|
||||
[
|
||||
<string>, # Partial name
|
||||
<_> # Partial props
|
||||
]
|
||||
*/}}
|
||||
|
||||
{{- $partial_name := index . 0 -}}
|
||||
{{- $partial_props := index . 1 -}}
|
||||
{{- $partial_path := partial "_bookshop/helpers/partial_key" $partial_name -}}
|
||||
|
||||
{{- if templates.Exists ( printf "partials/%s" $partial_path ) -}}
|
||||
|
||||
{{ (printf "<!--bookshop-live name(%s)-->" $partial_name) | safeHTML }}
|
||||
{{ partial $partial_path $partial_props }}
|
||||
{{ "<!--bookshop-live end-->" | safeHTML }}
|
||||
|
||||
{{- else -}}
|
||||
{{- $file_loc := slicestr $partial_path 9 -}}
|
||||
{{- partial "_bookshop/errors/err" (printf "Partial \"%s\" does not exist.\n Create this partial by placing a file in your bookshop at %s" $partial_name $file_loc) -}}
|
||||
{{- end -}}
|
||||
5
component-library/shared/hugo/page.hugo.html
Normal file
5
component-library/shared/hugo/page.hugo.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<div>
|
||||
{{ range . }}
|
||||
{{ partial "bookshop" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
23
component-library/shared/styles/global.scss
Normal file
23
component-library/shared/styles/global.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
// Files in shared/styles will be used as global stylesheets on your site,
|
||||
// as well as in the component browser and screenshots.
|
||||
|
||||
.display-1 > strong {
|
||||
color: var(--bs-primary);
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.preheading.text-primary {
|
||||
color: #{$primary-text-emphasis-dark} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1[class*="display-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navbar-offset {
|
||||
padding-top: var(--navbar-offset);
|
||||
}
|
||||
2
component-library/theme.scss
Normal file
2
component-library/theme.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
// Placeholder to quickly add your own styles
|
||||
// The file is included last in the build pipeline
|
||||
@@ -138,6 +138,28 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
|
||||
[[module.mounts]]
|
||||
source = "static"
|
||||
target = "static"
|
||||
[[module.mounts]]
|
||||
source = 'component-library'
|
||||
target = 'layouts/partials/bookshop'
|
||||
includeFiles = ['**/*.hugo.html']
|
||||
[[module.mounts]]
|
||||
source = 'component-library'
|
||||
target = 'data/structures'
|
||||
includeFiles = ['**/*.bookshop.yml']
|
||||
[[module.mounts]]
|
||||
source = 'component-library'
|
||||
target = 'assets/bookshop'
|
||||
[[module.mounts]]
|
||||
source = 'component-library'
|
||||
target = 'assets/scss/modules/bookshop'
|
||||
includeFiles = ['**/*.scss']
|
||||
excludeFiles = ['bookshop.scss']
|
||||
[[module.mounts]]
|
||||
source = 'component-library/bookshop.scss'
|
||||
target = 'assets/scss/bookshop.scss'
|
||||
[[module.mounts]]
|
||||
source = 'component-library/helpers'
|
||||
target = 'layouts/partials/_bookshop/helpers'
|
||||
# ensures main package.json is always available, even when using workspaces
|
||||
# in workspaces, the package.json is pointing to the first imported module
|
||||
[[module.mounts]]
|
||||
@@ -147,6 +169,8 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
|
||||
source = "netlify.toml"
|
||||
target = "assets/config/netlify.toml"
|
||||
# toml-docs-start modules
|
||||
[[module.imports]]
|
||||
path = "github.com/cloudcannon/bookshop/hugo/v3"
|
||||
[[module.imports]]
|
||||
path = "github.com/gethinode/mod-bootstrap"
|
||||
[[module.imports]]
|
||||
|
||||
@@ -249,3 +249,25 @@
|
||||
frame-src = ["player.vimeo.com"]
|
||||
img-src = ["i.vimeocdn.com"]
|
||||
script-src = ["player.vimeo.com"]
|
||||
|
||||
# define module integration
|
||||
[modules.bookshop]
|
||||
integration = "core"
|
||||
|
||||
# provide default hero settings
|
||||
[modules.bookshop.hero]
|
||||
align = "start"
|
||||
# backdrop = "/assets/img/nat-9l98kFByiao-unsplash.jpg"
|
||||
overlayMode = "dark"
|
||||
section = true
|
||||
default = ["section"]
|
||||
# default = ["page", "home", "section"]
|
||||
|
||||
[modules.bookshop.title]
|
||||
size = 4
|
||||
preheadingPlacement = "above"
|
||||
headingStyle = "display"
|
||||
bodyStyle = "lead text-muted"
|
||||
|
||||
[modules.bookshop.articles]
|
||||
moreButton = true
|
||||
|
||||
Reference in New Issue
Block a user