From fbb04785b70a9e5e83c42f6ab68a8938cce9395a Mon Sep 17 00:00:00 2001
From: Saahil <saahilattud@gmail.com>
Date: Wed, 1 Jan 2025 15:55:13 -0500
Subject: [PATCH] fix: lint + use relative path

---
 docs/gallery/index.html | 199 ++++++++++++++++++++--------------------
 1 file changed, 101 insertions(+), 98 deletions(-)
diff --git a/docs/gallery/index.html b/docs/gallery/index.html
index 883ce61..f0343f5 100644
--- a/docs/gallery/index.html
+++ b/docs/gallery/index.html
@@ -12,13 +12,14 @@
   <meta name="description" content="Gallery of the rice's " />
   <meta property="og:description" content="Gallery of the rice's" />
   <meta name="twitter:description" content="Gallery of the rice's" />
-<link rel="stylesheet" href="carousel.css">
+  <link rel="stylesheet" href="./carousel.css">
   <style>
     .row {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
     }
+
     .col {
       flex: 1;
       margin: 10px;
@@ -26,12 +27,13 @@
       transition-duration: 250ms;
       transform: scale(1);
     }
+
     .col:hover {
       transform: scale(1.05);
     }
-
   </style>
 </head>
+
 <body>
   <!-- Delete this HTML and replace with your own HTML -->
   <!-- starter code below -->
@@ -43,10 +45,10 @@
     <h1 class="ultratitle">Gallery</h1>
     <p class="headline" id="headline">Gallery of the {count} rice's</p>
   </header>
-<div id="gallery"></div>
+  <div id="gallery"></div>
 </body>
-<script src="carousel.js"></script>
-<script src="icon.js"></script>
+<script src="./carousel.js"></script>
+<script src="./icon.js"></script>
 <script>
   function groupArray(arr, size = 3) {
     const groups = []
@@ -57,108 +59,109 @@
   }
   async function mainIfHome(gallery) {
     console.log(1)
-   
-    document.getElementById('headline').innerText = `Gallery of the ${gallery.length} rices`
-  // console.log(groupArray(gallery), 0)
-const grouped = groupArray(gallery)
-let index = 0;
-for(const group of grouped) {
-  const row=document.createElement('div')
-  row.classList.add('row')
-  for(const cold of group) {
-    const col=document.createElement('a')
-    col.classList.add('card')
-    col.classList.add('col')
-    col.href = `#${index}`
-    const img = document.createElement('img')
-    // lazy load
-    img.setAttribute('loading', 'lazy')
-    img.src = cold.images[0]
-    img.alt = cold.name
-    img.style.width = "90%"
-    img.style.height = "90%"
-    img.style.borderRadius = "10px"
-    const h1 = document.createElement('h1')
-    // h1.append(setupIcon(cold.distro))
-    h1.innerText = cold.name
-    h1.style.paddingBottom = "10px"
-    col.appendChild(h1)
-    col.appendChild(img)
-    row.appendChild(col)
-  index++
-  }
 
-  document.getElementById('gallery').appendChild(row)
+    document.getElementById('headline').innerText = `Gallery of the ${gallery.length} rices`
+    // console.log(groupArray(gallery), 0)
+    const grouped = groupArray(gallery)
+    let index = 0;
+    for (const group of grouped) {
+      const row = document.createElement('div')
+      row.classList.add('row')
+      for (const cold of group) {
+        const col = document.createElement('a')
+        col.classList.add('card')
+        col.classList.add('col')
+        col.href = `#${index}`
+        const img = document.createElement('img')
+        // lazy load
+        img.setAttribute('loading', 'lazy')
+        img.src = cold.images[0]
+        img.alt = cold.name
+        img.style.width = "90%"
+        img.style.height = "90%"
+        img.style.borderRadius = "10px"
+        const h1 = document.createElement('h1')
+        // h1.append(setupIcon(cold.distro))
+        h1.innerText = cold.name
+        h1.style.paddingBottom = "10px"
+        col.appendChild(h1)
+        col.appendChild(img)
+        row.appendChild(col)
+        index++
+      }
+
+      document.getElementById('gallery').appendChild(row)
+    }
   }
-}
-async function mainIfViewIndex(gallery) {
-  const index = parseInt(window.location.hash.slice(1))
-  const data =gallery[index]
-  if(!data) window.location.hash = ''
-  console.log(data)
-  const carousel = document.createElement('div')
-  carousel.classList.add('carousel-container')
-  const imgCarousel = document.createElement('div')
-  imgCarousel.classList.add('carousel')
-  for(const image of data.images) {
-    const img = document.createElement('img')
-    img.src = image
-    img.alt = data.name
-    img.style.width = "100%"
-    img.style.height = "auto"
-    imgCarousel.appendChild(img)
-  }
-  carousel.appendChild(imgCarousel)
-  const next = document.createElement('button')
-  next.classList.add('next')
-  next.innerText = 'Next Image'
-  const prev = document.createElement('button')
-  prev.classList.add('prev')
-  prev.innerText = 'Prev Image'
-  if(data.images.length > 1){
-    carousel.appendChild(prev)
-    carousel.appendChild(next)
-  }
-  const titleThing = document.createElement('div')
-  titleThing.innerText = data.name
-  const div = titleThing
-  div.style.display = "flex"
-  div.style.justifyContent = "center"
-  div.style.alignItems = "center"
-  div.style.gap = "var(--spacing-2)"
-  div.style.fontSize = "var(--font-5)"
-  div.style.fontWeight = "var(--font-weight-bold)"
-  
-  const gitLink = document.createElement('a')
-  gitLink.href = data.git
-  gitLink.innerText = "Dotfiles"
-  gitLink.style.textDecoration = "none"
-  gitLink.target = "_blank"
-  
+  async function mainIfViewIndex(gallery) {
+    const index = parseInt(window.location.hash.slice(1))
+    const data = gallery[index]
+    if (!data) window.location.hash = ''
+    console.log(data)
+    const carousel = document.createElement('div')
+    carousel.classList.add('carousel-container')
+    const imgCarousel = document.createElement('div')
+    imgCarousel.classList.add('carousel')
+    for (const image of data.images) {
+      const img = document.createElement('img')
+      img.src = image
+      img.alt = data.name
+      img.style.width = "100%"
+      img.style.height = "auto"
+      imgCarousel.appendChild(img)
+    }
+    carousel.appendChild(imgCarousel)
+    const next = document.createElement('button')
+    next.classList.add('next')
+    next.innerText = 'Next Image'
+    const prev = document.createElement('button')
+    prev.classList.add('prev')
+    prev.innerText = 'Prev Image'
+    if (data.images.length > 1) {
+      carousel.appendChild(prev)
+      carousel.appendChild(next)
+    }
+    const titleThing = document.createElement('div')
+    titleThing.innerText = data.name
+    const div = titleThing
+    div.style.display = "flex"
+    div.style.justifyContent = "center"
+    div.style.alignItems = "center"
+    div.style.gap = "var(--spacing-2)"
+    div.style.fontSize = "var(--font-5)"
+    div.style.fontWeight = "var(--font-weight-bold)"
+
+    const gitLink = document.createElement('a')
+    gitLink.href = data.git
+    gitLink.innerText = "Dotfiles"
+    gitLink.style.textDecoration = "none"
+    gitLink.target = "_blank"
+
     div.appendChild(document.createTextNode(" - "))
     div.appendChild(gitLink)
     div.appendChild(setupIcon(data.distro))
     document.body.appendChild(titleThing)
-  document.body.appendChild(carousel)
-const acarousel = setupCarousel()
-  next.onclick = () => acarousel.moveSlide(1)
-  prev.onclick = () => acarousel.moveSlide(-1)
-}
+    document.body.appendChild(carousel)
+    const acarousel = setupCarousel()
+    next.onclick = () => acarousel.moveSlide(1)
+    prev.onclick = () => acarousel.moveSlide(-1)
+  }
 
   async function main() {
     const gallery = await fetch(
       "https://raw.githubusercontent.com/hackclub/riceathon/refs/heads/main/members.json"
-    ).then(r=>r.json())
-    if(isNaN(window.location.hash.slice(1)) || window.location.hash == "#" || window.location.hash == "") {
-    console.log(`Loading main`)
-    mainIfHome(gallery)
-  } else {
-    console.log(`#${window.location.hash.slice(1)}`)
-    document.getElementById('headline').remove()
-    mainIfViewIndex(gallery)
+    ).then(r => r.json())
+    if (isNaN(window.location.hash.slice(1)) || window.location.hash == "#" || window.location.hash == "") {
+      console.log(`Loading main`)
+      mainIfHome(gallery)
+    } else {
+      console.log(`#${window.location.hash.slice(1)}`)
+      document.getElementById('headline').remove()
+      mainIfViewIndex(gallery)
+    }
+    window.addEventListener('hashchange', () => location.reload())
   }
-  window.addEventListener('hashchange', () => location.reload())
-  }
-main()
+  main()
 </script>
-</html>
+
+</html>
\ No newline at end of file
