add widget

packages/frontend/src/pages/about.vue

@@ -31,7 +31,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue'));
-// const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
+const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
 const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue'));
 const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue'));
 

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

@@ -20,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkEmoji :normal="true" :noStyle="true" emoji="🎉"/>
 		<MkEmoji :normal="true" :noStyle="true" emoji="🍮"/>
 	</div>
-	<div class="contents">
+	<!-- <div class="contents">
 		<MkVisitorDashboard/>
-	</div>
+	</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"/>-->
+				<MkInstanceCardMini :instance="instance"/>
 				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-// import XTimeline from './welcome.timeline.vue';
+import XTimeline from './welcome.timeline.vue';
 import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/misskey.svg';

packages/frontend/src/ui/_common_/common.ts

@@ -68,7 +68,8 @@ export function openInstanceMenu(ev: MouseEvent) {
 		text: i18n.ts.charts,
 		icon: 'ti ti-chart-line',
 		to: '/about#charts',
-	}, { type: 'divider' }, 
+	}, { type: 'divider' }
+	// , 
 	// {
 	// 	type: 'link',
 	// 	text: i18n.ts.ads,

packages/frontend/src/widgets/WidgetPaplin.vue

@@ -0,0 +1,64 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer :naked="widgetProps.transparent" :showHeader="false" class="mkw-paplin">
+	<img :class="transition" src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp" @click="OnClick" v-bind:style="{transform: `rotate(${deg}deg)`}" alt="refresh-icon-btn" />
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, shallowRef } from 'vue';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+
+const name = 'paplin';
+
+const deg = 0;
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const OnClick = () => {
+	this.deg += 360;
+	//if (this.live2d) this.live2d.changeExpression('gurugurume');
+};
+
+onMounted(() => {
+	window.addEventListener('mousemove', onMousemove, { passive: true });
+});
+
+onUnmounted(() => {
+	window.removeEventListener('mousemove', onMousemove);
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	width: 100%;
+	height: 350px;
+	border: none;
+	pointer-events: none;
+	color-scheme: light;
+}
+.transition {
+	transition: transform 1s ease-in-out;
+}
+</style>

packages/frontend/src/widgets/index.ts

@@ -34,6 +34,7 @@ export default function(app: App) {
 	app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue')));
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
+	app.component('WidgetPaplin', defineAsyncComponent(() => import('./WidgetPaplin.vue')));
 }
 
 export const widgets = [
@@ -65,4 +66,5 @@ export const widgets = [
 	'userList',
 	'clicker',
 	'birthdayFollowings',
+	'WidgetPaplin',
 ];