From 04db5944d1511fdcf5a63849eb4ae4bc54675b0c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 7 Feb 2020 02:38:02 +0900
Subject: Fix #5854

---
 src/client/app.vue            |   5 ++
 src/client/pages/doc.vue      | 134 ++++++++++++++++++++++++++++++++++++++++++
 src/client/pages/document.vue |  93 -----------------------------
 src/client/router.ts          |   2 +-
 src/docs/about.en-US.md       |   3 -
 5 files changed, 140 insertions(+), 97 deletions(-)
 create mode 100644 src/client/pages/doc.vue
 delete mode 100644 src/client/pages/document.vue
 delete mode 100644 src/docs/about.en-US.md

(limited to 'src')

diff --git a/src/client/app.vue b/src/client/app.vue
index ef2ec1e3fa..61fd1ec382 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -179,6 +179,7 @@ export default Vue.extend({
 			return {
 				'p': this.post,
 				'n': this.post,
+				'h|/': this.help
 			};
 		},
 
@@ -254,6 +255,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		help() {
+			this.$router.push('/docs/keyboard-shortcut');
+		},
+		
 		back() {
 			if (this.canBack) window.history.back();
 		},
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
new file mode 100644
index 0000000000..3a92b7adf6
--- /dev/null
+++ b/src/client/pages/doc.vue
@@ -0,0 +1,134 @@
+<template>
+<div>
+	<portal to="icon"><fa :icon="faFileAlt"/></portal>
+	<portal to="title">{{ title }}</portal>
+	<main class="_card">
+		<div class="_content">
+			<div v-html="body" class="qyqbqfal"></div>
+		</div>
+	</main>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
+import MarkdownIt from 'markdown-it';
+import { url, lang } from '../config';
+
+const markdown = MarkdownIt({
+	html: true
+});
+
+export default Vue.extend({
+	metaInfo() {
+		return {
+			title: this.title,
+		};
+	},
+
+	props: {
+		doc: {
+			type: String,
+			required: true
+		}
+	},
+
+	watch: {
+		doc: {
+			handler() {
+				this.fetchDoc();
+			},
+			immediate: true,
+		}
+	},
+
+	data() {
+		return {
+			faFileAlt,
+			title: '',
+			body: '',
+			markdown: '',
+		}
+	},
+
+	methods: {
+		fetchDoc() {
+			fetch(`${url}/assets/docs/${this.doc}.${lang}.md`).then(res => res.text()).then(md => {
+				this.parse(md);
+			});
+		},
+
+		parse(md: string) {
+			// markdown の全容をパースする
+			const parsed = markdown.parse(md, {});
+			if (parsed.length === 0) return;
+
+			const buf = [...parsed];
+			const headingTokens = [];
+			let headingStart = 0;
+
+			// もっとも上にある見出しを抽出する
+			while (buf[0].type !== 'heading_open') {
+				buf.shift();
+				headingStart++;
+			}
+			buf.shift();
+			while (buf[0].type as string !== 'heading_close') {
+				const token = buf.shift();
+				if (token) {
+					headingTokens.push(token);
+				}
+			}
+
+			// 抽出した見出しを除く部分をbodyとして抽出する
+			const bodyTokens = [...parsed];
+			bodyTokens.splice(headingStart, headingTokens.length + 2);
+
+			// 各々レンダーする
+			this.title = markdown.renderer.render(headingTokens, {}, {});
+			this.body = markdown.renderer.render(bodyTokens, {}, {});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qyqbqfal {
+	> *:first-child {
+		margin-top: 0;
+	}
+
+	> *:last-child {
+		margin-bottom: 0;
+	}
+
+	::v-deep h2 {
+		font-size: 1.25em;
+		padding: 0 0 0.5em 0;
+		border-bottom: solid 1px var(--divider);
+	}
+
+	::v-deep table {
+		width: 100%;
+		max-width: 100%;
+		overflow: auto;
+	}
+
+	::v-deep kbd.group {
+		display: inline-block;
+		padding: 2px;
+		border: 1px solid var(--divider);
+		border-radius: 4px;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+	}
+
+	::v-deep kbd.key {
+		display: inline-block;
+		padding: 6px 8px;
+		border: solid 1px var(--divider);
+		border-radius: 4px;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+	}
+}
+</style>
diff --git a/src/client/pages/document.vue b/src/client/pages/document.vue
deleted file mode 100644
index 3ee729b8b5..0000000000
--- a/src/client/pages/document.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-<div>
-	<portal to="icon"><fa :icon="faFileAlt"/></portal>
-	<portal to="title">{{ title }}</portal>
-	<main class="_card">
-		<div class="_content">
-			<div v-html="body"/>
-		</div>
-	</main>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
-import MarkdownIt from 'markdown-it';
-
-const markdown = MarkdownIt();
-
-export default Vue.extend({
-	metaInfo() {
-		return {
-			title: this.title,
-		};
-	},
-
-	components: {
-	},
-
-	watch: {
-		markdown() {
-			this.updateText();
-		}
-	},
-
-	data() {
-		return {
-			faFileAlt,
-			title: '',
-			body: '',
-			markdown: `# ぽぺ
-ぽぺ **ぽぺ** _ぽぺーーーーーっ！_ \`ぽぺ\`
-
-\`\`\`
-export default class Pope extends PopeBase
-{
-	public Pope() {
-		return 'ぽぺ';
-	}
-}
-\`\`\``,
-		}
-	},
-
-	created() {
-		this.updateText()
-	},
-
-	methods: {
-		updateText() {
-			// markdown の全容をパースする
-			const parsed = markdown.parse(this.markdown, {});
-			if (parsed.length === 0)
-				return;
-
-			const buf = [ ...parsed ]
-			const headingTokens = [];
-			let headingStart = 0;
-
-			// もっとも上にある見出しを抽出する
-			while (buf[0].type !== 'heading_open') {
-				buf.shift();
-				headingStart++;
-			}
-			buf.shift();
-			while (buf[0].type as string !== 'heading_close') {
-				const token = buf.shift();
-				if (token) {
-					headingTokens.push(token);
-				}
-			}
-
-			// 抽出した見出しを除く部分をbodyとして抽出する
-			const bodyTokens = [ ...parsed ]
-			bodyTokens.splice(headingStart, headingTokens.length + 2);
-
-			// 各々レンダーする
-			this.title = markdown.renderer.render(headingTokens, {}, {});
-			this.body = markdown.renderer.render(bodyTokens, {}, {});
-		}
-	}
-});
-</script>
diff --git a/src/client/router.ts b/src/client/router.ts
index 27aa078223..48eaa0f2e3 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -21,7 +21,7 @@ export const router = new VueRouter({
 		{ path: '/announcements', component: page('announcements') },
 		{ path: '/about', component: page('about') },
 		{ path: '/featured', component: page('featured') },
-		{ path: '/document', component: page('document') },
+		{ path: '/docs/:doc', component: page('doc'), props: true },
 		{ path: '/explore', component: page('explore') },
 		{ path: '/explore/tags/:tag', props: true, component: page('explore') },
 		{ path: '/search', component: page('search') },
diff --git a/src/docs/about.en-US.md b/src/docs/about.en-US.md
deleted file mode 100644
index bb1c51927b..0000000000
--- a/src/docs/about.en-US.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# About Misskey
-
-Misskey is a mini blog SNS.
-- 
cgit v1.2.3-freya