From a3fec52c02f6a5ff85042bece5547c7b11d99e91 Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:06:38 +0000
Subject: [PATCH 1/8] Remove old, unused file

---
 layouts/shortcodes/sliderOLD.html | 46 -------------------------------
 1 file changed, 46 deletions(-)
 delete mode 100644 layouts/shortcodes/sliderOLD.html

diff --git a/layouts/shortcodes/sliderOLD.html b/layouts/shortcodes/sliderOLD.html
deleted file mode 100644
index a5631619..00000000
--- a/layouts/shortcodes/sliderOLD.html
+++ /dev/null
@@ -1,46 +0,0 @@
-{{ $images := .Page.Resources.Match (.Get "pattern") }}
-{{ $id := .Get "id" }}
-
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
-
-<!-- Slider main container -->
-<div class="swiper swiper{{ $id }}">
-  <!-- Additional required wrapper -->
-  <div class="swiper-wrapper items-center">
-    <!-- Slides -->
-    {{ range $images }}
-    <div class="swiper-slide swiper-slide{{ $id }}">
-    <center>
-      <img src="{{ (.Resize "x300").RelPermalink }}" class="my-0 rounded-md">
-    </center>
-    </div>
-    {{ end }}
-
-  </div>
-  <!-- pagination -->
-  <div class="swiper-pagination swiper-pagination{{ $id }}"></div>
-
-  <!-- navigation buttons -->
-  <div class="swiper-button-prev swiper-button-prev{{ $id }} hover:text-neutral"></div>
-  <div class="swiper-button-next swiper-button-next{{ $id }} hover:text-neutral"></div>
-</div>
-
-<script>
-  new Swiper('.swiper{{ $id }}', {
-    direction: 'horizontal',
-    centeredSlides: true,
-    loop: true,
-    spaceBetween: 10,
-  
-    pagination: {
-      el: '.swiper-pagination{{ $id }}',
-      clickable: true,
-    },
-  
-    navigation: {
-      nextEl: '.swiper-button-next{{ $id }}',
-      prevEl: '.swiper-button-prev{{ $id }}',
-    },
-  });
-</script>
\ No newline at end of file

From 4a34e5076a4b3f0c6a60947a744d5811343df58f Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:08:40 +0000
Subject: [PATCH 2/8] Remove params table

---
 exampleSite/content/docs/shortcodes/index.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 6f5fb790..b3d8bb71 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -94,12 +94,6 @@ Call to action
 
 `carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using a ratio of `16:9`.
 
-<!-- prettier-ignore-start -->
-| Parameter | Description                                               |
-| --------- | --------------------------------------------------------- |
-| `images`  | This shortcode receives how many image paths as you want. |
-<!-- prettier-ignore-end -->
-
 **Example:**
 
 ```md

From ffa0ece61873c5ff2b8c855c1d811c10366980ee Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:08:49 +0000
Subject: [PATCH 3/8] Add dynamically generated ID

---
 layouts/shortcodes/carousel.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 91b333b2..9ce77a46 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -1,10 +1,13 @@
-<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
+{{ $time := now.UnixNano }}
+{{ $id := delimit (slice "gallery" $time) "-" }}
+
+<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
     <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
 
         {{ $num := 0 }}
         {{ range .Params }}
 
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ $num }}" 
+        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}" 
         {{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
 
         {{ $num = add $num 1 }}
@@ -25,13 +28,13 @@
     </div>
     <button
         class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
-        type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+        type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
         <span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </button>
     <button
         class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
-        type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+        type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
         <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </button>

From c5340d108f388445b4aafaa0122f880b7d40770d Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:10:53 +0000
Subject: [PATCH 4/8] Fix markdown linting issues.

---
 exampleSite/content/docs/shortcodes/index.md | 31 ++++++++------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index b3d8bb71..07a8ef3c 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -40,6 +40,7 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 {{< /alert >}}
 
 ## Article
+
 `Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.*
 
 <!-- prettier-ignore-start -->
@@ -56,8 +57,6 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 
 {{< article link="/docs/welcome/" >}}
 
-
-
 ## Badge
 
 `badge` outputs a styled badge component which is useful for displaying metadata.
@@ -102,8 +101,6 @@ Call to action
 
 {{< carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" "gallery/04.jpg" >}}
 
-
-
 ## Chart
 
 `chart` uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of [different chart styles](https://www.chartjs.org/docs/latest/samples/) and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.
@@ -181,7 +178,6 @@ Blowfish also supports automatic conversion of images included using standard Ma
 
 {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
 
-
 ## Gallery
 
 `gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
@@ -212,7 +208,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
   <img src="gallery/07.jpg" class="grid-w33" />
 {{< /gallery >}}
 
-
 ## GitHub Card
 
 `github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has.
@@ -231,7 +226,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 
 {{< github repo="nunocoracao/blowfish" >}}
 
-
 ## Icon
 
 `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.
@@ -287,6 +281,7 @@ When life gives you lemons, make lemonade.
 {{< /lead >}}
 
 ## List
+
 `List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value.
 
 <!-- prettier-ignore-start -->
@@ -299,6 +294,7 @@ When life gives you lemons, make lemonade.
 <!-- prettier-ignore-end -->
 
 **Example #1:**
+
 ```md
 {{</* list limit=2 */>}}
 ```
@@ -306,13 +302,13 @@ When life gives you lemons, make lemonade.
 {{< list limit=2 >}}
 
 **Example #2:**
+
 ```md
 {{</* list limit=2 where="Type" value="sample" */>}}
 ```
 
 {{< list limit=2 where="Type" value="sample">}}
 
-
 ## Mermaid
 
 `mermaid` allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.
@@ -340,9 +336,11 @@ B-->C[Profit]
 You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
 
 ## Swatches
+
 `swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each.
 
 **Example**
+
 ```md
 {{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
 ```
@@ -350,7 +348,6 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam
 **Output**
 {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
 
-
 ## TypeIt
 
 [TypeIt](https://www.typeitjs.com) is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML. 
@@ -372,8 +369,6 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your
 
 <!-- prettier-ignore-end -->
 
-
-
 **Example 1:**
 
 ```md
@@ -383,7 +378,7 @@ Lorem ipsum dolor sit amet
 ```
 
 {{< typeit >}}
-Lorem ipsum dolor sit amet 
+Lorem ipsum dolor sit amet
 {{< /typeit >}}
 
 **Example 2:**
@@ -398,15 +393,14 @@ consectetur adipiscing elit.
 {{</* /typeit */>}}
 ```
 
-{{< typeit 
+{{< typeit
   tag=h1
   lifeLike=true
 >}}
-Lorem ipsum dolor sit amet, 
-consectetur adipiscing elit. 
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
 {{< /typeit >}}
 
-
 **Example 3:**
 
 ```md
@@ -420,7 +414,8 @@ Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. 
 {{</* /typeit */>}}
 ```
-{{< typeit 
+
+{{< typeit
   tag=h3
   speed=50
   breakLines=false
@@ -429,4 +424,4 @@ consectetur adipiscing elit.
 "Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
 "I'm gonna make him an offer he can't refuse." The Godfather (1972)
 "Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
-{{< /typeit >}}
\ No newline at end of file
+{{< /typeit >}}

From 219daad731910ba780d28074f8ad1b832d621c22 Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:18:01 +0000
Subject: [PATCH 5/8] Define more aspect ratios

---
 assets/css/compiled/main.css | 12 ++++++++++++
 assets/css/main.css          |  4 +++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index ed6d7123..6a508a6a 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -6267,6 +6267,18 @@ body:has(#menu-controller:checked) {
 
 /* 16:9 Aspect Ratio */
 
+.ratio-21-9 {
+  padding-top: 42.85%;
+}
+
+/* 21:9 Aspect Ratio */
+
+.ratio-32-9 {
+  padding-top: 28.125%;
+}
+
+/* 32:9 Aspect Ratio */
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
diff --git a/assets/css/main.css b/assets/css/main.css
index c18c8861..600b64e0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -470,4 +470,6 @@ body:has(#menu-controller:checked) {
 .grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
 .grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
 
-.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
\ No newline at end of file
+.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
+.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
\ No newline at end of file

From 61f1e46f28c10e4a906afc284fef97cb85b20d02 Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:18:17 +0000
Subject: [PATCH 6/8] Add ability to customize the aspect ratio

---
 layouts/shortcodes/carousel.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 9ce77a46..769a2e5f 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -1,5 +1,6 @@
 {{ $time := now.UnixNano }}
 {{ $id := delimit (slice "gallery" $time) "-" }}
+{{ $aspect := default "ratio-16-9" (.Get "aspectRatio") }}
 
 <div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
     <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
@@ -19,7 +20,7 @@
         {{ $num := 0 }}
         {{ range .Params }}
 
-        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-16-9 single_hero_background"
+        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full {{ $aspect }}single_hero_background"
             style="background-image:url({{ . }})"
         ></div>
         {{ $num = add $num 1 }}

From 3904461926cf8aee47248dfedb430f3a092038a5 Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:35:19 +0000
Subject: [PATCH 7/8] Provide images as regex filter

---
 layouts/shortcodes/carousel.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 769a2e5f..928ace96 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -1,12 +1,13 @@
 {{ $time := now.UnixNano }}
 {{ $id := delimit (slice "gallery" $time) "-" }}
-{{ $aspect := default "ratio-16-9" (.Get "aspectRatio") }}
+{{ $aspect := default "16-9" (.Get "aspectRatio") }}
+{{ $images := .Page.Resources.Match (.Get "images") }}
 
 <div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
     <div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
 
         {{ $num := 0 }}
-        {{ range .Params }}
+        {{ range $images }}
 
         <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}" 
         {{ if eq $num 0 }} class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
@@ -18,9 +19,9 @@
     <div class="carousel-inner relative w-full overflow-hidden">
 
         {{ $num := 0 }}
-        {{ range .Params }}
+        {{ range $images }}
 
-        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full {{ $aspect }}single_hero_background"
+        <div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-{{ $aspect }} single_hero_background"
             style="background-image:url({{ . }})"
         ></div>
         {{ $num = add $num 1 }}

From 8a154a87aaff02877e7db693b6e9e929c672af21 Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 18 Jan 2023 09:36:10 +0000
Subject: [PATCH 8/8] Add docs

---
 exampleSite/content/docs/shortcodes/index.md | 24 ++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 07a8ef3c..8d89d391 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -91,15 +91,31 @@ Call to action
 
 ## Carousel
 
-`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using a ratio of `16:9`.
+`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
 
-**Example:**
+
+<!-- prettier-ignore-start -->
+| Parameter        | Description                                                                                                       |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `images`         | **Required.** A regex string to match image names.                                                                |
+| `aspectRatio`    | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
+<!-- prettier-ignore-end -->
+
+**Example 1:** 16:9 aspect ratio and verbose list of images
 
 ```md
-{{</* carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" */>}}
+{{</* carousel images="{gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}
 ```
 
-{{< carousel "gallery/03.jpg" "gallery/01.jpg" "gallery/02.jpg" "gallery/04.jpg" >}}
+{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
+
+**Example 2:** 21:9 aspect ratio and regex-ed list of images
+
+```md
+{{</* carousel images="gallery/*" aspectRatio="21-9" */>}}
+```
+
+{{< carousel images="gallery/*" aspectRatio="21-9" >}}
 
 ## Chart