refactor: ♻️ update naming of variables, classes and attributes

eleventy.config.js

@@ -62,7 +62,7 @@ export default async function (eleventyConfig) {
         ignoreCustomFragments: [
           /<(use|path)[^>]*>(?:(?!<\/(use|path)>)[\s\S])*?<\/(use|path)>/,
           /<div[^>]*class="color-box"[^>]*>(?:(?!<\/div>)[\s\S])*?<\/div>/,
-          /<nav[^>]*class="gallery-nav"[^>]*>.*?<\/nav>/
+          /<nav[^>]*class="slider-nav"[^>]*>.*?<\/nav>/
         ]
       });
     }

src/components/slider.webc

@@ -1,10 +1,10 @@
 <script>
-  const gallery = document.querySelector('.gallery');
-  const track = gallery.querySelector('.track');
-  const images = Array.from(gallery.querySelectorAll('.track > *'));
-  const nav = gallery.querySelector('.gallery-nav');
-  const prevButton = gallery.querySelector('button.prev');
-  const nextButton = gallery.querySelector('button.next');
+  const slider = document.querySelector('.slider');
+  const track = slider.querySelector('.track');
+  const items = Array.from(slider.querySelectorAll('.track > *'));
+  const nav = slider.querySelector('.slider-nav');
+  const prevButton = slider.querySelector('button.prev');
+  const nextButton = slider.querySelector('button.next');
 
   const TOLERANCE = 2;
 
@@ -27,7 +27,7 @@
   };
 
   const updateActiveStates = () => {
-    images.forEach(updateAriaCurrent);
+    items.forEach(updateAriaCurrent);
     nav.querySelectorAll('.indicator-btn').forEach(updateAriaCurrent);
     prevButton.disabled = isAtStart();
     nextButton.disabled = isAtEnd();
@@ -36,10 +36,10 @@
   let currentIndex = 0;
 
   const scrollToIndex = (index) => {
-    if (index < 0 || index >= images.length || index === currentIndex) return;
+    if (index < 0 || index >= items.length || index === currentIndex) return;
 
     currentIndex = index;
-    images[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    items[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
 
     updateActiveStates();
   };
@@ -50,11 +50,11 @@
   const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex)));
   resizeObserver.observe(track);
 
-  const galleryObserver = new IntersectionObserver(
+  const sliderObserver = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting && entry.intersectionRatio >= 0.75) {
-          const index = images.indexOf(entry.target);
+          const index = items.indexOf(entry.target);
           if (index !== -1) {
             currentIndex = index;
             updateActiveStates();
@@ -66,18 +66,18 @@
   );
 
   const initializeGallery = () => {
-    images.forEach((el, i) => {
+    items.forEach((el, i) => {
       const btn = document.createElement('button');
 
       if (i === 0) btn.setAttribute('aria-current', 'true');
       btn.classList.add('indicator-btn');
       btn.dataset.index = i;
       btn.innerText = i + 1;
-      btn.setAttribute('aria-label', `Go to image ${i + 1} of ${images.length}`);
+      btn.setAttribute('aria-label', `Go to item ${i + 1} of ${items.length}`);
       btn.addEventListener('click', () => scrollToIndex(Number(btn.dataset.index)));
 
       if (i === 0) el.setAttribute('aria-current', 'true');
-      el.setAttribute('aria-label', `Image ${i + 1} of ${images.length}`);
+      el.setAttribute('aria-label', `Item ${i + 1} of ${items.length}`);
       el.setAttribute('tabindex', '0');
       el.setAttribute('role', 'group');
 
@@ -87,18 +87,18 @@
     updateActiveStates();
   };
 
-  images.forEach((el) => galleryObserver.observe(el));
+  items.forEach((el) => sliderObserver.observe(el));
   prevButton.addEventListener('click', prev);
   nextButton.addEventListener('click', next);
   track.addEventListener('scroll', debounce(updateActiveStates, 100));
   document.addEventListener('DOMContentLoaded', initializeGallery);
 </script>
 
-<section aria-label="Image gallery" webc:root="override">
-  <button class="prev" aria-label="Previous Image">
+<section aria-label="Slider" webc:root="override">
+  <button class="prev" aria-label="Previous item">
     <icon icon="fa6-solid:chevron-left"></icon>
   </button>
-  <button class="next" aria-label="Next Image">
+  <button class="next" aria-label="Next item">
     <icon icon="fa6-solid:chevron-right"></icon>
   </button>
 
@@ -106,10 +106,10 @@
     <slot></slot>
   </div>
 
-  <nav class="gallery-nav" aria-label="Gallery"></nav>
+  <nav class="slider-nav" aria-label="Slider"></nav>
 </section>
 
-<style webc:scoped="gallery">
+<style webc:scoped="slider">
   :host {
     display: grid;
     grid-auto-columns: auto 1fr auto;
@@ -236,7 +236,7 @@
     padding-inline: 1em;
   }
 
-  :host .gallery-nav {
+  :host .slider-nav {
     --indicator-size: 2.5em;
 
     grid-row: progress;

src/sebin/anatomy.md

@@ -90,7 +90,7 @@ Sebin is very concerned with an even distribution of muscle mass, but pays parti
 
 An assortment of additional references how Sebin can be drawn.
 
-<ref-gallery>
+<slider>
   <ref-img webc:for="ref of [...Array(9).keys()]"
     :@src="`ref-muscle-${ref + 1}.png`"
     :@alt="$data.galleryMuscle[ref].alt"
@@ -100,7 +100,7 @@ An assortment of additional references how Sebin can be drawn.
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="false"
   ></ref-img>
-</ref-gallery>
+</slider>
 
 <nsfw-barrier>
 <div slot="message">

src/sebin/clothing.md

@@ -6,7 +6,7 @@ eleventyNavigation:
 
 Sebin knows how to dress!
 
-<ref-gallery>
+<slider>
   <ref-img webc:for="ref of Array(4).keys()" 
     :@src="`ref-clothes-${ref + 1}.png`"
     :@alt="$data.galleryClothing[ref].alt"
@@ -16,4 +16,4 @@ Sebin knows how to dress!
     :@artist="$data.galleryClothing[ref].artist"
     :@dropshadow="false"
   ></ref-img>
-</ref-gallery>
+</slider>