updating diagrams and infra docs to add a addEventListener for resize of the iframe. this will help resize the view when loaded on page

2026-06-06 21:10:15 +00:00
parent 94c8ec5bc8
commit 5f86f08104
2 changed files with 95 additions and 18 deletions
--- a/projects/homelab/diagrams.md
+++ b/projects/homelab/diagrams.md
@@ -16,13 +16,52 @@ tags: ['homelab', 'infrastructure', 'network']
 ## 2026 Home lab

 {{< rawhtml >}}
-<iframe
-  src="https://homelable.wompmacho.com/view?key=live"
-  width="100%"
-  height="700px"
-  style="border:none; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: auto;"
-  allowfullscreen>
-</iframe>
+
+<div class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
+  <iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
+</div>
+
+<script>
+  document.getElementById('homelabel-frame').addEventListener('load', function() {
+    const iframe = this;
+    const wrapper = iframe.parentElement;
+    
+    function scaleIframe() {
+      const targetWidth = wrapper.offsetWidth;
+      const screenWidth = window.innerWidth;
+      
+      // Dynamically determine what the "ideal" unscaled width of your 
+      // Homelabel dashboard should be based on the user's current screen.
+      let virtualWidth = 1400; // Default for large desktops
+      
+      if (screenWidth < 768) {
+        virtualWidth = 480;  // Mobile view baseline
+      } else if (screenWidth < 1200) {
+        virtualWidth = 900;  // Tablet/Small laptop baseline
+      }
+
+      // Calculate the scaling ratio
+      const scale = targetWidth / virtualWidth;
+
+      // Apply the 3D transform scale if the container is smaller than the target layout
+      if (scale < 1) {
+        iframe.style.width = virtualWidth + 'px';
+        iframe.style.height = (wrapper.offsetHeight / scale) + 'px';
+        iframe.style.transform = `scale(${scale})`;
+        iframe.style.transformOrigin = 'top left';
+      } else {
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.transform = 'none';
+      }
+    }
+
+    // Run on load and whenever the screen updates
+    scaleIframe();
+    window.addEventListener('resize', scaleIframe);
+  });
+</script>
+
 {{< /rawhtml >}}

 ---
--- a/projects/homelab/homelab_Infra.md
+++ b/projects/homelab/homelab_Infra.md
@@ -15,20 +15,58 @@ tags:

 This document outlines the internal infrastructure of the **wompmacho** homelab. The lab is built on a high-speed **10GbE backbone** and utilizes a hybrid architecture of dedicated NAS storage, Proxmox virtualization, and containerized services for media, self-hosting, and development.

-> [!TIP] Visual Guide
-> For a visual representation of the network and hardware layout, see the [Infrastructure Diagrams](diagrams.md).
+> [!TIP] **2026 Home lab Diagram**
+>
+> {{< rawhtml >}}

-## 2026 Home lab Diagram
+<div class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
+  <iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
+</div>
+
+<script>
+  document.getElementById('homelabel-frame').addEventListener('load', function() {
+    const iframe = this;
+    const wrapper = iframe.parentElement;
+    
+    function scaleIframe() {
+      const targetWidth = wrapper.offsetWidth;
+      const screenWidth = window.innerWidth;
+      
+      // Dynamically determine what the "ideal" unscaled width of your 
+      // Homelabel dashboard should be based on the user's current screen.
+      let virtualWidth = 1400; // Default for large desktops
+      
+      if (screenWidth < 768) {
+        virtualWidth = 480;  // Mobile view baseline
+      } else if (screenWidth < 1200) {
+        virtualWidth = 900;  // Tablet/Small laptop baseline
+      }
+
+      // Calculate the scaling ratio
+      const scale = targetWidth / virtualWidth;
+
+      // Apply the 3D transform scale if the container is smaller than the target layout
+      if (scale < 1) {
+        iframe.style.width = virtualWidth + 'px';
+        iframe.style.height = (wrapper.offsetHeight / scale) + 'px';
+        iframe.style.transform = `scale(${scale})`;
+        iframe.style.transformOrigin = 'top left';
+      } else {
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.transform = 'none';
+      }
+    }
+
+    // Run on load and whenever the screen updates
+    scaleIframe();
+    window.addEventListener('resize', scaleIframe);
+  });
+</script>

-{{< rawhtml >}}
-<iframe
-  src="https://homelable.wompmacho.com/view?key=live"
-  width="100%"
-  height="700px"
-  style="border:none; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: auto;"
-  allowfullscreen>
-</iframe>
 {{< /rawhtml >}}
+>
+> My homelab has constantly been evolving throughout the years. I have moved to this liveview presented by `homelabel`. For visual representation of my past network and hardware layouts, see the [Infrastructure Diagrams](diagrams.md).

 ---