clients/phobos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

put nsfw behind a searchParam

Browse source
This commit is contained in:
Lio 2024-07-25 20:45:07 +02:00
parent 89b40c2b3a
commit f6fd56833d
1 changed files with 54 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/components/Image.astro
View file

@ -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>
<div { (nsfw && showNsfw) ? (
data-lightbox="true" <div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
id="parent" <div
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` data-lightbox="true"
> id="parent"
<img src={src} alt={alt} loading="lazy" /> 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>
): null }
{ !nsfw ? (
<div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
<div <div
id="info" data-lightbox="true"
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" 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>
</div> </div>
<script> <script>
import { nsfw } from "../lib/stores/nsfw"; import { nsfw } from "../lib/stores/nsfw";
const nsfwImages = document.querySelectorAll('[data-nsfw="true"]'); // const nsfwImages = document.querySelectorAll('[data-nsfw="true"]');
nsfw.subscribe((nsfw) => { // nsfw.subscribe((nsfw) => {
if (nsfw) { // if (nsfw) {
// @ts-ignore // // @ts-ignore
nsfwImages.forEach((image) => (image.style.display = "inherit")); // nsfwImages.forEach((image) => (image.style.display = "inherit"));
} else { // } else {
// @ts-ignore // // @ts-ignore
nsfwImages.forEach((image) => (image.style.display = "none")); // nsfwImages.forEach((image) => (image.style.display = "none"));
} // }
}); // });
</script> </script>
<style> <style>