feat: ✨ add nsfw barrier component

src/components/nsfw-barrier.webc

@@ -0,0 +1,44 @@
+<script>
+  const nsfwButton = document.querySelector('#nsfw-toggle');
+
+  nsfwButton.addEventListener('click', () => {
+    const isInHornyJail = storeProxy.getItem('isInHornyJail') === 'true';
+    const isHorny = storeProxy.getItem('isHorny') === 'true';
+
+    if (isInHornyJail) {
+      storeProxy.setItem('isHorny', !isHorny);
+    } else {
+      open();
+    }
+  });
+</script>
+
+<div webc:root="override">
+  <div class="message">
+    <div webc:type="11ty" 11ty:type="md">
+      <slot name="message"></slot>
+    </div>
+  </div>
+
+  <ref-button id="nsfw-toggle" command="show-modal" commandfor="nsfw-warning">
+    Reveal/Hide
+  </ref-button>
+
+  <div class="nsfw-content">
+    <div webc:type="11ty" 11ty:type="md">
+      <slot></slot>
+    </div>
+  </div>
+</div>
+
+<style webc:scoped="nsfw-barrier">
+  :host {
+    .nsfw & .nsfw-content {
+      display: block;
+    }
+  }
+
+  :host .nsfw-content {
+    display: none;
+  }
+</style>

src/components/popup-modal.webc

@@ -13,6 +13,9 @@
     document.body.classList.toggle('scroll-lock');
     document.body.inert = false;
     storeProxy.setItem('isHorny', result);
+    if (result && storeProxy.getItem('isInHornyJail') !== 'true') {
+      storeProxy.setItem('isInHornyJail', true);
+    }
     dialog.close();
   };
 

src/sebin/anatomy.md

@@ -59,6 +59,7 @@ gallery: [
     :@width="[1000]"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
+    :@nsfw="true"
 ></ref-img>
 
 <colors :@colors="$data.getColors()"></colors>
@@ -85,6 +86,7 @@ Sebin has a muscular build that he keeps in shape with regular exercise.
     :@width="[1000]"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
+    :@nsfw="true"
 ></ref-img>
 
 <quick-info>
@@ -147,6 +149,14 @@ An assortment of additional references how Sebin can be drawn.
   ></ref-img>
 </ref-gallery>
 
+<nsfw-barrier>
+<div slot="message">
+
+## Danger Zone
+
+Here be kinky dragons 👀💦
+</div>
+
 ## Penis
 
 <ref-img
@@ -164,3 +174,4 @@ An assortment of additional references how Sebin can be drawn.
 </quick-info>
 
 Despite his reptilian appearance, Sebin has nipples, a feature of the human side of his family. Furthermore, his external testicles represent another humanized feature. Where relatives of his ilk possess a slit in which the penis lies protectively, Sebin possesses a pouch-like sheath from which the tip of the penis protrudes slightly. The shape of his shaft is predominantly humanoid, but it is surrounded by ridges and has no equivalent of a foreskin. When aroused, the coal-black shaft swells and pushes out of the sheath until fully erect, the sheath wrapping around the root of the shaft like a ring. However, he can also push it out in a flaccid state, e.g. when needing to pass water.
+</nsfw-barrier>

src/sebin/index.md

@@ -26,10 +26,15 @@ Besides snacking, Sebin also likes to eat hearty and savory things. He doesn't d
 
 Sebin rarely says no to a good beer with friends, just as he rarely says no to a bar tour to try new and interesting cocktails.
 
-## test
+<nsfw-barrier>
+<div slot="message">
 
-<nsfw-barrier></nsfw-barrier>
+## But wait! There's more…
+
+Discover Sebin's kinkier side 😏
+</div>
 
 ## Kinks
 
 <filter-list :@data="$data.kinks"></filter-list>
+</nsfw-barrier>