From f6fd56833d6cc6412584e049790dbed05cf28ca2 Mon Sep 17 00:00:00 2001
From: Lio <git@lio.cat>
Date: Thu, 25 Jul 2024 20:45:07 +0200
Subject: [PATCH] put nsfw behind a searchParam

---
 src/components/Image.astro | 80 +++++++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/components/Image.astro b/src/components/Image.astro
index 8425f21..c7ff86e 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -1,40 +1,68 @@
 ---
-const { src, alt, nsfw } = Astro.props;
+const { src, alt, nsfw, artist } = Astro.props;
+const showNsfw = Astro.url.searchParams.has('nsfw') || false;
 ---
 
-<div class="overflow-hidden rounded" data-nsfw={`${nsfw}`}>
-  <div
-    data-lightbox="true"
-    id="parent"
-    class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
-  >
-    <img src={src} alt={alt} loading="lazy" />
-    {
-      alt && (
+<div>
+  { (nsfw && showNsfw) ? (
+    <div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
+      <div
+        data-lightbox="true"
+        id="parent"
+        class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
+      >
+        <img src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
+        {
+          alt && (
+            <div
+              id="info"
+              class="absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
+            >
+              {alt}
+            </div>
+          )
+        }
+      </div>
+    </div>
+    ): null }
+    
+    { !nsfw ? (   
+      <div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
         <div
-          id="info"
-          class="absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
+          data-lightbox="true"
+          id="parent"
+          class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
         >
-          {alt}
+          <img src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
+          {
+            alt && (
+              <div
+                id="info"
+                class="absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
+              >
+                {alt}
+              </div>
+            )
+          }
         </div>
-      )
-    }
-  </div>
+      </div>
+      ): null }
+    
 </div>
 
 <script>
   import { nsfw } from "../lib/stores/nsfw";
 
-  const nsfwImages = document.querySelectorAll('[data-nsfw="true"]');
-  nsfw.subscribe((nsfw) => {
-    if (nsfw) {
-      // @ts-ignore
-      nsfwImages.forEach((image) => (image.style.display = "inherit"));
-    } else {
-      // @ts-ignore
-      nsfwImages.forEach((image) => (image.style.display = "none"));
-    }
-  });
+  // const nsfwImages = document.querySelectorAll('[data-nsfw="true"]');
+  // nsfw.subscribe((nsfw) => {
+  //   if (nsfw) {
+  //     // @ts-ignore
+  //     nsfwImages.forEach((image) => (image.style.display = "inherit"));
+  //   } else {
+  //     // @ts-ignore
+  //     nsfwImages.forEach((image) => (image.style.display = "none"));
+  //   }
+  // });
 </script>
 
 <style>