Refactor bookshop components

component-library/components/about/about.bookshop.yml

@@ -30,6 +30,7 @@ blueprint:
     mode:
   order:
   width:
+  justify:
   link-type:
   links:
     -

component-library/components/about/about.hugo.html

@@ -26,7 +26,7 @@
         "link-type"    $args.linkType
         "links"        $args.links
         "orientation"  "horizontal"
-        "width"        (or .width 8)
+        "width"        (or $args.width 8)
         )
     }}
 {{- end -}}

component-library/components/articles/articles.bookshop.yml

@@ -43,3 +43,5 @@ blueprint:
   footer-style:
   orientation:
   class:
+  width:
+  justify:

component-library/components/articles/articles.hugo.html

@@ -62,7 +62,6 @@
 
 <!-- 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" }}
@@ -105,5 +104,4 @@
 		) -}}
 	{{ end }}
 	{{ partial $partial $params }}
-	</div>
 {{ end }}

component-library/components/cards/cards.bookshop.yml

@@ -30,3 +30,5 @@ blueprint:
       content:
   orientation:
   class:
+  width:
+  justify:

component-library/components/cards/cards.hugo.html

@@ -32,7 +32,6 @@
 {{ end}}
 
 {{ 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" (dict 
@@ -66,6 +65,5 @@
 		"orientation"  ($args.orientation | default "stacked")
 		"hook"         "assets/live-card.html"
 	) -}}
-	</div>
 {{ end }}
 

component-library/components/faq/faq.bookshop.yml

@@ -17,6 +17,8 @@ blueprint:
     width:
     size:
   contrast:
+  width:
+  justify:
   background:
     backdrop:
     color:

component-library/components/faq/faq.hugo.html

@@ -17,7 +17,6 @@
 {{ 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 
@@ -55,5 +54,4 @@
 			</div>
 		{{ end }}
 	</div>
-	</div>
 {{ end }}

component-library/components/hero/hero.bookshop.yml

@@ -38,3 +38,4 @@ blueprint:
   cover:
   orientation:
   width:
+  justify:

component-library/components/hero/hero.hugo.html

@@ -30,6 +30,7 @@
 		"links"        $args.links
 		"orientation"  $args.orientation
 		"width"        $args.width
+		"justify"      $args.justify
 		)
 	}}
 {{ end }}

component-library/components/releases/releases.bookshop.yml

@@ -21,4 +21,6 @@ blueprint:
     backdrop:
     color:
     subtle:
+  width:
+  justify:
   data:

component-library/components/separator/separator.hugo.html

@@ -16,5 +16,5 @@
 {{ end }}
 
 {{ if not $args.err }}
-    <div class="container-xxl p-0"{{ with $args.theme }} data-bs-theme="{{ . }}"{{ end }}><hr></div>
+    <hr>
 {{ end }}

component-library/components/video-message/video-message.bookshop.yml

@@ -39,6 +39,7 @@ blueprint:
       label:
   border:
   width:
+  justify:
 
 _structures:
   messages:

component-library/components/video-message/video-message.hugo.html

@@ -73,7 +73,7 @@
 	) -}}
 {{ end }}
 
-<div class="container-xxl p-4 px-xxl-0">
+{{ if not $args.err }}
 	{{ $list := slice }}
 
 	{{ range $args.messages }}
@@ -133,4 +133,4 @@
 			</div>
 		</div>
 	{{ end }}
-</div>
+{{ end }}

component-library/helpers/component.html

@@ -32,6 +32,9 @@
     {{- $background := index $component_props "background" -}}
     {{- $backdrop := "" -}}
     {{- $style := index $component_props "wrapper" -}}
+    {{- $width := index $component_props "width" -}}
+    {{- $justify := index $component_props "justify" | default "start" -}}
+    {{- $padding := "px-4 px-xxl-0 py-4" -}}
     {{- $wrapper := $style }}
     {{ with $background }}
         {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
@@ -59,7 +62,16 @@
         {{- if $backdrop -}}
             {{ partial "assets/live-image.html" (dict "src" $backdrop "class" (printf "background-img-fluid %s" $bgclass) "title" (T "backgroundImage")) }}
         {{- end -}}
+
+        {{ $col := cond (and $width (lt $width 12)) (printf "col-12 col-md-%d" $width) "" }}
+
+        <div class="container-xxl {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
+            {{ with $col }}
+                <div class="{{ . }}">{{ partial $resolved_component $component_props }}</div>
+            {{ else }}
                 {{ partial $resolved_component $component_props }}
+            {{ end}}
+        </div>
     </section>
     {{ "<!--bookshop-live end-->" | safeHTML }}
 {{- else -}}

data/structures/_arguments.yml

@@ -151,13 +151,6 @@ arguments:
         - full
         - title
         - none
-  # # TODO: rename bodyStyle
-  # bodyStyle:
-  #   type: string
-  #   optional: true
-  #   default: lead text-muted
-  #   comment: >-
-  #     Style of the body text, if any..
   border:
     type: bool
     optional: true
@@ -355,6 +348,12 @@ arguments:
       - template.HTML
     optional: true
     comment: Section content displayed below the title.
+  content-style:
+    type: string
+    optional: true
+    default: lead text-muted
+    comment: >-
+      Style of the section content, if any.
   contrast:
     type: bool
     default: false
@@ -572,17 +571,16 @@ arguments:
     optional: true
     comment: >-
       Heading of the content block, including a preheading and content element.
-  # # TODO: rename headingStyle
+  heading-style:
-  # headingStyle:
+    type: select
-  #   type: select
+    optional: true
-  #   optional: true
+    default: display
-  #   default: display
+    options:
-  #   options:
+      values:
-  #     values:
+        - display
-  #       - display
+        - fs
-  #       - fs
+    comment: >-
-  #   comment: >-
+      Style of the heading, either display style or regular style (fs).
-  #     Style of the heading, either display or fs (regular).
   # headline: 
   #   type: string
   #   optional: true
@@ -718,7 +716,7 @@ arguments:
     type: select
     optional: true
     default: center
-    comment: Justification of the link title and icon.
+    comment: Justification of the child elements.
     options:
       values:
         - start

data/structures/hero-image.yml

@@ -11,3 +11,4 @@ arguments:
   wrapper:
   class:
   image-overlay:
+  justify:

data/structures/hero.yml

@@ -15,6 +15,7 @@ arguments:
   cover:
   orientation:
   width:
+  justify:
   use-section:
   use-title:
   class:

data/structures/section-title.yml

@@ -3,124 +3,13 @@ arguments:
   heading:
   links:
   color:
-    type: select
-    comment: Text color of the section.
     default: body
-    optional: true
-    options:
-      values:
-        - body
-        - primary
-        - secondary
-        - black
-        - white
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the section title.
   size: 
-    type: int
-    optional: true
-    comment: Display size of the title.
-    options:
-      min: 1
-      max: 6
   use-title:
-    type: bool
-    optional: true
-    default: false
-    comment: Sets the title to an HTML header instead of a div.
   justify:
-    type: select
+  link-type:
-    comment: Justification of the link titles and icons.
+  use-section: 
-    optional: true
-    default: center
-    options:
-      values:
-        - start
-        - end
-        - center
-        - between
-        - around
-        - evenly
-  type:
-    type: select
-    optional: true
-    default: button
-    comment: Link type
-    options:
-      values:
-        - button
-        - link
-  section: 
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Trigger to use the current section as preheading, applies to single pages
-      only. Any preheading values takes precedence.
   arrangement:
-  headingStyle:
+  heading-style:
-    type: select
+  content-style:
-    optional: true
-    default: display
-    options:
-      values:
-        - display
-        - fs
-    comment: >-
-      Style of the heading, either display or fs (regular).
-  bodyStyle:
-    type: string
-    optional: true
-    default: lead text-muted
-    comment: >-
-      Style of the body text, if any..
-  # class:
-  #   type: string
-  #   optional: true
-  #   comment: Class attribute of the illustration, e.g. "col-6".
-  # image:
-  #   type: string
-  #   optional: true
-  #   comment: Image displayed on top of or adjacent to the headline.
-  # imageOverlay:
-  #   type: bool
-  #   optional: true
-  #   default: false
-  #   comment: Trigger to include an image overlay placeholder.
-  # ratio:
-  #   type: select
-  #   optional: true
-  #   default: 16x9
-  #   comment: >-
-  #     Ratio of the illustration, uses original aspect ratio by default.
-  #   options:
-  #     values:
-  #       - 1x1
-  #       - 3x2
-  #       - 4x3
-  #       - 16x9
-  #       - 21x9
-  # anchor:
-  #   type: select
-  #   optional: true
-  #   comment: 
-  #     Anchor of the thumbnail's crop box, defaults to anchor value set in
-  #     `imaging` section of the site configuration (usually `Smart`).
-  #   options:
-  #     values:
-  #       - TopLeft
-  #       - Top
-  #       - TopRight
-  #       - Left
-  #       - Center
-  #       - Right
-  #       - BottomLeft
-  #       - Bottom
-  #       - BottomRight
-  #       - Smart
-  # icon:
-  #   type: string
-  #   optional: true
-  #   comment: Icon or animation displayed on top of or adjacent to the headline.

exampleSite/content/en/_index.md

@@ -8,7 +8,7 @@ content_blocks:
       title: Welcome to Hinode!
       content: |-
         A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-      align: start
+      width: 6
     background:
       color: primary
       subtle: true
@@ -16,12 +16,12 @@ content_blocks:
       image: /img/sunrise.jpg
       ratio: 16x9
     width: 8
-    width: 6
     links:
       - title: About
         url: about
         icon: fas chevron-right
     orientation: horizontal
+    justify: center
 
   - _bookshop_name: articles
     heading:

exampleSite/hugo_stats.json

@@ -100,7 +100,7 @@
       "bg-body",
       "bg-body-tertiary",
       "bg-danger",
-      "bg-info",
+      "bg-info-subtle",
       "bg-opacity-10",
       "bg-primary",
       "bg-primary-subtle",
@@ -173,7 +173,7 @@
       "col-lg-2",
       "col-lg-4",
       "col-lg-8",
-      "col-md-",
+      "col-md-10",
       "col-md-12",
       "col-md-2",
       "col-md-3",
@@ -185,9 +185,6 @@
       "col-sm-12",
       "col-sm-3",
       "col-sm-6",
-      "col-sm-9",
-      "col-xl-10",
-      "col-xl-2",
       "collapse",
       "collapsed",
       "container",
@@ -232,6 +229,7 @@
       "fa-angle-left",
       "fa-arrow-left",
       "fa-arrow-right",
+      "fa-book-open",
       "fa-bootstrap",
       "fa-chevron-right",
       "fa-circle",
@@ -239,12 +237,14 @@
       "fa-circle-play",
       "fa-circle-question",
       "fa-code",
+      "fa-display",
       "fa-divide",
       "fa-docker",
       "fa-ellipsis",
       "fa-face-frown",
       "fa-facebook",
       "fa-fluid",
+      "fa-font-awesome",
       "fa-fw",
       "fa-github",
       "fa-globe",
@@ -257,6 +257,7 @@
       "fa-link",
       "fa-linkedin",
       "fa-magnifying-glass",
+      "fa-markdown",
       "fa-medium",
       "fa-moon",
       "fa-rocket",
@@ -330,6 +331,7 @@
       "justify-content-between",
       "justify-content-center",
       "justify-content-end",
+      "justify-content-md-start",
       "justify-content-start",
       "katex",
       "label",
@@ -343,6 +345,7 @@
       "link-warning",
       "lottie-animation",
       "m-0",
+      "m-auto",
       "m-md-n4",
       "m-n1",
       "main-content",
@@ -410,6 +413,7 @@
       "pb-3",
       "pb-4",
       "pb-5",
+      "pe-0",
       "pe-1",
       "pe-3",
       "pe-5",
@@ -568,10 +572,10 @@
       "animatie",
       "animation",
       "arguments",
+      "automated",
       "background-type",
       "badge",
       "barre-de-navigation",
-      "bento-layout",
       "block-diagram",
       "blog",
       "body-docs-collapse-15",
@@ -587,6 +591,7 @@
       "carousel-0",
       "carrousel",
       "carte",
+      "check-our-guides-to-get-you-started",
       "chronologie",
       "class-diagram",
       "cloudinary",
@@ -598,158 +603,48 @@
       "container",
       "content-blocks",
       "cookies-etc",
+      "creating-your-website-has-never-been-easier",
       "custom-activity",
       "data-tables",
       "docs",
       "documentation",
       "elements-type",
+      "embrace-the-power-of-open-source",
       "entity-relationship-diagram",
       "example",
-      "examples",
       "exemple",
       "fa-address-card",
       "fa-face-frown",
+      "fa-font-awesome",
       "fa-square-check",
       "fab-bootstrap",
       "fab-docker",
       "fab-facebook",
       "fab-github",
       "fab-linkedin",
+      "fab-markdown",
       "fab-medium",
       "fab-whatsapp",
       "fab-x-twitter",
-      "faq-0207ac25368a51b555ace9fb5d535d51",
+      "faq-0abf40cc31a1ba25c37c7b3c0cd375e6",
-      "faq-0207ac25368a51b555ace9fb5d535d51-heading-faq-0207ac25368a51b555ace9fb5d535d51",
+      "faq-0abf40cc31a1ba25c37c7b3c0cd375e6-heading-faq-0abf40cc31a1ba25c37c7b3c0cd375e6",
-      "faq-0207ac25368a51b555ace9fb5d535d51-item-0",
+      "faq-0abf40cc31a1ba25c37c7b3c0cd375e6-item-0",
-      "faq-0207ac25368a51b555ace9fb5d535d51-item-1",
+      "faq-0abf40cc31a1ba25c37c7b3c0cd375e6-item-1",
-      "faq-0207ac25368a51b555ace9fb5d535d51-item-2",
+      "faq-0abf40cc31a1ba25c37c7b3c0cd375e6-item-2",
-      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd",
-      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-heading-faq-0d9cad3dcfdbf86c0dd499efd640f5fd",
-      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-item-0",
-      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-item-1",
-      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-item-2",
-      "faq-1d09cf5c427b65f8401538f5c27cd79a",
-      "faq-1d09cf5c427b65f8401538f5c27cd79a-heading-faq-1d09cf5c427b65f8401538f5c27cd79a",
-      "faq-1d09cf5c427b65f8401538f5c27cd79a-item-0",
-      "faq-1d09cf5c427b65f8401538f5c27cd79a-item-1",
-      "faq-1d09cf5c427b65f8401538f5c27cd79a-item-2",
-      "faq-23d1dc823666431d94080a47fbe2f135",
-      "faq-23d1dc823666431d94080a47fbe2f135-heading-faq-23d1dc823666431d94080a47fbe2f135",
-      "faq-23d1dc823666431d94080a47fbe2f135-item-0",
-      "faq-23d1dc823666431d94080a47fbe2f135-item-1",
-      "faq-23d1dc823666431d94080a47fbe2f135-item-2",
-      "faq-2a2e900fbf55c94afccd3e0096d75d43",
-      "faq-2a2e900fbf55c94afccd3e0096d75d43-heading-faq-2a2e900fbf55c94afccd3e0096d75d43",
-      "faq-2a2e900fbf55c94afccd3e0096d75d43-item-0",
-      "faq-2a2e900fbf55c94afccd3e0096d75d43-item-1",
-      "faq-2a2e900fbf55c94afccd3e0096d75d43-item-2",
-      "faq-385e9a800872a4ef6fc41f292e5ecad0",
-      "faq-385e9a800872a4ef6fc41f292e5ecad0-heading-faq-385e9a800872a4ef6fc41f292e5ecad0",
-      "faq-385e9a800872a4ef6fc41f292e5ecad0-item-0",
-      "faq-385e9a800872a4ef6fc41f292e5ecad0-item-1",
-      "faq-385e9a800872a4ef6fc41f292e5ecad0-item-2",
-      "faq-3ac1e6c7e282c0c3498e241151e870a3",
-      "faq-3ac1e6c7e282c0c3498e241151e870a3-heading-faq-3ac1e6c7e282c0c3498e241151e870a3",
-      "faq-3ac1e6c7e282c0c3498e241151e870a3-item-0",
-      "faq-3ac1e6c7e282c0c3498e241151e870a3-item-1",
-      "faq-3ac1e6c7e282c0c3498e241151e870a3-item-2",
-      "faq-3c82f796666ad7126f45191d8686190a",
-      "faq-3c82f796666ad7126f45191d8686190a-heading-faq-3c82f796666ad7126f45191d8686190a",
-      "faq-3c82f796666ad7126f45191d8686190a-item-0",
-      "faq-3c82f796666ad7126f45191d8686190a-item-1",
-      "faq-3c82f796666ad7126f45191d8686190a-item-2",
-      "faq-42527a8d6149bcb25ba67974f251c9c7",
-      "faq-42527a8d6149bcb25ba67974f251c9c7-heading-faq-42527a8d6149bcb25ba67974f251c9c7",
-      "faq-42527a8d6149bcb25ba67974f251c9c7-item-0",
-      "faq-42527a8d6149bcb25ba67974f251c9c7-item-1",
-      "faq-42527a8d6149bcb25ba67974f251c9c7-item-2",
-      "faq-459acb940e821ec7b38b2425729753a7",
-      "faq-459acb940e821ec7b38b2425729753a7-heading-faq-459acb940e821ec7b38b2425729753a7",
-      "faq-459acb940e821ec7b38b2425729753a7-item-0",
-      "faq-459acb940e821ec7b38b2425729753a7-item-1",
-      "faq-459acb940e821ec7b38b2425729753a7-item-2",
-      "faq-4816264872fdc6847c6a813550673dd0",
-      "faq-4816264872fdc6847c6a813550673dd0-heading-faq-4816264872fdc6847c6a813550673dd0",
-      "faq-4816264872fdc6847c6a813550673dd0-item-0",
-      "faq-4816264872fdc6847c6a813550673dd0-item-1",
-      "faq-4816264872fdc6847c6a813550673dd0-item-2",
-      "faq-501f4a6b834aa1a24043fb5b9f9928c2",
-      "faq-501f4a6b834aa1a24043fb5b9f9928c2-heading-faq-501f4a6b834aa1a24043fb5b9f9928c2",
-      "faq-501f4a6b834aa1a24043fb5b9f9928c2-item-0",
-      "faq-501f4a6b834aa1a24043fb5b9f9928c2-item-1",
-      "faq-501f4a6b834aa1a24043fb5b9f9928c2-item-2",
-      "faq-524a2784206986528a599f1fad6821f4",
-      "faq-524a2784206986528a599f1fad6821f4-heading-faq-524a2784206986528a599f1fad6821f4",
-      "faq-524a2784206986528a599f1fad6821f4-item-0",
-      "faq-524a2784206986528a599f1fad6821f4-item-1",
-      "faq-524a2784206986528a599f1fad6821f4-item-2",
-      "faq-53c9868792ab3037787bf28bb9675fa4",
-      "faq-53c9868792ab3037787bf28bb9675fa4-heading-faq-53c9868792ab3037787bf28bb9675fa4",
-      "faq-53c9868792ab3037787bf28bb9675fa4-item-0",
-      "faq-53c9868792ab3037787bf28bb9675fa4-item-1",
-      "faq-53c9868792ab3037787bf28bb9675fa4-item-2",
-      "faq-74cbe70765110cf6e9067513ca5741c2",
-      "faq-74cbe70765110cf6e9067513ca5741c2-heading-faq-74cbe70765110cf6e9067513ca5741c2",
-      "faq-74cbe70765110cf6e9067513ca5741c2-item-0",
-      "faq-74cbe70765110cf6e9067513ca5741c2-item-1",
-      "faq-74cbe70765110cf6e9067513ca5741c2-item-2",
-      "faq-90908ae510b7d45ff54c4b6c9c8ca008",
-      "faq-90908ae510b7d45ff54c4b6c9c8ca008-heading-faq-90908ae510b7d45ff54c4b6c9c8ca008",
-      "faq-90908ae510b7d45ff54c4b6c9c8ca008-item-0",
-      "faq-90908ae510b7d45ff54c4b6c9c8ca008-item-1",
-      "faq-90908ae510b7d45ff54c4b6c9c8ca008-item-2",
-      "faq-9801f2465268421d28e3a2e740e301ba",
-      "faq-9801f2465268421d28e3a2e740e301ba-heading-faq-9801f2465268421d28e3a2e740e301ba",
-      "faq-9801f2465268421d28e3a2e740e301ba-item-0",
-      "faq-9801f2465268421d28e3a2e740e301ba-item-1",
-      "faq-9801f2465268421d28e3a2e740e301ba-item-2",
-      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d",
-      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-heading-faq-c4ef1fd75a3eb53e09b547b23bc8dc7d",
-      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-item-0",
-      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-item-1",
-      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-item-2",
-      "faq-d47a09f567ff25b85143b638bc68d60f",
-      "faq-d47a09f567ff25b85143b638bc68d60f-heading-faq-d47a09f567ff25b85143b638bc68d60f",
-      "faq-d47a09f567ff25b85143b638bc68d60f-item-0",
-      "faq-d47a09f567ff25b85143b638bc68d60f-item-1",
-      "faq-d47a09f567ff25b85143b638bc68d60f-item-2",
-      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb",
-      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-heading-faq-dc8be8c7cb908eadcc4f0cb98b4709fb",
-      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-item-0",
-      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-item-1",
-      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-item-2",
-      "faq-df9f1eb3ec26e3252a2d045e833601d9",
-      "faq-df9f1eb3ec26e3252a2d045e833601d9-heading-faq-df9f1eb3ec26e3252a2d045e833601d9",
-      "faq-df9f1eb3ec26e3252a2d045e833601d9-item-0",
-      "faq-df9f1eb3ec26e3252a2d045e833601d9-item-1",
-      "faq-df9f1eb3ec26e3252a2d045e833601d9-item-2",
-      "faq-eafa3d5085c4f74847a727982753379e",
-      "faq-eafa3d5085c4f74847a727982753379e-heading-faq-eafa3d5085c4f74847a727982753379e",
-      "faq-eafa3d5085c4f74847a727982753379e-item-0",
-      "faq-eafa3d5085c4f74847a727982753379e-item-1",
-      "faq-eafa3d5085c4f74847a727982753379e-item-2",
-      "faq-eb4b749d4172f3bcae459d57f9d4cfb5",
-      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-heading-faq-eb4b749d4172f3bcae459d57f9d4cfb5",
-      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-item-0",
-      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-item-1",
-      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-item-2",
-      "faq-ff66f007edb5cdfca29cb7a3e0b4795c",
-      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-heading-faq-ff66f007edb5cdfca29cb7a3e0b4795c",
-      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-item-0",
-      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-item-1",
-      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-item-2",
       "fas-1",
       "fas-2",
       "fas-3",
       "fas-angle-left",
       "fas-arrow-left",
       "fas-arrow-right",
+      "fas-book-open",
       "fas-chevron-right",
       "fas-circle",
       "fas-circle-check",
       "fas-circle-play",
       "fas-circle-question",
       "fas-code",
+      "fas-display",
       "fas-divide",
       "fas-ellipsis",
       "fas-globe",
@@ -767,6 +662,7 @@
       "fas-sun",
       "fas-timeline",
       "fas-up-right-from-square",
+      "fast",
       "fichier",
       "fil-dariane",
       "file",
@@ -780,7 +676,6 @@
       "git-graph",
       "groupe-de-boutons",
       "groupe-de-cartes",
-      "guides",
       "gérer-les-préférences-des-cookies",
       "heading",
       "heading-type",
@@ -813,6 +708,7 @@
       "messages-type",
       "mindmap",
       "more-type",
+      "multilingual",
       "nav",
       "nav-0-0",
       "nav-0-1",
@@ -830,6 +726,7 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
+      "optimized",
       "overview",
       "persona",
       "pie-chart",
@@ -841,7 +738,9 @@
       "que-sont-les-cookies-",
       "release",
       "requirement-chart",
+      "responsive",
       "réduire",
+      "secure",
       "security",
       "sequence-diagram",
       "spinner",

layouts/_partials/assets/card-group.html

@@ -136,8 +136,7 @@
 
 {{/* Main code */}}
 {{- if and (not $error) (or (gt (len $elements) 0) $args.cards) -}}
-<div class="{{- $args.wrapper -}}">
+    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0 {{ $args.wrapper }}">
-    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0">
         <div class="row g-{{ $args.gutter -}}
         {{- if $args.scroll }} d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end -}}
         {{- if $args.bento }}{{ with $args.valign }} align-items-{{ . }}{{ end }}{{ else }} {{ $colGrid }}{{ end }}">
@@ -198,5 +197,4 @@
             <a class="btn btn-outline-primary mt-4" href="{{ $href | safeURL }}" role="button">{{ $args.hrefTitle }}</a>
         {{- end -}}
     {{- end -}}
-</div>
 {{- end -}}

layouts/_partials/assets/card.html

@@ -148,19 +148,19 @@
     {{ if $thumbnail }}
         {{ if eq $args.orientation "horizontal-sm" }}
             {{ $stack = "fa-1x" }}
-            {{ $col1 = "col-4 col-md-2" }}
+            {{ $col1 = "col-4 col-md-2 pe-0" }}
             {{ $col2 = "col-8 col-md-10" }}
         {{ else }}
-            {{ $col1 = "col-4" }}
+            {{ $col1 = "col-4 pe-0" }}
             {{ $col2 = "col-8" }}
         {{ end }}
     {{ else if $icon }}
         {{ if eq $args.orientation "horizontal-sm" }}
             {{ $stack = "fa-1x" }}
-            {{ $col1 = "col-2 col-sm-3 col-md-4 col-xl-2" }}
+            {{ $col1 = "col-4 col-md-2 pe-0" }}
-            {{ $col2 = "col-10 col-sm-9 col-md-8 col-xl-10" }}
+            {{ $col2 = "col-8 col-md-10" }}
         {{ else }}
-            {{ $col1 = "col-4" }}
+            {{ $col1 = "col-4 pe-0" }}
             {{ $col2 = "col-8" }}
         {{ end }}
 

layouts/_partials/assets/hero-image.html

@@ -16,8 +16,8 @@
     )}}
 {{ end }}
 
-{{ if not $args.err }}
+{{ if and (not $args.err) (or $args.image $args.icon) }}
-    <div class="hero-image-container">
+    <div class="hero-image-container {{ with $args.justify }}d-flex justify-content-center justify-content-md-{{ . }}{{ end }}">
         {{ partial "assets/featured-illustration.html" (dict 
             "page"    $args.page
             "icon"    $args.icon

layouts/_partials/assets/hero.html

@@ -25,19 +25,17 @@
 
 {{/* Initialize local variables */}}
 {{ $align := $args.align }}
-{{ if and (not $align) (eq $args.orientation "stacked") }}{{ $align = "center" }}{{ end }}
+{{ $class := $args.class | default "" }}
-{{ $class := $args.class }}
 {{ $scale := $args.illustration.width }}
 
 {{ if $scale }}
-    {{ $class = trim (printf "%s col-%d " $class $scale) " " }}
+    {{ $class = trim (printf "%s col-%d text-center text-md-%s" $class $scale $align) " " }}
 {{ else }}
-    {{ $class = trim (printf "%s col-8 col-md-12" $class) " " }}
     {{ $scale = 12 }}
 {{ end }}
 
 {{ $iconWrapper := "col-6" }}
-{{ if $args.center }}{{ $iconWrapper = "col-6 mx-auto text-center" }}{{ end }}
+{{ $heading := cond (eq $args.orientation "horizontal") (merge $args.heading (dict "width" 12)) $args.heading }}
 
 {{ $sizes := "100vw" }}
 {{ if or (lt $args.width 12) (lt $scale 12) }}
@@ -58,7 +56,6 @@
 {{ end }}
 
 {{ if not $error }}
-    <div class="container-xxl {{ $args.padding }} d-flex flex-column">
     {{ if and $args.breadcrumb (not page.IsHome) }}
         <div class="d-flex flex-column align-items-{{ $align}} mb-4 pe-3">
             {{ if site.Params.env_bookshop_live }}
@@ -69,11 +66,13 @@
         </div>
     {{ end }}
 
-        {{ $imageWrapper := printf "mx-auto mx-md-0 %s" $class }}
+    {{ $imageWrapper := printf "mx-md-0 text-%s %s" $align $class }}
+    {{ $imageJustify := "" }}
     {{ if eq $args.orientation "stacked" }}
-            {{ $imageWrapper = printf "pt-5 %s" $class }}
+        {{ $imageWrapper = printf "pt-5 text-center %s" $class }}
-            {{ if $args.center }}{{ $imageWrapper = printf "%s mx-auto" $imageWrapper }}{{ end }}
         {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}
+    {{ else }}
+        {{ $imageJustify = $align }}
     {{ end }}
 
     {{ $sectionClass := cond (eq $args.orientation "stacked") "pt-5" "py-md-5" }}
@@ -91,29 +90,27 @@
         "wrapper"       $imageWrapper
         "class"         "hero-image"
         "image-overlay" $args.imageOverlay
+        "justify"       $imageJustify
     ) }}
 
     {{ $title := partial "assets/section-title.html" (dict
-            "heading"             $args.heading
+        "heading"     $heading
         "use-title"   $args.useTitle
         "size"        $args.size
         "links"       $args.links
-            "type"                (or $args.linkType $args.type)
+        "link-type"   (or $args.linkType $args.type)
         "class"       (printf "hero-title %s" $sectionClass)
         "arrangement" $arrangement
     ) }}
 
     {{ if eq $args.orientation "stacked" }}
         {{/* Render stacked component */}}
-            <div class="row flex-fill">
+
-                <div class="col col-12 col-md-{{ $args.width }}{{ if $args.center }} m-auto{{ end }}">
         {{ $illustration | safeHTML }}
         {{ $title | safeHTML }}
-                </div>
-            </div>
     {{ else }}
         {{/* Render horizontal component */}}
-            <div class="row row-cols-1 row-cols-md-2 flex-fill">
+        <div class="row row-cols-1 {{ if eq $args.orientation "stacked" }}row-cols-md-2 {{ end }} w-100">
             {{ $order1 := "order-1 order-md-0" }}
             {{ $order2 := "order-0 order-md-1" }}
             {{ if eq $args.order "first" }}
@@ -121,16 +118,15 @@
                 {{ $order2 = "order-0" }}
             {{ end }}
 
-                <div class="col col-12 col-md-{{ $args.width }} {{ $order1 }} my-md-auto pt-5 pt-md-0 hero-content">
+            {{ $imgWidth := sub 12 (or $args.heading.width 12) }}
+            {{ if lt $imgWidth 1 }}{{ $imgWidth = 1 }}{{ end }}
+
+            <div class="col col-12 col-md-{{sub 12 $imgWidth }} {{ $order1 }} my-md-auto pt-5 pt-md-0 hero-content">
                 {{ $title | safeHTML }}
             </div>
-                <div class="col col-10 col-md-{{ sub 12 $args.width }}
+            <div class="col col-8 col-md-{{ $imgWidth }} {{ $order2 }} m-auto my-md-auto align-self-end">
-                    {{ $order2 }}{{ if $args.center }} text-center{{ end }} my-md-auto align-self-end">
-                    <div>
                 {{ $illustration | safeHTML }}
             </div>
         </div>
-            </div>
     {{ end }}
-    </div>
 {{ end }}

layouts/_partials/assets/section-title.html

@@ -15,16 +15,15 @@
 {{ end }}
 
 {{/* Initialize local arguments */}}
-{{- $size := (or .size site.Params.modules.bookshop.title.size) | default 4 -}}
+{{- $size := (or $args.size site.Params.modules.bookshop.title.size) | default 4 -}}
-{{- $arrangement := (or .arrangement site.Params.modules.bookshop.title.arrangement) | default "above" -}}
+{{- $arrangement := (or $args.arrangement site.Params.modules.bookshop.title.arrangement) | default "above" -}}
-{{- $headingStyle := (or .headingStyle site.Params.modules.bookshop.title.headingStyle) | default "display" -}}
+{{- $headingStyle := (or $args.headingStyle site.Params.modules.bookshop.title.headingStyle) | default "display" -}}
-{{- $bodyStyle := (or .bodyStyle site.Params.modules.bookshop.title.bodyStyle) | default "lead text-muted" -}}
+{{- $contentStyle := (or $args.contentStyle site.Params.modules.bookshop.title.contentStyle) | default "lead text-muted" -}}
 {{- $preheading := $args.heading.preheading }}
 {{- $title := $args.heading.title }}
+{{- $width := $args.heading.width | default 12 -}}
 
-{{ if and (not $preheading) $args.section }}
+{{ if and (not $preheading) $args.useSection }}{{ $preheading = page.CurrentSection.Name }}{{ end }}
-    {{ $preheading = page.CurrentSection.Name }}
-{{ end }}
 
 {{ if site.Params.main.titleCase }}
     {{ $preheading = title $preheading }}
@@ -35,41 +34,76 @@
 
 {{ define "_partials/assets/section-title-header.html" }}
     {{ $headingStyle := .headingStyle }}
+
     {{ if (index . "use-title") }}
         {{ $title := .title | page.RenderString }}
         {{ $label := trim (replaceRE "\r\n?|\n" " " ($title | plainify)) " " }}
         <h1 id="{{ anchorize .title }}" {{ if ne $title $label }}aria-label="{{ $label }}"{{ end -}}        
-            class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">{{ .title | page.RenderString | safeHTML }}</h1>
+            class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
+                {{ .title | page.RenderString | safeHTML }}
+        </h1>
     {{ else }}
-        <div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">{{ .title | page.RenderString | safeHTML }}</div>
+        <div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
+            {{ .title | page.RenderString | safeHTML }}
+        </div>
     {{ end }}
 {{ end }}
 
-<!-- Main code -->
+{{ $header := "" }}
-<div class="text-{{ $args.heading.align }}{{ with $args.class }} {{ . }}{{ end }} col col-12 col-md-{{ $args.heading.width }}">
+{{ if $title }}
-    {{ if and $preheading (eq $arrangement "first") }}
+    {{ $header = partial "assets/section-title-header.html" (dict
-        <div class="container-fluid">
+        "use-title"    $args.useTitle
-            <div class="row">
+        "title"        $title
-                <div class="col-12 col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.next }}-2 p-0">
+        "headingStyle" $headingStyle
-                    {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
+        "color"        $args.color
-                </div>
+        "size"         $size
-                <div class="col-12 col-{{ $breakpoint.prev }}-8 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 p-0">
+    ) }}
-                    {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
+{{ end }}
-                    {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+
-                    {{ if .links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+{{ $links := "" }}
-                </div>
+{{ if $args.links }}
-                <div class="col-12 col-{{ $breakpoint.prev }}-4 col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 p-0 ps-{{ $breakpoint.prev }}-4">
+    {{ $links = partial "assets/links.html" (dict
-                    {{ partial "assets/featured-illustration.html" (dict 
+        "page"      $args.page
+        "links"     $args.links
+        "align"     $args.heading.align
+        "justify"   $args.justify
+        "link-type" $args.linkType
+    ) }}
+{{ end }}
+
+{{ $imgArgs := dict
     "page"    page
     "icon"    $args.icon
     "image"   $args.image
     "anchor"  $args.anchor
     "mode"    true
     "sizes"   "20vw"
-                        "wrapper" (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev)
     "title"   (T "heroImage")
     "mode"    $args.mode
-                    ) }}
+}}
+
+<!-- Main code -->
+<div class="text-{{ $args.heading.align }}{{ with $args.class }} {{ . }}{{ end }}{{ if lt $width 12 }} col-12 col-md-{{ $width }}{{ end }}">
+    {{ if and $preheading (eq $arrangement "first") }}
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.next }}-2 p-0">
+                    {{ with $preheading }}
+                        <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                            {{ . | page.RenderString | safeHTML }}
+                        </p>
+                    {{ end }}
+                </div>
+                <div class="col-12 col-{{ $breakpoint.prev }}-8 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 p-0">
+                    {{ $header }}
+                    {{ with $args.heading.content }}
+                        <div class="{{ $contentStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>
+                    {{ end }}
+                    {{ $links }}
+                </div>
+                <div class="col-12 col-{{ $breakpoint.prev }}-4 col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 p-0 ps-{{ $breakpoint.prev }}-4">
+                    {{ $wrapper := (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev) }}
+                    {{ partial "assets/featured-illustration.html" (merge $imgArgs (dict "wrapper" $wrapper)) }}
                 </div>
             </div>
         </div>
@@ -79,31 +113,29 @@
         <div class="container-fluid">
             <div class="row p-0">
                 <div class="col-12 col-{{ $breakpoint.current }}-10 p-0">
-                    {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
+                    {{ with $preheading }}
-                    {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
+                        <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
-                    {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+                            {{ . | page.RenderString | safeHTML }}
-                    {{ if .links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+                        </p>
+                    {{ end }}
+                    {{ $header }}
+                    {{ with $args.heading.content }}<div class="{{ $contentStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+                    {{ $links }}
                 </div>
                 <div class="col-12 col-{{ $breakpoint.current }}-2 p-0 pt-2 text-center">
-                    {{ partial "assets/featured-illustration.html" (dict 
+                    {{ $wrapper := (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev) }}
-                        "page"    page
+                    {{ partial "assets/featured-illustration.html" (merge $imgArgs (dict "ratio" $args.ratio "wrapper" "mx-auto")) }}
-                        "icon"    $args.icon
-                        "image"   $args.image
-                        "anchor"  $args.anchor
-                        "mode"    true
-                        "ratio"   $args.ratio
-                        "sizes"   "20vw"
-                        "wrapper" "mx-auto"
-                        "title"   (T "heroImage")
-                        "mode"    $args.mode
-                    ) }}
                 </div>
             </div>
         </div>
     {{ else }}
-        {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
+        {{ with $preheading }}
-        {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
+            <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
-        {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+                {{ . | page.RenderString | safeHTML }}
-        {{ if $args.links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+            </p>
+        {{ end }}
+        {{ $header }}
+        {{ with $args.heading.content }}<div class="{{ $contentStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+        {{ $links }}
     {{ end }}
 </div>

layouts/_partials/assets/timeline.html

@@ -102,7 +102,7 @@
             "use-title"   $args.useTitle
             "size"        $args.size
             "links"       $args.links
-            "type"        (or $args.linkType $args.type)
+            "link-type"   (or $args.linkType $args.type)
             "class"       "pb-4"
             "arrangement" $arrangement
         ) }}