feat(batteur): background images

11 files changed, 95 insertions, 88 deletions

diff --git a/public/batteur/IMG_0520.jpg b/public/batteur/IMG_0520.jpg
new file mode 100644
index 0000000..c5e77ea
--- /dev/null
+++ b/public/batteur/IMG_0520.jpg
diff --git a/public/batteur/black_and_white.jpg b/public/batteur/black_and_white.jpg
new file mode 100644
index 0000000..f82c9d6
--- /dev/null
+++ b/public/batteur/black_and_white.jpg
diff --git a/public/batteur/dark_scene.jpg b/public/batteur/dark_scene.jpg
new file mode 100644
index 0000000..0444d60
--- /dev/null
+++ b/public/batteur/dark_scene.jpg
diff --git a/public/batteur/mid_outdoor.jpg b/public/batteur/mid_outdoor.jpg
new file mode 100644
index 0000000..ef6e06f
--- /dev/null
+++ b/public/batteur/mid_outdoor.jpg
diff --git a/public/batteur/mid_rock.jpg b/public/batteur/mid_rock.jpg
new file mode 100644
index 0000000..0142798
--- /dev/null
+++ b/public/batteur/mid_rock.jpg
diff --git a/public/batteur/mid_rock2.jpg b/public/batteur/mid_rock2.jpg
new file mode 100644
index 0000000..6923e31
--- /dev/null
+++ b/public/batteur/mid_rock2.jpg
diff --git a/public/batteur/old.jpg b/public/batteur/old.jpg
new file mode 100644
index 0000000..c526348
--- /dev/null
+++ b/public/batteur/old.jpg
diff --git a/public/batteur/old2.jpg b/public/batteur/old2.jpg
new file mode 100644
index 0000000..4d3aa74
--- /dev/null
+++ b/public/batteur/old2.jpg
diff --git a/public/batteur/recent.jpg b/public/batteur/recent.jpg
new file mode 100644
index 0000000..14ae682
--- /dev/null
+++ b/public/batteur/recent.jpg
diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro
index 9277472..d568172 100644
--- a/src/component/ImageBackground.astro
+++ b/src/component/ImageBackground.astro
@@ -1,42 +1,49 @@
 ---
-
+const { height = "400" } = Astro.props;
 ---
 
-<div class="bg">
-  <slot/>
+<div class="bg" data-height={height}>
+  <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 = [];
+<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;
+      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;
-    }
+      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
-      let h = (max * height) / currentWidth;
-      line.style.height = `${h}px`;
-      newChildren.push(line);
-      if (i < children.length) {
-        line = document.createElement("div");
-        currentWidth = 0
+      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);
-  });
+      e.replaceChildren(...newChildren);
+    });
+  };
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1d6dee5..b43b927 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,61 +4,61 @@ import ImageBackground from "../component/ImageBackground.astro";
 ---
 
 <html lang="fr">
-<head>
-  <meta charset="utf-8"/>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
-  <meta name="viewport" content="width=device-width"/>
-  <meta name="generator" content={Astro.generator}/>
-  <title>Arnaud Hergès</title>
-</head>
-<body>
-<header>
-  <h1>Arnaud Hergès</h1>
-  <div class="tags">
-    <p class="tag">batteur</p>
-    <p class="tag">-</p>
-    <p class="tag">compositeur</p>
-    <p class="tag">-</p>
-    <p class="tag">producteur</p>
-    <p class="tag">-</p>
-    <p class="tag">références</p>
-    <p class="tag">-</p>
-    <p class="tag">contact</p>
-  </div>
-</header>
-</body>
-<main>
-  <article class="batteur">
-    <ImageBackground>
-      <img src="https://placehold.co/600x400"/>
-      <img src="https://placehold.co/500x200"/>
-      <img src="https://placehold.co/400x400"/>
-      <img src="https://placehold.co/600x400"/>
-      <img src="https://placehold.co/800x400"/>
-      <img src="https://placehold.co/600x400"/>
-      <img src="https://placehold.co/600x400"/>
-      <img src="https://placehold.co/600x400"/>
-    </ImageBackground>
-    <div class="content">
-      <div class="content__header">
-        <h2>Batteur</h2>
-        <h3>Studio & Live</h3>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Arnaud Hergès</title>
+  </head>
+  <body>
+    <header>
+      <h1>Arnaud Hergès</h1>
+      <div class="tags">
+        <p class="tag">batteur</p>
+        <p class="tag">-</p>
+        <p class="tag">compositeur</p>
+        <p class="tag">-</p>
+        <p class="tag">producteur</p>
+        <p class="tag">-</p>
+        <p class="tag">références</p>
+        <p class="tag">-</p>
+        <p class="tag">contact</p>
       </div>
-      <p>
-        A tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40
-        ans que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos
-        séances des meilleures «&thinsp;rythmiques&thinsp;» possibles.
-      </p>
-      <p>
-        Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de
-        mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et
-        festivals et des dizaines de titres déjà enregistrés en studio.
-      </p>
-      <p>
-        Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques
-        ou enregistrés. Contactez-moi pour en parler&thinsp;!
-      </p>
-    </div>
-  </article>
-</main>
+    </header>
+  </body>
+  <main>
+    <article class="batteur">
+      <ImageBackground height="500">
+        <img src="/batteur/old.jpg" />
+        <img src="/batteur/dark_scene.jpg" />
+        <img src="/batteur/mid_rock.jpg" />
+        <img src="/batteur/black_and_white.jpg" />
+        <img src="/batteur/old2.jpg" />
+        <img src="/batteur/mid_outdoor.jpg" />
+        <img src="/batteur/mid_rock2.jpg" />
+        <img src="/batteur/recent.jpg" />
+      </ImageBackground>
+      <div class="content">
+        <div class="content__header">
+          <h2>Batteur</h2>
+          <h3>Studio & Live</h3>
+        </div>
+        <p>
+          A tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans
+          que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos
+          séances des meilleures «&thinsp;rythmiques&thinsp;» possibles.
+        </p>
+        <p>
+          Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de
+          mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et
+          festivals et des dizaines de titres déjà enregistrés en studio.
+        </p>
+        <p>
+          Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques ou
+          enregistrés. Contactez-moi pour en parler&thinsp;!
+        </p>
+      </div>
+    </article>
+  </main>
 </html>