Dynamic UI for discord, back to outside sources :P

README.md

@@ -8,9 +8,9 @@ Violet's Purgatory is hosting multiple useful resoures, such as SearXNG, and a c
 
 # To-Do:
 ## Main site
-- [ ] Make a page about my games
+- [ ] Make a page about my games & other projects
 - [ ] Make a portfolio
-- [ ] Have information on socials page dynamically update in real time (E.G. Pull Discord user from ID)
+- [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

index.js

@@ -22,6 +22,7 @@ app.listen(PORT, () => {
 })
 
 function pageUpdate() {
+    console.log("Updating...")
     var statuses = {
         "online": {
             "text": "Online",
@@ -45,30 +46,128 @@ function pageUpdate() {
 
     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];
-            console.log(activity)
+            if (activity.type == 4) {
-            if (activity.type == 2) {
-                addedHTML += `<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>`
             }
         }
     }
 
-    html = html.replace("{LANYARD}", addedHTML)
+    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];
+
+            console.log(activity)
+
+            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 'https://' + image.substr(image.indexOf('https/') + 6, image.length)
+                        } else if (image.includes("spotify")) {
+                            return 'https://i.scdn.co/image/' + image.substr(image.indexOf('spotify:') + 8, image.length)
+                        }
+                    }
+                }
+            }
+            if (activity.type == 2) {
+                if (get_img()) {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 col-xl-4">
+                            <img src="${get_img()}">
+                            <p>
+                                Listening to <span style="color: limegreen;">${activity.name}</span> 
+                                <br> Album: "${activity.details}"
+                                <br> Artist: "${activity.state}"
+                            </p>
+                    </div>
+                `
+                } else {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 col-xl-4">
+                        <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 col-xl-4">
+                            <img src="${get_img()}">
+                            <p>
+                                Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> 
+                                <br> ${activity.state}
+                            </p>
+
+                    </div>
+                `
+                } else {
+                    addedHTML += `
+                    <div class="chip activity col-md-6 col-xl-4">
+                        <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)
 
     fs.writeFileSync(path.join(__dirname, 'static/index.html'), html)
+
+    console.log("Updated!")
 }
 
 // Lanyard Stuffs

resources/mainPage.html

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="./bootstrap.min.css">
     <link rel="stylesheet" href="./style.css">
 
     <title>Violet's Purgatory</title>
@@ -40,8 +39,7 @@
                 <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>
-                <hr>
+                {LANYARD_QUOTE}
-                {LANYARD}
             </div>
         </div>
         <p><em>The world's worst developer</em></p>
@@ -49,7 +47,10 @@
             <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}
     </div>
+
+
 </body>
 
 </html>

static/Rubik/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

static/Rubik/README.txt

@@ -1,77 +0,0 @@
-Rubik Variable Font
-===================
-
-This download contains Rubik as both variable fonts and static fonts.
-
-Rubik is a variable font with this axis:
-  wght
-
-This means all the styles are contained in these files:
-  Rubik-VariableFont_wght.ttf
-  Rubik-Italic-VariableFont_wght.ttf
-
-If your app fully supports variable fonts, you can now pick intermediate styles
-that aren’t available as static fonts. Not all apps support variable fonts, and
-in those cases you can use the static font files for Rubik:
-  static/Rubik-Light.ttf
-  static/Rubik-Regular.ttf
-  static/Rubik-Medium.ttf
-  static/Rubik-SemiBold.ttf
-  static/Rubik-Bold.ttf
-  static/Rubik-ExtraBold.ttf
-  static/Rubik-Black.ttf
-  static/Rubik-LightItalic.ttf
-  static/Rubik-Italic.ttf
-  static/Rubik-MediumItalic.ttf
-  static/Rubik-SemiBoldItalic.ttf
-  static/Rubik-BoldItalic.ttf
-  static/Rubik-ExtraBoldItalic.ttf
-  static/Rubik-BlackItalic.ttf
-
-Get started
------------
-
-1. Install the font files you want to use
-
-2. Use your app's font picker to view the font family and all the
-available styles
-
-Learn more about variable fonts
--------------------------------
-
-  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
-  https://variablefonts.typenetwork.com
-  https://medium.com/variable-fonts
-
-In desktop apps
-
-  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
-  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
-
-Online
-
-  https://developers.google.com/fonts/docs/getting_started
-  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
-  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
-
-Installing fonts
-
-  MacOS: https://support.apple.com/en-us/HT201749
-  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
-  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
-
-Android Apps
-
-  https://developers.google.com/fonts/docs/android
-  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
-
-License
--------
-Please read the full license text (OFL.txt) to understand the permissions,
-restrictions and requirements for usage, redistribution, and modification.
-
-You can use them in your products & projects – print or digital,
-commercial or otherwise.
-
-This isn't legal advice, please consider consulting a lawyer and see the full
-license for all details.

static/hosted/index.html

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="../bootstrap.min.css">
     <link rel="stylesheet" href="../style.css">
 
     <meta content="Hosting on Violet's Purgatory" property="og:title" />

static/pronouns/index.html

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="../bootstrap.min.css">
     <link rel="stylesheet" href="../style.css">
 
     <meta content="Violet's Pronouns" property="og:title" />
@@ -32,6 +31,7 @@
             <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>
@@ -39,7 +39,7 @@
         </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>
@@ -61,8 +61,9 @@
             <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

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="../bootstrap.min.css">
     <link rel="stylesheet" href="../style.css">
 
 

static/style.css

@@ -1,9 +1,5 @@
-@font-face {
+@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
-    font-family: 'Rubik';
+@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
-    src: url("./Rubik/Rubik-VariableFont_wght.ttf");
-    font-style: normal;
-    font-weight: 400;
-}
 
 * {
     font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
@@ -57,7 +53,7 @@ a {
     padding: 8px;
     margin: 3px;
     display: inline-block;
-    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     transform: scale(0.95)
 }
 
@@ -68,6 +64,19 @@ a {
     border-color: white;
 }
 
+.activity {
+    border-width: 3px;
+    border-radius: 10px;
+    overflow: hidden;
+    margin: auto;
+    padding: 0;
+    display: flex;
+}
+
+.activity > p {
+    width: 100%;
+}
+
 a:hover {
     color: white;
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -81,15 +90,20 @@ p {
 }
 
 img {
-    width: 60%;
+    width: 100%;
     max-width: 135px;
-    border: darkgray 4px solid;
-    border-radius: 50%;
-    transform: scale(0.95);
     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.95);
+    border-radius: 50%;
+}
+
+.pfp:hover {
     transform: scale(1.05);
     border-color: rgb(255, 200, 255);
     object-fit: cover;