fix: append footer on about page (#329)

* fix: append footer on about page

* 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/_default/baseof.html

@@ -33,14 +33,7 @@
           <div class="container">
             {{ block "main" . }} {{ end }}
 
-            {{ if site.Params.zenMode }}
-            <footer class="flex justify-between items-center gap-2 max-w-[65ch] mx-auto px-4 md:px-0 py-12">
-            {{ else }}
-            <footer class="flex justify-between items-center gap-2 px-4 py-12">
-            {{ end }}
-              {{ partial "footerLeft.html" . }}
-              {{ partial "footerRight.html" . }}
-            </footer>
+            {{ partial "footer.html" . }}
           </div>
         </div>
         <div class="back">
@@ -50,6 +43,8 @@
             {{ else }}
             {{ partial "back.html" . }}
             {{ end }}
+
+            {{ partial "footer.html" . }}
           </div>
         </div>
       </div>

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) {

layouts/partials/footer.html

@@ -0,0 +1,8 @@
+{{ if site.Params.zenMode }}
+<footer class="flex justify-between items-center gap-2 max-w-[65ch] mx-auto px-4 md:px-0 py-12">
+{{ else }}
+<footer class="flex justify-between items-center gap-2 px-4 py-12">
+{{ end }}
+  {{ partial "footerLeft.html" . }}
+  {{ partial "footerRight.html" . }}
+</footer>

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())
   })
 }