spec(frontend): Welcome・AboutページにSponsored byセクションを追加 (MisskeyIO#497)

README.md

@@ -53,10 +53,14 @@ With Misskey's built in drive, you get cloud storage right in your social media,
 
 Misskey Documentation can be found at [Misskey Hub](https://misskey-hub.net/docs/), some of the links and graphics above also lead to specific portions of it.
 
-## Sponsors
+## Sponsors of Misskey
 
-<div align="center">
+List of sponsors of Misskey can be found at [Misskey Hub](https://misskey-hub.net/).
-	<a class="rss3" title="RSS3" href="https://rss3.io/" target="_blank"><img src="https://rss3.mypinata.cloud/ipfs/QmUG6H3Z7D5P511shn7sB4CPmpjH5uZWu4m5mWX7U3Gqbu" alt="RSS3" height="60"></a>
+
+## Sponsors of Misskey.io
+
+<div style="display:flex;flex-direction:column;gap:8px 8px;align-items:center;justify-content:center;">
+	<a title="Skeb" href="https://skeb.jp/" target="_blank"><img src="https://media.misskeyusercontent.com/misskey-io/sponsors/skeb.svg" alt="Skeb" width="140"></a>
 </div>
 
 ## Thanks

locales/en-US.yml

@@ -1185,6 +1185,7 @@ repositoryUrlDescription: "If you are using Misskey as is (without any changes t
 repositoryUrlOrTarballRequired: "If you have not published a repository, you must provide a tarball instead. See .config/example.yml for more information."
 feedback: "Feedback"
 feedbackUrl: "Feedback URL"
+support: "Helpdesk"
 supportThisInstance: "Support {name}"
 impressum: "Impressum"
 impressumUrl: "Impressum URL"

locales/index.d.ts

@@ -4752,6 +4752,10 @@ export interface Locale extends ILocale {
      * フィードバックURL
      */
     "feedbackUrl": string;
+    /**
+     * お問い合わせ
+     */
+    "support": string;
     /**
      * {name}を支援
      */

locales/ja-JP.yml

@@ -1184,6 +1184,7 @@ repositoryUrl: "リポジトリURL"
 repositoryUrlDescription: "ソースコードが公開されているリポジトリがある場合、そのURLを記入します。Misskeyを現状のまま（ソースコードにいかなる変更も加えずに）使用している場合は https://github.com/misskey-dev/misskey と記入します。"
 feedback: "フィードバック"
 feedbackUrl: "フィードバックURL"
+support: "お問い合わせ"
 supportThisInstance: "{name}を支援"
 impressum: "運営者情報"
 impressumUrl: "運営者情報URL"

locales/ko-KR.yml

@@ -1182,6 +1182,7 @@ repositoryUrlDescription: "소스 코드를 공개한 저장소가 있는 경우
 repositoryUrlOrTarballRequired: "저장소를 공개하지 않은 경우 대신 tarball을 제공할 필요가 있습니다. 세부사항은 .config/example.yml을 참조해 주세요."
 feedback: "피드백"
 feedbackUrl: "피드백 URL"
+support: "문의하기"
 supportThisInstance: "{name} 지원하기"
 impressum: "운영자 정보"
 impressumUrl: "운영자 정보 URL"

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -47,6 +47,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.panel">
 		<XActiveUsersChart/>
 	</div>
+	<div :class="[$style.footer, $style.panel]">
+		<div :class="$style.sponsors">
+			<div><Mfm text="$[jelly ❤]"/> Sponsored by</div>
+			<a title="Skeb" href="https://skeb.jp/" target="_blank"><img src="https://media.misskeyusercontent.com/misskey-io/sponsors/skeb.png" alt="Skeb" width="140"></a>
+		</div>
+		<div :class="$style.legalNotice">
+			<div>© {{ new Date().getFullYear() }} MisskeyHQ Inc.</div>
+			<a href="https://go.misskey.io/legal-notice" target="_blank" rel="noopener"><u>特定商取引法に基づく表記</u></a>
+		</div>
+		<div :class="$style.links">
+			<a href="#" @click="os.pageWindow('/about')"><u>{{ instanceName }}</u></a>
+			<a href="#" @click="os.pageWindow('/about-misskey')"><u>{{ i18n.ts.aboutMisskey }}</u></a>
+			<a v-if="instance.tosUrl" :href="instance.tosUrl" target="_blank" rel="noopener"><u>{{ i18n.ts.termsOfService }}</u></a>
+			<a v-if="instance.privacyPolicyUrl" :href="instance.privacyPolicyUrl" target="_blank" rel="noopener"><u>{{ i18n.ts.privacyPolicy }}</u></a>
+			<a v-if="instance.impressumUrl" :href="instance.impressumUrl" target="_blank" rel="noopener"><u>{{ i18n.ts.impressum }}</u></a>
+			<a v-if="instance.feedbackUrl" :href="instance.feedbackUrl" target="_blank" rel="noopener"><u>{{ i18n.ts.support }}</u></a>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -240,4 +258,36 @@ function exploreOtherServers() {
 	height: 350px;
 	overflow: auto;
 }
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 12px 16px;
+	gap: 8px 8px;
+}
+
+.legalNotice {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.sponsors {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px 8px;
+}
+
+.links {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: 8px 8px;
+}
 </style>

packages/frontend/src/pages/about.vue

@@ -23,6 +23,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #value><div v-html="instance.description"></div></template>
 				</MkKeyValue>
 
+				<div style="display:flex;flex-direction:column;align-items:center;justify-content:center">
+					<div>© {{ new Date().getFullYear() }} MisskeyHQ Inc.</div>
+					<a href="https://go.misskey.io/legal-notice" target="_blank" rel="noopener"><u>特定商取引法に基づく表記</u></a>
+				</div>
+
+				<FormSection>
+					<template #label><Mfm text="$[jelly ❤]"/> Sponsored by</template>
+					<div style="display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;justify-content:center;">
+						<a title="Skeb" href="https://skeb.jp/" target="_blank"><img src="https://media.misskeyusercontent.com/misskey-io/sponsors/skeb.png" alt="Skeb" width="140"></a>
+					</div>
+				</FormSection>
+
 				<FormSection>
 					<div class="_gaps_m">
 						<MkKeyValue :copy="version">
@@ -83,8 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</FormLink>
 							<FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external>
 								<template #icon><i class="ti ti-message"></i></template>
-								{{ i18n.ts.feedback }}
+								{{ i18n.ts.support }}
-								<template #suffix>Helpdesk</template>
 							</FormLink>
 							<FormLink to="https://misskeyhq.fanbox.cc" external>
 								<template #icon><i class="ti ti-pig-money"></i></template>