add binkies and status.cafe integration
All checks were successful
/ test (push) Successful in 16s

This commit is contained in:
Soph :3 2024-07-27 02:50:43 +03:00
parent 4d5f1cb79a
commit 2d526f189b
Signed by: sophie
GPG key ID: EDA5D222A0C270F2
6 changed files with 111 additions and 29 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 623 B

BIN
website/assets/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 B

View file

@ -17,9 +17,10 @@ a {
.order {
display: grid;
grid-template-areas:
"one two"
"one four"
"three five";
"details skills"
"details donations"
"status binkies"
"stickers blog";
grid-gap: 5px;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(25vh, 6);
@ -65,51 +66,64 @@ h6 {
margin: 0;
padding: 0;
}
.one {
grid-area: one;
.details {
grid-area: details;
}
.two {
grid-area: two;
.donations {
grid-area: donations;
}
.three {
grid-area: three;
.status {
grid-area: status;
}
.stickers {
grid-area: stickers;
display: flex;
flex-direction: column;
max-height: 75vh;
gap: 20px;
}
.three > img,
.three > video {
.stickers > img,
.stickers > video {
object-fit: scale-down;
height: 100%;
}
.four {
grid-area: four;
.skills {
grid-area: skills;
}
.five {
grid-area: five;
.binkies {
grid-area: binkies;
display: flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.blog {
grid-area: blog;
max-height: 75vh;
}
@media only screen and (max-width: 600px) {
.order {
grid-template-areas:
"one "
"four "
"two "
"five "
"five "
"three";
"details "
"status"
"skills "
"donations "
"blog "
"blog "
"binkies"
"stickers";
grid-template-columns: 1fr;
}
body {
scrollbar-width: auto !important;
}
.three {
.stickers {
flex-direction: row;
max-height: auto;
}
.five {
.blog {
max-height: unset;
}
.giscus-outer {

View file

@ -1,6 +1,56 @@
__TEMPLATE_HEAD__
<script type="module" src="scripts/blog.js"></script>
<script type="module">
function timeAgo(input) {
const date = (input instanceof Date) ? input : new Date(input);
const formatter = new Intl.RelativeTimeFormat('en');
const ranges = [
['years', 3600 * 24 * 365],
['months', 3600 * 24 * 30],
['weeks', 3600 * 24 * 7],
['days', 3600 * 24],
['hours', 3600],
['minutes', 60],
['seconds', 1],
];
const secondsElapsed = (date.getTime() - Date.now()) / 1000;
for (const [rangeType, rangeVal] of ranges) {
if (rangeVal < Math.abs(secondsElapsed)) {
const delta = secondsElapsed / rangeVal;
return formatter.format(Math.round(delta), rangeType);
}
}
}
const req = await fetch("https://status.cafe/users/sophie.atom");
const parser = new DOMParser();
const doc = parser.parseFromString(await req.text(), "text/xml");
const latestEntryRaw = doc.querySelector("feed > entry");
const latestEntry = {
username: doc.querySelector("feed > author > name").textContent,
status: latestEntryRaw.querySelector("content").textContent,
title: latestEntryRaw.querySelector("title").textContent,
updated: new Date(latestEntryRaw.querySelector("updated").textContent)
}
latestEntry.emoji = latestEntry.title.slice(latestEntry.username.length).slice(0, -Math.min(latestEntry.status.length, 53)).trim()
const statusElement = document.getElementById("status");
const h2 = document.createElement("h2");
const a = document.createElement("a");
const p = document.createElement("p");
a.href = "https://status.cafe/users/" + latestEntry.username;
a.innerText = latestEntry.emoji + " " + latestEntry.username;
h2.appendChild(a);
h2.innerHTML += " - " + timeAgo(latestEntry.updated);
p.style.textAlign = "end";
p.innerText = latestEntry.status;
statusElement.appendChild(h2);
statusElement.appendChild(p);
</script>
<script>
window.addEventListener("load", () => {
const stickers = document.getElementById("stickers");
@ -19,7 +69,7 @@ __TEMPLATE_HEAD__
<body class="repeating-bg">
<div class="order">
<div class="paper one">
<div class="paper details">
<h1><span class="emoji">☹️☹️☹️</span>.ovh</h1>
<p>I'm Latvian, 17. My name's Sophie <small>meows a lot</small>. I love listening to music.</p>
@ -32,6 +82,7 @@ __TEMPLATE_HEAD__
<br>
Interact: Any person ever
</p>
<h2>contact</h2>
<p>Contact me at <a href="https://matrix.to/#/@yourfriend:bark.lgbt">matrix</a>, <a
href="https://discord.com/users/845374523263811614">discord</a>, <a
href="https://github.com/fucksophie">github (view projects here)</a>, <a
@ -43,8 +94,15 @@ __TEMPLATE_HEAD__
106, 97, 64,
100, 117, 99, 107, 46, 99, 111, 109]))</span></p>
<a href="assets/key.txt">Signing PGP key downloadable here.</a>
<h2>Include my 88x31 into your website!</h2>
<pre>
&lt;a href="https://sad.ovh"&gt;
&lt;img src="https://sad.ovh/assets/binkies/sadovh.png"&gt;
&lt;/a&gt;
</pre>
</div>
<div class="paper two">
<div class="paper donations">
<h1>donations</h1>
<ul>
<li>BTC <strong>bc1q83jdukjn4a2qm0rmn9tqcfkcq60la22lqy2shx</strong>
@ -63,7 +121,7 @@ __TEMPLATE_HEAD__
</li>
</ul>
</div>
<div class="paper four">
<div class="paper skills">
<h1>Skills</h1>
<!--replace this with Code::Stats once I've actually gotten some time on there-->
<ul>
@ -75,8 +133,17 @@ __TEMPLATE_HEAD__
<li>9 years of Java development. Mostly Minecraft plugins and MC related projects.</li>
</ul>
</div>
<div class="paper five" id="root"></div>
<div class="paper three" id="stickers"></div>
<div class="paper blog" id="root"></div>
<div class="paper stickers" id="stickers"></div>
<div class="paper status" id="status"></div>
<div class="paper binkies">
<a href="https://sad.ovh">
<img src="/assets/binkies/sadovh.png">
</a>
<a href="https://oon.nz/">
<img src="/assets/binkies/onzecki.png">
</a>
</div>
</div>
</body>

View file

@ -23,4 +23,5 @@
<meta property="twitter:description" content="yourfriend.lol v2, soph's blog and information"" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/oneko.js"></script>
<script src="scripts/oneko.js"></script>
<link rel="icon" type="image/x-icon" href="/assets/favicon.png">