Improve about-misskey page

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## 12.86.1 (2021/08/12)
 
 ### Improvements
+- about-misskeyページにドキュメントへのリンクを追加
 - Docker: Node.jsを16.6.2に
 - 依存関係の更新
 

locales/ja-JP.yml

@@ -772,6 +772,7 @@ searchResult: "検索結果"
 hashtags: "ハッシュタグ"
 troubleshooting: "トラブルシューティング"
 useBlurEffect: "UIにぼかし効果を使用"
+learnMore: "詳しく"
 
 _docs: 
   continueReading: "続きを読む"

src/client/pages/about-misskey.vue

@@ -4,14 +4,14 @@
 		<div id="debug"></div>
 		<section class="_formItem about">
 			<div class="_formPanel panel" :class="{ playing: easterEggEngine != null }" ref="about">
-				<img src="/static-assets/client/about-icon.png" alt="" class="icon" ref="icon" @load="iconLoaded" draggable="false"/>
+				<img src="/static-assets/client/about-icon.png" alt="" class="icon" @load="iconLoaded" draggable="false" @click="gravity"/>
 				<div class="misskey">Misskey</div>
 				<div class="version">v{{ version }}</div>
 				<span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
 			</div>
 		</section>
-		<section class="_formItem" style="text-align: center; padding: 0 16px;" @click="gravity">
-			{{ $ts._aboutMisskey.about }}
+		<section class="_formItem" style="text-align: center; padding: 0 16px;">
+			{{ $ts._aboutMisskey.about }}<br><MkA class="_link" to="/docs/general/misskey">{{ $ts.learnMore }}</MkA>
 		</section>
 		<FormGroup>
 			<FormLink to="https://github.com/misskey-dev/misskey" external>
@@ -54,7 +54,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import VanillaTilt from 'vanilla-tilt';
 import { version } from '@client/config';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -62,7 +61,6 @@ import FormGroup from '@client/components/form/group.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import MkLink from '@client/components/link.vue';
 import { physics } from '@client/scripts/physics.ts';
-import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
 const patrons = [
@@ -145,15 +143,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		VanillaTilt.init(this.$refs.icon, {
-			max: 30,
-			perspective: 500,
-			scale: 1.125,
-			speed: 1000,
-		});
-	},
-
 	beforeUnmount() {
 		if (this.easterEggEngine) {
 			this.easterEggEngine.stop();
@@ -181,7 +170,6 @@ export default defineComponent({
 		gravity() {
 			if (!this.easterEggReady) return;
 			this.easterEggReady = false;
-			this.$refs.icon.vanillaTilt.destroy();
 			this.easterEggEngine = physics(this.$refs.about);
 		}
 	}