Sharkey/src/client/pages/doc.vue

208 lines
4 KiB
Vue
Raw Normal View History

2020-02-06 18:20:04 +02:00
<template>
2020-12-27 14:36:36 +02:00
<div class="qyqbqfal" v-size="{ max: [500] }">
<div class="title">{{ title }}</div>
<div class="body" v-html="body"></div>
<div class="footer">
2021-03-24 05:23:05 +02:00
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
2020-12-27 14:36:36 +02:00
</div>
2020-02-06 18:20:04 +02:00
</div>
</template>
<script lang="ts">
2020-12-27 14:36:36 +02:00
import { computed, defineComponent } from 'vue';
2020-12-28 13:28:42 +02:00
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
2020-02-06 18:20:04 +02:00
import MarkdownIt from 'markdown-it';
2020-03-28 04:32:19 +02:00
import MarkdownItAnchor from 'markdown-it-anchor';
2021-03-23 10:30:14 +02:00
import { url, lang } from '@client/config';
import MkLink from '@client/components/link.vue';
2021-04-10 06:54:12 +03:00
import * as symbols from '@client/symbols';
2020-02-06 18:20:04 +02:00
2020-02-06 19:38:02 +02:00
const markdown = MarkdownIt({
html: true
});
2020-02-06 18:20:04 +02:00
2020-03-28 04:32:19 +02:00
markdown.use(MarkdownItAnchor, {
slugify: (s) => encodeURIComponent(String(s).trim().replace(/\s+/g, '-'))
});
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 14:12:00 +03:00
export default defineComponent({
2020-02-14 17:27:53 +02:00
components: {
MkLink
},
2020-02-06 19:38:02 +02:00
props: {
doc: {
type: String,
required: true
}
2020-02-06 18:20:04 +02:00
},
data() {
return {
2021-04-10 06:54:12 +03:00
[symbols.PAGE_INFO]: computed(() => this.title ? {
2020-11-03 13:36:12 +02:00
title: this.title,
2020-12-28 13:28:42 +02:00
icon: faQuestionCircle,
2020-12-27 14:36:36 +02:00
} : null),
title: null,
body: null,
markdown: null,
2020-12-29 09:45:35 +02:00
lang,
2020-02-06 18:20:04 +02:00
}
},
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 14:12:00 +03:00
watch: {
doc: {
handler() {
this.fetchDoc();
},
immediate: true,
}
},
2020-02-06 18:20:04 +02:00
methods: {
2020-02-06 19:38:02 +02:00
fetchDoc() {
2021-03-13 04:43:07 +02:00
fetch(`${url}/doc-assets/${lang}/${this.doc}.md`).then(res => res.text()).then(md => {
2020-02-06 19:38:02 +02:00
this.parse(md);
});
},
parse(md: string) {
2020-03-27 13:24:32 +02:00
// 変数置換
md = md.replace(/\{_URL_\}/g, url);
2020-02-06 18:20:04 +02:00
// markdown の全容をパースする
2020-02-06 19:38:02 +02:00
const parsed = markdown.parse(md, {});
if (parsed.length === 0) return;
2020-02-06 18:20:04 +02:00
2020-02-06 19:38:02 +02:00
const buf = [...parsed];
2020-02-06 18:20:04 +02:00
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として抽出する
2020-02-06 19:38:02 +02:00
const bodyTokens = [...parsed];
2020-02-06 18:20:04 +02:00
bodyTokens.splice(headingStart, headingTokens.length + 2);
// 各々レンダーする
this.title = markdown.renderer.render(headingTokens, {}, {});
this.body = markdown.renderer.render(bodyTokens, {}, {});
}
}
});
</script>
2020-02-06 19:38:02 +02:00
<style lang="scss" scoped>
.qyqbqfal {
2020-12-27 14:36:36 +02:00
padding: 32px;
2020-12-28 13:28:42 +02:00
max-width: 800px;
margin: 0 auto;
2020-02-06 19:38:02 +02:00
2020-12-27 14:36:36 +02:00
&.max-width_500px {
padding: 16px;
2020-02-06 19:38:02 +02:00
}
2020-12-27 14:36:36 +02:00
> .title {
font-size: 1.5em;
font-weight: bold;
padding: 0 0 0.75em 0;
2020-12-28 13:28:42 +02:00
margin: 0 0 1em 0;
border-bottom: solid 2px var(--divider);
2020-03-28 04:24:37 +02:00
}
2020-12-27 14:36:36 +02:00
> .body {
> *:first-child {
margin-top: 0;
}
2020-03-28 04:36:44 +02:00
2020-12-27 14:36:36 +02:00
> *:last-child {
margin-bottom: 0;
2020-03-28 04:36:44 +02:00
}
2020-12-27 14:36:36 +02:00
::v-deep(a) {
color: var(--link);
}
2020-02-06 19:38:02 +02:00
2020-12-27 14:36:36 +02:00
::v-deep(blockquote) {
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
2020-02-06 19:38:02 +02:00
2020-12-27 14:36:36 +02:00
p {
margin: 0;
}
}
::v-deep(h2) {
font-size: 1.25em;
padding: 0 0 0.5em 0;
2020-12-28 13:28:42 +02:00
margin: 1.5em 0 1em 0;
border-bottom: solid 0.5px var(--divider);
2020-12-27 14:36:36 +02:00
}
::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 0.5px var(--divider);
2020-12-27 14:36:36 +02:00
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
::v-deep(code) {
2020-12-28 13:28:42 +02:00
display: inline-block;
2020-12-27 14:36:36 +02:00
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
tab-size: 2;
2020-12-28 13:28:42 +02:00
background: #272822;
color: #f8f8f2;
border-radius: 6px;
padding: 4px 6px;
}
::v-deep(pre) {
background: #272822;
color: #f8f8f2;
border-radius: 6px;
padding: 12px 16px;
> code {
padding: 0;
}
2020-12-27 14:36:36 +02:00
}
2020-02-06 19:38:02 +02:00
}
2020-12-27 14:36:36 +02:00
> .footer {
padding: 1.5em 0 0 0;
margin: 1.5em 0 0 0;
2020-12-28 13:28:42 +02:00
border-top: solid 2px var(--divider);
2020-02-06 19:38:02 +02:00
}
}
</style>