From b7b14f9521c9ea01ed74425e846ddb75ba192612 Mon Sep 17 00:00:00 2001
From: limepotato <limepot@protonmail.ch>
Date: Sun, 8 Sep 2024 14:00:09 -0600
Subject: [PATCH] hide all javascript elements until javascript is loaded

---
 public/scripts/main.js                        | 14 ++++++++++++++
 src/components/footer/mybuttons.astro         |  2 +-
 src/components/footer/other-buttons.astro     |  2 +-
 src/components/main-page/silly-widgets.astro  |  3 ---
 src/components/main-page/widgets/lastfm.astro |  7 ++++++-
 src/components/main-page/widgets/ntfy.astro   |  6 ++++--
 src/components/scripts/normal-scripts.astro   |  6 +++++-
 src/layouts/Layout.astro                      |  6 ++----
 8 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 public/scripts/main.js

diff --git a/public/scripts/main.js b/public/scripts/main.js
new file mode 100644
index 0000000..4699a9a
--- /dev/null
+++ b/public/scripts/main.js
@@ -0,0 +1,14 @@
+// if javascript is enabled, this script will load, enabling all site elements that use javascript, by default these are all hidden.
+function jsEnabled() {
+    // Get JS required element ids
+    const lastFmWidget = document.getElementById("lastfm-widget");
+    const ntfyWidgetContainer = document.getElementById("ntfyWidgetContainer");
+    const sgaButton = document.getElementById("sgaButton");
+    const incrementButton = document.getElementById("incrementButton");
+
+    // enable js required element ids
+    lastFmWidget.style.display = "initial";
+    ntfyWidgetContainer.style.display = "initial";
+    sgaButton.style.display = "initial";
+    incrementButton.style.display = "initial";
+}
\ No newline at end of file
diff --git a/src/components/footer/mybuttons.astro b/src/components/footer/mybuttons.astro
index 4fa86c0..cad4a45 100644
--- a/src/components/footer/mybuttons.astro
+++ b/src/components/footer/mybuttons.astro
@@ -3,7 +3,7 @@ buttons i created
 <a href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
 <a href="https://limepot.xyz/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/limepotxyz.gif" alt="animation of a bunch of twinkling stars (but purple)" loading="lazy"/></a>
 <a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a>
-<img width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy"/>
+<img id="sgaButton" style="display: none;" width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy"/>
 </div>
 <hr>
 every coin counts!
diff --git a/src/components/footer/other-buttons.astro b/src/components/footer/other-buttons.astro
index 8aa486e..cff0ce8 100644
--- a/src/components/footer/other-buttons.astro
+++ b/src/components/footer/other-buttons.astro
@@ -40,7 +40,7 @@ other buttons
 <!-- Memes -->
 <a href="https://www.noaa.gov/"><img class="badge" width="88" height="31" src="/assets/images/badges/noaa.gif" alt="NOAA" loading="lazy"/></a>
 <a href="https://www.java.com/"><img class="badge" width="88" height="31" src="/assets/images/badges/get_java.gif" alt="Get Java Now" loading="lazy"/></a>
-<iframe src="//incr.easrng.net/badge?key=nelle" style="background: url(//incr.easrng.net/bg.gif); border: 0;" title="increment badge" width="88" height="31" loading="lazy"></iframe>
+<iframe id="incrementButton" src="//incr.easrng.net/badge?key=nelle" style="background: url(//incr.easrng.net/bg.gif); border: 0; display: none;" title="increment badge" width="88" height="31" loading="lazy"></iframe>
 <img class="badge" width="88" height="31" src="/assets/images/badges/win7startup.gif" alt="Windows 7 Startup" loading="lazy"></img>
 <a href="https://archlinux.org/"><img class="badge" width="88" height="31" src="/assets/images/badges/archlinux.gif" alt="Archlinux badge" loading="lazy"/></a>
 <a href="https://github.com/yt-dlp/yt-dlp"><img class="badge" width="88" height="31" src="/assets/images/badges/youtube-dl.gif" alt="youtube-dl badge" loading="lazy"></a>
diff --git a/src/components/main-page/silly-widgets.astro b/src/components/main-page/silly-widgets.astro
index 60f263a..6cae1b9 100644
--- a/src/components/main-page/silly-widgets.astro
+++ b/src/components/main-page/silly-widgets.astro
@@ -6,8 +6,5 @@ import NTFY from "./widgets/ntfy.astro";
 <section class="content center" id="silly-widgets" >
   <h2>silly widgets <a href="#silly-widgets"><i class="nf nf-oct-link"></i></span></a></h2>
   <LastFM />
-  <br>
-  <hr />
-  <br>
   <NTFY />
 </section>
diff --git a/src/components/main-page/widgets/lastfm.astro b/src/components/main-page/widgets/lastfm.astro
index 32bdee8..82f9720 100644
--- a/src/components/main-page/widgets/lastfm.astro
+++ b/src/components/main-page/widgets/lastfm.astro
@@ -1,4 +1,6 @@
-<div id="lastfm-widget">
+<div
+  id="lastfm-widget"
+  style="display: none;">
   <div id="widget">
     <a href="https://www.last.fm/user/LimePotato"
       ><span style="color: var(--alt-accent-600);"
@@ -15,4 +17,7 @@
       ></span
     >
   </div>
+  <br />
+  <hr />
+  <br />
 </div>
diff --git a/src/components/main-page/widgets/ntfy.astro b/src/components/main-page/widgets/ntfy.astro
index 299686a..b61df55 100644
--- a/src/components/main-page/widgets/ntfy.astro
+++ b/src/components/main-page/widgets/ntfy.astro
@@ -6,13 +6,14 @@
     <small style="font-size: 12px; color: rgb(252, 76, 76);">
       DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
     </small>
+    <div id="ntfyWidgetContainer" style="display: none;">
     <br>
     <br>
   <!-- TEXT AREAS -->
     <div>
     <textarea id="ntfy-title" placeholder="title: Title" rows=1 style="resize: none; display: none;"></textarea>
     <textarea id="ntfy-message" placeholder="message: message" rows=2></textarea>
-    <textarea id="ntfy-attach" placeholder="attachment: https://http.cat/images/100.jpg" rows=1 style="resize: none;display: none;"></textarea>
+    <textarea id="ntfy-attach" placeholder="attachment: https://http.cat/images/100.jpg" rows=1 style="resize: none ;display: none;"></textarea>
     <textarea id="ntfy-click" placeholder="click: https://www.youtube.com/watch?v=dQw4w9WgXcQ" rows=1 style="resize: none; display: none;"></textarea>
   </div>
   <button
@@ -49,8 +50,9 @@
         <span>meow</span>
         </button>
       </fieldset>
+    </div>
   <br>
   <br>
   <!-- DISCLAIMER/INFO -->
-  <small>if it doesnt seem to be working, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
+  <small>if it doesnt seem to be working/you cant see the field, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
   </div>
\ No newline at end of file
diff --git a/src/components/scripts/normal-scripts.astro b/src/components/scripts/normal-scripts.astro
index fc4d060..3af2968 100644
--- a/src/components/scripts/normal-scripts.astro
+++ b/src/components/scripts/normal-scripts.astro
@@ -4,4 +4,8 @@
 <!-- unoptimized -->
 <!-- <script is:inline src="/scripts/ntfy.js"></script>-->
 <script is:inline  src="/scripts/lastfm.js"></script>
-<script is:inline src="/scripts/sound.js"></script>
\ No newline at end of file
+<script is:inline src="/scripts/sound.js"></script>
+<script is:inline src="/scripts/fuckchrome.js"></script>
+<script is:inline src="/scripts/sga.js"></script>
+<script is:inline src="/scripts/ntfy.js"></script>
+<script is:inline src="/scripts/main.js"></script>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6dba889..43d719b 100755
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,7 +16,7 @@ const { title } = Astro.props;
   <head>
     <Head title={title} />
   </head>
-  <body onload="getSGAState(), redirect(), checkBoxes(), getPlaceholder()" id="body">
+  <body onload="jsEnabled(), getSGAState(), redirect(), checkBoxes(), getPlaceholder()" id="body">
     <Header />
     <section class="content center">
       <h1 class="title">{title}</h1>
@@ -24,9 +24,7 @@ const { title } = Astro.props;
     <slot />
     <Footer />
     <NormalScripts />
-    <script is:inline src="/scripts/fuckchrome.js"></script>
-    <script is:inline src="/scripts/sga.js"></script>
-    <script is:inline src="/scripts/ntfy.js"></script>
+
     <!-- <script is:inline src="/scripts/sn.js"></script>-->
     <audio
       id="clickSound"