limepotato/nelle-observer
1
1
Fork 0
Code Pull requests Activity

hide all javascript elements until javascript is loaded

Browse source
This commit is contained in:
nelle 2024-09-08 14:00:09 -06:00
parent 719d60dc55
commit b7b14f9521
8 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/scripts/main.js Normal file
View file

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

2
src/components/footer/mybuttons.astro
View file

@ -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!

2
src/components/footer/other-buttons.astro
View file

@ -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>

3
src/components/main-page/silly-widgets.astro
View file

@ -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>

7
src/components/main-page/widgets/lastfm.astro
View file

@ -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>

6
src/components/main-page/widgets/ntfy.astro
View file

@ -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>

4
src/components/scripts/normal-scripts.astro
View file

@ -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>

6
src/layouts/Layout.astro
View file

@ -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"