erge branch 'dev' into feature-shortcode-slider

.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/compiled/main.css

@@ -1667,6 +1667,10 @@ select {
   cursor: pointer;
 }
 
+.resize {
+  resize: both;
+}
+
 .list-none {
   list-style-type: none;
 }
@@ -2992,7 +2996,7 @@ body:has(#menu-controller:checked) {
   text-decoration-line: underline;
 }
 
-/* */
+/* Custom */
 
 .thumbnail {
   min-width: 300px;
@@ -3106,6 +3110,111 @@ body:has(#menu-controller:checked) {
   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-w66 {
+  width: calc(66% - 5px);
+  margin: 0px !important;
+}
+
+.grid-w65 {
+  width: calc(65% - 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;
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
@@ -3843,4 +3952,4 @@ body:has(#menu-controller:checked) {
   .\32xl\:grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
-}
+}

assets/css/main.css

@@ -337,7 +337,7 @@ body:has(#menu-controller:checked) {
   @apply underline;
 }
 
-/* */
+/* Custom */
 
 .thumbnail {
   min-width: 300px;
@@ -446,4 +446,26 @@ body:has(#menu-controller:checked) {
   text-decoration-line: underline;
   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; }

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

@@ -167,6 +167,38 @@ 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.
+
+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 >}}
+
+
 ## 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.
@@ -185,6 +217,7 @@ Blowfish also supports automatic conversion of images included using standard Ma
 
 {{< 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.

layouts/partials/vendor.html

@@ -45,4 +45,11 @@
 {{ if .Page.HasShortcode "typeit" }}
 {{ $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 }}

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

@@ -22,10 +22,11 @@
         "jquery": "^3.6.3",
         "katex": "^0.16.4",
         "mermaid": "^9.3.0",
+        "packery": "^2.1.2",
         "prettier": "^2.8.3",
         "prettier-plugin-go-template": "^0.0.13",
         "prettier-plugin-tailwindcss": "^0.2.1",
-        "rimraf": "^4.0.7",
+        "rimraf": "^4.1.0",
         "tailwindcss": "^3.2.4",
         "typeit": "^8.7.1",
         "vendor-copy": "^3.0.1"
@@ -709,6 +710,12 @@
         "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/detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -741,6 +748,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 +799,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 +835,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",
@@ -1091,6 +1119,27 @@
         "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",
@@ -1382,9 +1431,9 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "4.0.7",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.1.0.tgz",
-      "integrity": "sha512-CUEDDrZvc0swDgVdXGiv3FcYYQMpJxjvSGt85Amj6yU+MCVWurrLCeLiJDdJPHCzNJnwuebBEdcO//eP11Xa7w==",
+      "integrity": "sha512-ZJdkUR5/dRrRJHdcSKJLrpRn6tVjl9ALxd4yrTCxFsMpjQNzwHF6GLqMsuEzEYIXxHlFPDSk21Vr8VPuFBEz0g==",
       "dev": true,
       "bin": {
         "rimraf": "dist/cjs/src/bin.js"
@@ -2085,6 +2134,12 @@
         "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
+    },
     "detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -2111,6 +2166,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 +2210,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 +2236,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",
@@ -2379,6 +2455,27 @@
       "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",
@@ -2541,9 +2638,9 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "rimraf": {
-      "version": "4.0.7",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.1.0.tgz",
-      "integrity": "sha512-CUEDDrZvc0swDgVdXGiv3FcYYQMpJxjvSGt85Amj6yU+MCVWurrLCeLiJDdJPHCzNJnwuebBEdcO//eP11Xa7w==",
+      "integrity": "sha512-ZJdkUR5/dRrRJHdcSKJLrpRn6tVjl9ALxd4yrTCxFsMpjQNzwHF6GLqMsuEzEYIXxHlFPDSk21Vr8VPuFBEz0g==",
       "dev": true
     },
     "robust-predicates": {

package.json

@@ -40,10 +40,11 @@
     "jquery": "^3.6.3",
     "katex": "^0.16.4",
     "mermaid": "^9.3.0",
+    "packery": "^2.1.2",
     "prettier": "^2.8.3",
     "prettier-plugin-go-template": "^0.0.13",
     "prettier-plugin-tailwindcss": "^0.2.1",
-    "rimraf": "^4.0.7",
+    "rimraf": "^4.1.0",
     "tailwindcss": "^3.2.4",
     "typeit": "^8.7.1",
     "vendor-copy": "^3.0.1"
@@ -85,6 +86,10 @@
     {
       "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"
     }
   ],
   "dependencies": {