From 698fbdf88bda34ee118e26462e10b8e0e970b494 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 27 Dec 2020 21:36:36 +0900 Subject: [PATCH] fix doc --- src/client/pages/doc.vue | 145 +++++++++++++++++++++++---------------- src/client/router.ts | 2 +- 2 files changed, 85 insertions(+), 62 deletions(-) diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue index 27978ca99c..402872f0ec 100644 --- a/src/client/pages/doc.vue +++ b/src/client/pages/doc.vue @@ -1,19 +1,15 @@ <template> -<div> - <main class="_section"> - <div class="_title"><Fa :icon="faFileAlt"/> {{ title }}</div> - <div class="_content"> - <div v-html="body" class="qyqbqfal"></div> - </div> - <div class="_footer"> - <MkLink :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${doc}.ja-JP.md`" class="at">{{ $ts.docSource }}</MkLink> - </div> - </main> +<div class="qyqbqfal" v-size="{ max: [500] }"> + <div class="title">{{ title }}</div> + <div class="body" v-html="body"></div> + <div class="footer"> + <MkLink :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${doc}.ja-JP.md`" class="at">{{ $ts.docSource }}</MkLink> + </div> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { computed, defineComponent } from 'vue'; import { faFileAlt } from '@fortawesome/free-solid-svg-icons' import MarkdownIt from 'markdown-it'; import MarkdownItAnchor from 'markdown-it-anchor'; @@ -42,14 +38,14 @@ export default defineComponent({ data() { return { - INFO: { + INFO: computed(() => this.title ? { title: this.title, - icon: faFileAlt - }, + icon: faFileAlt, + } : null), faFileAlt, - title: '', - body: '', - markdown: '', + title: null, + body: null, + markdown: null, } }, @@ -108,57 +104,84 @@ export default defineComponent({ <style lang="scss" scoped> .qyqbqfal { - > *:first-child { - margin-top: 0; + padding: 32px; + + &.max-width_500px { + padding: 16px; } - > *:last-child { - margin-bottom: 0; - } - - ::v-deep(a) { - color: var(--link); - } - - ::v-deep(blockquote) { - display: block; - margin: 8px; - padding: 6px 0 6px 12px; - color: var(--fg); - border-left: solid 3px var(--fg); - opacity: 0.7; - - p { - margin: 0; - } - } - - ::v-deep(h2) { - font-size: 1.25em; - padding: 0 0 0.5em 0; + > .title { + font-size: 1.5em; + font-weight: bold; + padding: 0 0 0.75em 0; + margin: 0 0 0.75em 0; border-bottom: solid 1px var(--divider); } - ::v-deep(table) { - width: 100%; - max-width: 100%; - overflow: auto; + > .body { + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + ::v-deep(a) { + color: var(--link); + } + + ::v-deep(blockquote) { + display: block; + margin: 8px; + padding: 6px 0 6px 12px; + color: var(--fg); + border-left: solid 3px var(--fg); + opacity: 0.7; + + p { + margin: 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); + } + + ::v-deep(code) { + font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace; + tab-size: 2; + } } - ::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); + > .footer { + padding: 1.5em 0 0 0; + margin: 1.5em 0 0 0; + border-top: solid 1px var(--divider); } } </style> diff --git a/src/client/router.ts b/src/client/router.ts index ad157d2a24..2826f4ac14 100644 --- a/src/client/router.ts +++ b/src/client/router.ts @@ -29,7 +29,7 @@ export const router = createRouter({ { path: '/featured', component: page('featured') }, { path: '/docs', component: page('docs') }, { path: '/theme-editor', component: page('theme-editor') }, - { path: '/docs/:doc', component: page('doc'), props: true }, + { path: '/docs/:doc', component: page('doc'), props: route => ({ doc: route.params.doc }) }, { path: '/explore', component: page('explore') }, { path: '/explore/tags/:tag', props: true, component: page('explore') }, { path: '/search', component: page('search') },