mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 13:03:41 +02:00
wip: 2024-11-29T10:29:15+0100 (1732872555)
This commit is contained in:
parent
b0ab6a4f5b
commit
d5cfcd2d2d
4 changed files with 132 additions and 2 deletions
|
|
@ -4,4 +4,7 @@ api_key = ""
|
|||
verify_peer = 0
|
||||
|
||||
[time]
|
||||
date_time_zone = "Europe/Stockholm"
|
||||
date_time_zone = "Europe/Stockholm"
|
||||
|
||||
[playground]
|
||||
misskey_demo_instance = ""
|
||||
|
|
@ -72,6 +72,42 @@ section.sss button {
|
|||
margin-top: var(--padding);
|
||||
}
|
||||
|
||||
/* ## Misskey */
|
||||
|
||||
section.misskey-feed {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
height: 25vh;
|
||||
overflow: hidden;
|
||||
margin: var(--padding) 0;
|
||||
}
|
||||
|
||||
section.misskey-feed misskey-note {
|
||||
gap: calc(var(--padding) / 2);
|
||||
display: none;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: var(--padding);
|
||||
border-radius: 6px;
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
grid-template-columns: 50px 1fr;
|
||||
}
|
||||
|
||||
section.misskey-feed misskey-note.active {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
section.misskey-feed misskey-note img {
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section.misskey-feed misskey-note div {
|
||||
display: flex;
|
||||
gap: calc(var(--padding) / 2);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ## Coffee */
|
||||
|
||||
section.coffee {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
|
||||
|
||||
// Super Secret Settings trigger
|
||||
new Elevent("click", document.querySelector("section.sss button"), (event) => {
|
||||
const SSS_TAG_NAME = "super-secret-settings";
|
||||
|
||||
|
|
@ -20,4 +21,72 @@ new Elevent("click", document.querySelector("section.sss button"), (event) => {
|
|||
|
||||
// Navigate SSS element to playground page
|
||||
new vegvisir.Navigation("/playground/super-secret-settings").navigate(sssElement);
|
||||
});
|
||||
|
||||
// Misskey-microblogger preview
|
||||
fetch(new URL(document.querySelector("section.misskey-feed").dataset.endpoint), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
withFiles: false,
|
||||
withBots: true,
|
||||
limit: 5
|
||||
})
|
||||
}).then(async (response) => {
|
||||
const template = document.querySelector("section.misskey-feed template");
|
||||
const feed = document.querySelector("section.misskey-feed");
|
||||
|
||||
feed.innerHTML = "";
|
||||
feed.dataset.loaded = true;
|
||||
|
||||
// Create element for each note from template
|
||||
(await response.json()).forEach((note, idx) => {
|
||||
const element = template.content.cloneNode(true);
|
||||
const url = new URL(response.url);
|
||||
url.pathname = `/notes/${note.id}`;
|
||||
|
||||
// Update template DOM
|
||||
element.querySelector("a").href = url.toString();
|
||||
element.querySelector(".text").innerText = note.text;
|
||||
element.querySelector(".pfp").src = note.user.avatarUrl;
|
||||
element.querySelector(".posted").innerText = note.user.createdAt;
|
||||
element.querySelector(".username").innerText = note.user.username;
|
||||
|
||||
// Mark first element as active for fade animation
|
||||
if (idx === 0) {
|
||||
element.querySelector("misskey-note").classList.add("active");
|
||||
}
|
||||
|
||||
feed.appendChild(element);
|
||||
});
|
||||
|
||||
// Cycle between each note with a fade-out, fade-in animation
|
||||
const FADE_DURATION = 300;
|
||||
const DISPLAY_TIMEOUT = 4000;
|
||||
|
||||
const fadeOut = async () => {
|
||||
await feed.animate({opacity: 0}, {duration: FADE_DURATION, fill: "forwards"}).finished;
|
||||
setTimeout(() => {
|
||||
const element = feed.querySelector("misskey-note.active");
|
||||
element.classList.remove("active");
|
||||
|
||||
// Make next sibling element active or roll over if last
|
||||
element.nextElementSibling
|
||||
? element.nextElementSibling.classList.add("active")
|
||||
: feed.firstElementChild.classList.add("active");
|
||||
|
||||
fadeIn();
|
||||
}, FADE_DURATION);
|
||||
}
|
||||
|
||||
const fadeIn = async () => {
|
||||
await feed.animate({opacity: 1}, {duration: FADE_DURATION, fill: "forwards"}).finished;
|
||||
setTimeout(() => {
|
||||
fadeOut();
|
||||
}, DISPLAY_TIMEOUT);
|
||||
}
|
||||
|
||||
setTimeout(() => fadeOut(), DISPLAY_TIMEOUT);
|
||||
});
|
||||
|
|
@ -113,17 +113,39 @@
|
|||
<?php endforeach; ?>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
<section class="sss">
|
||||
<h1>I'm so bored.</h1>
|
||||
<p>Don't like the way my website looks? These oficially very Super Secret Settings<sup><a href="https://minecraft-archive.fandom.com/wiki/Super_Secret_Settings">™</a></sup> will give you something else to look at!</p>
|
||||
<button class="inline">Try it</button>
|
||||
</section>
|
||||
-->
|
||||
<section>
|
||||
<p>I set up a microblogging instance where bots endlessly talk with each other. It's as dumb or dumber than you think - the idea that is. The bots are even dumber, and dumb bots on social media was <a href="https://codeberg.org/vlw/misskey-microblogger#background">part of the reason</a> why I made this program.</p>
|
||||
</section>
|
||||
<section class="misskey-feed" data-endpoint="<?= $_ENV["playground"]["misskey_demo_instance"] ?>">
|
||||
<h3>What-a' bots doin'?!</h3>
|
||||
<p>Loading feed preview...</p>
|
||||
<template>
|
||||
<misskey-note>
|
||||
<img class="pfp">
|
||||
<a><div>
|
||||
<p><strong class="username"></strong> - <span class="posted"></span></p>
|
||||
<p class="text"></p>
|
||||
</div></a>
|
||||
</misskey-note>
|
||||
</template>
|
||||
</section>
|
||||
<section class="actions">
|
||||
<a href="https://codeberg.org/vlw/misskey-microblogger"><button class="inline">view source code</button></a>
|
||||
<a href="https://misskey-microblogger.sites.vlw.se"><button class="inline solid">open website</button></a>
|
||||
</section>
|
||||
<section class="coffee">
|
||||
<img src="data:image/gif;base64,<?= base64_encode(VV::embed("public/assets/media/playground/coffee.gif")) ?>">
|
||||
<div>
|
||||
<h1>What else.. I've had <?= $coffee->get_today() ?> cup<?= to_plural($coffee->get_today()) ?> of coffee today!</h1>
|
||||
<p>That's <?= $coffee->get_average_month_str() ?> the daily average for me (last 30 days). Here I'm counting how many ~300ml cups of coffee I've had since midnight for my timezone <?= $_ENV["time"]["date_time_zone"] ?>, that was <?= $time->since_midnight_str() ?> ago.</p>
|
||||
<p>How much coffee is enough coffee? <a href="<?= $_ENV["api"]["base_url"] . Endpoints::PLAYGROUND_COFFEE->value ?>">Click here to see my answer!!</a> (NOT CLICKBAIT). Each array value is a UNIX timestamp that represents a single cup of coffee.</p>
|
||||
<p>How much coffee is enough coffee? <a href="<?= $_ENV["api"]["base_url"] . Endpoints::PLAYGROUND_COFFEE->value ?>">Click here to see my answer!</a> (NOT CLICKBAIT, RAW DATA!). Each array value is a UNIX timestamp that represent a single cup of coffee.</p>
|
||||
</div>
|
||||
</section>
|
||||
<script type="module"><?= VV::js("public/assets/js/pages/playground/index") ?></script>
|
||||
Loading…
Add table
Reference in a new issue