vlw.se/public/assets/js/pages/playground/index.js

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";

	let sssElement = document.querySelector(SSS_TAG_NAME);

	// Create SSS element if one does not exist
	if (!sssElement) {
		sssElement = document.createElement(SSS_TAG_NAME);
		document.body.appendChild(sssElement);
	}

	const size = event.target.getBoundingClientRect();

	// Set initial window position above button
	const y = size.top;
	const x = size.left + size.width;
	sssElement.style.transform = `translate(${x}px, ${y}px)`

	// 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);
});