Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip

1 files changed, 199 insertions, 0 deletions

diff --git a/src/client/ui/visitor.vue b/src/client/ui/visitor.vue
new file mode 100644
index 0000000000..fb21dc01d1
--- /dev/null
+++ b/src/client/ui/visitor.vue
@@ -0,0 +1,199 @@
+<template>
+<div class="mk-app">
+	<header>
+		<router-link class="link" to="/">{{ $t('home') }}</router-link>
+		<router-link class="link" to="/announcements">{{ $t('announcements') }}</router-link>
+		<router-link class="link" to="/channels">{{ $t('channel') }}</router-link>
+		<router-link class="link" to="/about">{{ $t('aboutX', { x: instanceName || host }) }}</router-link>
+	</header>
+
+	<div class="banner" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
+		<h1>{{ instanceName || host }}</h1>
+	</div>
+
+	<div class="contents" ref="contents" :class="{ wallpaper }">
+		<header class="header" ref="header">
+			<XHeader :info="pageInfo"/>
+		</header>
+		<main ref="main">
+			<router-view v-slot="{ Component }">
+				<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
+					<component :is="Component" :ref="changePage"/>
+				</transition>
+			</router-view>
+		</main>
+		<div class="powered-by">
+			<b><router-link to="/">{{ host }}</router-link></b>
+			<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
+		</div>
+	</div>
+
+	<StreamIndicator v-if="$store.getters.isSignedIn"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { } from '@fortawesome/free-solid-svg-icons';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import XHeader from './_common_/header.vue';
+
+const DESKTOP_THRESHOLD = 1100;
+
+export default defineComponent({
+	components: {
+		XHeader
+	},
+
+	data() {
+		return {
+			host,
+			instanceName,
+			pageKey: 0,
+			pageInfo: null,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+		};
+	},
+
+	computed: {
+		keymap(): any {
+			return {
+				'd': () => {
+					if (this.$store.state.device.syncDeviceDarkMode) return;
+					this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
+				},
+				's': search,
+				'h|/': this.help
+			};
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.pageKey++;
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+	},
+
+	mounted() {
+		if (!this.isDesktop) {
+			window.addEventListener('resize', () => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		help() {
+			this.$router.push('/docs/keyboard-shortcut');
+		},
+
+		onTransition() {
+			if (window._scroll) window._scroll();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-app {
+	min-height: 100vh;
+	max-width: 1300px;
+	margin: 0 auto;
+	box-shadow: 1px 0 var(--divider), -1px 0 var(--divider);
+
+	> header {
+		background: var(--panel);
+		padding: 0 16px;
+		text-align: center;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .link {
+			display: inline-block;
+			line-height: 60px;
+			padding: 0 0.7em;
+
+			&.router-link-active {
+				box-shadow: 0 -2px 0 0 var(--accent) inset;
+			}
+		}
+	}
+
+	> .banner {
+		position: relative;
+		width: 100%;
+		height: 200px;
+		background-size: cover;
+		background-position: center;
+
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(transparent, var(--bg));
+		}
+
+		> h1 {
+			margin: 0;
+			text-align: center;
+			color: #fff;
+			text-shadow: 0 0 8px #000;
+			line-height: 200px;
+		}
+	}
+
+	> .contents {
+		> .header {
+			position: sticky;
+			top: 0;
+			left: 0;
+			z-index: 1000;
+			height: 60px;
+			width: 100%;
+			line-height: 60px;
+			text-align: center;
+			-webkit-backdrop-filter: blur(32px);
+			backdrop-filter: blur(32px);
+			background-color: var(--header);
+			border-bottom: 1px solid var(--divider);
+		}
+
+		> .powered-by {
+			padding: 28px;
+			font-size: 14px;
+			text-align: center;
+			border-top: 1px solid var(--divider);
+
+			> small {
+				display: block;
+				margin-top: 8px;
+				opacity: 0.5;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+</style>