wip

locales/index.d.ts

@@ -5413,6 +5413,10 @@ export interface Locale extends ILocale {
      * スクロールして閉じる
      */
     "scrollToClose": string;
+    /**
+     * アドバイス
+     */
+    "advice": string;
     "_chat": {
         /**
          * まだメッセージはありません
@@ -11625,6 +11629,92 @@ export interface Locale extends ILocale {
          * 管理者アカウントが作成されました！
          */
         "accountCreated": string;
+        /**
+         * サーバーの設定
+         */
+        "serverSetting": string;
+        /**
+         * このウィザードで簡単に最適なサーバーの設定を行えます。
+         */
+        "youCanEasilyConfigureOptimalServerSettingsWithThisWizard": string;
+        /**
+         * ここでの設定は、あとからでも変更できます。
+         */
+        "settingsYouMakeHereCanBeChangedLater": string;
+        /**
+         * Misskeyをどのように使いますか？
+         */
+        "howWillYouUseMisskey": string;
+        "_use": {
+            /**
+             * お一人様サーバー
+             */
+            "one": string;
+            /**
+             * 自分専用のサーバーとして、一人で使う
+             */
+            "one_description": string;
+            /**
+             * お一人様サーバーとして運用する場合でも、アカウントは必要に応じて複数作成可能です。
+             */
+            "one_youCanCreateMultipleAccounts": string;
+            /**
+             * グループサーバー
+             */
+            "group": string;
+            /**
+             * 信頼できる他の利用者を招待して、複数人で使う
+             */
+            "group_description": string;
+            /**
+             * オープンサーバー
+             */
+            "open": string;
+            /**
+             * 不特定多数の利用者を受け入れる運営を行う
+             */
+            "open_description": string;
+        };
+        /**
+         * 不特定多数の利用者を受け入れることはリスクが伴います。トラブルに対処できるよう、確実なモデレーション体制で運営することを推奨します。
+         */
+        "openServerAdvice": string;
+        /**
+         * どれくらいの人数を想定していますか？
+         */
+        "howManyUsersDoYouExpect": string;
+        "_scale": {
+            /**
+             * 100人以下 (小規模)
+             */
+            "small": string;
+            /**
+             * 100人以上1000人以下 (中規模)
+             */
+            "medium": string;
+            /**
+             * 1000人以上 (大規模)
+             */
+            "large": string;
+        };
+        /**
+         * 寄付のお願い
+         */
+        "donationRequest": string;
+        "_donationRequest": {
+            /**
+             * Misskeyは有志によって開発されている無料のソフトウェアです。
+             */
+            "text1": string;
+            /**
+             * 今後も開発を続けられるように、よろしければぜひカンパをお願いいたします。
+             */
+            "text2": string;
+            /**
+             * 支援者向け特典もあります！
+             */
+            "text3": string;
+        };
     };
 }
 declare const locales: {

locales/ja-JP.yml

@@ -1348,6 +1348,7 @@ goToDeck: "デッキへ戻る"
 federationJobs: "連合ジョブ"
 driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>\n<b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>\nフォルダを作って整理することもできます。"
 scrollToClose: "スクロールして閉じる"
+advice: "アドバイス"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"
@@ -3110,3 +3111,26 @@ _serverSetupWizard:
   installCompleted: "Misskeyのインストールが完了しました！"
   firstCreateAccount: "まずは、管理者アカウントを作成しましょう。"
   accountCreated: "管理者アカウントが作成されました！"
+  serverSetting: "サーバーの設定"
+  youCanEasilyConfigureOptimalServerSettingsWithThisWizard: "このウィザードで簡単に最適なサーバーの設定を行えます。"
+  settingsYouMakeHereCanBeChangedLater: "ここでの設定は、あとからでも変更できます。"
+  howWillYouUseMisskey: "Misskeyをどのように使いますか？"
+  _use:
+    one: "お一人様サーバー"
+    one_description: "自分専用のサーバーとして、一人で使う"
+    one_youCanCreateMultipleAccounts: "お一人様サーバーとして運用する場合でも、アカウントは必要に応じて複数作成可能です。"
+    group: "グループサーバー"
+    group_description: "信頼できる他の利用者を招待して、複数人で使う"
+    open: "オープンサーバー"
+    open_description: "不特定多数の利用者を受け入れる運営を行う"
+  openServerAdvice: "不特定多数の利用者を受け入れることはリスクが伴います。トラブルに対処できるよう、確実なモデレーション体制で運営することを推奨します。"
+  howManyUsersDoYouExpect: "どれくらいの人数を想定していますか？"
+  _scale:
+    small: "100人以下 (小規模)"
+    medium: "100人以上1000人以下 (中規模)"
+    large: "1000人以上 (大規模)"
+  donationRequest: "寄付のお願い"
+  _donationRequest:
+    text1: "Misskeyは有志によって開発されている無料のソフトウェアです。"
+    text2: "今後も開発を続けられるように、よろしければぜひカンパをお願いいたします。"
+    text3: "支援者向け特典もあります！"

packages/frontend/src/components/MkRadio.vue

@@ -48,7 +48,8 @@ function toggle(): void {
 <style lang="scss" module>
 .root {
 	position: relative;
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
 	text-align: left;
 	cursor: pointer;
 	padding: 7px 10px;
@@ -102,7 +103,8 @@ function toggle(): void {
 }
 
 .button {
-	position: absolute;
+	position: relative;
+	display: inline-block;
 	width: 14px;
 	height: 14px;
 	background: none;
@@ -126,7 +128,7 @@ function toggle(): void {
 }
 
 .label {
-	margin-left: 28px;
+	margin-left: 12px;
 	display: block;
 	line-height: 20px;
 	cursor: pointer;

packages/frontend/src/components/MkRadios.vue

@@ -5,14 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts">
 import { defineComponent, h, ref, watch } from 'vue';
-import type { VNode } from 'vue';
 import MkRadio from './MkRadio.vue';
+import type { VNode } from 'vue';
 
 export default defineComponent({
 	props: {
 		modelValue: {
 			required: false,
 		},
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, context) {
 		const value = ref(props.modelValue);
@@ -34,7 +38,10 @@ export default defineComponent({
 		options = options.filter(vnode => !(typeof vnode.type === 'symbol' && vnode.type.description === 'v-cmt' && vnode.children === 'v-if'));
 
 		return () => h('div', {
-			class: 'novjtcto',
+			class: [
+				'novjtcto',
+				...(props.vertical ? ['vertical'] : []),
+			],
 		}, [
 			...(label ? [h('div', {
 				class: 'label',
@@ -71,7 +78,7 @@ export default defineComponent({
 
 	> .body {
 		display: flex;
-    gap: 12px;
+    gap: 10px;
     flex-wrap: wrap;
 	}
 
@@ -84,5 +91,11 @@ export default defineComponent({
 			display: none;
 		}
 	}
+
+	&.vertical {
+		> .body {
+			flex-direction: column;
+		}
+	}
 }
 </style>

packages/frontend/src/pages/welcome.setup.vue

@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div>Welcome to Misskey!</div>
 				<div :class="$style.version">v{{ version }}</div>
 			</div>
-			<div style="padding: 24px 32px 32px 32px;">
+			<div style="padding: 16px 32px 32px 32px;">
 				<form v-if="!accountCreated" class="_gaps_m" @submit.prevent="createAccount()">
 					<div style="text-align: center;" class="_gaps_s">
 						<div><b>{{ i18n.ts._serverSetupWizard.installCompleted }}</b></div>
@@ -72,18 +72,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkButton>
 					</div>
 				</form>
-				<template v-else-if="step === 0">
+				<div v-else-if="step === 0" class="_gaps_m">
 					<div style="text-align: center;" class="_gaps_s">
 						<div><b>{{ i18n.ts._serverSetupWizard.accountCreated }}</b></div>
 					</div>
 					<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="step++">
 						{{ i18n.ts.next }}
 					</MkButton>
-				</template>
+				</div>
-				<template v-else-if="step === 1">
+				<div v-else-if="step === 1" class="_gaps_m">
 					<div style="text-align: center;" class="_gaps_s">
-						<div><b>お願い</b></div>
+						<div><b>{{ i18n.ts._serverSetupWizard.donationRequest }}</b></div>
-						<div>Misskeyは有志によって開発されている無料のソフトウェアです。<br>今後も開発を続けられるように、よろしければぜひカンパをお願いいたします。<br>ご支援特典もあります！</div>
+						<div>{{ i18n.ts._serverSetupWizard._donationRequest.text1 }}<br>{{ i18n.ts._serverSetupWizard._donationRequest.text2 }}<br>{{ i18n.ts._serverSetupWizard._donationRequest.text3 }}</div>
 					</div>
 					<MkLink target="_blank" url="https://misskey-hub.net/docs/donate/" style="margin: 0 auto;">{{ i18n.ts.learnMore }}</MkLink>
 					<div class="_buttonsCenter">
@@ -91,7 +91,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 							{{ i18n.ts.next }}
 						</MkButton>
 					</div>
-				</template>
+				</div>
+				<div v-else-if="step === 2" class="_gaps_m">
+					<div style="text-align: center;" class="_gaps_s">
+						<div style="font-size: 120%;"><b>{{ i18n.ts._serverSetupWizard.serverSetting }}</b></div>
+						<div>{{ i18n.ts._serverSetupWizard.youCanEasilyConfigureOptimalServerSettingsWithThisWizard }}</div>
+						<div>{{ i18n.ts._serverSetupWizard.settingsYouMakeHereCanBeChangedLater }}</div>
+					</div>
+
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts._serverSetupWizard.howWillYouUseMisskey }}</template>
+
+						<div class="_gaps_s">
+							<MkRadios v-model="q_use" :vertical="true">
+								<option value="one">
+									<div><b>{{ i18n.ts._serverSetupWizard._use.one }}</b></div>
+									<div>{{ i18n.ts._serverSetupWizard._use.one_description }}</div>
+								</option>
+								<option value="group">
+									<div><b>{{ i18n.ts._serverSetupWizard._use.group }}</b></div>
+									<div>{{ i18n.ts._serverSetupWizard._use.group_description }}</div>
+								</option>
+								<option value="open">
+									<div><b>{{ i18n.ts._serverSetupWizard._use.open }}</b></div>
+									<div>{{ i18n.ts._serverSetupWizard._use.open_description }}</div>
+								</option>
+							</MkRadios>
+
+							<MkInfo v-if="q_use === 'one'">{{ i18n.ts._serverSetupWizard._use.one_youCanCreateMultipleAccounts }}</MkInfo>
+							<MkInfo v-if="q_use === 'open'" warn><b>{{ i18n.ts.advice }}:</b> {{ i18n.ts._serverSetupWizard.openServerAdvice }}</MkInfo>
+						</div>
+					</MkFolder>
+
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts._serverSetupWizard.howManyUsersDoYouExpect }}</template>
+
+						<MkRadios v-model="q_scale" :vertical="true">
+							<option value="small">{{ i18n.ts._serverSetupWizard._scale.small }}</option>
+							<option value="medium">{{ i18n.ts._serverSetupWizard._scale.medium }}</option>
+							<option value="large">{{ i18n.ts._serverSetupWizard._scale.large }}</option>
+						</MkRadios>
+					</MkFolder>
+
+					<div v-if="qStep === 999" class="_buttonsCenter">
+						<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="step++">
+							{{ i18n.ts.next }}
+						</MkButton>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -108,6 +155,9 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { login } from '@/accounts.js';
 import MkLink from '@/components/MkLink.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkInfo from '@/components/MkInfo.vue';
 
 const username = ref('');
 const password = ref('');
@@ -115,6 +165,9 @@ const setupPassword = ref('');
 const accountCreating = ref(false);
 const accountCreated = ref(false);
 const step = ref(0);
+const qStep = ref(0);
+const q_use = ref('one');
+const q_scale = ref('small');
 
 let token;