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

Reviewed-on: https://codeberg.orgBingus_Violet/Violets-Purgatory#20
This commit is contained in:
Bingus_Violet 2024-02-01 19:24:27 +00:00
commit 360c1caaa3
4 changed files with 59 additions and 16 deletions

View file

@ -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. 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 ## 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) - [ ] Cut the main CSS file into multiple so that only the nessacary CSS is loaded (Reduces traffic and loading times)
- [ ] Add a commit counter - [ ] Add a commit counter

View file

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

View file

@ -12,8 +12,8 @@
<meta name="darkreader-lock"> <meta name="darkreader-lock">
<meta content="Welcome to Violet's Purgatory" property="og:title" /> <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="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.lanyard.rest/534132311781015564.png" property="og:image" /> <meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" /> <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--> <!-- To any who dare read this code! I stole the code above off of stack overflow :P-->

View file

@ -107,6 +107,23 @@ a {
object-fit: cover; 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 { a:hover {
color: white; color: white;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);