Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix doc

Browse source
This commit is contained in:
syuilo 2020-12-27 21:36:36 +09:00
parent 7b738deabf
commit 698fbdf88b
2 changed files with 85 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
src/client/pages/doc.vue
View file

@ -1,19 +1,15 @@
<template> <template>
<div> <div class="qyqbqfal" v-size="{ max: [500] }">
<main class="_section"> <div class="title">{{ title }}</div>
<div class="_title"><Fa :icon="faFileAlt"/> {{ title }}</div> <div class="body" v-html="body"></div>
<div class="_content"> <div class="footer">
<div v-html="body" class="qyqbqfal"></div> <MkLink :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${doc}.ja-JP.md`" class="at">{{ $ts.docSource }}</MkLink>
</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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import { faFileAlt } from '@fortawesome/free-solid-svg-icons' import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
import MarkdownItAnchor from 'markdown-it-anchor'; import MarkdownItAnchor from 'markdown-it-anchor';
@ -42,14 +38,14 @@ export default defineComponent({
data() { data() {
return { return {
INFO: { INFO: computed(() => this.title ? {
title: this.title, title: this.title,
icon: faFileAlt icon: faFileAlt,
}, } : null),
faFileAlt, faFileAlt,
title: '', title: null,
body: '', body: null,
markdown: '', markdown: null,
} }
}, },
@ -108,57 +104,84 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.qyqbqfal { .qyqbqfal {
> *:first-child { padding: 32px;
margin-top: 0;
&.max-width_500px {
padding: 16px;
} }
> *:last-child { > .title {
margin-bottom: 0; font-size: 1.5em;
} font-weight: bold;
padding: 0 0 0.75em 0;
::v-deep(a) { margin: 0 0 0.75em 0;
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); border-bottom: solid 1px var(--divider);
} }
::v-deep(table) { > .body {
width: 100%; > *:first-child {
max-width: 100%; margin-top: 0;
overflow: auto; }
> *: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) { > .footer {
display: inline-block; padding: 1.5em 0 0 0;
padding: 2px; margin: 1.5em 0 0 0;
border: 1px solid var(--divider); border-top: solid 1px 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> </style>

2
src/client/router.ts
View file

@ -29,7 +29,7 @@ export const router = createRouter({
{ path: '/featured', component: page('featured') }, { path: '/featured', component: page('featured') },
{ path: '/docs', component: page('docs') }, { path: '/docs', component: page('docs') },
{ path: '/theme-editor', component: page('theme-editor') }, { 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', component: page('explore') },
{ path: '/explore/tags/:tag', props: true, component: page('explore') }, { path: '/explore/tags/:tag', props: true, component: page('explore') },
{ path: '/search', component: page('search') }, { path: '/search', component: page('search') },