decaler la fleche

Reviewed-on: #19

.drone.yml

@@ -0,0 +1,62 @@
+kind: pipeline
+name: hugo build and deploy
+type: docker
+platform:
+  os: linux
+  arch: amd64
+trigger:
+  branch:
+    - prod
+
+steps:
+
+# BUILD
+- name: build hugo site
+  image: hugomods/hugo:0.111.3
+  settings:
+    hugo_version: 0.111.3
+    extended: true
+    validate: true
+    config: config.toml
+    content: content
+    output: ./public
+  commands:
+    - hugo --minify
+
+# PUSH FILES TO SERVER
+- name: deploy files on server
+  image: drillster/drone-rsync
+  settings:
+    hosts: ["92.243.16.7"]
+    target: /var/www/html/ltqf
+    source: public/*
+    user:
+      from_secret: RSYNC_USER
+    key:
+      from_secret: RSYNC_HOST_KEY
+
+# SEND MAIL NOTIF   
+- name: notify
+  image: drillster/drone-email
+  settings:
+    from.address: contact@legaragenumerique.fr
+    host: mail.gandi.net
+    port: 465
+    debug: true
+    username: contact@legaragenumerique.fr
+    password:
+      from_secret: MAIL_PASSWORD
+    recipients: [ contact@legaragenumerique.fr ]
+    subject: >
+      [{{ build.status }}]
+      {{ repo.owner }}/{{ repo.name }}      
+    body: >
+      📝 {{repo.name}} / {{commit.branch}} - {{commit.message}} <br />
+      {{#success build.status}}
+        ✅ succeeded  for 👷‍♂️ build {{build.number}}
+      {{else}}
+        🛑 failed for 👷‍♂️ build {{build.number}}
+      {{/success}}  
+      <br /><img src='https://www.legaragenumerique.fr/wp-content/uploads/2019/10/logo-web-garage_numerique.png'/>
+  when:
+    status: [ success, failure ]

assets/css/single-spectacle.css

@@ -16,7 +16,16 @@
     }
 }
 
+#galerie picture.goR {
+    visibility: hidden;
+    transition:
+        visibility .01s,
+        transform .01s;
+}
 
 #galerie picture {
-    transition: all 2s ease;
+    visibility: visible;
+    transition: 
+        transform 2s ease;
 }
+

assets/js/index-news-carousel.js

@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let currentIndex = 0;
+    const items = document.querySelectorAll('.newscarousel .newscarousel-item');
+    const totalItems = items.length;
+
+    function moveToNextItem() {
+        currentIndex = (currentIndex + 1) % totalItems;
+        updateCarousel();
+        }
+
+    function updateCarousel() {
+        items.forEach((item, index) => {
+        item.classList.remove('is-block');
+        item.classList.add('is-hidden');
+        if (index === currentIndex) {
+                item.classList.remove('is-hidden')
+                item.classList.add('is-block');
+                }
+            });
+        }
+const interval = 5000; // 3000ms = 3 seconds
+setInterval(moveToNextItem, interval);
+
+updateCarousel();
+});

assets/js/index-pics-carousel.js

@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let currentIndex = 0;
+    const items = document.querySelectorAll('.carousel-item');
+    const totalItems = items.length;
+
+    items.forEach((item, index) => {
+        if ( index !== 0 ) {
+            item.classList.add('is-invisible')
+            item.style.transform = "translateX(100%)";
+        } else {
+            item.classList.add('is-block')
+        };
+        item.style.transition = "transform 2s ease";
+    });
+
+    function moveToNextItem() {
+        currentIndex = (currentIndex + 1) % totalItems;
+        updateCarousel();
+    }
+
+    function updateCarousel() {
+        items.forEach((item, index) => {
+            if (index === currentIndex) {
+                item.classList.remove('is-invisible');
+                item.classList.add('is-block');
+                item.style.transform = "translateX(0)";
+            } else if (currentIndex === 0 && index === totalItems - 1) {
+                item.style.transform = "translateX(-100%)";
+            } else if (index === currentIndex -1) {
+                item.style.transform = "translateX(-100%)";
+            } else {
+                item.classList.remove('is-block');
+                item.classList.add('is-invisible');
+                item.style.transform = "translateX(100%)";
+            }
+        })
+    }
+    setInterval(moveToNextItem, 4000);
+});

assets/js/single-spectacle-carousel.js

@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var slider = document.querySelector('#galerie');
+    var items = slider.querySelectorAll('picture');
+    let itemWidth = items[0].offsetWidth;
+    let currentIndex = 0;
+
+    function moveItems() {
+        currentIndex = (currentIndex + 1);
+        let translationVector;
+        let transientTranslationVector;
+        let modIndex;
+        modIndex = currentIndex % items.length;
+        items.forEach((item, index) => {
+            //item.style.visibility = "visible";
+            if (modIndex < 2) {
+                if (index <= items.length + modIndex - 2) {
+                    if ((index == items.length + modIndex - 2)  && (currentIndex >= items.length)) {
+                        console.log("hide it");
+                        item.classList.add("goR");
+                        //item.style.visibility = "hidden";
+                        transientTranslationVector = (modIndex - 1) * -1 * itemWidth;
+                        item.style.transition = 'none';
+                        item.style.transform = `translateX(${transientTranslationVector}px)`;
+                        item.offsetHeight;
+                        item.style.transition = '';
+                        item.classList.remove("goR");
+                        // setTimeout(function() {
+                        //    item.classList.remove("goR")
+                        // }, 100)
+                    }
+                    translationVector = modIndex * -1 * itemWidth;
+                } else {
+                    translationVector = items.length * -1 * itemWidth;
+                }
+            } else {
+                if (index <= modIndex - 2){
+                    if (index == modIndex - 2) {
+                        item.classList.add("goR");
+                        //item.style.visibility = "hidden"
+                        transientTranslationVector = (items.length + 1 - modIndex) * itemWidth;
+                        item.style.transition = 'none';
+                        item.style.transform = `translateX(${transientTranslationVector}px)`;
+                        item.offsetHeight;
+                        item.style.transition = '';
+                        item.classList.remove("goR");
+                        // setTimeout(function() {
+                        //    item.classList.remove("goR")   
+                        // }, 100)
+                    }
+                    translationVector = (items.length - modIndex) * itemWidth;
+                } else {
+                    translationVector = modIndex * -1 * itemWidth;
+                } 
+            };
+            //translationVector = itemWidth * modIndex * -1;
+            console.log(translationVector);
+            item.style.transform = `translateX(${translationVector}px)`;
+            // setTimeout(function() {
+            //     item.style.transform = `translateX(${translationVector}px)`;
+            // }, 100)
+        });
+    }
+    if (items.length > 3){
+        setInterval(moveItems, 5000); // Move items every 5 seconds
+    }
+});

layouts/_default/baseof.html

@@ -4,6 +4,8 @@
 <!-- Bloc pour les styles CSS -->
 
     {{ $customCSS := resources.Get "css/style.css" | resources.ToCSS }}
+    <!--<link rel="preload" href="{{ $customCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="{{ $customCSS.RelPermalink }}"></noscript>-->
     <link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
     {{- block "styles" . }}{{- end }}
 </head>
@@ -21,18 +23,12 @@
               <section class="hero is-fullheight">
               {{- block "content" . }}{{- end }}
               {{ if not .IsHome}}
-              <div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 1%; right: 5%; z-index: 100;">
-                <a href="#" aria-label="Lien vers le haut de page" class="{{$bg}}" style="position: sticky; bottom: 0; border-radius: 50%;">
-                  <span class="icon">
-                    <i class="fas fa-arrow-up"></i>
-                  </span>
-                </a>
-              </div>
               {{ end }}
+            </section>
+          </div>
               {{ partial "navbarbottom.html" .}}
               
-              </section>
-            </div>
+
 
     </main>
     {{- end }}

layouts/index.html

@@ -1,5 +1,7 @@
 {{ define "styles"}}
 {{ $customCSS := resources.Get "css/index.css" | resources.ToCSS }}
+<!--<link rel="preload" href="{{ $customCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="{{ $customCSS.RelPermalink }}"></noscript>-->
 <link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
 <style>
     .carousel-item {
@@ -83,76 +85,11 @@
 {{ end }}
 
 {{ define "scripts"}}
+{{ $picsCarousel := resources.Get "js/index-pics-carousel.js" | js.Build  (dict "minify" true) }}
+<script src="{{ $picsCarousel.RelPermalink }}"></script>
 
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        let currentIndex = 0;
-        const items = document.querySelectorAll('.carousel-item');
-        const totalItems = items.length;
-
-        items.forEach((item, index) => {
-            if ( index !== 0 ) {
-                item.classList.add('is-invisible')
-                item.style.transform = "translateX(100%)";
-            } else {
-                item.classList.add('is-block')
-            };
-            item.style.transition = "transform 2s ease";
-        });
-
-        function moveToNextItem() {
-            currentIndex = (currentIndex + 1) % totalItems;
-            updateCarousel();
-        }
-
-        function updateCarousel() {
-            items.forEach((item, index) => {
-                if (index === currentIndex) {
-                    item.classList.remove('is-invisible');
-                    item.classList.add('is-block');
-                    item.style.transform = "translateX(0)";
-                } else if (currentIndex === 0 && index === totalItems - 1) {
-                    item.style.transform = "translateX(-100%)";
-                } else if (index === currentIndex -1) {
-                    item.style.transform = "translateX(-100%)";
-                } else {
-                    item.classList.remove('is-block');
-                    item.classList.add('is-invisible');
-                    item.style.transform = "translateX(100%)";
-                }
-            })
-        }
-        setInterval(moveToNextItem, 4000);
-    });
-</script>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        let currentIndex = 0;
-        const items = document.querySelectorAll('.newscarousel .newscarousel-item');
-        const totalItems = items.length;
-
-        function moveToNextItem() {
-            currentIndex = (currentIndex + 1) % totalItems;
-            updateCarousel();
-            }
-
-        function updateCarousel() {
-            items.forEach((item, index) => {
-            item.classList.remove('is-block');
-            item.classList.add('is-hidden');
-            if (index === currentIndex) {
-                    item.classList.remove('is-hidden')
-                    item.classList.add('is-block');
-                    }
-                });
-            }
-    const interval = 5000; // 3000ms = 3 seconds
-    setInterval(moveToNextItem, interval);
-
-    updateCarousel();
-});
-</script>
+{{ $newsCarousel := resources.Get "js/index-news-carousel.js" | js.Build  (dict "minify" true) }}
+<script src="{{ $newsCarousel.RelPermalink }}"></script>
 
 <script type="application/ld+json">
     {

layouts/partials/navbar.html

@@ -6,9 +6,47 @@
           <a href="/" aria-label="Lien vers la page d'accueil">
             <div class="figure">
               {{ if .IsHome }}
-              <img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la compagnie Le Temps Qu'il Faut" class="image is-1by1 p-5"  width="284px" height="128px">
+              {{- $webpxs := (resources.Get $.Site.Params.logoHome).Resize "192x webp drawing"}}
+              {{- $webps := (resources.Get $.Site.Params.logoHome).Resize "256x webp drawing" }}
+              {{- $webpm := (resources.Get $.Site.Params.logoHome).Resize "360x webp drawing" }}
+              {{- $webpl := (resources.Get $.Site.Params.logoHome).Resize "480x webp drawing" }}
+              {{- $webpxl := (resources.Get $.Site.Params.logoHome).Resize "640x webp drawing" }}
+              <img src="{{ (resources.Get $.Site.Params.logoHome).Permalink }}" 
+                alt="Logo de la compagnie Le Temps Qu'il Faut" 
+                class="image is-1by1 p-5"  
+                width="284px" 
+                height="128px"
+                srcset="{{ $webpxs.Permalink }} {{ $webpxs.Width}}w,
+                        {{ $webps.Permalink }} {{ $webps.Width}}w,
+                        {{ $webpm.Permalink }} {{ $webpm.Width}}w,
+                        {{ $webpl.Permalink }} {{ $webpl.Width}}w,
+                        {{ $webpxl.Permalink }} {{ $webpxl.Width}}w" 
+                sizes="(max-width: 1023px) 122px,
+                        (max-width: 1439px) 172px,
+                        (max-width: 1919px) 230px,
+                        (max-width: 2559px) 307px,
+                        640px">
               {{ else }}
-              <img src="{{ $.Site.Params.logo |relURL }}" alt="Logo de la compagnie Le Temps Qu'il Faut" class="image is-1by1 p-5" width="279px" height="124px">
+              {{- $webpxs := (resources.Get $.Site.Params.logo).Resize "192x webp drawing"}}
+              {{- $webps := (resources.Get $.Site.Params.logo).Resize "256x webp drawing" }}
+              {{- $webpm := (resources.Get $.Site.Params.logo).Resize "360x webp drawing" }}
+              {{- $webpl := (resources.Get $.Site.Params.logo).Resize "480x webp drawing" }}
+              {{- $webpxl := (resources.Get $.Site.Params.logo).Resize "640x webp drawing" }}
+              <img src="{{ (resources.Get $.Site.Params.logo).Permalink }}" 
+                alt="Logo de la compagnie Le Temps Qu'il Faut" 
+                class="image is-1by1 p-5"  
+                width="284px" 
+                height="128px"
+                srcset="{{ $webpxs.Permalink }} {{ $webpxs.Width}}w,
+                        {{ $webps.Permalink }} {{ $webps.Width}}w,
+                        {{ $webpm.Permalink }} {{ $webpm.Width}}w,
+                        {{ $webpl.Permalink }} {{ $webpl.Width}}w,
+                        {{ $webpxl.Permalink }} {{ $webpxl.Width}}w" 
+                sizes="(max-width: 1023px) 122px,
+                        (max-width: 1439px) 172px,
+                        (max-width: 1919px) 230px,
+                        (max-width: 2559px) 307px,
+                        640px">
               {{ end }}
             </div>
           </a>
@@ -25,12 +63,12 @@
             <div class="social-icons m-0 p-0">
               <a href="https://www.facebook.com/votre_compte_facebook" class="mr-2 {{$bg}}" aria-label="Lien vers le compte Facebook de la compagnie Le Temps Qu'il Faut">
                 <span>
-                  <i class="fab fa-facebook fa-2x"></i>
+                  <i class="fa-brands fa-facebook fa-2x"></i>
                 </span>
               </a>
               <a href="https://www.instagram.com/votre_compte_instagram" class="{{$bg}}" aria-label="Lien vers le compte Instagram de la compagnie Le Temps Qu'il Faut">
                 <span>
-                <i class="fab fa-instagram fa-2x"></i>
+                <i class="fa-brands fa-instagram fa-2x"></i>
               </span>
               </a>
             </div>

layouts/partials/navbarbottom.html

@@ -2,9 +2,20 @@
 <nav class="navbar is-black" role="navigation" aria-label="main navigation">
     <div class="navbar-brand is-flex is-justify-content-center is-flex-grow-1">
       <a class="navbar-item" href="/" aria-label="Lien vers la page d'accueil du site">
-        <img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la Compagnie le temps qu'il faut">
+        {{ $logoBottom := resources.Get $.Site.Params.logoHome }}
+        {{ $logoBottomResized := $logoBottom.Fill "52x24 webp drawing" }}
+        <img src="{{ $logoBottomResized.Permalink }}" alt="Logo de la Compagnie le temps qu'il faut" height="24" width="52">
       </a>
-  
+      {{ $bg := cond .IsHome "has-background-black has-text-white" "has-background-warning-light has-text-black" }}
+      {{ if not .IsHome}}
+      <div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 2.5%; right: 12%; z-index: 100;">
+        <a href="#" aria-label="Lien vers le haut de page" class="{{$bg}}" style="position: sticky; bottom: 0; border-radius: 50%;">
+          <span class="icon">
+            <i class="fas fa-arrow-up"></i>
+          </span>
+        </a>
+      </div>
+      {{end}}
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mynavbar">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>

layouts/partials/script.html

@@ -1,3 +1,5 @@
+<script src="https://kit.fontawesome.com/fd9af19a2d.js" crossorigin="anonymous"></script>
+
 <script>
 
 document.addEventListener('DOMContentLoaded', () => {

layouts/partials/styles.html

@@ -1,5 +1,11 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-<link rel="preconnect" href="https://fonts.googleapis.com">
+{{ $bulmaCSS := resources.Get "css/bulma.min.css" | resources.ToCSS }}
+<!--<link rel="preload" href="{{ $bulmaCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="{{ $bulmaCSS.RelPermalink }}"></noscript>-->
+<link rel="stylesheet" href="{{ $bulmaCSS.RelPermalink }}">
+
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@100;200;300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@100;200;300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@100;200;300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap"></noscript>
+

layouts/presse/list.html

@@ -1,7 +1,9 @@
 
 {{ define "styles"}}
  {{ $customCSS := resources.Get "css/presse.css" | resources.ToCSS }}
- <link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
+ <!--<link rel="preload" href="{{ $customCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="{{ $customCSS.RelPermalink }}"></noscript>-->
+<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
 {{ end }}
 
 

layouts/spectacles/list.html

@@ -1,6 +1,8 @@
 {{ define "styles"}}
     {{ $customCSS := resources.Get "css/spectacles.css" | resources.ToCSS }}
-    <link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
+    <!-- <link rel="preload" href="{{ $customCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="{{ $customCSS.RelPermalink }}"></noscript> -->
+<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
 {{ end }}
 
 
@@ -16,12 +18,40 @@
                         <a href="{{ .Permalink|relURL }}" aria-label="Lien vers la page du spectacle {{ .Title }}">
                             {{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
                             {{ with $img }}
-                            {{- $jpeg := .Resize "600x jpeg" }}
-                            {{- $webp := .Resize "600x webp picture" }}
+                            {{- $jpegxs := .Fill "170x102 jpeg" }}
+                            {{- $jpegs := .Fill "240x145 jpeg" }}
+                            {{- $jpegm := .Fill "320x193 jpeg" }}
+                            {{- $jpegl := .Fill "427x257 jpeg" }}
+                            {{- $webpxs := .Fill "170x102 webp picture" }}
+                            {{- $webps := .Fill "240x145 webp picture" }}
+                            {{- $webpm := .Fill "320x193 webp picture" }}
+                            {{- $webpl := .Fill "427x257 webp picture" }}
                             <figure class="image is-5by3">
                                 <picture>
-                                    <source srcset="{{ $webp.Permalink }}" type="image/webp">
-                                    <img src="{{ $jpeg.Permalink }}" loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Permalink }}">
+                                    <source type="image/webp"
+                                        srcset="{{ $webpxs.Permalink }} {{ $webpxs.Width}}w,
+                                                {{ $webps.Permalink }} {{ $webps.Width}}w,
+                                                {{ $webpm.Permalink }} {{ $webpm.Width}}w,
+                                                {{ $webpl.Permalink }} {{ $webpl.Width}}w" 
+                                        sizes="(max-width: 767px) 170px,
+                                                (max-width: 1439px) 170px,
+                                                (max-width: 1919px) 240px,
+                                                (max-width: 2559px) 320px,
+                                                427px">
+                                    <img loading="lazy" 
+                                        src="{{ $jpegm.Permalink }}"
+                                        width="{{ $jpegm.Width }}" 
+                                        height="{{ $jpegm.Height }}"  
+                                        alt="{{ .Permalink }}"
+                                        srcset="{{ $jpegxs.Permalink }} {{ $jpegxs.Width}}w,
+                                                {{ $jpegs.Permalink }} {{ $jpegs.Width}}w,
+                                                {{ $jpegm.Permalink }} {{ $jpegm.Width}}w,
+                                                {{ $jpegl.Permalink }} {{ $jpegl.Width}}w"
+                                        sizes="(max-width: 767px) 170px,
+                                                (max-width: 1439px) 170px,
+                                                (max-width: 1919px) 240px,
+                                                (max-width: 2559px) 320px,
+                                                427px">  
                                 </picture>
                                 {{ end }}
                                 <div class="overlay">

layouts/spectacles/single.html

@@ -1,5 +1,7 @@
 {{ define "styles"}}
 {{ $customCSS := resources.Get "css/single-spectacle.css" | resources.ToCSS }}
+<!-- <link rel="preload" href="{{ $customCSS.RelPermalink }}" as="style" onload="this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="{{ $customCSS.RelPermalink }}"></noscript> -->
 <link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
 {{ end }}
 
@@ -126,16 +128,16 @@
         {{ end }}
     </div>
 </section>
-<section class="section is-large m-0 p-6 has-background-black">
-    <h2 class="subtitle">Galerie</h2>
-    <div class="container">
+<section class="section is-large m-0 pl-0 mr-7 py-6 has-background-black">
+    <h2 class="subtitle pl-6">Galerie</h2>
+    <div class="container m-0" style="overflow-x: hidden; max-width: 100%;">
         <div id="galerie" class="carousel is-flex is-flex-direction-row"> <!--style="overflow-x: hidden;" >-->
             {{ $imgs := (resources.Match ( print .File.Dir "/*")).ByType "image" }}
 
             {{ with $imgs }}
-            {{ range first 10 . }}
-            {{- $jpeg := .Resize "600x jpeg" }}
-            {{- $webp := .Resize "600x webp picture" }}
+            {{ range . }}
+            {{- $jpeg := .Resize "364x jpeg" }}
+            {{- $webp := .Resize "364x webp picture" }}
             <picture class="is-flex is-flex-grow-0 is-flex-shrink-0">
                 <source srcset="{{ $webp.Permalink }}" type="image/webp">
                 <img  src='{{ $jpeg.Permalink }}' loading="lazy" style="width: 100%; height: auto; object-fit: contain;" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
@@ -149,48 +151,9 @@
 {{ end }}
 
 {{ define "scripts" }}
-<script>
+{{ $carousel := resources.Get "js/single-spectacle-carousel.js" | js.Build (dict "minify" true) }}
 
-    document.addEventListener('DOMContentLoaded', function() {
-        var slider = document.querySelector('#galerie');
-        var items = slider.querySelectorAll('picture');
-
-        let currentIndex = 0;
-
-        function moveItems() {
-            currentIndex = (currentIndex + 1) % items.length;
-            let translationVector;
-            items.forEach((item, index) => {
-                item.style.zIndex = 0;
-                if (index === currentIndex -2 || (index === (items.length -2) && currentIndex === 0) || (index === (items.length -1) && currentIndex === 1)) {
-                    item.style.zIndex = -100;
-                } 
-                if (currentIndex == 0) {
-                    if (index == items.length - 1){
-                        translationVector = items.length * -600
-                    } else {
-                        translationVector = 0;
-                    }
-                    
-                } else if ( currentIndex == 1) {
-                    translationVector = -600;
-                } else if (index < currentIndex - 1){
-                    translationVector = (items.length - currentIndex) *600;
-                } else {
-                    translationVector = -currentIndex * 600;
-                }
-
-                item.style.transform = `translateX(${translationVector}px)`;
-                if (index === currentIndex -2 || (index === (items.length -2) && currentIndex === 0) || (index === (items.length -1) && currentIndex === 1)) {
-                    item.style.zIndex = 0;
-                }            
-            })
-        }
-        if (items.length > 2){
-            setInterval(moveItems, 5000); // Move items every 5 seconds
-        }
-    });
-</script>
+<script src="{{ $carousel.RelPermalink}}"></script>
 
 <script type="application/ld+json">
     {