ドキュメント画面

client/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@primevue/themes": "^4.2.5",
     "@tanstack/vue-query": "^5.62.16",
+    "@traptitech/traq-markdown-it": "^6.3.0",
     "openapi-fetch": "^0.13.4",
     "primevue": "^4.2.5",
     "uuidv7": "^1.0.2",

client/src/lib/renderMarkdown.ts

@@ -0,0 +1,18 @@
+import { traQMarkdownIt, type Store } from '@traptitech/traq-markdown-it'
+
+const store: Store = {
+  getUser: () => undefined,
+  getChannel: () => undefined,
+  getUserGroup: () => undefined,
+  getMe: () => undefined,
+  getStampByName: () => undefined,
+  getUserByName: () => undefined,
+  generateUserHref: () => '',
+  generateUserGroupHref: () => '',
+  generateChannelHref: () => '',
+}
+const it = new traQMarkdownIt(store, undefined, 'https://q.trap.jp')
+
+export const renderMarkdown = (markdown: string) => {
+  return it.render(markdown)
+}

client/src/lib/useServerData.ts

@@ -149,3 +149,9 @@ export const useEnqueueBenchmark = (options?: { redirect?: boolean }) => {
     },
   })
 }
+
+export const useDocs = () =>
+  useQuery({
+    queryKey: ['docs'],
+    queryFn: () => api.GET('/docs').then((r) => r.data),
+  })

client/src/mock/handlers.ts

@@ -180,6 +180,41 @@ const benchmarks: components['schemas']['BenchmarkAdminResult'][] = [
   },
 ]
 
+const docs = `# ドキュメント
+
+## はじめに
+
+これはドキュメントです。
+同じ段落
+
+違う段落
+
+ここに説明が入る
+
+## 使い方
+
+1. これを使ってください。
+2. あれを使ってください。
+3. これを使ってください。
+
+## 注意事項
+
+- \`inline code\`
+- **bold**
+- *italic*
+- [link](https://example.com)
+- ==emphasized==
+- ~deleted~
+
+> 引用
+
+## その他
+
+\`\`\`js
+const code = 'Hello, world!';
+\`\`\`
+`
+
 export const handlers = [
   http.get(`${apiBaseUrl}/oauth2/code`, () => {
     // TODO
@@ -390,7 +425,7 @@ export const handlers = [
   }),
   http.get(`${apiBaseUrl}/docs`, () => {
     const res: paths['/docs']['get']['responses']['200']['content']['application/json'] = {
-      body: 'This is a document.',
+      body: docs,
     }
 
     return HttpResponse.json(res)

client/src/views/DocsView.vue

@@ -1,7 +1,80 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useDocs } from '@/lib/useServerData'
+import { renderMarkdown } from '@/lib/renderMarkdown'
+import { computed } from 'vue'
+
+const { data: docs } = useDocs()
+const rendered = computed(() => renderMarkdown(docs.value?.body ?? ''))
+</script>
 
 <template>
-  <main>
-    <h1>Here is DocsView</h1>
+  <main class="docs-container">
+    <PageTitle icon="mdi:drive-document">ドキュメント</PageTitle>
+
+    <div v-html="rendered.renderedText" class="docs-markdown-root"></div>
   </main>
 </template>
+
+<style scoped>
+.docs-container {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.docs-markdown-root {
+  border: 1px solid var(--ct-slate-300);
+  border-radius: 4px;
+  padding: 1rem;
+}
+</style>
+
+<style>
+.docs-markdown-root h1 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+.docs-markdown-root h2 {
+  font-size: 1.2rem;
+  margin-block: 0.5rem;
+}
+.docs-markdown-root p + p {
+  margin-top: 1rem;
+}
+.docs-markdown-root a {
+  color: var(--color-primary);
+}
+.docs-markdown-root a:hover {
+  color: var(--color-primary-hover);
+}
+.docs-markdown-root ul,
+.docs-markdown-root ol {
+  margin-bottom: 1rem;
+}
+.docs-markdown-root code {
+  background-color: var(--ct-slate-200);
+  padding: 0.1rem 0.25rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.docs-markdown-root blockquote {
+  border-left: 4px solid var(--ct-slate-300);
+  padding: 0.25rem 0 0.25rem 0.5rem;
+  margin: 1rem 0;
+  color: var(--ct-slate-500);
+}
+
+.docs-markdown-root pre {
+  background-color: var(--ct-slate-700);
+  color: var(--ct-slate-100);
+  border-radius: 4px;
+  padding: 1rem;
+  overflow-x: auto;
+}
+.docs-markdown-root pre code {
+  background-color: inherit;
+  padding: 0;
+}
+</style>