kaslo/pawkey-sk
1
0
Fork 0
mirror of https://git.boykissers.com/pawkey/pawkey-sk.git synced 2025-12-20 04:04:16 +00:00
Code Packages Activity

feat: things

Browse Source
This commit is contained in:
Leafus
2025-10-14 05:58:52 +02:00
parent a1dd18e0c4
commit 561afec395
3 changed files with 80 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkVisitorDashboard.vue
View File

@@ -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 {

109
packages/frontend/src/components/global/userIdWatermark.vue
View File

@@ -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 itemClass = computed(() => generateRandomClass());
const gridClass = ref(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 style = document.createElement('style');
style.textContent = `
const regenerateWatermark = () => {
cleanupOldElements();
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;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(20px, 1fr));
gap: 20px;
padding: 20px;
pointer-events: none;
z-index: 999999999;
overflow: hidden;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
grid-template-rows: repeat(auto-fill, minmax(20px, 1fr)) !important;
gap: 20px !important;
padding: 20px !important;
pointer-events: none !important;
z-index: 999999999 !important;
overflow: hidden !important;
}
.${itemClass.value} {
display: flex;
align-items: center;
justify-content: center;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: color-mix(
in srgb,
var(--MI_THEME-fg) 1.2%,
transparent
) !important;
font-size: 12px;
font-family: monospace;
word-break: break-all;
text-align: center;
user-select: none;
font-size: 12px !important;
font-family: monospace !important;
word-break: break-all !important;
text-align: center !important;
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>

31
packages/frontend/src/pages/welcome.entrance.a.vue
View File

@@ -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>