Socials page finally gets acknowledged

README.md

@@ -1,23 +1,31 @@
 # Violets-Purgatory
 
 Violet's Purgatory is a website filled to the brim with whatever I feel like adding! Currently, the stable version can be found at https://violets-purgatory.dev and the beta (based on the dev branch) can be found at https://beta.violets-purgatory.dev
-Although beta probably *isn't* the right term, `dev.violets-purgatory.dev` is just kinda ugly :/
 
 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 more content to the socials page
+# How it works
+
+### The config
+Although the code for it isn't nessacarily pretty, theres a few important things to go over with how it works.
+The config.json file, soon to be renamed for a local config, contains constants for Violet's Purgatory. In the file, there are lots of important notable features, such as fallback activity images for the Discord Activity section, and words that are automatically highlighted.
+
+### Word highlighting
+Word highlighting is a feature that automatically sets the color of certain keywords, including but not limited to Violet being purple, Javascript being yellow, NodeJS being green, and Godot Engine being blue. This is nothing more than a fancy feature to reduce the amount of code required on the site.
+These highlighted words ARE case senstive. You may notice certain things such as "Violet" at the top of the card are not highlighted despite being in the words list. To make a word in the highlight list not highlighted, simply add `{}` around it. E.G. for the title of the page, on the site it shows as `Violet`, but in the code is written as `{Violet}` to prevent highlighting.
+
+To add new highlighted words, find the highlighted words section in config.json. The key is the word to highlight, and the value is the color.
+
+### Dynamic HTML
+Currently this system is extremely unsophisticated, adding new dynamic HTML isn't as streamlined as it should be. Basically, in the code, is a dictionary that specifies every keyword to look for. Then, it looks for those keywords, and replaces them with HTML.
+A good example is the activity system. The keyword for the discord activities is `ACTIVITIES`. So, if you wanted to create another activity section, you would simply put `{ACTIVITIES}` in the HTML code. 
+
+There is also a `{PATH_[html file]}` keyword. Currently, this is not used much, but may be more useful in the future.
+On the main page, you can find `{PATH_SOCIALS}`. This effectively "embeds" the socials page on the site. The part of the page that is used is based upon the `main` HTML tag.
+For an easy to digest example, look at the socials section on the main page of [Violet's Purgatory](https://violets-purgatory.dev). Afterwards, look at the [*socials page*](https://violets-purgatory.dev/socials). You will notice they're the same, because in the code for the main page, I put {PATH_SOCIALS} which got the page at /socials.
+
+# To-do
+- [ ] Add more content to the socials page & make it more easily findable on the site
     - [ ] Pull latest Youtube video & display it
     - [ ] Display current Discord Activities
     - [ ] Display current steam game
-
-Completed:
-
-
-- [x] Stop using Lanyard Web Socket Directly and proxy it through the API (Alternatively, self host the Lanyard API)
-- [x] Cut the main CSS file into multiple so that only the nessacary CSS is loaded (Reduces traffic and 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
-- [x] Add a commit counter

config.json

@@ -38,7 +38,8 @@
         "no idea how branches work",
         "Their ass is NOT listening",
         "These birds are Pissing me off... I'm the original        Starwalker",
-        "Married to my beloved <a href='./asahi'>Asahi</a> <3"
+        "Married to my beloved <a href='./asahi'>Asahi</a> <3",
+        "Fun fact: Did you know the <a href='./socials'>Socials section</a> is considered its own page?"
     ],
     "titles": [
         "Boykisser",

static/index.html

@@ -45,9 +45,12 @@
             <hr>
            <div>
                 <p style="padding: 10px;">Hi! I'm Violet, a 15 year old web and game developer. I aspire to make server-sided dynamic websites, with no Javascript required! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
+                    <a class="chip" href="./socials/">Socials</a>
+                    <a class="chip" href="./faq">Nerd FAQ</a>
+                    <br>
                     <a class="chip" href="https://beta.violets-purgatory.dev">Beta site</a>
                     <a class="chip" href="https://blog.violets-purgatory.dev">Blog</a>
-                    <!-- <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a> -->
+                    <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a>
                     
                     <br>
                     {CUSTOM_STATUS}
@@ -68,6 +71,7 @@
         <hr>
         <h1>Socials</h1>
         {PATH_SOCIALS}
+        <p class="note">Please note I am extremely unhinged and gay on Fedi, I don't use Github, and I barely understand Docker.</p>
         <br>
         <p>{WEATHER_TEXT}</p>
         <br>

static/socials/index.html

@@ -4,6 +4,7 @@
 <head>
     <link rel="stylesheet" type="text/css" href="../global.css">
     <link rel="stylesheet" type="text/css" href="../subpage.css">
+    <script src="../main.js"></script>
 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -19,7 +20,9 @@
 </head>
 
 <body>
+    {WEATHER_MODIFIER}
     <h1>Socials</h1>
+    <p>Congrats on finding the <em>Incomplete seperated version of the socials page!!!!</em></p>
     <main>
         <p>Here's most of the sites you can find me on-<br>if you needed that for some reason?</p>
         <div class="grid-container">
@@ -55,8 +58,10 @@
             </div>
         </div>
         <br>
-        <p class="note">Please note I am extremely unhinged and gay on Fedi, I don't use Github, and I barely understand Docker.</p>
     </main>
+    <div id="activityHTML">
+        {ACTIVITIES}
+    </div>
 </body>
 
 </html>

static/subpage.css

@@ -6,6 +6,7 @@
 
 h1:nth-of-type(1) {
     font-size: 2.5rem;
+    
 }
 
 body {