Merge pull request #1126 from v20100v/dev

🐛 Shortcodes gallery (non-unique id, multiple loading <script> tag)

.gitignore

@@ -29,3 +29,4 @@ node_modules
 ._*
 .Spotlight-V100
 .Trashes
+.idea

assets/js/shortcodes/gallery.js

@@ -0,0 +1,24 @@
+function _getDefaultPackeryOptions() {
+    return {
+        percentPosition: true,
+        gutter: 5,
+        resize: true
+    };
+}
+
+(function init() {
+    window.addEventListener("DOMContentLoaded", (event) => {
+        console.groupCollapsed('[DEBUG] Gallery feature enable');
+        let packeries = [];
+        let nodeGalleries = document.querySelectorAll('.gallery');
+
+        nodeGalleries.forEach(nodeGallery => {
+            // TODO : implement a reader of Packery configuration _getPackeryOptions; for example by reading data-attribute
+            let packery = new Packery(nodeGallery, _getDefaultPackeryOptions());
+            packeries.push(packery);
+        });
+
+        console.log("Galleries founded and initialized with packery", packeries);
+        console.groupEnd();
+    });
+})();

layouts/partials/vendor.html

@@ -48,8 +48,12 @@
 
 {{/* Packery */}}
 {{ if .Page.HasShortcode "gallery" }}
-{{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
+    {{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
-<script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+    <script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+
+    {{ $jsShortcodeGallery := resources.Get "js/shortcodes/gallery.js" }}
+    {{ $jsShortcodeGallery = $jsShortcodeGallery | resources.Minify | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $jsShortcodeGallery.RelPermalink }}" integrity="{{ $jsShortcodeGallery.Data.Integrity }}"></script>
 {{ end }}
 
 {{/* tw-elements */}}

layouts/shortcodes/gallery.html

@@ -1,15 +1,6 @@
-{{ $id := delimit (slice "gallery" .Ordinal now.UnixNano) "-" }}
+{{ $random := delimit (shuffle (seq 1 9)) "" }}
+{{ $id := delimit (slice "gallery" $random now.UnixNano) "-" }}
 
-<div id="{{ $id }}">
+<div id="{{ $id }}" class="gallery">
   {{ .Inner }}
 </div>
-
-<script>
-  $(window).on("load", function () {
-    $('#{{ $id }}').packery({
-      percentPosition: true,
-      gutter: 5,
-      resize: true
-    });
-  })
-</script>

package.json

@@ -3,12 +3,12 @@
   "version": "2.47.2",
   "description": "Blowfish theme for Hugo",
   "scripts": {
-    "fullinstall": "npm run preinstall && npm install && npm run postinstall",
-    "preinstall": "rimraf assets/vendor",
     "postinstall": "vendor-copy",
     "assets": "rimraf assets/vendor && vendor-copy",
     "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
     "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
+    "dev-windows": "set NODE_ENV=development&&node ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
+    "build-windows": "set NODE_ENV=production&&node ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
     "build-hugo": "hugo --minify -s exampleSite --themesDir ../.. -d ../docs --baseURL https://nunocoracao.github.io/blowfish/",
     "example": "hugo server -E -F --minify --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/ -p 1313",
     "lighthouse": "lhci autorun"