wompmacho
5f86f08104
All checks were successful
deploy-docs / build-and-deploy (push) Successful in 46s
92 lines
2.5 KiB
Markdown
92 lines
2.5 KiB
Markdown
---
|
|
title: Infrastructure Diagrams
|
|
description: My Home Network Overview
|
|
showHero: false
|
|
showEditURL: true
|
|
author: wompmacho
|
|
date: '2023-07-04 05:33:31.158000+00:00'
|
|
lastmod: '2026-04-12'
|
|
tags: ['homelab', 'infrastructure', 'network']
|
|
---
|
|
|
|
[← Back to Homelab Infrastructure](./homelab_Infra.md)
|
|
|
|
---
|
|
|
|
## 2026 Home lab
|
|
|
|
{{< rawhtml >}}
|
|
|
|
<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 >}}
|
|
|
|
---
|
|
|
|
## 2024 Home Lab
|
|
|
|
|
|
|
|
---
|
|
|
|
## 2023 Home Lab
|
|
|
|
|
|
|
|
---
|
|
|
|
## 2020 Home Lab
|
|
|
|
|
|
|
|
---
|
|
|
|
## 2019 Home Lab
|
|
|
|
|
|
|
|
---
|