diff --git a/gulpfile.ts b/gulpfile.ts index fde66717a..989093cea 100644 --- a/gulpfile.ts +++ b/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( diff --git a/src/client/app.vue b/src/client/app.vue index ef2ec1e3f..61fd1ec38 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/document.vue b/src/client/pages/doc.vue similarity index 50% rename from src/client/pages/document.vue rename to src/client/pages/doc.vue index 3ee729b8b..3a92b7adf 100644 --- a/src/client/pages/document.vue +++ b/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> diff --git a/src/client/router.ts b/src/client/router.ts index 27aa07822..48eaa0f2e 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 bb1c51927..000000000 --- a/src/docs/about.en-US.md +++ /dev/null @@ -1,3 +0,0 @@ -# About Misskey - -Misskey is a mini blog SNS.