feat: things

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -125,6 +125,8 @@ function showMenu(ev: MouseEvent) {
 	flex-direction: column;
 	gap: 16px;
 	padding: 32px 0 0 0;
+	overflow-y: auto;
+	overflow-x: hidden;
 }
 
 .panel {

packages/frontend/src/components/global/userIdWatermark.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { $i } from "@/i.js";
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 const generateRandomClass = () => {
 	const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
@@ -11,59 +11,104 @@ const generateRandomClass = () => {
 	return result;
 };
 
-const gridClass = computed(() => generateRandomClass());
+const gridClass = ref(generateRandomClass());
-const itemClass = computed(() => generateRandomClass());
+const itemClass = ref(generateRandomClass());
+const recreationKey = ref(0);
+let regenerationInterval: ReturnType<typeof setInterval> | null = null;
+let styleElement: HTMLStyleElement | null = null;
+let allCreatedClasses: string[] = [];
 
-onMounted(() => {
+const regenerateWatermark = () => {
-	const style = document.createElement('style');
+	cleanupOldElements();
-	style.textContent = `
+
+	gridClass.value = generateRandomClass();
+	itemClass.value = generateRandomClass();
+	recreationKey.value++;
+
+	allCreatedClasses.push(gridClass.value, itemClass.value);
+
+	createStyleElement();
+};
+
+const cleanupOldElements = () => {
+	const allStyles = document.head.querySelectorAll('style');
+	allStyles.forEach(style => {
+		const content = style.textContent || '';
+		const hasOldClasses = allCreatedClasses.some(className =>
+			content.includes(className) &&
+			className !== gridClass.value &&
+			className !== itemClass.value
+		);
+		if (hasOldClasses) {
+			style.remove();
+		}
+	});
+
+	allCreatedClasses = [gridClass.value, itemClass.value];
+};
+
+const createStyleElement = () => {
+	if (styleElement && styleElement.parentNode) {
+		styleElement.parentNode.removeChild(styleElement);
+	}
+
+	styleElement = document.createElement('style');
+	const styles = `
 		.${gridClass.value} {
-			position: fixed;
+			position: fixed !important;
-			top: 0;
+			top: 0 !important;
-			left: 0;
+			left: 0 !important;
-			width: 100vw;
+			width: 100vw !important;
-			height: 100vh;
+			height: 100vh !important;
-			display: grid;
+			display: grid !important;
-			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
-			grid-template-rows: repeat(auto-fill, minmax(20px, 1fr));
+			grid-template-rows: repeat(auto-fill, minmax(20px, 1fr)) !important;
-			gap: 20px;
+			gap: 20px !important;
-			padding: 20px;
+			padding: 20px !important;
-			pointer-events: none;
+			pointer-events: none !important;
-			z-index: 999999999;
+			z-index: 999999999 !important;
-			overflow: hidden;
+			overflow: hidden !important;
 		}
 
 		.${itemClass.value} {
-			display: flex;
+			display: flex !important;
-			align-items: center;
+			align-items: center !important;
-			justify-content: center;
+			justify-content: center !important;
 			color: color-mix(
 				in srgb,
 				var(--MI_THEME-fg) 1.2%,
 				transparent
 			) !important;
-			font-size: 12px;
+			font-size: 12px !important;
-			font-family: monospace;
+			font-family: monospace !important;
-			word-break: break-all;
+			word-break: break-all !important;
-			text-align: center;
+			text-align: center !important;
-			user-select: none;
+			user-select: none !important;
 		}
 	`;
-	document.head.appendChild(style);
+
+	styleElement.textContent = styles;
+	document.head.appendChild(styleElement);
+};
+
+onMounted(() => {
+	createStyleElement();
+
+	regenerationInterval = setInterval(() => {
+		regenerateWatermark();
+	}, 5000);
 });
 </script>
 
 <template>
-	<div v-if="$i" :class="gridClass">
+	<div v-if="$i" :key="`signed-${recreationKey}`" :class="gridClass">
 		<div v-for="n in 600" :key="n" :class="itemClass">
 			{{ $i.id }}
 		</div>
 	</div>
-	<div v-else :class="gridClass">
+	<div v-else :key="`unsigned-${recreationKey}`" :class="gridClass">
 		<div v-for="n in 600" :key="n" :class="itemClass">
 			not signed in
 		</div>
 	</div>
 </template>
-
-

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -19,45 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="contents">
 		<MkVisitorDashboard/>
 	</div>
-	<!-- <div v-if="instances && instances.length > 0" class="federation">
-		<MarqueeText :duration="40">
-			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-				<MkInstanceCardMini :instance="instance"/>
-				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
-				<span class="name _monospace">{{ instance.host }}</span>
-			</MkA>
-		</MarqueeText>
-	</div> -->
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'misskey-js';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/pawkey.png';
-import { misskeyApiGet } from '@/utility/misskey-api.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
-import { getProxiedImageUrl } from '@/utility/media-proxy.js';
 import { instance as meta } from '@/instance.js';
-
-const instances = ref<Misskey.entities.FederationInstance[]>();
-
-function getInstanceIcon(instance: Misskey.entities.FederationInstance): string {
-	if (!instance.iconUrl) {
-		return '';
-	}
-
-	return getProxiedImageUrl(instance.iconUrl, 'preview');
-}
-
-misskeyApiGet('federation/instances', {
-	sort: '+pubSub',
-	limit: 20,
-	blocked: 'false',
-}).then(_instances => {
-	instances.value = _instances;
-});
 </script>
 
 <style lang="scss" scoped>