Merge pull request 'Small images, better embeds' (#20) from dev into origin

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

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

index.js

@@ -44,15 +44,11 @@ if (!fs.existsSync(path.join(staticpath, 'cached'))) {
 
 var randomQuotes = config.quotes
 
-function get_img_url(activity) {
+function get_img_url(activity, size="large_image") {
 
     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
-        }
+        var image = activity.assets[size]
+
         if (image) {
             if (image.includes("https/")) {
                 return decodeURIComponent('https://' + image.substr(image.indexOf('https/') + 6, image.length))
@@ -198,9 +194,9 @@ async function pageUpdate() {
             }
 
 
-            function get_img(activity) {
-                if (get_img_url(activity)) {
-                    var fn = sha256(get_img_url(activity))
+            function get_img(activity, size="large_image") {
+                if (get_img_url(activity, size)) {
+                    var fn = sha256(get_img_url(activity, size))
                     var fp = path.join(staticpath, 'cached', fn)
     
                     if (!fs.existsSync(fp)) {
@@ -272,10 +268,18 @@ async function pageUpdate() {
                     activity.assets = { "large_text": " ", "small_text": " " }
                 }
 
+                function smch() {
+                    if (get_img_url(activity, "small_image")) { 
+                        return `<img class="smallimg" src="${get_img(activity, "small_image")}" title="${activity.assets.small_text}">`
+                    }
+                    return ""
+                }
+
 
                 addedHTML += `
                     <div class="chip activity col-md-6 testing">
-                            <img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text}">
+                            <img src="${get_img(activity)}" title="${activity.assets.large_text}">
+                            ${smch()}
                             <p>
                                 Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> 
                                 <br> ${(activity.details || activity.assets.large_text || " ")}
@@ -405,8 +409,6 @@ lanyard.addEventListener("message", (res) => {
         for (let index = 0; index < lanyardData.activities.length; index++) {
             const activity = lanyardData.activities[index];
 
-
-
             if (get_img_url(activity)) {
                 var fn = sha256(get_img_url(activity))
                 var fp = path.join(__dirname, 'static/cached', fn)
@@ -426,7 +428,27 @@ lanyard.addEventListener("message", (res) => {
                         })
                 }
             }
+            if (get_img_url(activity, "small_image")) {
+                var fn = sha256(get_img_url(activity, "small_image"))
+                var fp = path.join(__dirname, 'static/cached', fn)
+                if (!fs.existsSync(fp)) {
+                    var wrst = fs.createWriteStream(fp)
+
+                    fetch(`${get_img_url(activity, "small_image")}`)
+                        .then((response) => response.body)
+                        .then((body) => {
+                            const stream = new WritableStream({
+                                write(chunk) {
+                                    wrst.write(chunk)
                                 }
+                            })
+
+                            body.pipeTo(stream)
+                        })
+                }
+            }
+        }
+        
     }
 })
 

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="I'm Violet, the creator a Univerter, which you've never heard of but should check out! (https://univerter.dev) 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-->

static/style.css

@@ -107,6 +107,23 @@ a {
     object-fit: cover;
 }
 
+.activity > .smallimg {
+    width: 64px;
+    height: 64px;
+    position: absolute;
+    bottom: 0px;
+    left: 74px;
+    border-radius: 50px;
+    border: 2px gray solid;
+    transform: scale(0.8);
+}
+
+.activity > .smallimg:hover {
+    border: 2px white solid;
+    transform: scale(1);
+
+}
+
 a:hover {
     color: white;
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);