New loading system, local font!

.gitignore

@@ -130,3 +130,5 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+# Violet's Purgatory
+static/assets/

index.js

@@ -22,51 +22,65 @@ app.listen(PORT, () => {
 })
 
 app.get("/", (req, res) => {
+
+    res.setHeader("X-Content-Type-Options", "")
+
+    var statuses = {
+        "online": {
+            "text": "Online",
+            "color": "rgb(100, 255, 100)"
+        },
+        "dnd": {
+            "text": "DND",
+            "color": "rgb(255, 100, 100)"
+        },
+        "idle": {
+            "text": "Idle",
+            "color": "rgb(255, 255, 75)"
+        },
+        "offline": {
+            "text": "Offline",
+            "color": "rgb(125, 125, 125)"
+        }
+    }
+    
     var html = fs.readFileSync(mainpage).toString()
     
-    var addedHTML = ""
+    var checkpoint = ["{LANYARD_STATUS}", "{LANYARD}"]
+
+    function io(numb, end=false) {
+        if (end) {
+            return html.indexOf(checkpoint[numb]) + checkpoint[numb].length
+        }
+        return html.indexOf(checkpoint[numb])
+    }
+
+    res.write(html.substring(0, io(0)))
+
+    var statusData = statuses[lanyardData.discord_status]
+
+    res.write(`<p style="color: ${statusData.color}">${statusData.text}</p>`)
+    res.write(`<style>.pfp { border-color: ${statusData.color} !important }</style>`)
+
+    res.write(html.substring(io(0, true), io(1)))
 
     if (lanyardData) {
         for (let index = 0; index < lanyardData.activities.length; index++) {
             const activity = lanyardData.activities[index];
             console.log(activity)
             if (activity.type == 2) {
-                addedHTML += `<p class="chip">Listening to on <span style="color: limegreen">${activity.name}</span>: ${activity.details} (by ${activity.state})</p>`
+                res.write(`<p class="chip">Listening on <a style="color: limegreen">${activity.name}</a>: ${activity.details} (by ${activity.state})</p>`)
             } else if (activity.type == 4) {
-                addedHTML += `<p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>`
+                res.write(`<p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>`)
             }
         }
 
-        var statuses = {
-            "online": {
-                "text": "Online",
-                "color": "rgb(100, 255, 100)"
-            },
-            "dnd": {
-                "text": "DND",
-                "color": "rgb(255, 100, 100)"
-            },
-            "idle": {
-                "text": "Idle",
-                "color": "rgb(255, 255, 75)"
-            },
-            "offline": {
-                "text": "Offline",
-                "color": "rgb(125, 125, 125)"
-            }
-        }
-        var statusData = statuses[lanyardData.discord_status]
-
-        addedHTML += `<style>.pfp { border-color: ${statusData.color} !important }</style>`
-
         console.log(lanyardData.activities)
     }
-
+    console.log(io(checkpoint.length - 1, true))
-    html = html.replace("{LANYARD_STATUS}", `<p style="color: ${statusData.color}">${statusData.text}</p>`)
+    res.write(html.substring(io(checkpoint.length - 1, true), html.length) + "<p>Thank you for checking out my website <3</p>", () => {
-
+        res.end()
-    html = html.replace("{LANYARD}", addedHTML)
+    })
-
-    res.send(html)
 })
 
 // Lanyard Stuffs

resources/mainPage.html

@@ -5,16 +5,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/assets/bootstrap.min.css">
     <link rel="stylesheet" href="/style.css">
 
     <title>Violet's Purgatory</title>
 
+    <link rel="stylesheet" href="/Rubik/Rubik-VariableFont_wght.ttf">
+
     <meta content="Welcome to Violet's Purgatory" property="og:title" />
     <meta
         content="I'm Violet, a 14yo web and game developer. On my site i'm hosting various services, so please check out the site for more info!!!"
         property="og:description" />
-    <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
+    <meta content="/assets/discPFP.png" property="og:image" />
     <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
 
     <!-- To any who dare read this code! I stole the code above off of stack overflow :P-->

static/hosted/index.html

@@ -19,9 +19,8 @@
 </head>
 
 <body>
-    <br>
     <a class="chip" href="/">Home</a>
-    <h1>Stuff i'm hosting! <hr></h1>
+    <h1>Hosting<hr></h1>
     <div class="fadediv">
         <h2>Warning:</h2>
         <p>Due to changes in hosting, some services are still down. SearX (the original) has decent uptime, but SearXNG will be continiously going back up and down. Univerter & Fortnite have currently no efforts put towards getting them back up.</p>
@@ -29,15 +28,16 @@
         <hr> 
         <p>Things with a green border are up, things with a yellow border are inconsistent or have problems, things with a red border are down. </p>
         <h2><hr>Social Media:</h2>
-        <p class="chip up">Univerter (Report issues <a href="https://github.com/Violets-puragtory/NoJS-YTConverter">here</a>!): <a href="https://yt.violets-purgatory.dev">yt.violets-purgatory.dev</a></p>
+        <p class="chip down">Univerter (Report issues <a href="https://codeberg.org/Bingus_Violet/NoJS-YTConverter">here</a>!): <a href="https://yt.violets-purgatory.dev">yt.violets-purgatory.dev</a></p>
         <p>Planned: Matrix, Mastodon</p>
         <h2><hr>Search engines/utilities:</h2>
+        <p class="chip up">Whoogle: <a href="https://wg.violets-purgatory.dev">wg.violets-purgatory.dev</a></p>
         <p class="chip up">SearX: <a href="https://sx.violets-purgatory.dev">sx.violets-purgatory.dev</a></p>
         <p class="chip mid">SearXNG: <a href="https://sxng.violets-purgatory.dev">sxng.violets-purgatory.dev</a></p>
         <p>Nothing planned...</p>
         <h2><hr>Etc / Funny</h2>
         <p class="chip down">Fortnite (Web edition!): <a href="https://fortnite.violets-purgatory.dev">fortnite.violets-purgatory.dev</a></p>
-        <p>Nothing planned.</p>
+        <p>Nothing planned...</p>
         <hr>
         <p>Have any ideas of what I should host? Submit an issue with your idea to codeberg!</p>
         <p>All ideas are welcome, just make sure that they have not been tried in the past! Please also ensure that it is not listed on the codeberg page.</p>

static/pronouns/index.html

@@ -23,7 +23,6 @@
 
     <!-- Yet again I would like to apologize for the absolutely atrocious code !! -->
 
-    <br>
     <p class="chip"><a href="/">Home</a></p>
     <h1>Pronouns</h1>
     <div class="fadediv row container-fluid">

static/socials/index.html

@@ -18,7 +18,6 @@
 </head>
 
 <body>
-    <br>
     <a class="chip" href="/">Home</a>
     <h1>Socials
         <hr>

static/style.css

@@ -1,4 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');
+@font-face {
+    font-family: 'Rubik';
+    src: url("/assets/Fonts/Rubik/Rubik-VariableFont_wght.ttf");
+    font-style: normal;
+    font-weight: 400;
+}
 
 * {
     font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
@@ -10,7 +15,6 @@
 h1 {
     color: rgb(225, 215, 255);
     font-size: 2.5rem;
-    margin-top: 20px;
 }
 
 h2 {
@@ -48,7 +52,7 @@ a {
 .chip {
     font-size: 1.3rem;
     border: 2px gray solid;
-    /* border-radius: 4px; */
+    border-radius: 6px;
     background-color: black;
     padding: 8px;
     margin: 3px;
@@ -102,7 +106,7 @@ hr {
     background-color: rgb(75, 25, 100);
     padding: 15px;
     border: 2px white solid;
-    margin: 25px auto;
+    margin: 20px auto;
     width: 95%;
     
 }