From 0efe83047c8cf93a661fd09a74f822ec73bf114a Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 23 Feb 2025 01:43:10 +0500
Subject: [PATCH] fix/generator: visible overlay when images weren't loaded

---
 generate/build.tsx                  |  2 +-
 generate/static/css/tailwind.css    | 53 +++++------------------------
 generate/static/js/initGalleries.js |  8 +++++
 generate/templates/Base.tsx         |  2 +-
 generate/templates/YearPhotos.tsx   | 22 ++++++------
 5 files changed, 30 insertions(+), 57 deletions(-)

diff --git a/generate/build.tsx b/generate/build.tsx
index 30dda74..6bd26c9 100644
--- a/generate/build.tsx
+++ b/generate/build.tsx
@@ -123,7 +123,7 @@ Object.keys(items).forEach((year) => {
 const html = renderToString(
   <Base isDev={ENVIRONMENT == "dev"}>
     <Tags tags={tags} />
-    <div className="container mx-auto p-4 flex flex-col gap-4">
+    <div className="container mx-auto p-4 flex flex-col gap-4 flex-1">
       {Object.keys(items).sort().reverse().map((year) => (
         <YearPhotos
           year={year}
diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css
index 0a9178f..0855a3f 100644
--- a/generate/static/css/tailwind.css
+++ b/generate/static/css/tailwind.css
@@ -620,6 +620,12 @@
   .h-full {
     height: 100%;
   }
+  .min-h-\[228px\] {
+    min-height: 228px;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -629,6 +635,9 @@
   .w-full {
     width: 100%;
   }
+  .flex-1 {
+    flex: 1;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -647,18 +656,12 @@
   .flex-col {
     flex-direction: column;
   }
-  .flex-row {
-    flex-direction: row;
-  }
   .items-center {
     align-items: center;
   }
   .justify-between {
     justify-content: space-between;
   }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -668,9 +671,6 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
@@ -732,15 +732,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -769,12 +763,6 @@
   .text-gray-200 {
     color: var(--color-gray-200);
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
-  .text-gray-400 {
-    color: var(--color-gray-400);
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -804,11 +792,6 @@
       align-items: center;
     }
   }
-  .md\:justify-between {
-    @media (width >= 48rem) {
-      justify-content: space-between;
-    }
-  }
   .md\:gap-2 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 2);
@@ -824,30 +807,12 @@
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
   }
-  .lg\:text-base {
-    @media (width >= 64rem) {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
-    }
-  }
-  .lg\:text-lg {
-    @media (width >= 64rem) {
-      font-size: var(--text-lg);
-      line-height: var(--tw-leading, var(--text-lg--line-height));
-    }
-  }
   .lg\:text-sm {
     @media (width >= 64rem) {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .lg\:text-xl {
-    @media (width >= 64rem) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
   .xl\:grid-cols-7 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(7, minmax(0, 1fr));
diff --git a/generate/static/js/initGalleries.js b/generate/static/js/initGalleries.js
index 5fbaf86..9c4a1f4 100644
--- a/generate/static/js/initGalleries.js
+++ b/generate/static/js/initGalleries.js
@@ -31,6 +31,14 @@ Images.forEach((item) => {
         availableTags.push(imTags[i]);
       }
     }
+    if (item.querySelector("img").height > 0) {
+      item.querySelector("[data-overlay]").classList.remove("invisible");
+    } else {
+      item.querySelector("img").addEventListener("load", () => {
+        item.querySelector("[data-overlay]").classList.remove("invisible");
+        this.removeEventListener("load", this);
+      });
+    }
   }
 });
 
diff --git a/generate/templates/Base.tsx b/generate/templates/Base.tsx
index b2bb243..df3344c 100644
--- a/generate/templates/Base.tsx
+++ b/generate/templates/Base.tsx
@@ -65,7 +65,7 @@ export default function Base({ children, isDev }: BaseProps) {
 
         <script defer data-domain="radiquum.wah.su/photos" data-api="https://a.wah.su/api/event" src="https://a.wah.su/js/script.js"></script>
       </head>
-      <body className="bg-[#121B2C] text-white">
+      <body className="bg-[#121B2C] text-white min-h-screen flex flex-col">
         <Header />
         {children}
         <Footer />
diff --git a/generate/templates/YearPhotos.tsx b/generate/templates/YearPhotos.tsx
index 1aff731..45846c2 100644
--- a/generate/templates/YearPhotos.tsx
+++ b/generate/templates/YearPhotos.tsx
@@ -29,7 +29,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
           return (
             <a
               href={image.image}
-              className={`w-full h-full hidden relative ${
+              className={`w-full h-full hidden relative min-h-[228px] ${
                 aspectRatio < 0.95
                   ? ""
                   : aspectRatio > 1.05
@@ -38,11 +38,11 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
               }`}
               key={`${year}-${image.id}`}
               data-slide-name={image.id}
-              data-src={image.thumbnail[2048]}
-              data-srcset={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 1440w, ${image.thumbnail[2048]} 2001w`}
-              data-sizes="(max-width: 1000x) 480px,
-                        (max-width: 2000px) 1440px,
-                        2001px"
+              data-src={image.thumbnail[1024]}
+              data-srcset={`${image.thumbnail[512]} 512w, ${image.thumbnail[1024]} 1024w, ${image.thumbnail[2048]} 2048w`}
+              data-sizes="(max-width: 1281x) 512px,
+                        (max-width: 2400px) 1024px,
+                        2048px"
               data-download-url={image.image}
               data-type="image"
               data-tags={image.tags.join(",")}
@@ -61,15 +61,15 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
             >
               <img
                 src={image.thumbnail[512]}
-                srcSet={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 1440w, ${image.thumbnail[2048]} 2001w`}
-                sizes="(max-width: 1000px) 480px,
-                    (max-width: 2000px) 1440px,
-                    2001px"
+                srcSet={`${image.thumbnail[512]} 512w, ${image.thumbnail[1024]} 1024w, ${image.thumbnail[2048]} 2048w`}
+                sizes="(max-width: 1281px) 512px,
+                    (max-width: 2400px) 1024px,
+                    2048px"
                 className="w-full h-full object-cover rounded-sm"
                 loading="lazy"
                 alt={image.alt}
               />
-              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/75 to-95% to-transparent pt-8 p-2">
+              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/75 to-95% to-transparent pt-8 p-2 invisible" data-overlay="true">
                 <div className="flex flex-col md:flex-row md:items-center md:gap-2 text-gray-200 text-xs lg:text-sm">
                   <div>
                     {image.width}x{image.height}