4 files changed, 42 insertions, 2 deletions
diff --git a/src/client/app.vue b/src/client/app.vue
index 61fd1ec382..35ae6afc91 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -137,7 +137,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faGamepad, faServer, faFileAlt, faSatellite, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faGamepad, faServer, faFileAlt, faSatellite, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
 import i18n from './i18n';
@@ -258,7 +258,7 @@ export default Vue.extend({
 		help() {
 			this.$router.push('/docs/keyboard-shortcut');
 		},
-		
+
 		back() {
 			if (this.canBack) window.history.back();
 		},
@@ -487,6 +487,11 @@ export default Vue.extend({
 					icon: faGamepad,
 				}, null] : []), {
 					type: 'link',
+					text: this.$t('help'),
+					to: '/docs',
+					icon: faQuestionCircle,
+				}, {
+					type: 'link',
 					text: this.$t('about'),
 					to: '/about',
 					icon: faInfoCircle,
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
new file mode 100644
index 0000000000..049ef2ec02
--- /dev/null
+++ b/src/client/pages/docs.vue
@@ -0,0 +1,29 @@
+<template>
+<div>
+	<portal to="icon"><fa :icon="faQuestionCircle"/></portal>
+	<portal to="title">{{ $t('help') }}</portal>
+	<main class="_card">
+		<div class="_content">
+		</div>
+	</main>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
+
+export default Vue.extend({
+	metaInfo() {
+		return {
+			title: this.$t('help') as string,
+		};
+	},
+
+	data() {
+		return {
+			faQuestionCircle
+		}
+	},
+});
+</script>
diff --git a/src/client/router.ts b/src/client/router.ts
index 48eaa0f2e3..f32673f432 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -21,6 +21,7 @@ export const router = new VueRouter({
 		{ path: '/announcements', component: page('announcements') },
 		{ path: '/about', component: page('about') },
 		{ path: '/featured', component: page('featured') },
+		{ path: '/docs', component: page('docs') },
 		{ path: '/docs/:doc', component: page('doc'), props: true },
 		{ path: '/explore', component: page('explore') },
 		{ path: '/explore/tags/:tag', props: true, component: page('explore') },
diff --git a/src/server/web/index.ts b/src/server/web/index.ts
index 07674bf099..ae31139014 100644
--- a/src/server/web/index.ts
+++ b/src/server/web/index.ts
@@ -96,6 +96,11 @@ router.get('/api.json', async ctx => {
 	ctx.body = genOpenapiSpec();
 });
 
+router.get('/docs.json', async ctx => {
+	const lang = ctx.query.lang;
+	// TODO: glob mds and extract title
+});
+
 const getFeed = async (acct: string) => {
 	const { username, host } = parseAcct(acct);
 	const user = await Users.findOne({