From 8f826e1843fcfd210fa036196a9efa4a4f7fe144 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sat, 9 Aug 2025 16:26:34 +0200
Subject: style(background): rename component into MosaicBackground

---
 src/component/ImageBackground.astro  | 49 ------------------------------------
 src/component/MosaicBackground.astro | 49 ++++++++++++++++++++++++++++++++++++
 src/pages/index.astro                |  6 ++---
 3 files changed, 52 insertions(+), 52 deletions(-)
 delete mode 100644 src/component/ImageBackground.astro
 create mode 100644 src/component/MosaicBackground.astro

(limited to 'src')

diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro
deleted file mode 100644
index d568172..0000000
--- a/src/component/ImageBackground.astro
+++ /dev/null
@@ -1,49 +0,0 @@
----
-const { height = "400" } = Astro.props;
----
-
-<div class="bg" data-height={height}>
-  <slot />
-</div>
-
-<script>
-  window.onload = () => {
-    // because Astro doesn't support defer
-    document.querySelectorAll(".bg").forEach((e) => {
-      const children = e.children;
-      const max = e.clientWidth;
-      const height = e.getAttribute("data-height");
-      const newChildren = [];
-      console.log(e.hasAttribute("data-height"));
-
-      let line = document.createElement("div");
-      let currentWidth = 0;
-      let i = 0;
-
-      const fn = () => {
-        let current = children[i++];
-        console.log(current.getBoundingClientRect().width, current.getBoundingClientRect().height);
-        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
-        console.log(currentWidth);
-        let h = (max * height) / currentWidth;
-        console.log(`${h}px`);
-        line.style.height = `${h - 1}px`;
-        newChildren.push(line);
-        if (i < children.length) {
-          line = document.createElement("div");
-          currentWidth = 0;
-        }
-      }
-      e.replaceChildren(...newChildren);
-    });
-  };
-</script>
diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
new file mode 100644
index 0000000..d568172
--- /dev/null
+++ b/src/component/MosaicBackground.astro
@@ -0,0 +1,49 @@
+---
+const { height = "400" } = Astro.props;
+---
+
+<div class="bg" data-height={height}>
+  <slot />
+</div>
+
+<script>
+  window.onload = () => {
+    // because Astro doesn't support defer
+    document.querySelectorAll(".bg").forEach((e) => {
+      const children = e.children;
+      const max = e.clientWidth;
+      const height = e.getAttribute("data-height");
+      const newChildren = [];
+      console.log(e.hasAttribute("data-height"));
+
+      let line = document.createElement("div");
+      let currentWidth = 0;
+      let i = 0;
+
+      const fn = () => {
+        let current = children[i++];
+        console.log(current.getBoundingClientRect().width, current.getBoundingClientRect().height);
+        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
+        console.log(currentWidth);
+        let h = (max * height) / currentWidth;
+        console.log(`${h}px`);
+        line.style.height = `${h - 1}px`;
+        newChildren.push(line);
+        if (i < children.length) {
+          line = document.createElement("div");
+          currentWidth = 0;
+        }
+      }
+      e.replaceChildren(...newChildren);
+    });
+  };
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a024571..99e3537 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import "../scss/style.scss";
-import ImageBackground from "../component/ImageBackground.astro";
+import MosaicBackground from "../component/MosaicBackground.astro";
 import VideoAuto from "../component/VideoAuto.astro";
 ---
 
@@ -30,7 +30,7 @@ import VideoAuto from "../component/VideoAuto.astro";
   </body>
   <main>
     <article class="batteur">
-      <ImageBackground height="500">
+      <MosaicBackground height="500">
         <img src="/batteur/old2.jpg" />
         <img src="/batteur/old3.jpg" />
         <img src="/batteur/dark_scene.jpg" />
@@ -43,7 +43,7 @@ import VideoAuto from "../component/VideoAuto.astro";
         <VideoAuto src="/batteur/video/balance.webm" />
         <img src="/batteur/mid_rock2.jpg" />
         <img src="/batteur/recent.jpg" />
-      </ImageBackground>
+      </MosaicBackground>
       <div class="content">
         <div class="content__header">
           <h2>Batteur</h2>
-- 
cgit v1.2.3