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";
+}

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!

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>

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>

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>

src/components/main-page/widgets/ntfy.astro

@@ -6,6 +6,7 @@
     <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 -->
@@ -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>

src/components/scripts/normal-scripts.astro

@@ -5,3 +5,7 @@
 <!-- <script is:inline src="/scripts/ntfy.js"></script>-->
 <script is:inline  src="/scripts/lastfm.js"></script>
 <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>

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"