fix doc

2 files changed, 80 insertions, 57 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;
 
-	> *:last-child {
-		margin-bottom: 0;
+	&.max-width_500px {
+		padding: 16px;
 	}
 
-	::v-deep(a) {
-		color: var(--link);
+	> .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(blockquote) {
-		display: block;
-		margin: 8px;
-		padding: 6px 0 6px 12px;
-		color: var(--fg);
-		border-left: solid 3px var(--fg);
-		opacity: 0.7;
+	> .body {
+		> *:first-child {
+			margin-top: 0;
+		}
 
-		p {
-			margin: 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(a) {
+			color: var(--link);
+		}
 
-	::v-deep(table) {
-		width: 100%;
-		max-width: 100%;
-		overflow: auto;
-	}
+		::v-deep(blockquote) {
+			display: block;
+			margin: 8px;
+			padding: 6px 0 6px 12px;
+			color: var(--fg);
+			border-left: solid 3px var(--fg);
+			opacity: 0.7;
 
-	::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);
+			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.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') },