markdown

2 files changed, 94 insertions, 0 deletions

diff --git a/src/client/pages/document.vue b/src/client/pages/document.vue
new file mode 100644
index 0000000000..3ee729b8b5
--- /dev/null
+++ b/src/client/pages/document.vue
@@ -0,0 +1,93 @@
+<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 c1140355fd..27aa078223 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: '/document', component: page('document') },
 		{ path: '/explore', component: page('explore') },
 		{ path: '/explore/tags/:tag', props: true, component: page('explore') },
 		{ path: '/search', component: page('search') },