From d5cfcd2d2d571fe39b6c04cd85309444fe387d68 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Fri, 29 Nov 2024 15:14:00 +0100 Subject: [PATCH] wip: 2024-11-29T10:29:15+0100 (1732872555) --- .env.example.ini | 5 +- public/assets/css/pages/playground/index.css | 36 ++++++++++ public/assets/js/pages/playground/index.js | 69 ++++++++++++++++++++ public/playground/index.php | 24 ++++++- 4 files changed, 132 insertions(+), 2 deletions(-) diff --git a/.env.example.ini b/.env.example.ini index 8d9449e..4b698eb 100755 --- a/.env.example.ini +++ b/.env.example.ini @@ -4,4 +4,7 @@ api_key = "" verify_peer = 0 [time] -date_time_zone = "Europe/Stockholm" \ No newline at end of file +date_time_zone = "Europe/Stockholm" + +[playground] +misskey_demo_instance = "" \ No newline at end of file diff --git a/public/assets/css/pages/playground/index.css b/public/assets/css/pages/playground/index.css index 5f9e45a..907235b 100644 --- a/public/assets/css/pages/playground/index.css +++ b/public/assets/css/pages/playground/index.css @@ -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 { diff --git a/public/assets/js/pages/playground/index.js b/public/assets/js/pages/playground/index.js index 6530a3a..977d012 100644 --- a/public/assets/js/pages/playground/index.js +++ b/public/assets/js/pages/playground/index.js @@ -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); }); \ No newline at end of file diff --git a/public/playground/index.php b/public/playground/index.php index 9606726..c78acf4 100644 --- a/public/playground/index.php +++ b/public/playground/index.php @@ -113,17 +113,39 @@ + +
+

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 part of the reason why I made this program.

+
+
"> +

What-a' bots doin'?!

+

Loading feed preview...

+ +
+
+ + +
">

What else.. I've had get_today() ?> cupget_today()) ?> of coffee today!

That's 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 , that was since_midnight_str() ?> ago.

-

How much coffee is enough coffee? value ?>">Click here to see my answer!! (NOT CLICKBAIT). Each array value is a UNIX timestamp that represents a single cup of coffee.

+

How much coffee is enough coffee? value ?>">Click here to see my answer! (NOT CLICKBAIT, RAW DATA!). Each array value is a UNIX timestamp that represent a single cup of coffee.

\ No newline at end of file