From 1c68d9c6e79214d366fa67c8ecbbccbc782b7b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sat, 9 Aug 2025 15:33:59 +0200
Subject: feat(content): dynamic image list for bg

---
 src/component/ImageBackground.astro | 42 +++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

(limited to 'src/component/ImageBackground.astro')

diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro
index e69de29..9277472 100644
--- a/src/component/ImageBackground.astro
+++ b/src/component/ImageBackground.astro
@@ -0,0 +1,42 @@
+---
+
+---
+
+<div class="bg">
+  <slot/>
+</div>
+
+<script lang="js">
+  document.querySelectorAll(".bg").forEach((e) => {
+    const children = e.children;
+    const max = e.clientWidth;
+    const height = e.hasAttribute("data-height") ? e.getAttribute("data-height") : 400;
+    const newChildren = [];
+
+    let line = document.createElement("div");
+    let currentWidth = 0;
+    let i = 0;
+
+    const fn = () => {
+      let current = children[i++];
+      let ratio = current.clientWidth / current.clientHeight;
+      line.appendChild(current.cloneNode(true));
+      currentWidth += ratio * height;
+    }
+
+    while (i < children.length) {
+      // adding elements
+      while (i < children.length && currentWidth <= max) fn()
+      if (i < children.length) fn()
+      // setting height
+      let h = (max * height) / currentWidth;
+      line.style.height = `${h}px`;
+      newChildren.push(line);
+      if (i < children.length) {
+        line = document.createElement("div");
+        currentWidth = 0
+      }
+    }
+    e.replaceChildren(...newChildren);
+  });
+</script>
-- 
cgit v1.2.3