fix: resize masonry layout after Disqus loaded

Author: g1eny0ung

assets/js/grid.js

@@ -5,6 +5,9 @@ function initGrid() {
     var msnry = new Masonry(grid, {
       itemSelector: '.dream-column'
     });
+    if (grid.classList.contains('dream-grid-about')) {
+      window.aboutMasonry = msnry;
+    }
     imagesLoaded(grid, function () {
       return msnry.layout();
     });

assets/js/main.js

@@ -15,7 +15,7 @@ document.addEventListener('alpine:init', function () {
       }
       setTimeout(function () {
         _this.setThemeForUtterances();
-      }, 6000); // Set a bigger timeout to make sure the utterances iframe is loaded.
+      }, 6000);
     },
     mql: window.matchMedia('(prefers-color-scheme: dark)'),
     on: 'n',

layouts/partials/back.html

@@ -1,4 +1,4 @@
-<div class="dream-grid">
+<div class="dream-grid dream-grid-about">
   {{ with site.GetPage "/about" }}
   {{ $aboutPages := .Resources.ByType "page" }}
   {{ range (sort $aboutPages "Date" "asc") }}

layouts/partials/disqus.html

@@ -6,6 +6,12 @@
         this.page.identifier = '{{ default .Identifier .Context.Params.disqus_identifier }}';
         this.page.title = '{{ default .Context.Title .Context.Params.disqus_title }}';
         this.page.url = '{{ default .Context.Permalink .Context.Params.disqus_url }}';
+
+        {{ if eq .Identifier "/" }}
+        this.callbacks.onReady.push(function () {
+            window.aboutMasonry.layout();
+        });
+        {{ end }}
     };
     function initDisqus() {
         if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "scripts": {
     "css": "tailwindcss -i ./src/input.css -o ./assets/css/output.css",
-    "js": "babel src --out-dir assets --presets=@babel/preset-env",
+    "js": "babel src --out-dir assets --presets=@babel/preset-env --no-comments",
     "build": "npm run css && npm run js",
     "watch": "conc \"npm:css -- -w\" \"npm:js -- -w\""
   },

src/js/grid.js

@@ -4,6 +4,12 @@ function initGrid() {
       itemSelector: '.dream-column',
     })
 
+    if (grid.classList.contains('dream-grid-about')) {
+      // Export Masonry instance to global scope for about page,
+      // currently used for resizing the grid after Disqus comments are loaded.
+      window.aboutMasonry = msnry
+    }
+
     imagesLoaded(grid, () => msnry.layout())
   })
 }