feat: render full page completely in one request

1 files changed, 48 insertions, 74 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 5cf870f..d787c16 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -311,14 +311,50 @@
             switchTheme(savedTheme);
         </script>
 
-        <div
-            id="general-page-top-embeds"
-            class="flex"
-            hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
-            hx-trigger="load"
-            hx-target="this"
-            hx-swap="innerHTML"
-        ></div>
+        <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+        <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+        <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+        <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
+
+        <script>
+            // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
+            var __resetLayout = Packery.prototype._resetLayout;
+            Packery.prototype._resetLayout = function () {
+                __resetLayout.call(this);
+                var parentSize = getSize(this.element.parentNode);
+                var colW = this.columnWidth + this.gutter;
+                this.fitWidth =
+                    Math.floor((parentSize.innerWidth + this.gutter) / colW) *
+                    colW;
+                this.packer.width = this.fitWidth;
+                this.packer.height = Number.POSITIVE_INFINITY;
+                this.packer.reset();
+            };
+
+            Packery.prototype._getContainerSize = function () {
+                var emptyWidth = 0;
+                for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
+                    var space = this.packer.spaces[i];
+                    if (
+                        space.y === 0 &&
+                        space.height === Number.POSITIVE_INFINITY
+                    ) {
+                        emptyWidth += space.width;
+                    }
+                }
+
+                return {
+                    width: this.fitWidth - this.gutter - emptyWidth,
+                    height: this.maxY - this.gutter,
+                };
+            };
+
+            Packery.prototype.needsResizeLayout = function () {
+                return true;
+            };
+        </script>
+
+        <div id="general-page-top-embeds" class="flex">{{ .RenderedTopEmbeds }}</div>
         <div
             id="general-page-top-embeds-trigger"
             hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -492,11 +528,7 @@
                     <header
                         id="general-page-header"
                         class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col ml-8 basis-8"
-                        hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
-                        hx-trigger="load"
-                        hx-target="this"
-                        hx-swap="innerHTML"
-                    ></header>
+                    >{{ .RenderedHeader }}</header>
                     <div
                         id="general-page-header-trigger"
                         hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -512,11 +544,7 @@
                     <main
                         id="general-page-body"
                         class="relative flex-1 overflow-y-auto"
-                        hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
-                        hx-trigger="load"
-                        hx-target="this"
-                        hx-swap="innerHTML"
-                    ></main>
+                    >{{ .RenderedBody }}</main>
                     <div
                         id="general-page-body-trigger"
                         hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -528,11 +556,7 @@
                     <footer
                         id="general-page-footer"
                         class="flex flex-row basis-4 my-1"
-                        hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
-                        hx-trigger="load"
-                        hx-target="this"
-                        hx-swap="innerHTML"
-                    ></footer>
+                    >{{ .RenderedFooter }}</footer>
                     <div
                         id="general-page-footer-trigger"
                         hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
@@ -554,57 +578,7 @@
 
         <div class="grow bg-split-right"></div>
 
-        <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
-
-        <script>
-            // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
-            var __resetLayout = Packery.prototype._resetLayout;
-            Packery.prototype._resetLayout = function () {
-                __resetLayout.call(this);
-                var parentSize = getSize(this.element.parentNode);
-                var colW = this.columnWidth + this.gutter;
-                this.fitWidth =
-                    Math.floor((parentSize.innerWidth + this.gutter) / colW) *
-                    colW;
-                this.packer.width = this.fitWidth;
-                this.packer.height = Number.POSITIVE_INFINITY;
-                this.packer.reset();
-            };
-
-            Packery.prototype._getContainerSize = function () {
-                var emptyWidth = 0;
-                for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
-                    var space = this.packer.spaces[i];
-                    if (
-                        space.y === 0 &&
-                        space.height === Number.POSITIVE_INFINITY
-                    ) {
-                        emptyWidth += space.width;
-                    }
-                }
-
-                return {
-                    width: this.fitWidth - this.gutter - emptyWidth,
-                    height: this.maxY - this.gutter,
-                };
-            };
-
-            Packery.prototype.needsResizeLayout = function () {
-                return true;
-            };
-        </script>
-
-        <div
-            id="general-page-bottom-embeds"
-            class="flex"
-            hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
-            hx-trigger="load"
-            hx-target="this"
-            hx-swap="innerHTML"
-        ></div>
+        <div id="general-page-bottom-embeds" class="flex">{{ .RenderedBottomEmbeds }}</div>
         <div
             id="general-page-bottom-embeds-trigger"
             hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}"