feat: ✨ add wrapper around sessionStorage API

The native 'storage' event does not fire on the same browsing context if a change to the store happens, so wrapping the sessionStorage API is necessary to work around this limitation

src/components/head/page-head-script.webc

@@ -0,0 +1,70 @@
+<script>
+  const storageHandler = {
+    get(target, prop) {
+      switch (prop) {
+        case 'setItem':
+          return function (...args) {
+            const [key, value] = args;
+            // Add additional logic here, such as logging or validation
+            console.log(`Setting key "${key}" to value "${value}"`);
+            updateDom(key, value);
+            target[key] = value;
+          };
+
+        case 'getItem':
+          return function (...args) {
+            const [key] = args;
+            // Add additional logic here, such as logging or validation
+            console.log(`Getting key "${key}"`);
+            return target[key];
+          };
+
+        case 'removeItem':
+          return function (...args) {
+            const [key] = args;
+            // Add additional logic here, such as logging or validation
+            console.log(`Removing key "${key}"`);
+            delete target[key];
+          };
+
+        case 'clear':
+          return function () {
+            // Add additional logic here, such as logging or validation
+            console.log('Clearing all sessionStorage');
+            for (let key in target) {
+              if (target.hasOwnProperty(key)) {
+                delete target[key];
+              }
+            }
+          };
+        default:
+          return target[prop];
+      }
+    },
+    set(target, prop, value) {
+      // Add additional logic here, such as validation or constraints
+      console.log(`Setting key "${prop}" to value "${value}"`);
+      target[prop] = value;
+      return true;
+    },
+    deleteProperty(target, prop) {
+      // Add additional logic here, such as logging or validation
+      console.log(`Deleting key "${prop}"`);
+      delete target[prop];
+      return true;
+    }
+  };
+
+  const storeProxy = new Proxy(sessionStorage, storageHandler);
+
+  const updateDom = (key, value) => {
+    if (key === 'isHorny') {
+      value ? document.body.classList.add('nsfw') : document.body.classList.remove('nsfw');
+    }
+  };
+
+  // Usage example:
+  storeProxy.getItem('isHorny') === 'true'
+    ? document.body.classList.add('nsfw')
+    : document.body.classList.remove('nsfw');
+</script>

src/layouts/base.webc

@@ -9,6 +9,7 @@
     <template webc:is="page-head-fonts" webc:nokeep></template>
     <template webc:is="page-head-colors" webc:nokeep></template>
     <template webc:is="page-head-style" webc:nokeep></template>
+    <template webc:is="page-head-script" webc:nokeep></template>
 
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <script type="module" :src="getBundleFileUrl('js')" webc:keep></script>