Merge branch 'dev' of codeberg.org:Bingus_Violet/Violets-Purgatory into dev

README.md

@@ -14,6 +14,10 @@ Violet's Purgatory is hosted on Railway right now, but there are plans to move t
 We also have an API, which can be located at https://api.violets-purgatory.dev, which is currently very under developed, but will continue to have updates for features I see fit.
 
 ## To-do
-- [ ] Add image caching instead of using image proxies (keeps the security benefit and decreases loading times)
+- [x] Add image caching instead of using image proxies (keeps the security benefit and decreases loading times)
+- [x] Add code to automatically minify the HTML
+- [x] Add random quotes
+- [x] Seperate Values from the javascript into their own config for readability
+- [ ] Stop using Lanyard Web Socket Directly and proxy it through the API (Alternatively, self host the Lanyard API)
 - [ ] Cut the main CSS file into multiple so that only the nessacary CSS is loaded (Reduces traffic and loading times)
 - [ ] Add a commit counter

config.json

@@ -17,28 +17,24 @@
         "Play Cave Story!",
         "Cave Story+ Sucks!",
         "Running out of quote ideas",
-        "Fun fact: The quote at my bottom is <em>actually</em> my discord status :/",
         "World's Worst Developer",
         "Remember when I used to call myself a 'Game Developer'?",
         "Why are arrays and dictionaries in JSON files way more strict than in Javascript?? <br> No like seriously why cant I use quotes instead of quotation marks :/",
         "Bored",
-        "This website is way too empty T^T",
+        "This website is way too bloated T^T",
         "Did you know there are currently {QUOTE_COUNT} quotes?",
-        "Seriously need to optimize this site",
-        "Maybe I should add an image cache instead of using a bunch of image proxies...",
-        "I'm gonna take down that sxng instance one day!",
-        "Can't wait to start self hosting this site",
-        "You had a 1/{QUOTE_COUNT} chance in getting tihs quote. Same with any other quote, I guess",
-        "It said there was {QUOTE_COUNT} quotes but there was one less when I checked... maybe im just insane...",
-        "I don't know if i'm gonna keep the blog around or not :/",
+        "I seriously need to optimize this site <br> I guess there's always worse, though...",
+        "IMAGE CACHING!!! THE IMAGE CACHING IS REAL!!!!",
+        "You had a 1/{QUOTE_COUNT} chance in getting tihs quote. Same with any other quote, I guess :|",
         "Literally just dumping whatever 2 iq thought comes into my mind into this file for more quotes",
         "Maybe I should make a discord server. <br>Maybe I should hook up this quote thing to said Discord server. Idk :3",
         "I should really remove the google font :yuu:",
         "Is sharing your IP <em>reallyy</em> that bad?",
         "The worst git user to exist",
         "This idiot has no idea how branches work",
+        "Their ass is NOT listening",
         "Having issues? Try reporting an ID-10-T error on the codeberg :D",
-        "No I don't use Github",
+        "No I don't use Github :3",
         "I'm still sad about that one person who liked one of my repositories on Github but not on codeberg :(",
         "I get no attention on codeberg!!",
         "My fedi is dead! And so is my youtube I guess! I guess my Github too...",
@@ -53,8 +49,8 @@
         "You know... I was a Roblox Developer Once...",
         "I used to love Star Glitcher games",
         "Git rebase my beloved...",
-        "I'm gonna buy univerter.dev someday!",
-        "These birds are Pissing me off... I'm the original     Starwalker"
+        "PROUD OWNER OF: <a href='https://univerter.dev'>univerter.dev</a>!",
+        "These birds are Pissing me off... I'm the original &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Starwalker"
     ],
 
     "thumborInstances": [

index.js

@@ -86,7 +86,7 @@ function gameTimeFormatter(seconds) {
     var minutes = Math.ceil(seconds / 60)
     var hours = Math.floor(minutes / 60)
     if (seconds <= 60) {
-        return 'Under a minute'
+        return 'about ' + seconds + ' seconds'
     } else if (minutes < 60) {
         return `${minutes} Minutes`
     }
@@ -323,7 +323,9 @@ async function pageUpdate() {
     addedHTML = ""
 
     var socialsHTML = fs.readFileSync(path.join(__dirname, 'static/socials/index.html')).toString()
-    addedHTML += socialsHTML.substring(socialsHTML.indexOf("<h1>"), socialsHTML.indexOf("</body>"))
+    // socialsHTML = socialsHTML.substring(0, socialsHTML.lastIndexOf("</div>"))
+    addedHTML += "<h2><hr>Socials</h2>"
+    addedHTML += socialsHTML.substring(socialsHTML.indexOf("<div"), socialsHTML.lastIndexOf("</div>") + 6)
 
     html = html.replace("{SOCIALS}", addedHTML)
 
@@ -367,7 +369,7 @@ async function pageUpdate() {
         html = html.replace("{OPPOSITE_BRANCH}", "Beta")
     }
 
-    html = html.replace("{UPTIME}", gameTimeFormatter((Date.now() - uptime) / 1000) + ' ago')
+    html = html.replace("{UPTIME}", gameTimeFormatter((Date.now() - uptime) / 1000))
     html = html.replace("{LAST_LANYARD}", gameTimeFormatter((Date.now() - lastLanyardUpdate) / 1000) + ' ago')
     html = html.replace("{QUOTE_COUNT}", randomQuotes.length)
     html = html.replace("{CACHED_IMAGES}", fs.readdirSync(path.join(staticpath, 'cached')).length)

resources/mainPage.html

@@ -12,8 +12,8 @@
     <meta name="darkreader-lock">
 
     <meta content="Welcome to Violet's Purgatory" property="og:title" />
-    <meta content="I'm Violet, a 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="Hi, I'm Violet, a 15 year old web developer with strong ambitions. You can find more info on my site!" property="og:description" />
+    <meta content="https://api.violets-purgatory.dev/v1/pfp" 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-->
@@ -59,7 +59,13 @@
         <p>Check out the source code on <a href="https://codeberg.org/Bingus_Violet/Violets-Purgatory">Codeberg</a></p>
         {LANYARD_FULL}
 
-        <h2><hr>Stats:</h2>
+        <h2><hr>Announcement!</h2>
+        <p>I'm getting a hand-me-down server, so I might end up hosting fedi and matrix on it! <br> (Note that they will probably both be single user instances so this does not affect you :P)</p>
+        <p class="note">Also this isn't dynamic this is literally just something I throw in the source code but maybe one day it will be...</p>
+
+        {SOCIALS}
+
+        <h2><hr>Silly Stats:</h2>
         <p>Just some funny stats for the site :3</p>
         <ul>
             <li>Uptime: {UPTIME}</li>
@@ -69,8 +75,6 @@
             <li>Page Generation Time: {GENERATION_TIME}</li>
         </ul>
 
-        {SOCIALS}
-
         {SEASONAL_EFFECT}
     </div>
 </body>

static/extras/index.html

@@ -15,15 +15,13 @@
 
     <title>Extras - Violet's Purgatory</title>
 </head>
-
-<body>
-    <a class="chip" href="../">Home</a>
-    <h1><hr>Extras</h1>
+    <h1>Extras</h1>
     <p>Just some fun things that really don't have use on the main page but exist anyway!</p>
     
     <div class="fadediv container-fluid ">
         <p class="chip"><a href="./discord">Dynamic Discord Status (Javascript, W.I.P)</a></p>
         <p class="chip"><a href="../pronouns">Pronouns (here bc it's hard to find on main page)</a></p>
     </div>
+    <a class="chip" href="../">Home</a>
 </body>
 </html>

static/faq/index.html

@@ -17,8 +17,7 @@
 </head>
 
 <body>
-    <a class="chip" href="../">Home</a>
-    <h1><hr>FAQ</h1>
+    <h1>FAQ</h1>
     <p>Some questions that, nobody has ever <em>actually</em> asked, but I'm gonna act like they have because its fun!</p>
     <div class="row container-fluid fadediv" style="margin: auto;">
         <h2><hr>How?</h2>
@@ -43,5 +42,6 @@
         <h2><hr>Why do you (hate/never use) Javascript?</h2>
         <p>Because its more fun :D Inevitably, I would put something more informative here, like "for the sake of compatibility" which, don't get me wrong, a huge part of it is so that people who disable javascript can use my site, but also, if you've seen my CSS it should be clear I don't try to be the <em>most</em> backwards compatible.</p>
     </div>
+    <a class="chip" href="../">Home</a>
 </body>
 </html>

static/projects/index.html

@@ -81,6 +81,7 @@
         </div>
 
         <p>There are, of course, a few more projects (E.G. Discord Embedder) but I feel they're too early in development for me to want to put them here.</p>
+        <a class="chip" href="../">Home</a>
     </div>
 </body>
 

static/pronouns/index.html

@@ -16,11 +16,7 @@
 </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">
@@ -64,6 +60,7 @@
     </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>
+    <a class="chip" href="../">Home</a>
 </body>
 
 </html>

static/socials/index.html

@@ -17,14 +17,13 @@
 </head>
 
 <body>
-    <a class="chip" href="../">Home</a>
-    <h1><hr>Socials</h1>
-    <p>Here's where you can find me most... if you wanted to do that for some reason?</p>
+    <h1>Socials</h1>
     <div class="row container-fluid fadediv" style="margin: auto;">
 
+        <p>Here's where you can find me most... if you wanted to do that for some reason?</p>
         <div class="col-sm-6">
             <hr>
-            <h2>Chat Applications:</h2>
+            <h3>Chat Applications:</h3>
             <p class="chip" style="color: limegreen;">Matrix: <a href="https://matrix.to/#/@bingus_violet:catgirl.cloud" rel="me">@bingus_violet&ZeroWidthSpace;:catgirl.cloud</a></p>
             <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>
@@ -33,25 +32,26 @@
 
         <div class="col-sm-6">
             <hr>
-            <h2>Social media:</h2>
+            <h3>Social media:</h3>
             <p class="chip" style="color: rgb(200, 175, 255);">Fedi: <a href="https://void.lgbt/bingus_violet" rel="me">@Bingus_Violet&ZeroWidthSpace;@void.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 class="col-sm-6">
             <hr>
-            <h2>Git sites:</h2>
-            <p class="chip">Github: <a href="https://github.com/Violets-puragtory">Violets-puragtory</a></p>
+            <h3>Coding sites:</h3>
             <p class="chip" style="color: aqua">Codeberg: <a href="https://codeberg.org/Bingus_Violet">Bingus_Violet</a>
+            <p class="chip" style="color: rgb(100, 100, 255)">Docker: <a href="https://hub.docker.com/u/bingusviolet">bingusviolet</a>
+            <p class="chip">Github: <a href="https://github.com/Violets-puragtory">Violets-puragtory</a></p>
             </p>
         </div>
 
         <div class="col-sm-6">
             <hr>
-            <h2>Game sites:</h2>
+            <h3>Game sites:</h3>
             <p class="chip" style="color: darkgrey">Steam: <a href="https://steamcommunity.com/id/Violet-The-Thigh-high-obtainer/">Violet</a></p>
         </div>
-
     </div>
+    <a class="chip" href="../">Home</a>
 </body>
 </html>

static/style.css

@@ -1,11 +1,17 @@
-@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');
+@import url('./bootstrap.css');
+
+@font-face {
+    font-display: swap;
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
+}
 
 * {
     font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
     padding: 0;
     text-align: center;
-    line-height: 1.5rem;
 }
 
 h1 {
@@ -13,7 +19,15 @@ h1 {
     font-size: 2.5rem;
 }
 
-h2,
+h2 {
+    font-size: 2rem;
+    color: rgb(225, 215, 255)
+}
+
+h3 {
+    font-size: 1.65rem
+}
+
 h3,
 li {
     color: white;
@@ -65,7 +79,7 @@ a {
     font-size: 1.3rem;
     border: 2px gray solid;
     border-radius: 6px;
-    background-color: black;
+    background-color: rgb(15, 0, 30);
     padding: 8px;
     margin: 3px;
     display: inline-block;
@@ -73,12 +87,13 @@ a {
     transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
-.chip, .chip > * {
+.chip,
+.chip>* {
     text-decoration: none;
 }
 
 .chip:hover {
-    background-color: rgb(20, 10, 30);
+    background-color: rgb(65, 28, 101);
     transform: scale(1);
     /* font-size: 1.35rem; */
     border-color: white;
@@ -107,7 +122,7 @@ a {
     object-fit: cover;
 }
 
-.activity > .smallimg {
+.activity>.smallimg {
     width: 64px;
     height: 64px;
     position: absolute;
@@ -118,7 +133,7 @@ a {
     transform: scale(0.8);
 }
 
-.activity > .smallimg:hover {
+.activity>.smallimg:hover {
     border: 2px white solid;
     transform: scale(1);
 
@@ -200,7 +215,7 @@ hr {
     z-index: 3;
 }
 
-.project-inner > div > img {
+.project-inner>div>img {
     object-fit: cover;
     border: 2px white solid;
     width: 80%;
@@ -209,7 +224,7 @@ hr {
     border-radius: 10px;
 }
 
-.project > p {
+.project>p {
     display: inline-block;
 }
 
@@ -300,7 +315,7 @@ hr {
     margin-right: 1.9%;
 }
 
-.lengthBar > span {
+.lengthBar>span {
     margin: 0;
     padding: 0;
     width: 100%;
@@ -310,6 +325,11 @@ hr {
     position: relative;
 }
 
+.note {
+    font-size: 0.95rem;
+    color: lightgray;
+}
+
 @keyframes fade-in {
     0% {
         opacity: 0;