Latest changes idk

assets/code-style.css

@@ -5,7 +5,7 @@ code {
     border-radius: 3px;
     font-family: "Maple Mono", monospace;
     font-style: normal;
-    /*font-size: 14pt;*/
+    font-size: 13pt;
 }
 
 div.code-toolbar {
@@ -30,7 +30,6 @@ code[class*="language-"] {
     overflow: auto;
     font-family: "Maple Mono", monospace;
     border-radius: 13px;
-    white-space: pre-wrap;
 }
 
 pre > code{

assets/img-style.css

@@ -1,4 +1,4 @@
-/* Image grid stuff */
+/* --- Image grid stuff --- */
 section.img_grid {
     display: flex;
     align-items: center;

assets/lib/scripts/music_status.css

@@ -0,0 +1,54 @@
+.music_tile {
+    font-family: "Noto Sans JP", sans-serif;
+
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    margin: auto;
+
+    .track_name {
+        font-size: 1.2em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .artist_name {
+        font-size: 1em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .album_name {
+        font-size: 0.9em;
+        color: #c1bfae;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    p#musicStatus {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+
+    hr {
+        margin: 10px 0px;
+        border: none;
+        height: 1px;
+        background-color: grey;
+    }
+
+    img {
+        margin: 20px;
+        border-radius: 10px;
+        height: 260px;
+        width: 260px;
+        object-fit: contain;
+    }
+}

assets/lib/scripts/music_status.js

@@ -0,0 +1,100 @@
+async function getData(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const json = await response.json();
+        return json
+    } catch (error) {
+        console.error(error.message);
+    }
+}
+
+const USERNAME = "G2";
+const LUCENE_ESCAPE = /([\!\*\+\-\=\<\>\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g;
+
+let artworkTile = document.getElementById("mainArtwork");
+let albumTitle = document.getElementById("albumTitle");
+let albumArtist = document.getElementById("albumArtist");
+let track = document.getElementById("track");
+let status = document.getElementById("musicStatus");
+let prev_mbid = null;
+
+async function main() {
+    // Get my currently playing song!
+    let statusTmp = "Currently playing:";
+    let songInfo = await getData("https://api.listenbrainz.org/1/user/" + USERNAME + "/playing-now")
+    if (songInfo["payload"]["count"] == 0) {
+        // If no current song, get last played
+        songInfo = await getData("https://api.listenbrainz.org/1/user/" + USERNAME + "/listens?count=1")
+        statusTmp = "Last played song:";
+    }
+
+    if (prev_mbid != null && prev_mbid == JSON.stringify(songInfo)) {
+        return;
+    }
+    prev_mbid = JSON.stringify(songInfo);
+
+    let artistName = songInfo["payload"]["listens"][0]["track_metadata"]["artist_name"];
+    let trackName = songInfo["payload"]["listens"][0]["track_metadata"]["track_name"];
+    let releaseMBID = songInfo["payload"]["listens"][0]["track_metadata"]["additional_info"]["release_mbid"];
+    if (releaseMBID == null && songInfo["payload"]["listens"][0]["track_metadata"]["mbid_mapping"] != null) {
+        releaseMBID = songInfo["payload"]["listens"][0]["track_metadata"]["mbid_mapping"]["release_mbid"];
+    }
+
+    // Search for the MBID if it's not included in the data
+    if (releaseMBID == null) {
+        let artistSearchName = encodeURIComponent(artistName.replace(LUCENE_ESCAPE, "\\$1"));
+        let trackSearchName = encodeURIComponent(trackName.replace(LUCENE_ESCAPE, "\\$1"));
+
+        console.log("https://musicbrainz.org/ws/2/recording/?query=" + trackSearchName + " AND artist:%22" + artistSearchName + "%22&fmt=json");
+        let searchedReleases = await getData(
+            "https://musicbrainz.org/ws/2/recording/?query=" + trackSearchName + " AND artist:%22" + artistSearchName + "%22&fmt=json"
+        );
+
+        console.log(searchedReleases);
+
+        if (searchedReleases["count"] >= 1) {
+            if (searchedReleases["recordings"][0]["releases"][0]) {
+
+            }
+            releaseMBID = searchedReleases["recordings"][0]["releases"][0]["id"];
+            console.log("Found MBID by search " + releaseMBID);
+        }
+    }
+
+    let albumName = "Unknown Album";
+    let artworkSrc = "https://placehold.co/260/2220/FFFDE6?text=?&font=roboto";
+    if (releaseMBID != null) {
+        // Get release information (like album title)
+        let releaseInfo = await getData("https://musicbrainz.org/ws/2/release/" + releaseMBID + "?fmt=json&inc=release-groups");
+        albumName = releaseInfo["title"];
+
+        let releaseGroupMBID = releaseInfo["release-group"]["id"];
+
+        // Grab the image from the release ID
+        let coverArtGroup = await fetch("https://coverartarchive.org/release-group/" + releaseGroupMBID + "/front-500");
+        if (coverArtGroup.status == 200) {
+            artworkSrc = coverArtGroup.url
+        } else {
+            let coverArtTrack = await fetch("https://coverartarchive.org/release/" + releaseMBID + "/front-500");
+            if (coverArtTrack.status == 200) {
+                artworkSrc = coverArtTrack.url;
+            }
+        }
+    }
+
+    console.log("%s %s by %s (%s)", statusTmp, trackName, artistName, albumName);
+
+    // Fill in the data
+    status.textContent = statusTmp;
+    albumArtist.textContent = artistName;
+    track.textContent = trackName;
+    albumTitle.textContent = albumName;
+    artworkTile.src = artworkSrc;
+}
+
+main().catch(console.log);
+setInterval(main, 10000);

assets/main-style.css

@@ -35,8 +35,7 @@ hr {
     margin-bottom: 20px;
 }
 
-/* Header */
+/* --- Header --- */
-
 header {
     margin-top: 20px;
     margin-bottom: 50px;
@@ -121,8 +120,7 @@ abbr {
     text-decoration-line: dotted;
 }
 
-/* Main Content */
+/* --- Main Content --- */
-
 main {
     display: grid;
     grid-template-columns: 50% 50%;
@@ -185,13 +183,23 @@ main section {
 
 .centered {
     grid-column: span 2;
-    max-width: 800px;
+    /*max-width: 800px;*/
-    min-width: 100%;
+    /*min-width: 100%;*/
+}
+
+.three_column {
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+        width: fit-content;
+        padding-right: 10px;
+    }
 }
 
 main section img {
     max-width: 95%;
-    margin: auto;
+    margin: 20px auto;
     display: block;
     border-radius: 13px;
 }
@@ -308,8 +316,7 @@ main .tags p:first-child {
     margin-bottom: 0;
 }
 
-/* Footer */
+/* --- Footer --- */
-
 footer {
     width: auto;
     margin-top: auto;
@@ -326,36 +333,7 @@ footer p:last-child {
     margin-bottom: 0;
 }
 
-nav.paginator {
+/* --- Blog Style --- */
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    font-size: 1.8em;
-    position: relative;
-
-    font-style: normal;
-    font-weight: bold;
-}
-
-nav.paginator::hover {
-    all: unset;
-}
-
-nav.paginator .next {
-    display: block;
-    position: absolute;
-    right: 10px;
-}
-
-nav.paginator .prev {
-    display: block;
-    position: absolute;
-    left: 10px;
-}
-
-/* Blog Style */
 blockquote {
     font-family: "IBM Plex Serif", serif;
     font-size: 15pt;
@@ -397,7 +375,36 @@ mark::selection {
     border-left: 1px solid grey;
 }
 
-/* Mobile/Small Screens */
+nav.paginator {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    font-size: 1.8em;
+    position: relative;
+
+    font-style: normal;
+    font-weight: bold;
+}
+
+nav.paginator::hover {
+    all: unset;
+}
+
+nav.paginator .next {
+    display: block;
+    position: absolute;
+    right: 10px;
+}
+
+nav.paginator .prev {
+    display: block;
+    position: absolute;
+    left: 10px;
+}
+
+/* --- Mobile/Small Screens --- */
 @media(max-width: 700px) {
     header {
         flex-direction: column;
@@ -428,6 +435,11 @@ mark::selection {
 
     .centered {
         grid-column: span 1;
+        min-width: 100%;
+    }
+
+    .three_column {
+        grid-template-columns: 1fr;
     }
 
     figure.showcase {
@@ -442,8 +454,7 @@ mark::selection {
     }
 }
 
-
+/* --- Dark theme stuff --- */
-/* Dark theme stuff */
 @media (prefers-color-scheme: dark) {
     body {
         color: #fffde6;
@@ -467,13 +478,13 @@ mark::selection {
         color: #b4e2ff;
     }
 
-    /* Header */
+    /* --- Header --- */
 
     header .navigation a.active::after {
         border-bottom: 2px solid #fffde6;
     }
 
-    /* Main Content */
+    /* --- Main Content --- */
 
     main > a:link, main > a:visited, main > a:hover {
         color: #FFF;
@@ -483,11 +494,6 @@ mark::selection {
         background-color: aliceblue;
     }
 
-    /*
-    main p {
-        color: #FFF;
-    }*/
-
     section.clickable {
         color: white;
         background-color: #2b2b32;

index.html

@@ -20,8 +20,11 @@ A place for personal projects and things. Enjoy!">
     <script data-goatcounter="https://resize.g2games.dev/count"
         async src="//resize.g2games.dev/count.js"></script>
 
-    <!-- The Stylesheet -->
+    <!-- The Stylesheets -->
     <link rel="stylesheet" href="/assets/main-style.css">
+
+    <!-- Music Tile -->
+    <link rel="stylesheet" href="/assets/lib/scripts/music_status.css">
 </head>
 <body>
     <header>
@@ -56,8 +59,10 @@ A place for personal projects and things. Enjoy!">
             <p>Some more of my links:</p>
             <p style="text-align:center;">
                 <a href="https://github.com/G2-Games">GitHub</a> &blacklozenge;
-                <a href="/git">Gitea</a> &blacklozenge;
+                <a href="/git">Forgejo</a> &blacklozenge;
-                <a href="https://ko-fi.com/g2_games">Ko-fi</a>
+                <a href="https://ko-fi.com/g2_games">Ko-fi</a> &blacklozenge;
+                <a href="/search">Search</a> &blacklozenge;
+                <a href="/portfolio">Portfolio</a>
             </p>
         </section>
 
@@ -70,13 +75,6 @@ A place for personal projects and things. Enjoy!">
             always.</p>
         </section></a>
 
-        <a href="/portfolio"><section class="clickable">
-            <h3>My Portfolio</h3>
-            <p>This portfolio is a list of things I have done and things I am
-            currently doing. Not comprehensive, and also I dislike selling
-            myself.</p>
-        </section></a>
-
         <a href="/random"><section class="clickable">
             <h3>Random Stuff</h3>
             <p>I tend to make a lot of random things on the internet. You can
@@ -111,52 +109,63 @@ A place for personal projects and things. Enjoy!">
 
         <!-- Favorite things -->
         <h2 class="sep center">My Favorites</h2>
-        <section class="centered">
+        <div class="centered three_column">
-            <p>A small list of things I enjoy. Favorites! This isn't at
+            <section>
-            all comprehensive and I'd love to add more.</p>
+                <p>General Apps:</p>
-        </section>
+                <ul>
+                    <li>Browser - <a href="https://www.mozilla.org/en-US/firefox/" title="Keep the web free!">Firefox</a></li>
+                    <li>Notetaking - <a href="https://github.com/zadam/trilium">Trilium</a></li>
+                    <li>Music Player - <a href="https://tauonmusicbox.rocks/">Tauon</a></li>
+                </ul>
 
-        <section>
+                <p>Editors:</p>
-            <p>General Apps:</p>
+                <ul>
-            <ul>
+                    <li>Text Editor - <a href="https://kate-editor.org/">Kate</a></li>
-                <li>Browser - <a href="https://www.mozilla.org/en-US/firefox/" title="Keep the web free!">Firefox</a></li>
+                    <li>Hex Editor - <a href="https://imhex.werwolv.net/">ImHex</a></li>
-                <li>Notetaking - <a href="https://github.com/zadam/trilium">Trilium</a></li>
+                </ul>
-                <li>Music Player - <a href="https://tauonmusicbox.rocks/">Tauon</a></li>
-            </ul>
 
-            <p>Text/Code Editor:</p>
+                <p>Fonts:</p>
-            <ul>
+                <ul>
-                <li><a href="https://kate-editor.org/">Kate</a></li>
+                    <li><a href="https://github.com/tonsky/FiraCode">Fira Code</a></li>
-            </ul>
+                    <li><a href="https://github.com/subframe7536/maple-font">Maple Mono</a></li>
+                    <li><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></li>
+                    <li><a href="https://fonts.google.com/noto">Noto</a></li>
+                </ul>
+            </section>
 
-            <p>Fonts:</p>
+            <section>
-            <ul>
+                <p>Programming Languages:</p>
-                <li><a href="https://github.com/tonsky/FiraCode">Fira Code</a></li>
+                <ul>
-                <li><a href="https://github.com/subframe7536/maple-font">Maple Mono</a></li>
+                    <li><a href="https://www.rust-lang.org/">Rust</a></li>
-                <li><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></li>
+                    <li><a href="https://www.python.org/">Python</a></li>
-                <li><a href="https://fonts.google.com/noto">Noto</a></li>
+                    <li><a href="https://www.typescriptlang.org/">TypeScript</a></li>
-            </ul>
+                </ul>
-        </section>
 
-        <section>
+                <p>Shell:</p>
-            <p>Programming Languages:</p>
+                <ul>
-            <ul>
+                    <li><a href="https://www.gnu.org/software/bash/">Bash</a> <i>Linux</i></li>
-                <li><a href="https://www.rust-lang.org/">Rust</a></li>
+                    <li><a href="https://github.com/PowerShell/PowerShell">PowerShell</a> <i>Windows</i></li>
-                <li><a href="https://www.python.org/">Python</a></li>
+                </ul>
-                <li><a href="https://www.typescriptlang.org/">TypeScript</a></li>
-            </ul>
 
-            <p>Shell:</p>
+                <p>Desktop Environment:</p>
-            <ul>
+                <ul>
-                <li><a href="https://www.gnu.org/software/bash/">Bash</a> <i>Linux</i></li>
+                    <li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li>
-                <li><a href="https://github.com/PowerShell/PowerShell">PowerShell</a> <i>Windows</i></li>
+                </ul>
-            </ul>
+            </section>
 
-            <p>Desktop Environment:</p>
+            <section>
-            <ul>
+                <div class="music_tile">
-                <li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li>
+                    <p id="musicStatus">Currently listening to:</p>
-            </ul>
+                    <p class="track_name" id="track">???</p>
-        </section>
+                    <hr>
+                    <div style="display:flex;flex-direction:column;">
+                        <p class="artist_name" id="albumArtist">???</p>
+                        <p class="album_name" id="albumTitle">???</p>
+                    </div>
+                    <img id="mainArtwork" src="https://placehold.co/260/2220/FFFDE6?text=?&font=roboto"/>
+                </div>
+            </section>
+        </div>
     </main>
 
     <footer>
@@ -168,4 +177,5 @@ A place for personal projects and things. Enjoy!">
         </p>
     </footer>
 </body>
+<script src="/assets/lib/scripts/music_status.js"></script>
 </html>

random/index.html

@@ -35,11 +35,13 @@ A place for personal projects and things. Enjoy!">
     </header>
 
     <main class="holder">
+        <h2 class="sep center">What's this?</h2>
         <section class="centered">
-            <h2 class="sep center">What's this?</h2>
             <p>This page contains random things I have made. Most of them have very little use, but some are kind of interesting! I'll keep it updated as I add more things. Please enjoy!</p>
         </section>
 
+        <!-- Begin random stuff!! -->
+
         <h2 class="sep center">Random Stuff</h2>
 
         <a href="dango.page"><section class="clickable">

random/mothofthemonth/index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="color-thief.umd.js"></script>
+    <title>Moth of the Month</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');
+
+        @keyframes fadein {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            max-width: 800px;
+            margin: auto;
+            display: flex;
+            flex-direction: column;
+            background-color: #2c2d41;
+            color: #cdd6f4;
+            padding: 10px;
+            animation-name: fadein;
+            animation-iteration-count: 1;
+            animation-duration: 1s;
+        }
+
+        h1 {
+            font-family: "Arsenal SC", sans-serif;
+            font-size: 36pt;
+            margin: 10px;
+        }
+
+        h2 {
+            font-family: "Arsenal SC", sans-serif;
+            font-size: 24pt;
+            margin-top: 20px;
+        }
+
+        hr {
+            margin: 10px;
+            color: #6c7086;
+        }
+
+        main {
+            display: flex;
+            flex-direction: column;
+        }
+
+        img {
+            width: 90%;
+            margin: auto;
+            /*border-radius: 10px*/;
+            border: 4px solid #7f849c;
+            box-shadow: 10px 9px #7f849c;
+        }
+
+        footer {
+            padding: 10px;
+        }
+
+        p {
+            font-family: "Radio Canada", serif;
+            font-size: 14pt;
+            color: #bac2de;
+        }
+
+        a:link {
+            color: #f38ba8;
+        }
+
+        a:visited {
+            color: #f2cdcd;
+        }
+
+        a:hover {
+            color: #f9e2af;
+        }
+
+        .learnmore {
+            font-size: 1.2em;
+            margin-top: 10px;
+        }
+
+        #loading {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background-color: #2c2d41;
+            top: 0;
+            left: 0;
+        }
+
+        #loading h1 {
+            position: fixed;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            font-family: sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <h1>Loading...</h1>
+    </div>
+    <header style="opacity:0;">
+        <h1>Moth of the Month</h1>
+    </header>
+    <main style="opacity:0;">
+        <img src="moth1.jpg" />
+        <h2>Japanese Silkmoth</h2>
+    </main>
+    <footer style="opacity:0;">
+        <p>
+        <i>Antheraea yamamai</i>, the Japanese silk moth or Japanese oak silkmoth is a moth of the family Saturniidae. It is endemic to east Asia, but has been imported to Europe for tussar silk production and is now found in southeastern Europe, mainly in Austria, northeastern Italy, and the Balkans. It seems to be spreading north and a population has been reported near Deggendorf and Passau in Germany. The species was first described by Félix Édouard Guérin-Méneville in 1861. It has been hybridized artificially with Antheraea polyphemus of North America.
+        </p>
+        <p class="learnmore"> — <a href="https://en.wikipedia.org/wiki/Antheraea_yamamai">Learn More</a></p>
+    </footer>
+</body>
+<script>
+    const colorThief = new ColorThief();
+    const img = document.querySelector('img');
+    const load = document.getElementById('loading');
+
+    const header = document.querySelector('header');
+    const main = document.querySelector('main');
+    const footer = document.querySelector('footer');
+
+    img.addEventListener('load', function() {
+        color = colorThief.getColor(img);
+        console.log(color);
+
+        img.style.boxShadow = "0px 0px 10px 5px rgb(" + color + ")";
+
+        load.style.display = "none";
+        header.style.animation = "fadein 1s 1 alternate forwards";
+        main.style.animation = "fadein 1s 1 alternate forwards";
+        footer.style.animation = "fadein 1s 1 alternate forwards";
+    });
+</script>
+</html>

random/writing/bombadil.txt

@@ -1,6 +0,0 @@
-And then on his back Tom threw his knapsack roughly,
-he made a right and left the room with vigor and
-and while thumping down the passage-way twixt leaflets old and blanding,
-and skipping up the stone-hewn steps right up to the landing;
-
-Tom took a right, by candle-light while walking to the