Fix #5854

gulpfile.ts

@@ -74,9 +74,17 @@ gulp.task('copy:client', () =>
 			.pipe(gulp.dest('./built/client/assets/'))
 );
 
+gulp.task('copy:docs', () =>
+		gulp.src([
+			'./src/docs/**/*',
+		])
+		.pipe(gulp.dest('./built/client/assets/docs/'))
+);
+
 gulp.task('build:client', gulp.parallel(
 	'build:client:styles',
-	'copy:client'
+	'copy:client',
+	'copy:docs'
 ));
 
 gulp.task('build', gulp.parallel(

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();
 		},

src/client/pages/doc.vue

@@ -4,7 +4,7 @@
 	<portal to="title">{{ title }}</portal>
 	<main class="_card">
 		<div class="_content">
-			<div v-html="body"/>
+			<div v-html="body" class="qyqbqfal"></div>
 		</div>
 	</main>
 </div>
@@ -14,8 +14,11 @@
 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();
+const markdown = MarkdownIt({
+	html: true
+});
 
 export default Vue.extend({
 	metaInfo() {
@@ -24,12 +27,19 @@ export default Vue.extend({
 		};
 	},
 
-	components: {
+	props: {
+		doc: {
+			type: String,
+			required: true
+		}
 	},
 
 	watch: {
-		markdown() {
-			this.updateText();
+		doc: {
+			handler() {
+				this.fetchDoc();
+			},
+			immediate: true,
 		}
 	},
 
@@ -38,32 +48,23 @@ export default Vue.extend({
 			faFileAlt,
 			title: '',
 			body: '',
-			markdown: `# ぽぺ
-ぽぺ **ぽぺ** _ぽぺーーーーーっ！_ \`ぽぺ\`
-
-\`\`\`
-export default class Pope extends PopeBase
-{
-	public Pope() {
-		return 'ぽぺ';
-	}
-}
-\`\`\``,
+			markdown: '',
 		}
 	},
 
-	created() {
-		this.updateText()
-	},
-
 	methods: {
-		updateText() {
-			// markdown の全容をパースする
-			const parsed = markdown.parse(this.markdown, {});
-			if (parsed.length === 0)
-				return;
+		fetchDoc() {
+			fetch(`${url}/assets/docs/${this.doc}.${lang}.md`).then(res => res.text()).then(md => {
+				this.parse(md);
+			});
+		},
 
-			const buf = [ ...parsed ]
+		parse(md: string) {
+			// markdown の全容をパースする
+			const parsed = markdown.parse(md, {});
+			if (parsed.length === 0) return;
+
+			const buf = [...parsed];
 			const headingTokens = [];
 			let headingStart = 0;
 
@@ -81,7 +82,7 @@ export default class Pope extends PopeBase
 			}
 
 			// 抽出した見出しを除く部分をbodyとして抽出する
-			const bodyTokens = [ ...parsed ]
+			const bodyTokens = [...parsed];
 			bodyTokens.splice(headingStart, headingTokens.length + 2);
 
 			// 各々レンダーする
@@ -91,3 +92,43 @@ export default class Pope extends PopeBase
 	}
 });
 </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>

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') },

src/docs/about.en-US.md

@@ -1,3 +0,0 @@
-# About Misskey
-
-Misskey is a mini blog SNS.