Merge pull request #456 from nunocoracao/dev

🔖 Release v2.26.0

.github/workflows/firebase-preview.yml

@@ -31,5 +31,5 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOWFISH_21FFF }}'
           expires: 30d
-          channelId: preview-${GITHUB_REF##*/}
+          channelId: preview-${{ github.event.number }}
           projectId: blowfish-21fff

assets/css/main.css

@@ -337,7 +337,7 @@ body:has(#menu-controller:checked) {
   @apply underline;
 }
 
-/* */
+/* Custom */
 
 .thumbnail {
   min-width: 300px;
@@ -447,3 +447,29 @@ body:has(#menu-controller:checked) {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
+
+.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
+.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
+.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
+.grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
+.grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
+.grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
+.grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
+.grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
+.grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
+.grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
+.grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
+.grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
+.grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
+.grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
+.grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
+.grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
+.grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
+.grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
+.grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
+.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 */
+.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */

config.toml

@@ -2,4 +2,4 @@
   [module.hugoVersion]
     extended = true
     min = "0.87.0 "
-    max = "0.109.0"
+    max = "0.110.0"

exampleSite/content/docs/shortcodes/index.md

@@ -39,7 +39,10 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 {{< /alert >}}
 
+<br/><br/><br/>
+
 ## 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 -->
@@ -51,12 +54,12 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 **Example:**
 
 ```md
-{{</* article link="/blowfish/docs/welcome/" */>}}
+{{</* article link="/docs/welcome/" */>}}
 ```
 
-{{< article link="/blowfish/docs/welcome/" >}}
-
+{{< article link="/docs/welcome/" >}}
 
+<br/><br/><br/>
 
 ## Badge
 
@@ -74,6 +77,8 @@ New article!
 New article!
 {{< /badge >}}
 
+<br/><br/><br/>
+
 ## Button
 
 `button` outputs a styled button component which can be used to highlight a primary action. It has two optional variables `href` and `target` which can be used to specify the URL and target of the link.
@@ -90,6 +95,38 @@ Call to action
 Call to action
 {{< /button >}}
 
+<br/><br/><br/>
+
+## 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 one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
+
+
+<!-- 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 images="{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" >}}
+
+<br/><br/><br/>
+
 ## 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.
@@ -126,6 +163,8 @@ data: {
 
 You can see some additional Chart.js examples on the [charts samples]({{< ref "charts" >}}) page.
 
+<br/><br/><br/>
+
 ## Figure
 
 Blowfish includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
@@ -167,6 +206,60 @@ 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/)" >}}
 
+<br/><br/><br/>
+
+## Gallery
+
+`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
+
+In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols.
+
+**Example:**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
+## 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.
+
+<!-- prettier-ignore-start -->
+| Parameter | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `repo`    | [String] github repo in the format of `username/repo` |
+<!-- prettier-ignore-end -->
+
+**Example 1:**
+
+```md
+{{</* github repo="nunocoracao/blowfish" */>}}
+```
+
+{{< github repo="nunocoracao/blowfish" >}}
+
+<br/><br/><br/>
+
 ## 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.
@@ -185,44 +278,7 @@ Custom icons can be added by providing your own icon assets in the `assets/icons
 
 Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
 
-## 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 -->
-| Parameter | Description                                             |
-| --------- | ------------------------------------------------------- |
-| `limit`   | **Required.** the number of recent articles to display. |
-| `where`   | the number of recent articles to display.               |
-| `value`   | the number of recent articles to display.               |
-
-<!-- prettier-ignore-end -->
-
-**Example #1:**
-```md
-{{</* list limit=2 */>}}
-```
-
-{{< list limit=2 >}}
-
-**Example #2:**
-```md
-{{</* list limit=2 where="Type" value="sample" */>}}
-```
-
-{{< list limit=2 where="Type" value="sample">}}
-
-
-## 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" */>}}
-```
-
-**Output**
-{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
-
+<br/><br/><br/>
 
 ## Katex
 
@@ -244,6 +300,8 @@ Inline notation can be generated by wrapping the expression in `\\(` and `\\)` d
 
 Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}}) page for more examples.
 
+<br/><br/><br/>
+
 ## Lead
 
 `lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
@@ -260,6 +318,39 @@ When life gives you lemons, make lemonade.
 When life gives you lemons, make lemonade.
 {{< /lead >}}
 
+<br/><br/><br/>
+
+## 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 -->
+| Parameter | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `limit`   | **Required.** the number of recent articles to display. |
+| `where`   | the number of recent articles to display.               |
+| `value`   | the number of recent articles to display.               |
+
+<!-- prettier-ignore-end -->
+
+**Example #1:**
+
+```md
+{{</* list limit=2 */>}}
+```
+
+{{< list limit=2 >}}
+
+**Example #2:**
+
+```md
+{{</* list limit=2 where="Type" value="sample" */>}}
+```
+
+{{< list limit=2 where="Type" value="sample">}}
+
+<br/><br/><br/>
+
 ## 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.
@@ -286,6 +377,23 @@ B-->C[Profit]
 
 You can see some additional Mermaid examples on the [diagrams and flowcharts samples]({{< ref "diagrams-flowcharts" >}}) page.
 
+<br/><br/><br/>
+
+## 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" */>}}
+```
+
+**Output**
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+<br/><br/><br/>
+
 ## 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. 
@@ -307,8 +415,6 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your
 
 <!-- prettier-ignore-end -->
 
-
-
 **Example 1:**
 
 ```md
@@ -341,7 +447,6 @@ Lorem ipsum dolor sit amet,
 consectetur adipiscing elit.
 {{< /typeit >}}
 
-
 **Example 3:**
 
 ```md
@@ -355,6 +460,7 @@ Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. 
 {{</* /typeit */>}}
 ```
+
 {{< typeit
   tag=h3
   speed=50
@@ -365,27 +471,3 @@ consectetur adipiscing elit.
 "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 >}}
-
-
-## GitHub Card
-
-[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. 
-
-Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your text within the `typeit` shortcode and use the following parameters to configure the behavior you want.
-
-<!-- prettier-ignore-start -->
-| Parameter | Description              |
-| --------- | ------------------------ |
-| `repor`     | [String] github repo in the format of `username/repo` |
-                                                                       
-<!-- prettier-ignore-end -->
-
-
-
-**Example 1:**
-
-```md
-{{</* github repo="nunocoracao/blowfish" */>}}
-```
-
-{{< github repo="nunocoracao/blowfish" >}}

exampleSite/content/users/index.md

@@ -61,9 +61,8 @@ Real websites that are built with Blowfish.
 | [blog.rotrixx.eu](https://blog.rotrixx.eu)                            | Personal site                |
 | [hexwiki.cz](https://hexwiki.cz/)                                     | Personal site                |
 | [alejandro-ao.com](https://alejandro-ao.com/)                         | Personal site                |
-
-
-
+| [adir1.com](https://adir1.com/)                                       | Personal site                |
+| [niklas-hartmann-dev.de](https://niklas-hartmann-dev.de/)             | Personal site                |
 
 {{< alert >}}
 

layouts/partials/vendor.html

@@ -46,3 +46,15 @@
 {{ $typeitLib := resources.Get "lib/typeit/typeit.umd.js" }}
 <script defer src="{{ $typeitLib.RelPermalink }}" integrity="{{ $typeitLib.Data.Integrity }}"></script>
 {{ end }}
+
+{{/* Packery */}}
+{{ if .Page.HasShortcode "gallery" }}
+{{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
+<script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+{{ end }}
+
+{{/* tw-elements */}}
+{{ if .Page.HasShortcode "carousel" }}
+{{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
+<script defer src="{{ $twelementsLib.RelPermalink }}" integrity="{{ $twelementsLib.Data.Integrity }}"></script>
+{{ end }}

layouts/shortcodes/alert.html

@@ -1,5 +1,5 @@
 <div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="text-primary-400 ltr:pr-3 rtl:pl-3">
+  <span class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center">
     {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
   </span>
   <span class="dark:text-neutral-300">

layouts/shortcodes/carousel.html

@@ -0,0 +1,43 @@
+{{ $time := now.UnixNano }}
+{{ $id := delimit (slice "gallery" $time) "-" }}
+{{ $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 $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>
+
+        {{ $num = add $num 1 }}
+        {{ end }}
+
+    </div>
+    <div class="carousel-inner relative w-full overflow-hidden">
+
+        {{ $num := 0 }}
+        {{ range $images }}
+
+        <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 }}
+        {{ end }}
+
+    </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="#{{ $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="#{{ $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>
+</div>

layouts/shortcodes/gallery.html

@@ -0,0 +1,18 @@
+{{ $time := now.UnixNano }}
+{{ $id := delimit (slice "gallery" $time) "-" }}
+
+<div id="{{ $id }}">
+  {{ .Inner }}
+</div>
+
+<script>
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var elem = document.querySelector('#{{ $id }}');
+    var pckry = new Packery(elem, {
+      percentPosition: true,
+      gutter: 5,
+      resize: true
+    });
+  });
+</script>

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "hugo-blowfish-theme",
-      "version": "2.24.0",
+      "version": "2.25.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.13",
         "@tailwindcss/forms": "^0.5.3",
-        "commander": "^9.5.0"
+        "commander": "^10.0.0"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.9",
@@ -22,11 +22,13 @@
         "jquery": "^3.6.3",
         "katex": "^0.16.4",
         "mermaid": "^9.3.0",
-        "prettier": "^2.8.2",
+        "packery": "^2.1.2",
+        "prettier": "^2.8.3",
         "prettier-plugin-go-template": "^0.0.13",
         "prettier-plugin-tailwindcss": "^0.2.1",
-        "rimraf": "^4.0.4",
+        "rimraf": "^4.1.1",
         "tailwindcss": "^3.2.4",
+        "tw-elements": "^1.0.0-alpha13",
         "typeit": "^8.7.1",
         "vendor-copy": "^3.0.1"
       }
@@ -98,6 +100,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -209,6 +221,25 @@
         "pnpm": "^7.0.0"
       }
     },
+    "node_modules/chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "dev": true,
+      "dependencies": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "node_modules/chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -251,17 +282,32 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-convert/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.0.tgz",
+      "integrity": "sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==",
       "engines": {
-        "node": "^12.20.0 || >=14"
+        "node": ">=14"
       }
     },
     "node_modules/cssesc": {
@@ -275,6 +321,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
+      "dev": true
+    },
     "node_modules/d3": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/d3/-/d3-7.7.0.tgz",
@@ -695,6 +747,15 @@
         "lodash-es": "^4.17.21"
       }
     },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -709,6 +770,21 @@
         "robust-predicates": "^3.0.0"
       }
     },
+    "node_modules/desandro-matches-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
+      "integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
+      "dev": true
+    },
+    "node_modules/detect-autofill": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
+      "integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==",
+      "dev": true,
+      "dependencies": {
+        "custom-event-polyfill": "^1.0.7"
+      }
+    },
     "node_modules/detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -741,6 +817,12 @@
       "integrity": "sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==",
       "dev": true
     },
+    "node_modules/ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -786,6 +868,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/fizzy-ui-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
+      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
+      "dev": true,
+      "dependencies": {
+        "desandro-matches-selector": "^2.0.0"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -813,6 +904,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/get-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
+      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
+      "dev": true
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -1043,6 +1140,15 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/moment-mini": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment-mini/-/moment-mini-2.24.0.tgz",
@@ -1091,11 +1197,38 @@
         "node": ">= 6"
       }
     },
+    "node_modules/outlayer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
+      "integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
+      "dev": true,
+      "dependencies": {
+        "ev-emitter": "^1.0.0",
+        "fizzy-ui-utils": "^2.0.0",
+        "get-size": "^2.0.2"
+      }
+    },
+    "node_modules/packery": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/packery/-/packery-2.1.2.tgz",
+      "integrity": "sha512-Coc+8Atz03c0iu1RK0PZIJMKcKrE4i9Z8UBBywqz7Dhy40mMPM5wMQfqO9P2eqFP+lxKjGMTHgRAwjBQc+AQ5w==",
+      "dev": true,
+      "dependencies": {
+        "get-size": "^2.0.2",
+        "outlayer": "^2.0.0"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/perfect-scrollbar": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
+      "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1120,6 +1253,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.18",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -1241,9 +1385,9 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prettier": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
-      "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -1382,9 +1526,9 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.0.4.tgz",
-      "integrity": "sha512-R0hoVr9xTwemarQjoWlNt/nb5dEGVTBhVdkRmEX2zEkT8T6onH0XKiGjuaC7rNNj/gYzY2p4NVRJ3sjO1ascHQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.1.1.tgz",
+      "integrity": "sha512-Z4Y81w8atcvaJuJuBB88VpADRH66okZAuEm+Jtaufa+s7rZmIz+Hik2G53kGaNytE7lsfXyWktTmfVz0H9xuDg==",
       "dev": true,
       "bin": {
         "rimraf": "dist/cjs/src/bin.js"
@@ -1521,6 +1665,99 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tw-elements": {
+      "version": "1.0.0-alpha13",
+      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha13.tgz",
+      "integrity": "sha512-lz1D583ZGDF4s8e89dmXkhfD8m2abgAlaK8/J6cAEm3DLxz7RtqKdunzja6xcKxDZO3bXEd6oGNdQ5QHpyCqrg==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.6.0",
+        "chart.js": "^2.9.4",
+        "chartjs-plugin-datalabels": "^0.7.0",
+        "deepmerge": "^4.2.2",
+        "detect-autofill": "^1.1.3",
+        "perfect-scrollbar": "^1.5.0",
+        "popper.js": "^1.16.1",
+        "tailwindcss": "~3.0.7"
+      }
+    },
+    "node_modules/tw-elements/node_modules/chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "dev": true,
+      "dependencies": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "node_modules/tw-elements/node_modules/chartjs-plugin-datalabels": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz",
+      "integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==",
+      "dev": true,
+      "peerDependencies": {
+        "chart.js": ">= 2.7.0 < 3"
+      }
+    },
+    "node_modules/tw-elements/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/tw-elements/node_modules/tailwindcss": {
+      "version": "3.0.24",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
+      "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+      "dev": true,
+      "dependencies": {
+        "arg": "^5.0.1",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.12",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
     "node_modules/typeit": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/typeit/-/typeit-8.7.1.tgz",
@@ -1633,6 +1870,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "dev": true
+    },
     "@tailwindcss/forms": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -1714,6 +1957,25 @@
         "@kurkle/color": "^0.3.0"
       }
     },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "dev": true,
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1744,21 +2006,44 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        }
+      }
+    },
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.0.tgz",
+      "integrity": "sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA=="
     },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
+      "dev": true
+    },
     "d3": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/d3/-/d3-7.7.0.tgz",
@@ -2071,6 +2356,12 @@
         "lodash-es": "^4.17.21"
       }
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -2085,6 +2376,21 @@
         "robust-predicates": "^3.0.0"
       }
     },
+    "desandro-matches-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
+      "integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
+      "dev": true
+    },
+    "detect-autofill": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
+      "integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==",
+      "dev": true,
+      "requires": {
+        "custom-event-polyfill": "^1.0.7"
+      }
+    },
     "detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -2111,6 +2417,12 @@
       "integrity": "sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==",
       "dev": true
     },
+    "ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -2149,6 +2461,15 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "fizzy-ui-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
+      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
+      "dev": true,
+      "requires": {
+        "desandro-matches-selector": "^2.0.0"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2166,6 +2487,12 @@
       "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
       "dev": true
     },
+    "get-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
+      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
+      "dev": true
+    },
     "glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2346,6 +2673,12 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "dev": true
+    },
     "moment-mini": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment-mini/-/moment-mini-2.24.0.tgz",
@@ -2379,11 +2712,38 @@
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
     },
+    "outlayer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
+      "integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
+      "dev": true,
+      "requires": {
+        "ev-emitter": "^1.0.0",
+        "fizzy-ui-utils": "^2.0.0",
+        "get-size": "^2.0.2"
+      }
+    },
+    "packery": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/packery/-/packery-2.1.2.tgz",
+      "integrity": "sha512-Coc+8Atz03c0iu1RK0PZIJMKcKrE4i9Z8UBBywqz7Dhy40mMPM5wMQfqO9P2eqFP+lxKjGMTHgRAwjBQc+AQ5w==",
+      "dev": true,
+      "requires": {
+        "get-size": "^2.0.2",
+        "outlayer": "^2.0.0"
+      }
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "perfect-scrollbar": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
+      "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==",
+      "dev": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2399,6 +2759,12 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "dev": true
+    },
     "postcss": {
       "version": "8.4.18",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -2459,9 +2825,9 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "prettier": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
-      "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
       "dev": true
     },
     "prettier-plugin-go-template": {
@@ -2541,9 +2907,9 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "rimraf": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.0.4.tgz",
-      "integrity": "sha512-R0hoVr9xTwemarQjoWlNt/nb5dEGVTBhVdkRmEX2zEkT8T6onH0XKiGjuaC7rNNj/gYzY2p4NVRJ3sjO1ascHQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.1.1.tgz",
+      "integrity": "sha512-Z4Y81w8atcvaJuJuBB88VpADRH66okZAuEm+Jtaufa+s7rZmIz+Hik2G53kGaNytE7lsfXyWktTmfVz0H9xuDg==",
       "dev": true
     },
     "robust-predicates": {
@@ -2635,6 +3001,79 @@
         "is-number": "^7.0.0"
       }
     },
+    "tw-elements": {
+      "version": "1.0.0-alpha13",
+      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-alpha13.tgz",
+      "integrity": "sha512-lz1D583ZGDF4s8e89dmXkhfD8m2abgAlaK8/J6cAEm3DLxz7RtqKdunzja6xcKxDZO3bXEd6oGNdQ5QHpyCqrg==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.6.0",
+        "chart.js": "^2.9.4",
+        "chartjs-plugin-datalabels": "^0.7.0",
+        "deepmerge": "^4.2.2",
+        "detect-autofill": "^1.1.3",
+        "perfect-scrollbar": "^1.5.0",
+        "popper.js": "^1.16.1",
+        "tailwindcss": "~3.0.7"
+      },
+      "dependencies": {
+        "chart.js": {
+          "version": "2.9.4",
+          "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+          "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+          "dev": true,
+          "requires": {
+            "chartjs-color": "^2.1.0",
+            "moment": "^2.10.2"
+          }
+        },
+        "chartjs-plugin-datalabels": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz",
+          "integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==",
+          "dev": true,
+          "requires": {}
+        },
+        "postcss-nested": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+          "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+          "dev": true,
+          "requires": {
+            "postcss-selector-parser": "^6.0.6"
+          }
+        },
+        "tailwindcss": {
+          "version": "3.0.24",
+          "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
+          "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+          "dev": true,
+          "requires": {
+            "arg": "^5.0.1",
+            "chokidar": "^3.5.3",
+            "color-name": "^1.1.4",
+            "detective": "^5.2.0",
+            "didyoumean": "^1.2.2",
+            "dlv": "^1.1.3",
+            "fast-glob": "^3.2.11",
+            "glob-parent": "^6.0.2",
+            "is-glob": "^4.0.3",
+            "lilconfig": "^2.0.5",
+            "normalize-path": "^3.0.0",
+            "object-hash": "^3.0.0",
+            "picocolors": "^1.0.0",
+            "postcss": "^8.4.12",
+            "postcss-js": "^4.0.0",
+            "postcss-load-config": "^3.1.4",
+            "postcss-nested": "5.0.6",
+            "postcss-selector-parser": "^6.0.10",
+            "postcss-value-parser": "^4.2.0",
+            "quick-lru": "^5.1.1",
+            "resolve": "^1.22.0"
+          }
+        }
+      }
+    },
     "typeit": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/typeit/-/typeit-8.7.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "fullinstall": "npm run preinstall && npm install && npm run postinstall",
@@ -40,11 +40,13 @@
     "jquery": "^3.6.3",
     "katex": "^0.16.4",
     "mermaid": "^9.3.0",
-    "prettier": "^2.8.2",
+    "packery": "^2.1.2",
+    "prettier": "^2.8.3",
     "prettier-plugin-go-template": "^0.0.13",
     "prettier-plugin-tailwindcss": "^0.2.1",
-    "rimraf": "^4.0.4",
+    "rimraf": "^4.1.1",
     "tailwindcss": "^3.2.4",
+    "tw-elements": "^1.0.0-alpha13",
     "typeit": "^8.7.1",
     "vendor-copy": "^3.0.1"
   },
@@ -85,12 +87,20 @@
     {
       "from": "node_modules/jquery/dist/jquery.slim.min.js",
       "to": "assets/lib/jquery/jquery.slim.min.js"
+    },
+    {
+      "from": "node_modules/packery/dist/packery.pkgd.min.js",
+      "to": "assets/lib/packery/packery.pkgd.min.js"
+    },
+    {
+      "from": "node_modules/tw-elements/dist/js/index.min.js",
+      "to": "assets/lib/tw-elements/index.min.js"
     }
   ],
   "dependencies": {
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
     "@tailwindcss/forms": "^0.5.3",
-    "commander": "^9.5.0"
+    "commander": "^10.0.0"
   }
 }

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     "./content/**/*.{html,md}",
     "./themes/blowfish/layouts/**/*.html",
     "./themes/blowfish/content/**/*.{html,md}",
+    "./node_modules/tw-elements/dist/js/**/*.js"
   ],
   darkMode: "class",
   theme: {
@@ -172,6 +173,7 @@ module.exports = {
   },
   plugins: [
     require("@tailwindcss/typography"),
-    require('@tailwindcss/forms')
+    require('@tailwindcss/forms'),
+    require('tw-elements/dist/plugin')
   ],
 };