Merge pull request 'oops :>' (#1) from main into origin

Reviewed-on: https://codeberg.orgBingus_Violet/Violets-Purgatory#1

.gitignore

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

README.md

@@ -1,3 +1,25 @@
 # Violets-Purgatory
 
-Violets Purgatory is a personal webapp for me!!! Because everyone wants to see the source code for my ~~horrible~~ awesome website... right?
+This is the source code for the main page of my website, which can be found at <a href="https://violets-purgatory.dev">violets-purgatory.dev</a>.
+Currently, there is no client-side javascript on the main page, and I plan to keep it this way even if it kills me!
+    
+## Hosting:
+Violet's Purgatory is hosting multiple useful resoures, such as SearXNG, and a convinient rickroll, with more planed to come.
+
+# To-Do:
+## Main site
+- [ ] Make a page about my games & other projects
+- [ ] Make a portfolio
+- [x] Have information on socials page dynamically update in real time (E.G. Pull Discord user from ID)
+- [x] Make the README ~~not~~ slightly less garbage
+- [x] Add page for hosted sites
+- [x] Make Socials Page
+- [x] Make Pronouns page
+## Hosting
+- [ ] Add submission forum for hosting suggestions
+- [ ] Host Fediverse instance
+- [ ] Host Matrix instance (Almost done!)
+- [ ] Minecraft
+- [ ] A forum
+- [x] SearXNG
+- [x] SearX (normal)

index.js

@@ -1,41 +1,247 @@
 const express = require('express'),
-// ws = require('ws'),
+    path = require('path'),
-path = require('path'),
+    fs = require('fs'),
-fs = require('fs')
+    WebSocket = require('ws'),
-
+    xml2json = require('xml-js')
-// const websocket = new ws.WebSocket('wss://api.lanyard.rest/socket', {})
-
-// var heartInt = 30000
-
-// function heartbeat() {
-//     websocket.send(JSON.stringify({op: 3}))
-
-//     setTimeout(() => {
-//         heartbeat()
-//     }, heartInt);
-// }
-
-// websocket.on('message', function mess(buffer, bing) {
-//     var data = JSON.parse(buffer)
-//     var opc = data.op
-
-//     console.log(data)
-    
-//     if (opc == 1) {
-//         heartint = buffer.heartbeat_interval
-//         heartbeat()
-//     }
-// })
 
 var app = express()
 
 const PORT = process.env.PORT || 8080
 
-const staticpath = path.join(__dirname, (process.env.STATIC_PATH || 'static/'))
+const staticpath = path.join(__dirname, 'static')
+const resourcePath = path.join(__dirname, "resources")
+
+const mainpage = resourcePath + '/mainPage.html'
+var lanyardData = undefined
+
+var discData = null
+
+var mastoData = {
+    "lastUpdate": 0,
+    "HTML": ""
+}
 
 app.use(express.static(staticpath))
 
 app.listen(PORT, () => {
-    console.log("Violets-Purgatory is now listening on port: " + PORT)
+    console.log("Violet's Purgatory is now listening on port: " + PORT)
 })
 
+function pageUpdate() {
+    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 = ""
+
+    if (lanyardData) {
+        var statusData = statuses[lanyardData.discord_status]
+
+        addedHTML += `<p style="color: ${statusData.color}">${statusData.text}</p>`
+        addedHTML += `<style>.pfp { border-color: ${statusData.color} !important }</style>`
+    }
+
+    html = html.replace("{LANYARD_STATUS}", addedHTML)
+
+    addedHTML = ""
+
+    if (lanyardData && lanyardData.activities.length > 0) {
+        if (lanyardData.activities[0].type == 4) {
+            addedHTML += `<hr><p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>`
+        }
+    }
+
+    html = html.replace("{LANYARD_QUOTE}", addedHTML)
+
+    addedHTML = ""
+
+    if (lanyardData) {
+        for (let index = 0; index < lanyardData.activities.length; index++) {
+            const activity = lanyardData.activities[index];
+            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>`
+            }
+        }
+    }
+
+    html = html.replace("{LANYARD_SPOTIFY}", addedHTML)
+
+    addedHTML = ""
+
+    var debounce = false
+
+    if (lanyardData && lanyardData.activities.length > 0) {
+        for (let index = 0; index < lanyardData.activities.length; index++) {
+            const activity = lanyardData.activities[index];
+
+            if (!debounce && activity.type != 4) {
+                addedHTML += `<h2><hr>What I'm up to:</h2><div class="container-fluid row" style="margin: 0; padding: 0; display: flex;">`
+                debounce = true
+            }
+            function get_img() {
+                if ("assets" in activity) {
+                    var image = undefined
+                    if ("large_image" in activity.assets) {
+                        image = activity.assets.large_image
+                    } else if ("small_image" in activity.assets) {
+                        image = activity.assets.small_image
+                    }
+                    if (image) {
+                        if (image.includes("https/")) {
+                            return decodeURIComponent('https://' + image.substr(image.indexOf('https/') + 6, image.length))
+                        } else if (image.includes("spotify")) {
+                            return decodeURIComponent('https://i.scdn.co/image/' + image.substr(image.indexOf('spotify:') + 8, image.length))
+                        } else {
+                            return decodeURIComponent(`https://cdn.discordapp.com/app-assets/${activity.application_id}/${image}.png`)
+                        }
+                    }
+                }
+            }
+            if (activity.type == 2) {
+                if (get_img()) {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 testing">
+                        <img src="${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
+                            <p>
+                                Listening to <span style="color: limegreen;">${activity.name}</span> 
+                                <br> Song: ${activity.details}
+                                <br> Album: ${activity.assets.large_text}
+                                <br> Artist: ${activity.state}
+                            </p>
+                    </div>
+                `
+                } else {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 testing">
+                        <p style="width: 100%;">
+                            Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> 
+                            <br> ${activity.state}
+                            <br> ${activity.details}
+                        </p>
+                    </div>
+                    `
+                }
+            } else if (activity.type == 0) {
+                if (get_img()) {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 testing">
+                            <img src="${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
+                            <p>
+                                Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> 
+                                <br> ${activity.details || activity.assets.large_text}
+                                <br> ${activity.state || activity.assets.small_text}
+                            </p>
+
+                    </div>
+                `
+                } else {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 testing">
+                        <p>
+                            Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> 
+                            <br> ${activity.state}
+                            <br> ${activity.details}
+                        </p>
+                    </div>
+                    `
+                }
+            }
+        }
+    }
+
+    if (addedHTML) {
+        addedHTML += "</div>"
+    }
+
+    html = html.replace("{LANYARD_FULL}", addedHTML)
+
+    addedHTML = ""
+
+    var socialsHTML = fs.readFileSync(path.join(__dirname, 'static/socials/index.html')).toString()
+    addedHTML += socialsHTML.substring(socialsHTML.indexOf("<h1>"), socialsHTML.indexOf("</body>"))
+
+    html = html.replace("{SOCIALS}", addedHTML)
+
+    html = html.replace("{MASTODON_FEED}", mastoData.HTML)
+
+    fs.writeFileSync(path.join(__dirname, 'static/index.html'), html)
+}
+
+// Lanyard Stuffs
+
+var lanyard = new WebSocket('wss://api.lanyard.rest/socket')
+
+function beat(dur) {
+    lanyard.send(JSON.stringify({
+        op: 3
+    }))
+    setTimeout(() => {
+        beat(dur)
+    }, dur);
+}
+
+lanyard.addEventListener("message", (res) => {
+    var data = JSON.parse(res.data)
+    if (data.op == 1) {
+        beat(data.d.heartbeat_interval)
+        lanyard.send(JSON.stringify({
+            op: 2,
+            d: {
+                subscribe_to_id: "534132311781015564"
+            }
+        }))
+    } else if (data.op == 0) {
+        lanyardData = data.d
+        pageUpdate()
+    }
+})
+
+// Mastodon Updates
+
+function mastoUpdate() {
+    fetch("https://tech.lgbt/@bingus_violet.rss")
+    .then((data) => {
+        return data.text()
+    })
+    .then((xml) => {
+        var data = xml2json.xml2js(xml, { compact: true }).rss.channel
+        var posts = data.item
+
+        var newHTML = `<div>`
+
+        for (let index = 0; index < Math.min(posts.length, 7); index++) {
+            const post = posts[index];
+            newHTML += `<a href="${post.link._text}"><div class="post">`
+            newHTML += `<img class="minipfp" src="${data.image.url._text}">`
+            newHTML += `<h3 style="display: inline-block; vertical-align: -15%;">` + data.title._text + `</h3><br>`
+            newHTML += post.description._text
+            newHTML += `</a></div><br>`
+        }
+
+        mastoData.HTML = `<h2><hr>Mastodon Posts: </h2>` + newHTML + "</div>" + `<br> <a class="chip" href="https://tech.lgbt/@bingus_violet">See more on Mastodon</a>`
+        
+        pageUpdate()
+    })
+    setTimeout(()=> {
+        mastoUpdate()
+    }, 1000 * 60 * 60)
+}
+
+// mastoUpdate()

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "violets-purgatory",
   "version": "1.0.0",
-  "lockfileVersion": 3,
+  "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
@@ -10,7 +10,8 @@
       "license": "MIT",
       "dependencies": {
         "express": "^4.18.2",
-        "ws": "^8.14.2"
+        "ws": "^8.14.2",
+        "xml-js": "^1.6.11"
       }
     },
     "node_modules/accepts": {
@@ -489,6 +490,11 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+    },
     "node_modules/send": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@@ -620,6 +626,468 @@
           "optional": true
         }
       }
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    }
+  },
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "requires": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      }
+    },
+    "bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "requires": {
+        "safe-buffer": "5.2.1"
+      }
+    },
+    "content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
+    },
+    "cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+    },
+    "destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
+    },
+    "express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "requires": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "requires": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
+    },
+    "object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+    },
+    "on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "requires": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+    },
+    "send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
+    },
+    "toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
+    },
+    "ws": {
+      "version": "8.14.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
+      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "requires": {}
+    },
+    "xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "requires": {
+        "sax": "^1.2.4"
+      }
     }
   }
 }

package.json

@@ -4,7 +4,7 @@
   "description": "Violets Purgatory is a personal webapp for",
   "main": "index.js",
   "scripts": {
-    "test": "node index.js"
+    "start": "node index.js"
   },
   "repository": {
     "type": "git",
@@ -18,6 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "express": "^4.18.2",
-    "ws": "^8.14.2"
+    "ws": "^8.14.2",
+    "xml-js": "^1.6.11"
   }
 }

resources/mainPage.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="./style.css">
+
+    <title>Violet's Purgatory</title>
+
+    <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="#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-->
+</head>
+
+<body>
+    <h1>Welcome to Violet's Purgatory</h1>
+    <div class="fadediv">
+        <div class="container-fluid row" id="card">
+            <h2>Violet</h2>
+            <div class="col-sm-12" style="display: flex; justify-content: center; align-items: center;">
+                <img src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
+                <div>
+                    <p>They/Them</p>
+                    <p>Non-binary</p>
+                    <p>Game & web developer</p>
+                    {LANYARD_STATUS}
+                </div>
+            </div>
+            <div class="col-sm-12">
+                <hr>
+                <p class="chip"><a href="./hosted">Stuff i'm hosting!</a></p>
+                <p class="chip"><a href="./socials">Socials</a></p>
+                <p class="chip"><a href="./pronouns">Pronouns</a></p>
+                {LANYARD_QUOTE}
+            </div>
+        </div>
+        <p><em>The world's worst developer</em></p>
+        <noscript>
+            <p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done
+                server-side, so enjoy :D <br> P.S. Your really cool, I look up to people like u :> (Atleast, assuming you disabled javascript urself...)</p>
+        </noscript>
+        {LANYARD_FULL}
+        {SOCIALS}
+        
+        {MASTODON_FEED}
+    </div>
+</body>
+</html>

static/hosted/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../style.css">
+
+    <meta content="Hosting on Violet's Purgatory" property="og:title" />
+    <meta content="On violet's purgatory, I host various search engines, social media, and other utilities. Please check out the site to see these services!" />
+    <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
+    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
+    
+    <title>Hosting - Violet's Purgatory</title>
+</head>
+
+<body>
+    <a class="chip" href="../">Home</a>
+    <h1>Hosting<hr></h1>
+    <div class="fadediv">
+        <p>I do not believe that any of these services are worth using. Currently, as much as I wish I could, I will not be adding any more services. That may change if I can get better options for hosting.</p>
+        <h2><hr>Social Media:</h2>
+        <p class="chip up">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>
+        <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 up">SearXNG: <a href="https://sxng.violets-purgatory.dev">sxng.violets-purgatory.dev</a></p>
+        <h2><hr>Etc / Funny</h2>
+        <p class="chip up">Fortnite (Web edition!): <a href="https://fortnite.violets-purgatory.dev">fortnite.violets-purgatory.dev</a></p>
+
+    </div>
+</body>
+
+</html>

static/index.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <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" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    <link rel="stylesheet" href="./style.css">
-
-    <title>Violet's Purgatory</title>
-</head>
-
-<body class="centered">
-    <div id="card">
-        <h1>Violets Purgatory</h1>
-        <p>Hi! I'm Violet, a teenage web and game developer.</p>
-        <p>My main engine is Godot, and i'm currently bouncing between projects, but I am mainly focusing on a space
-            shooter and a boss rush right now.</p>
-        <p>If you have any issues with the site, put up an issue on codeberg!</p>
-        <br>
-        <p style="color: rgb(255, 125, 125)">Keep in mind that, in general, work on everything may be slowed down for now as I enter college and work on robotics.</p>
-
-       <p>If you need to reach out to me for any reason, please go check my socials! I prefer Revolt, and it will likely be fastest.</p>
-
-        <div id="links">
-            <a href="/socials/">Socials</a>
-            <a href="/portfolios/">Portfolios</a>
-            <a href="/AAAA/">SomethingElse</a>
-        </div>
-    </div>
-</body>
-
-</html>

static/pronouns/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../style.css">
+
+    <meta content="Violet's Pronouns" property="og:title" />
+    <meta content="Check out this page to see more about my preffered pronouns :P" property="og:description" />
+    <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
+    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
+    
+    <title>Pronouns - Violet's Purgatory</title>
+</head>
+
+<body>
+
+
+    <!-- Yet again I would like to apologize for the absolutely atrocious code !! -->
+
+    <a class="chip" href="../">Home</a>
+    <h1>Pronouns</h1>
+    <div class="fadediv row container-fluid">
+        <div class="col-sm-12">
+            <p class="chip love">Love</p>
+            <p class="chip like">Like</p>
+            <p class="chip silly">Fine if used Silly/Jokingly</p>
+            <p class="chip fine">Neutral</p>
+            <p class="chip hate">Hate</p>
+        </div>
+        <div class="col-sm-6">
+            <hr>
+            <h2>Names</h2>
+            <p class="chip love">Violet, Vivi, Vi, V</p>
+            <p class="chip like">Purple</p>
+            <p class="chip silly">Purple guy</p>
+        </div>
+
+        <div class="col-sm-6">
+            <hr>
+            <h2>Pronouns</h2>
+            <p class="chip love">They/Them</p>
+            <p class="chip fine">She/Her, etc...</p>
+            <p class="chip hate">He/Him</p>
+        </div>
+
+        <div class="col-sm-6">
+            <hr>
+            <h2>Honorifics</h2>
+            <p class="chip like">Mrs/Ms, Miss, Ma'am</p>
+            <p class="chip silly">Sir, Mr</p>
+            <p class="chip fine">Mx</p>
+        </div>
+
+        <div class="col-sm-6">
+            <hr>
+            <h2>Other words</h2>
+            <p class="chip love">Any silly Enby/Slime/Moth related terms</p>
+            <p class="chip like">Dude, Partner, Bro</p>
+            <p class="chip silly">Guy, Pardner</p>
+        </div>
+    </div>
+    <hr>
+    <p>If there's any more confusion, or a section you'd want me to add, please put an issue on codeberg :D</p>
+</body>
+
+</html>

static/socials/index.html

@@ -1,41 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="main.js"></script>
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link rel="stylesheet" href="../style.css">
 
-    <title>VP - Socials</title>
+
+    <meta content="Violet's Purgatory - Socials" property="og:title" />
+    <meta content="On this page, you can find all my social media, such as fedi, matrix, and more." />
+    <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
+    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
+
+    <title>Socials - Violet's Purgatory</title>
 </head>
-<body class="row container-fluid">
+
-    <h1><br>Socials</h1>
+<body>
-    <div class="col-md-6 col-xl-4">
+    <a class="chip" href="../">Home</a>
-        <div class="miniCard row container-fluid" id="discCard">
+    <h1><hr>Socials</h1>
-            <h2>Discord</h2>
+    <p>Here's where you can find me most... if you wanted to do that for some reason?</p>
+    <div class="row container-fluid" style="margin: auto;">
+
         <div class="col-sm-6">
-                <img id="discPFP" src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
+            <hr>
+            <h2>Chat Applications:</h2>
+            <a href="https://matrix.to/#/@bingus_violet:catgirl.cloud" class="chip"><span style="color: limegreen">Matrix</span>: @bingus_violet:&ZeroWidthSpace;catgirl.cloud</a>
+            <p class="chip"><span style="color: red;">Revolt</span>: BingusViolet#5573</p>
+            <p class="chip"><span style="color: rgb(125, 150, 225)">Discord</span>: bingus_violet</p>
+            
         </div>
+
         <div class="col-sm-6">
-                <p><span id="discUser">bingus_violet</span></p>
+            <hr>
-                <p>Status: <span id="discStatus">Offline</span></p>
+            <h2>Social media:</h2>
+            <p class="chip" style="color: rgb(200, 175, 255);">Fedi: <a
+                    href="https://tech.lgbt/@Bingus_Violet" rel="me">@Bingus_Violet@tech.lgbt</a></p>
+            <p class="chip" style="color: rgb(255, 80, 80)">Youtube: <a
+                    href="https://www.youtube.com/channel/UChcrBJNJLZucy3TPyGyAY2g">Violet's Fiasco</a></p>
         </div>
-        </div>
+
-    </div>
-    <div class="col-md-6 col-xl-4">
-        <div class="miniCard row container-fluid">
-            <h2>Revolt</h2>
         <div class="col-sm-6">
-                <img src="https://autumn.revolt.chat/avatars/6HqUpYqnO7_Uagmbb7SqTqKHOjP0fQ0VQh0jz2PJwF/IMG_5404.jpg" class="pfp">
+            <hr>
+            <h2>Git sites:</h2>
+            <p class="chip">Github: <a href="https://github.com/Violets-puragtory">Violets-puragtory</a></p>
+            <p class="chip" style="color: aqua">Codeberg: <a href="https://codeberg.org/Bingus_Violet">Bingus_Violet</a>
+            </p>
         </div>
+
         <div class="col-sm-6">
-                <p><span id="revUser">BingusViolet#5573</span></p>
+            <hr>
-            </div>
+            <h2>Game sites:</h2>
+            <p class="chip" style="color: darkgrey">Steam: <a
+                    href="https://steamcommunity.com/id/Violet-The-Thigh-high-obtainer/">Violet</a></p>
         </div>
+
     </div>
 </body>
 </html>

static/socials/main.js

@@ -1,23 +0,0 @@
-var statColors = {
-    "Do Not Disturb": "rgb(255, 25, 25)",
-    "online": "rgb(0, 255, 0)",
-    "idle": "rgb(255, 255, 25)",
-    "offline": "rgb(150, 150, 150)"
-}
-
-fetch('https://api.lanyard.rest/v1/users/534132311781015564', {
-    method: 'GET',
-    headers: {
-        'Accept': 'application/json',
-    },
-})
-   .then(response => response.json())
-   .then(response => {
-    var userdata = response.data.discord_user
-    var statusData = response.data.discord_status
-
-    $("#discUser").text(JSON.stringify(userdata.username).slice(1, -1))
-    $("#discStatus").text(JSON.stringify(statusData).charAt(1).toUpperCase() + JSON.stringify(statusData).slice(2, -1))
-    $("#discPFP, #discCard").css("border-color", statColors[JSON.stringify(statusData).slice(1, -1)])
-    // $("*").text(JSON.stringify(response))
-   })

static/style.css

@@ -1,112 +1,230 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
+@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
 
-:root {
+* {
     font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
     padding: 0;
     text-align: center;
-
+    line-height: 1.5rem;
-    --bg-color-1: rgb(125, 25, 100);
-    --bg-color-2: rgb(75, 25, 125);
-
-    --faded-bg-color-1: rgb(80, 20, 60);
-    --faded-bg-color-2: rgb(60, 20, 80);
-
-    --button-bg-1: rgb(75, 75, 125);
 }
 
 h1 {
     color: rgb(225, 215, 255);
-    font-size: 3rem;
+    font-size: 2.5rem;
 }
 
-h2 {
+h2,
+h3 {
     color: white;
-    font-size: 2rem;
+}
+
+body,
+html {
+    overflow-x: hidden;
+    margin: auto;
+    background-color: rgb(20, 5, 60);
+    background: linear-gradient(rgb(25, 5, 75), black);
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-    width: 100vw;
+    padding: 2.5%;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-    background-color: var(--faded-bg-color-1);
-    background-image: linear-gradient(45deg, var(--faded-bg-color-1), var(--faded-bg-color-2))
 }
 
-.centered {
+.fadediv {
-    display: flex;
+    animation-name: fade-in;
-    justify-content: center;
+    animation-duration: .75s;
-    align-items: center;
+    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+    margin: auto;
+    max-width: 1000px;
 }
 
-#card {
-    border: rgb(225, 225, 255) 5px solid;
-    border-radius: 25px;
-    width: 90%;
-    height: 90%;
-    padding: 30px;
-    background-color: var(--bg-color-2);
-    background-image: linear-gradient(var(--bg-color-1), var(--bg-color-2));
-    overflow: auto;
-}
-
-.miniCard {
-    text-align: center;
-    border: rgb(225, 225, 255) 4px solid;
-    border-radius: 25px;
-    padding: 20px;
-    margin: 20px; 
-    background-color: var(--bg-color-2);
-    background-image: linear-gradient(var(--bg-color-1), var(--bg-color-2));
-    overflow: hidden;
-    max-width: 100%;
-    max-height: 100%;
-    /* display: inline-block; */
-}
-
-/* #links {
-    text-align: center !important;
-    display: inline-flex !important;
-    justify-content: center !important;
-    align-items: flex-end !important;
-} */
-
 a {
-    border: 2px white solid;
+    color: rgb(175, 225, 255);
-    border-radius: 0px;
-    color: rgb(230, 175, 255);
-    background-color: black;
-    padding: 5px;
-    margin: 5px;
     text-decoration: none;
-    font-size: 2rem;
     display: inline-block;
     transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
+.chip {
+    font-size: 1.3rem;
+    border: 2px gray solid;
+    border-radius: 6px;
+    background-color: black;
+    padding: 8px;
+    margin: 3px;
+    display: inline-block;
+    transform: scale(0.95);
+    transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.chip:hover {
+    /* background-color: rgb(20, 10, 30); */
+    transform: scale(1);
+    /* font-size: 1.35rem; */
+    border-color: white;
+    transition: transform 0.75s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.activity {
+    border-width: 3px;
+    border-radius: 10px;
+    overflow: hidden;
+    margin: auto;
+    padding: 0;
+    display: flex;
+}
+
+.activity>p {
+    width: 100%;
+}
+
+.activity>img {
+    width: 128px;
+    aspect-ratio: 1/1;
+    object-fit: cover;
+}
+
 a:hover {
-    background-color: rgb(60, 50, 75);
-    transform: scale(1.225);
     color: white;
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 p {
     color: white;
-    font-size: 1.25rem;
+    font-size: 1.2rem;
+    padding: 0;
+    margin: 10px;
 }
 
 img {
     width: 100%;
-    max-width: 150px;
+    max-width: 135px;
-    border: rgb(175, 75, 200) 4px solid;
-    border-radius: 50%;
-    transform: scale(0.9);
     transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
-img:hover {
+.pfp {
+    border-radius: 15px;
+    border: darkgray 4px solid;
+    width: 60%;
+    transform: scale(0.9);
+    border-radius: 50%;
+}
+
+.pfp:hover {
     transform: scale(1);
-    /* border-color: rgb(255, 200, 255); */
+    border-color: rgb(255, 200, 255);
     object-fit: cover;
 }
+
+hr {
+    color: white;
+    opacity: 0.25;
+    border-width: 2px;
+    margin: 15px 10%;
+}
+
+#card {
+    background-color: rgb(75, 25, 100);
+    padding: 15px;
+    border: 2px white solid;
+    margin: 20px auto;
+    width: 95%;
+    max-width: 800px;
+
+}
+
+.me {
+    border-color: limegreen;
+}
+
+/* I am so sorry about this code,,, */
+
+.love::before {
+    content: "<3 ";
+    color: rgb(255, 100, 150);
+}
+
+.like::before {
+    content: ":) ";
+    color: limegreen;
+}
+
+.silly::before {
+    content: ":P ";
+    color: aqua;
+}
+
+.fine::before {
+    content: ":/ ";
+    color: yellow;
+}
+
+.hate::before {
+    content: ">:( ";
+    color: red;
+}
+
+.love {
+    border-color: rgb(255, 100, 150);
+}
+
+.like {
+    border-color: limegreen;
+}
+
+.silly {
+    border-color: aqua;
+}
+
+.fine {
+    border-color: yellow;
+}
+
+.hate {
+    border-color: red;
+}
+
+.up {
+    border-color: limegreen;
+}
+
+.mid {
+    border-color: yellow;
+}
+
+.down {
+    border-color: red;
+}
+
+.post {
+    background-color: rgba(85, 50, 150, 0.3);
+    border: 2px gray solid;
+    display: inline-block;
+    /* border-radius: 15px; */
+    padding: 10px;
+    margin: 8px;
+}
+
+.minipfp {
+    width: 70px;
+    display: inline-block;
+    margin-right: 10px;
+    border: 2px lightgray solid;
+    border-radius: 5px;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+        transform: translateY(50vh);
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}