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
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>