feat: 非ログイン時に表示されるトップページのスタイルを選択できるように

packages/frontend/src/pages/admin/branding.vue

@@ -8,6 +8,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
 		<SearchMarker path="/admin/branding" :label="i18n.ts.branding" :keywords="['branding']" icon="ti ti-paint">
 			<div class="_gaps_m">
+				<SearchMarker :keywords="['entrance', 'welcome', 'landing', 'front', 'home', 'page', 'style']">
+					<MkRadios v-model="entrancePageStyle">
+						<template #label><SearchLabel>{{ i18n.ts._serverSettings.entrancePageStyle }}</SearchLabel></template>
+						<option value="classic">Classic</option>
+						<option value="simple">Simple</option>
+					</MkRadios>
+				</SearchMarker>
+
+				<SearchMarker :keywords="['timeline']">
+					<MkSwitch v-model="showTimelineForVisitor">
+						<template #label><SearchLabel>{{ i18n.ts._serverSettings.showTimelineForVisitor }}</SearchLabel></template>
+					</MkSwitch>
+				</SearchMarker>
+
+				<SearchMarker :keywords="['activity', 'activities']">
+					<MkSwitch v-model="showActivityiesForVisitor">
+						<template #label><SearchLabel>{{ i18n.ts._serverSettings.showActivityiesForVisitor }}</SearchLabel></template>
+					</MkSwitch>
+				</SearchMarker>
+
 				<SearchMarker :keywords="['icon', 'image']">
 					<MkInput v-model="iconUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
@@ -141,9 +161,14 @@ import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import MkButton from '@/components/MkButton.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 
 const meta = await misskeyApi('admin/meta');
 
+const entrancePageStyle = ref(meta.clientOptions.entrancePageStyle ?? 'classic');
+const showTimelineForVisitor = ref(meta.clientOptions.showTimelineForVisitor ?? true);
+const showActivityiesForVisitor = ref(meta.clientOptions.showActivityiesForVisitor ?? true);
 const iconUrl = ref(meta.iconUrl);
 const app192IconUrl = ref(meta.app192IconUrl);
 const app512IconUrl = ref(meta.app512IconUrl);
@@ -161,6 +186,11 @@ const manifestJsonOverride = ref(meta.manifestJsonOverride === '' ? '{}' : JSON.
 
 function save() {
 	os.apiWithDialog('admin/update-meta', {
+		clientOptions: {
+			entrancePageStyle: entrancePageStyle.value,
+			showTimelineForVisitor: showTimelineForVisitor.value,
+			showActivityiesForVisitor: showActivityiesForVisitor.value,
+		},
 		iconUrl: iconUrl.value,
 		app192IconUrl: app192IconUrl.value,
 		app512IconUrl: app512IconUrl.value,

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

@@ -0,0 +1,69 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="meta" :class="$style.root">
+	<MkFeaturedPhotos :class="$style.bg"/>
+	<div :class="$style.logoWrapper">
+		<div :class="$style.poweredBy">Powered by</div>
+		<img :src="misskeysvg" :class="$style.misskey"/>
+	</div>
+	<div :class="$style.contents">
+		<MkVisitorDashboard/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import misskeysvg from '/client-assets/misskey.svg';
+import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
+import { instance as meta } from '@/instance.js';
+</script>
+
+<style lang="scss" module>
+.root {
+	height: 100cqh;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.bg {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 80vw; // 100%からshapeの幅を引いている
+	height: 100vh;
+}
+
+.logoWrapper {
+	position: fixed;
+	top: 36px;
+	left: 36px;
+	flex: auto;
+	color: #fff;
+	user-select: none;
+	pointer-events: none;
+}
+
+.poweredBy {
+	margin-bottom: 2px;
+}
+
+.misskey {
+	width: 120px;
+
+	@media (max-width: 450px) {
+		width: 100px;
+	}
+}
+
+.contents {
+	position: relative;
+	width: min(430px, calc(100% - 32px));
+	margin: auto;
+	padding: 100px 0 100px 0;
+}
+</style>

packages/frontend/src/pages/welcome.vue

@@ -6,16 +6,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="instance">
 	<XSetup v-if="instance.requireSetup"/>
-	<XEntrance v-else/>
+	<XEntranceClassic v-else-if="(instance.clientOptions.entrancePageStyle ?? 'classic') === 'classic'"/>
+	<XEntranceSimple v-else/>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XSetup from './welcome.setup.vue';
-import XEntrance from './welcome.entrance.a.vue';
 import { instanceName } from '@@/js/config.js';
+import XSetup from './welcome.setup.vue';
+import XEntranceClassic from './welcome.entrance.classic.vue';
+import XEntranceSimple from './welcome.entrance.simple.vue';
 import { definePage } from '@/page.js';
 import { fetchInstance } from '@/instance.js';