feat / /browse /docs: push the discord community a little more

.modules/global/global.css

@@ -59,4 +59,31 @@
 
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
+}
+
+
+#social-push {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  max-width: 500px;
+  opacity: 0;
+  transition: opacity .3s;
+}
+#social-push div {
+  margin: 12px;
+  padding: 25px;
+  background-color: #08090a90;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 100;
+  border-radius: 12px;
+}
+[data-bs-theme=light] #social-push div {
+  background-color: #cad2d890;
+}
+
+.pe-pointer {
+  cursor: pointer;
 }

.modules/global/global.js

@@ -0,0 +1,22 @@
+const socialpush = document.getElementById("social-push")
+const getStoredDismiss = () => localStorage.getItem('social-dismissed')
+const setStoredDismiss = value => localStorage.setItem('social-dismissed', value)
+
+
+window.addEventListener('DOMContentLoaded', () => {
+
+    if(getStoredDismiss() != "true") {
+        socialpush.style.opacity = 1
+    } else {
+        socialpush.style.display = "none"
+    }
+
+});
+
+function dismissSocial() {
+    setStoredDismiss("true")
+    socialpush.style.opacity = 0
+    setTimeout(() => {
+        socialpush.style.display = "none"
+    }, 300)
+}

browse/index.html

@@ -173,9 +173,20 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
     </footer>
   </div>
 
+  <div id="social-push">
+    <div>
+      <p>
+        <b>Become part of Blueprint's Discord community</b> and be one of the first to get notified about new extension releases and framework updates.
+      </p>
+      <a href="https://discord.gg/CUwHwv6xRe" class="link-underline link-underline-opacity-0 me-3"><i class="bi bi-discord me-1"></i> Join the community</a>
+      <a onclick="dismissSocial()" class="link-underline link-underline-opacity-0 pe-pointer text-secondary"><i class="bi bi-x-lg me-1"></i> Close</a>
+    </div>
+  </div>
+
   <script src="../.modules/bootstrap/js/bootstrap.bundle.js"></script>
   <script src="../.modules/bootstrap/etc/theme-switcher.js"></script>
   <script src="../.modules/js-yaml/js-yaml.min.js"></script>
+  <script src="../.modules/global/global.js"></script>
   <script>
     function loadYAML(url, callback) {
       var xhr = new XMLHttpRequest()

docs/index.html

@@ -164,10 +164,21 @@
     </footer>
   </div>
 
+  <div id="social-push">
+    <div>
+      <p>
+        <b>Become part of Blueprint's Discord community</b> and be one of the first to get notified about new extension releases and framework updates.
+      </p>
+      <a href="https://discord.gg/CUwHwv6xRe" class="link-underline link-underline-opacity-0 me-3"><i class="bi bi-discord me-1"></i> Join the community</a>
+      <a onclick="dismissSocial()" class="link-underline link-underline-opacity-0 pe-pointer text-secondary"><i class="bi bi-x-lg me-1"></i> Close</a>
+    </div>
+  </div>
+
   <script src="../.modules/bootstrap/js/bootstrap.bundle.js"></script>
   <script src="../.modules/bootstrap/etc/theme-switcher.js"></script>
   <script src="../.modules/marked/marked.min.js"></script>
   <script src="../.modules/highlight.js/highlight.min.js"></script>
+  <script src="../.modules/global/global.js"></script>
   <script src="./index.js"></script>
 
 </body>

index.html

@@ -260,6 +260,17 @@ <h1 class="display-5 fw-bold lh-1 text-body-emphasis mb-4">Write and manage modi
     </footer>
   </div>
 
+  <div id="social-push">
+    <div>
+      <p>
+        <b>Become part of Blueprint's Discord community</b> and be one of the first to get notified about new extension releases and framework updates.
+      </p>
+      <a href="https://discord.gg/CUwHwv6xRe" class="link-underline link-underline-opacity-0 me-3"><i class="bi bi-discord me-1"></i> Join the community</a>
+      <a onclick="dismissSocial()" class="link-underline link-underline-opacity-0 pe-pointer text-secondary"><i class="bi bi-x-lg me-1"></i> Close</a>
+    </div>
+  </div>
+
   <script src="./.modules/bootstrap/js/bootstrap.bundle.js"></script>
   <script src="./.modules/bootstrap/etc/theme-switcher.js"></script>
+  <script src="./.modules/global/global.js"></script>
 </body>