インスタンス情報ページとMisskey情報ページを分離するなど

locales/ja-JP.yml

@@ -387,6 +387,7 @@ tapSecurityKey: "セキュリティーキーにタッチ"
 or: "もしくは"
 uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されました"
+aboutX: "{x}について"
 
 _ago:
   unknown: "謎"

src/client/app.vue

@@ -157,7 +157,7 @@ import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regul
 import { ResizeObserver } from '@juggle/resize-observer';
 import { v4 as uuid } from 'uuid';
 import i18n from './i18n';
-import { host } from './config';
+import { host, instanceName } from './config';
 import { search } from './scripts/search';
 import contains from './scripts/contains';
 import MkToast from './components/toast.vue';
@@ -481,9 +481,14 @@ export default Vue.extend({
 					icon: faQuestionCircle,
 				}, {
 					type: 'link',
-					text: this.$t('about'),
+					text: this.$t('aboutX', { x: instanceName || host }),
 					to: '/about',
 					icon: faInfoCircle,
+				}, {
+					type: 'link',
+					text: this.$t('aboutMisskey'),
+					to: '/about-misskey',
+					icon: faInfoCircle,
 				}],
 				align: 'left',
 				fixed: true,

src/client/config.ts

@@ -3,7 +3,7 @@ declare const _VERSION_: string;
 declare const _ENV_: string;
 
 const address = new URL(location.href);
-const siteName = document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement;
+const siteName = (document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement)?.content;
 
 export const host = address.host;
 export const hostname = address.hostname;
@@ -15,4 +15,4 @@ export const langs = _LANGS_;
 export const locale = JSON.parse(localStorage.getItem('locale'));
 export const version = _VERSION_;
 export const env = _ENV_;
-export const instanceName = siteName && siteName.content ? siteName.content : 'Misskey';
+export const instanceName = siteName === 'Misskey' ? null : siteName;

src/client/init.ts

@@ -149,7 +149,7 @@ os.init(async () => {
 		store: os.store,
 		metaInfo: {
 			title: null,
-			titleTemplate: title => title ? `${title} | ${instanceName}` : instanceName
+			titleTemplate: title => title ? `${title} | ${(instanceName || 'Misskey')}` : (instanceName || 'Misskey')
 		},
 		data() {
 			return {

src/client/pages/about-misskey.vue

@@ -0,0 +1,89 @@
+<template>
+<div class="znqjceqz">
+	<portal to="icon"><fa :icon="faInfoCircle"/></portal>
+	<portal to="title">{{ $t('aboutMisskey') }}</portal>
+
+	<section class="_card">
+		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('aboutMisskey') }}</div>
+		<div class="_content">
+			<div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div>
+			<div>{{ $t('misskeyMembers') }}</div>
+			<span class="members">
+				<a href="https://github.com/syuilo" target="_blank" class="_link">@syuilo</a>
+				<a href="https://github.com/AyaMorisawa" target="_blank" class="_link">@AyaMorisawa</a>
+				<a href="https://github.com/mei23" target="_blank" class="_link">@mei23</a>
+				<a href="https://github.com/acid-chicken" target="_blank" class="_link">@acid-chicken</a>
+				<a href="https://github.com/tamaina" target="_blank" class="_link">@tamaina</a>
+				<a href="https://github.com/rinsuki" target="_blank" class="_link">@rinsuki</a>
+			</span>
+			<div style="margin-top: 1em;">{{ $t('misskeySource') }}</div>
+			<mk-url url="https://github.com/syuilo/misskey"/>
+			<div style="margin-top: 1em;">{{ $t('misskeyTranslation') }}</div>
+			<mk-url url="https://crowdin.com/project/misskey"/>
+			<div style="margin-top: 1em;">{{ $t('misskeyDonate') }}</div>
+			<mk-url url="https://www.patreon.com/syuilo"/>
+		</div>
+		<div class="_content">
+			<span><mfm text="<motion>❤</motion>"/> {{ $t('patrons') }}</span>
+			<ul>
+				<li>Gargron</li>
+				<li>Satsuki Yanagi</li>
+				<li>noellabo</li>
+				<li>naga_rus</li>
+				<li>Melilot</li>
+				<li>AureoleArk</li>
+				<li>Peter G.</li>
+				<li>motcha</li>
+				<li>Atsuko Tominaga</li>
+				<li>dansup</li>
+				<li>Nokotaro Takeda</li>
+				<li>YUKIMOCHI</li>
+				<li>nanami kan</li>
+				<li>Hekovic</li>
+				<li>wara</li>
+				<li>Takashi Shibuya</li>
+				<li>Noizeman</li>
+			</ul>
+			<span>{{ $t('morePatrons') }}</span>
+		</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { version } from '../config';
+import i18n from '../i18n';
+
+export default Vue.extend({
+	i18n,
+
+	metaInfo() {
+		return {
+			title: this.$t('aboutMisskey') as string
+		};
+	},
+
+	data() {
+		return {
+			version,
+			faInfoCircle
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.znqjceqz {
+	> ._card {
+		> ._content {
+			> .members {
+				> a {
+					margin-right: 0.5em;
+				}
+			}
+		}
+	}
+}
+</style>

src/client/pages/about.vue

@@ -20,51 +20,6 @@
 			<div><b>Misskey</b><span>v{{ version }}</span></div>
 		</div>
 	</section>
-
-	<section class="_card aboutMisskey">
-		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('aboutMisskey') }}</div>
-		<div class="_content">
-			<div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div>
-			<div>{{ $t('misskeyMembers') }}</div>
-			<span class="members">
-				<a href="https://github.com/syuilo" target="_blank" class="_link">@syuilo</a>
-				<a href="https://github.com/AyaMorisawa" target="_blank" class="_link">@AyaMorisawa</a>
-				<a href="https://github.com/mei23" target="_blank" class="_link">@mei23</a>
-				<a href="https://github.com/acid-chicken" target="_blank" class="_link">@acid-chicken</a>
-				<a href="https://github.com/tamaina" target="_blank" class="_link">@tamaina</a>
-				<a href="https://github.com/rinsuki" target="_blank" class="_link">@rinsuki</a>
-			</span>
-			<div style="margin-top: 1em;">{{ $t('misskeySource') }}</div>
-			<mk-url url="https://github.com/syuilo/misskey"/>
-			<div style="margin-top: 1em;">{{ $t('misskeyTranslation') }}</div>
-			<mk-url url="https://crowdin.com/project/misskey"/>
-			<div style="margin-top: 1em;">{{ $t('misskeyDonate') }}</div>
-			<mk-url url="https://www.patreon.com/syuilo"/>
-		</div>
-		<div class="_content">
-			<span><mfm text="<motion>❤</motion>"/> {{ $t('patrons') }}</span>
-			<ul>
-				<li>Gargron</li>
-				<li>Satsuki Yanagi</li>
-				<li>noellabo</li>
-				<li>naga_rus</li>
-				<li>Melilot</li>
-				<li>AureoleArk</li>
-				<li>Peter G.</li>
-				<li>motcha</li>
-				<li>Atsuko Tominaga</li>
-				<li>dansup</li>
-				<li>Nokotaro Takeda</li>
-				<li>YUKIMOCHI</li>
-				<li>nanami kan</li>
-				<li>Hekovic</li>
-				<li>wara</li>
-				<li>Takashi Shibuya</li>
-				<li>Noizeman</li>
-			</ul>
-			<span>{{ $t('morePatrons') }}</span>
-		</div>
-	</section>
 </div>
 </template>
 
@@ -119,15 +74,5 @@ export default Vue.extend({
 			}
 		}
 	}
-
-	> .aboutMisskey {
-		> ._content {
-			> .members {
-				> a {
-					margin-right: 0.5em;
-				}
-			}
-		}
-	}
 }
 </style>

src/client/pages/index.welcome.vue

@@ -10,7 +10,7 @@
 import Vue from 'vue';
 import XSetup from './index.welcome.setup.vue';
 import XEntrance from './index.welcome.entrance.vue';
-import { getInstanceName } from '../scripts/get-instance-name';
+import { instanceName } from '../config';
 
 export default Vue.extend({
 	components: {
@@ -20,7 +20,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			instanceName: getInstanceName(),
+			instanceName: instanceName || 'Misskey',
 		}
 	},
 

src/client/router.ts

@@ -20,6 +20,7 @@ export const router = new VueRouter({
 		{ path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
 		{ path: '/announcements', component: page('announcements') },
 		{ path: '/about', component: page('about') },
+		{ path: '/about-misskey', component: page('about-misskey') },
 		{ path: '/featured', component: page('featured') },
 		{ path: '/docs', component: page('docs') },
 		{ path: '/docs/:doc', component: page('doc'), props: true },

src/client/scripts/get-instance-name.ts

@@ -1,8 +0,0 @@
-export function getInstanceName() {
-	const siteName = document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement;
-	if (siteName && siteName.content) {
-		return siteName.content;
-	}
-
-	return 'Misskey';
-}