From 5166fc92b64af25946b9c5a55ee05cebca0d24fa Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 14 Dec 2017 16:24:41 +0900
Subject: :pizza:

---
 docs/api/endpoints/posts/create.yaml         |  53 ----------
 gulpfile.ts                                  |  20 +++-
 package.json                                 |   4 +
 src/docs/api/entities/post.pug               | 149 ---------------------------
 src/docs/api/entities/user.pug               | 122 ----------------------
 src/docs/api/getting-started.md              |  73 -------------
 src/docs/api/library.md                      |   8 --
 src/docs/index.md                            |   4 -
 src/docs/link-to-twitter.md                  |   9 --
 src/docs/tou.md                              |   4 -
 src/web/app/app.styl                         |  38 +------
 src/web/docs/api/endpoints/gulpfile.ts       |  75 ++++++++++++++
 src/web/docs/api/endpoints/posts/create.yaml |  54 ++++++++++
 src/web/docs/api/endpoints/style.styl        |  16 +++
 src/web/docs/api/endpoints/view.pug          |  60 +++++++++++
 src/web/docs/api/entities/post.pug           | 149 +++++++++++++++++++++++++++
 src/web/docs/api/entities/user.pug           | 122 ++++++++++++++++++++++
 src/web/docs/api/getting-started.md          |  73 +++++++++++++
 src/web/docs/api/library.md                  |   8 ++
 src/web/docs/index.md                        |   4 +
 src/web/docs/link-to-twitter.md              |   9 ++
 src/web/docs/style.styl                      |  69 +++++++++++++
 src/web/docs/tou.md                          |   4 +
 src/web/server.ts                            |   6 ++
 src/web/style.styl                           |  38 +++++++
 25 files changed, 711 insertions(+), 460 deletions(-)
 delete mode 100644 docs/api/endpoints/posts/create.yaml
 delete mode 100644 src/docs/api/entities/post.pug
 delete mode 100644 src/docs/api/entities/user.pug
 delete mode 100644 src/docs/api/getting-started.md
 delete mode 100644 src/docs/api/library.md
 delete mode 100644 src/docs/index.md
 delete mode 100644 src/docs/link-to-twitter.md
 delete mode 100644 src/docs/tou.md
 create mode 100644 src/web/docs/api/endpoints/gulpfile.ts
 create mode 100644 src/web/docs/api/endpoints/posts/create.yaml
 create mode 100644 src/web/docs/api/endpoints/style.styl
 create mode 100644 src/web/docs/api/endpoints/view.pug
 create mode 100644 src/web/docs/api/entities/post.pug
 create mode 100644 src/web/docs/api/entities/user.pug
 create mode 100644 src/web/docs/api/getting-started.md
 create mode 100644 src/web/docs/api/library.md
 create mode 100644 src/web/docs/index.md
 create mode 100644 src/web/docs/link-to-twitter.md
 create mode 100644 src/web/docs/style.styl
 create mode 100644 src/web/docs/tou.md
 create mode 100644 src/web/style.styl

diff --git a/docs/api/endpoints/posts/create.yaml b/docs/api/endpoints/posts/create.yaml
deleted file mode 100644
index db91775cb6..0000000000
--- a/docs/api/endpoints/posts/create.yaml
+++ /dev/null
@@ -1,53 +0,0 @@
-endpoint: "posts/create"
-
-desc:
-  ja: "投稿します。"
-  en: "Compose new post."
-
-params:
-  - name: "text"
-    type: "string"
-    required: true
-    desc:
-      ja: "投稿の本文"
-      en: "Text of a post"
-  - name: "media_ids"
-    type: "id(DriveFile)[]"
-    required: false
-    desc:
-      ja: "添付するメディア"
-      en: "Media you want to attach"
-  - name: "reply_id"
-    type: "id(Post)"
-    required: false
-    desc:
-      ja: "返信する投稿"
-      en: "A post you want to reply"
-  - name: "repost_id"
-    type: "id(Post)"
-    required: false
-    desc:
-      ja: "引用する投稿"
-      en: "A post you want to quote"
-  - name: "poll"
-    type: "object(poll)"
-    required: false
-    desc:
-      ja: "投票"
-      en: "A poll"
-
-paramDefs:
-  poll:
-    - name: "choices"
-      type: "string[]"
-      required: true
-      desc:
-        ja: "投票の選択肢"
-        en: "Choices of a poll"
-
-res:
-  - name: "created_post"
-    type: "entity(Post)"
-    desc:
-      ja: "作成した投稿"
-      en: "A post that created"
diff --git a/gulpfile.ts b/gulpfile.ts
index ee11a02dcb..0bc18dd7c4 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -13,6 +13,7 @@ import * as es from 'event-stream';
 import cssnano = require('gulp-cssnano');
 import * as uglifyComposer from 'gulp-uglify/composer';
 import pug = require('gulp-pug');
+import stylus = require('gulp-stylus');
 import * as rimraf from 'rimraf';
 import chalk from 'chalk';
 import imagemin = require('gulp-imagemin');
@@ -47,15 +48,32 @@ if (isDebug) {
 
 const constants = require('./src/const.json');
 
+require('./src/web/docs/api/endpoints/gulpfile.ts');
+
 gulp.task('build', [
 	'build:js',
 	'build:ts',
 	'build:copy',
-	'build:client'
+	'build:client',
+	'build:doc'
 ]);
 
 gulp.task('rebuild', ['clean', 'build']);
 
+gulp.task('build:doc', [
+	'doc:endpoints',
+	'doc:styles'
+]);
+
+gulp.task('doc:styles', () =>
+	gulp.src('./src/web/docs/**/*.styl')
+		.pipe(stylus())
+		.pipe(isProduction
+			? (cssnano as any)()
+			: gutil.noop())
+		.pipe(gulp.dest('./built/web/assets/docs/'))
+);
+
 gulp.task('build:js', () =>
 	gulp.src(['./src/**/*.js', '!./src/web/**/*.js'])
 		.pipe(gulp.dest('./built/'))
diff --git a/package.json b/package.json
index c20fd0c52a..69090349e1 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
 		"@types/is-root": "1.0.0",
 		"@types/is-url": "1.2.28",
 		"@types/js-yaml": "3.10.1",
+		"@types/mkdirp": "^0.5.2",
 		"@types/mocha": "2.2.44",
 		"@types/mongodb": "2.2.17",
 		"@types/monk": "1.0.6",
@@ -62,6 +63,7 @@
 		"@types/node": "8.5.1",
 		"@types/page": "1.5.32",
 		"@types/proxy-addr": "2.0.0",
+		"@types/pug": "^2.0.4",
 		"@types/qrcode": "0.8.0",
 		"@types/ratelimiter": "2.1.28",
 		"@types/redis": "2.8.3",
@@ -112,6 +114,7 @@
 		"gulp-pug": "3.3.0",
 		"gulp-rename": "1.2.2",
 		"gulp-replace": "0.6.1",
+		"gulp-stylus": "^2.6.0",
 		"gulp-tslint": "8.1.2",
 		"gulp-typescript": "3.2.3",
 		"gulp-uglify": "3.0.0",
@@ -122,6 +125,7 @@
 		"is-url": "1.2.2",
 		"js-yaml": "3.10.0",
 		"mecab-async": "0.1.2",
+		"mkdirp": "^0.5.1",
 		"mocha": "4.0.1",
 		"moji": "0.5.1",
 		"mongodb": "2.2.33",
diff --git a/src/docs/api/entities/post.pug b/src/docs/api/entities/post.pug
deleted file mode 100644
index 954f172717..0000000000
--- a/src/docs/api/entities/post.pug
+++ /dev/null
@@ -1,149 +0,0 @@
-extend ../../BASE
-
-block title
-	| Entity: Post
-
-block content
-	h1 Post
-	p 投稿を表します。
-
-	section
-		h2 Properties
-		table.entity
-			thead: tr
-				td Name
-				td Type
-				td Description
-			tbody
-				tr.nullable.optional
-					td app
-					td: a(href='./app', target='_blank') App
-					td 投稿したアプリ
-				tr.nullable
-					td app_id
-					td ID
-					td 投稿したアプリのID
-				tr
-					td created_at
-					td Date
-					td 投稿日時
-				tr
-					td id
-					td ID
-					td 投稿ID
-				tr.optional
-					td is_liked
-					td Boolean
-					td いいね したかどうか
-				tr
-					td likes_count
-					td Number
-					td いいね数
-				tr.nullable.optional
-					td media_ids
-					td ID[]
-					td 添付されたメディアのIDの配列
-				tr.nullable.optional
-					td media
-					td: a(href='./drive-file', target='_blank') DriveFile[]
-					td 添付されたメディアの配列
-				tr
-					td replies_count
-					td Number
-					td 返信数
-				tr.optional
-					td reply
-					td: a(href='./post', target='_blank') Post
-					td 返信先の投稿
-				tr.nullable
-					td reply_id
-					td ID
-					td 返信先の投稿のID
-				tr.optional
-					td repost
-					td: a(href='./post', target='_blank') Post
-					td Repostした投稿
-				tr
-					td repost_count
-					td Number
-					td Repostされた数
-				tr.nullable
-					td repost_id
-					td ID
-					td Repostした投稿のID
-				tr.nullable
-					td text
-					td String
-					td 本文
-				tr.optional
-					td user
-					td: a(href='./user', target='_blank') User
-					td 投稿者
-				tr
-					td user_id
-					td ID
-					td 投稿者のID
-
-	section
-		h2 Example
-		pre: code.
-			{
-				"created_at": "2016-12-10T00:28:50.114Z",
-				"media_ids": null,
-				"reply_id": "584a16b15860fc52320137e3",
-				"repost_id": null,
-				"text": "小日向美穂だぞ！",
-				"user_id": "5848bf7764e572683f4402f8",
-				"app_id": null,
-				"likes_count": 1,
-				"replies_count": 1,
-				"id": "584b4c42d8e5186f8f755d0c",
-				"user": {
-					"birthday": null,
-					"created_at": "2016-12-08T02:03:35.332Z",
-					"bio": "女が嫌いです、女性は好きです",
-					"followers_count": 11,
-					"following_count": 11,
-					"links": null,
-					"location": "",
-					"name": "女が嫌い",
-					"posts_count": 26,
-					"likes_count": 2,
-					"liked_count": 20,
-					"username": "onnnagakirai",
-					"id": "5848bf7764e572683f4402f8",
-					"avatar_url": "https://file.himasaku.net/5848c0ec64e572683f4402fc",
-					"banner_url": "https://file.himasaku.net/5848c12864e572683f4402fd",
-					"is_following": true,
-					"is_followed": true
-				},
-				"reply": {
-					"created_at": "2016-12-09T02:28:01.563Z",
-					"media_ids": null,
-					"reply_id": "5849d35e547e4249be329884",
-					"repost_id": null,
-					"text": "アイコン小日向美穂？",
-					"user_id": "57d01a501fdf2d07be417afe",
-					"app_id": null,
-					"replies_count": 1,
-					"id": "584a16b15860fc52320137e3",
-					"user": {
-						"birthday": null,
-						"created_at": "2016-09-07T13:46:56.605Z",
-						"bio": "どうすれば君だけのために生きていけるの",
-						"followers_count": 51,
-						"following_count": 97,
-						"links": null,
-						"location": "川崎",
-						"name": "きな子",
-						"posts_count": 4813,
-						"username": "syuilo",
-						"likes_count": 3141,
-						"liked_count": 750,
-						"id": "57d01a501fdf2d07be417afe",
-						"avatar_url": "https://file.himasaku.net/583ddc6e64df272771f74c1a",
-						"banner_url": "https://file.himasaku.net/584bfc82d8e5186f8f755ec5"
-					}
-				},
-				"is_liked": true
-			}
diff --git a/src/docs/api/entities/user.pug b/src/docs/api/entities/user.pug
deleted file mode 100644
index a37886bb19..0000000000
--- a/src/docs/api/entities/user.pug
+++ /dev/null
@@ -1,122 +0,0 @@
-extend ../../BASE
-
-block title
-	| Entity: User
-
-block content
-	h1 User
-	p ユーザーを表します。
-
-	section
-		h2 Properties
-		table.entity
-			thead: tr
-				td Name
-				td Type
-				td Description
-			tbody
-				tr.nullable.optional
-					td avatar_id
-					td ID
-					td アバターに設定しているドライブのファイルのID
-				tr.nullable
-					td avatar_url
-					td String
-					td アバターURL
-				tr.nullable.optional
-					td banner_id
-					td ID
-					td バナーに設定しているドライブのファイルのID
-				tr.nullable
-					td banner_url
-					td String
-					td バナーURL
-				tr.nullable
-					td bio
-					td String
-					td プロフィール
-				tr.nullable
-					td birthday
-					td String
-					td 誕生日(YYYY-MM-DD)
-				tr
-					td created_at
-					td Date
-					td アカウント作成日時
-				tr.optional
-					td drive_capacity
-					td Number
-					td ドライブの最大容量(byte単位)
-				tr
-					td followers_count
-					td Number
-					td フォロワー数
-				tr
-					td following_count
-					td Number
-					td フォロー数
-				tr
-					td id
-					td ID
-					td ユーザーID
-				tr.optional
-					td is_bot
-					td Boolean
-					td botかどうか
-				tr.optional
-					td is_followed
-					td Boolean
-					td フォローされているか
-				tr.optional
-					td is_following
-					td Boolean
-					td フォローしているか
-				tr
-					td liked_count
-					td Number
-					td 投稿にいいねされた数
-				tr
-					td likes_count
-					td Number
-					td 投稿にいいねした数
-				tr.nullable
-					td location
-					td String
-					td 住処
-				tr
-					td name
-					td String
-					td ニックネーム
-				tr
-					td posts_count
-					td Number
-					td 投稿数
-				tr
-					td username
-					td String
-					td ユーザー名
-
-	section
-		h2 Example
-		pre: code.
-			{
-				"avatar_id": "583ddc6e64df272771f74c1a",
-				"avatar_url": "https://file.himasaku.net/583ddc6e64df272771f74c1a",
-				"banner_id": "584bfc82d8e5186f8f755ec5",
-				"banner_url": "https://file.himasaku.net/584bfc82d8e5186f8f755ec5",
-				"bio": "どうすれば君だけのために生きていけるの",
-				"birthday": "1997-12-06",
-				"created_at": "2016-09-07T13:46:56.605Z",
-				"drive_capacity": 1073741824,
-				"email": null,
-				"followers_count": 51,
-				"following_count": 97,
-				"id": "57d01a501fdf2d07be417afe",
-				"liked_count": 750,
-				"likes_count": 3130,
-				"links": null,
-				"location": "川崎",
-				"name": "きな子",
-				"posts_count": 4811,
-				"username": "syuilo"
-			}
diff --git a/src/docs/api/getting-started.md b/src/docs/api/getting-started.md
deleted file mode 100644
index e13659914e..0000000000
--- a/src/docs/api/getting-started.md
+++ /dev/null
@@ -1,73 +0,0 @@
-Getting Started
-================================================================
-MisskeyはREST APIやStreaming APIを提供しており、プログラムからMisskeyの全ての機能を利用することができます。
-それらのAPIを利用するには、まずAPIを利用したいアカウントのアクセストークンを取得する必要があります:
-
-自分のアクセストークンを取得したい場合
-----------------------------------------------------------------
-自分自身のアクセストークンは、設定 > API で確認できます。
-<p class="tip">
-	アカウントを乗っ取られてしまう可能性があるため、トークンは第三者に教えないでください(アプリなどにも入力しないでください)。<br>
-	万が一トークンが漏れたりその可能性がある場合は トークンを再生成できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
-</p>
-
-他人のアクセストークンを取得する
-----------------------------------------------------------------
-不特定多数のユーザーからAPIを利用したい場合、アプリケーションを作成します。
-アプリケーションを作成すると、ユーザーが連携を許可した時に、そのユーザーのアクセストークンを取得することができます。
-
-アプリケーションを作成してアクセストークンを取得するまでの流れを説明します。
-
-### アプリケーションを作成する
-まずはあなたのアプリケーションを作成しましょう。
-				| <a href=#{dev_url} target="_blank">デベロッパーセンター</a>にアクセスし、アプリ > アプリ作成 に進みます。
-				br
-				| 次に、フォームに必要事項を記入します:
-			dl
-				dt アプリケーション名
-				dd あなたのアプリケーションの名前。
-				dt Named ID
-				dd アプリを識別する/a-z-/で構成されたID。
-				dt アプリの概要
-				dd アプリの簡単な説明を入力してください。
-				dt コールバックURL
-				dd あなたのアプリケーションがWebアプリケーションである場合、ユーザーが後述するフォームで認証を終えた際にリダイレクトするURLを設定できます。
-				dt 権限
-				dd アプリケーションが要求する権限。ここで要求した機能だけがAPIからアクセスできます。
-			p.tip
-				| 権限はアプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーはすべて無効になります。
-			p
-				| アプリケーションを作成すると、作ったアプリの管理ページに進みます。
-				br
-				| アプリのシークレットキー(App Secret)が表示されていますので、メモしておいてください。
-			p.tip
-				| アプリに成りすまされる可能性があるため、極力このシークレットキーは公開しないようにしてください。
-
-		section
-			h3 ユーザーに認証させる
-			p あなたのアプリを使ってもらうには、ユーザーにアカウントへアクセスすることを許可してもらい、Misskeyにそのユーザーのアクセストークンを発行してもらう必要があります。
-			p 認証セッションを開始するには、<code>#{api_url}/auth/session/generate</code>へパラメータに<code>app_secret</code>としてApp Secretを含めたリクエストを送信します。
-			p
-				| そうすると、レスポンスとして認証セッションのトークンや認証フォームのURLが取得できます。
-				br
-				| この認証フォームのURLをブラウザで表示し、ユーザーにフォームを表示してください。
-			section
-				h4 あなたのアプリがコールバックURLを設定している場合
-				p ユーザーがアプリの連携を許可すると設定しているコールバックURLに<code>token</code>という名前でセッションのトークンが含まれたクエリを付けてリダイレクトします。
-			section
-				h4 あなたのアプリがコールバックURLを設定していない場合
-				p ユーザーがアプリの連携を許可したことを(何らかの方法で(たとえばボタンを押させるなど))確認出来るようにしてください。
-			p
-				| 次に、<code>#{api_url}/auth/session/userkey</code>へ<code>app_secret</code>としてApp Secretを、<code>token</code>としてセッションのトークンをパラメータとして付与したリクエストを送信してください。
-				br
-				| 上手くいけば、認証したユーザーのアクセストークンがレスポンスとして取得できます。おめでとうございます！
-			p
-				| 以降アクセストークンは、<strong>ユーザーのアクセストークン+アプリのシークレットキーをsha256したもの</strong>として扱います。
-
-	p アクセストークンを取得できたら、あとは簡単です。REST APIなら、リクエストにアクセストークンを<code>i</code>としてパラメータに含めるだけです。
-
-	section
-		h2 リクエスト形式
-		p <code>application/json</code>を受け付けます。
-		p.tip
-			| 現在<code>application/x-www-form-urlencoded</code>も受け付けていますが、将来的にこのサポートはされなくなる予定です。
diff --git a/src/docs/api/library.md b/src/docs/api/library.md
deleted file mode 100644
index 71ddbe345d..0000000000
--- a/src/docs/api/library.md
+++ /dev/null
@@ -1,8 +0,0 @@
-ライブラリ
-================================================================
-
-Misskey APIを便利に利用するためのライブラリ一覧です。
-
-.NET
-----------------------------------------------------------------
-* **[Misq (公式)](https://github.com/syuilo/Misq)**
diff --git a/src/docs/index.md b/src/docs/index.md
deleted file mode 100644
index 0846cf27e8..0000000000
--- a/src/docs/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
-Misskeyについて
-================================================================
-
-誰か書いて
diff --git a/src/docs/link-to-twitter.md b/src/docs/link-to-twitter.md
deleted file mode 100644
index 77fb744576..0000000000
--- a/src/docs/link-to-twitter.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Twitterと連携する
-================================================================
-
-設定 -> Twitter から、お使いのMisskeyアカウントとお使いのTwitterアカウントを関連付けることができます。
-アカウントの関連付けを行うと、プロフィールにTwitterアカウントへのリンクが表示されたりなどします。
-
-MisskeyがあなたのTwitterアカウントでツイートしたり誰かをフォローしたりといったことは、
-一切行いませんのでご安心ください。(Misskeyはそのような権限を取得しないので、行おうと思っても行えません)
-Twitterのアプリケーション認証フォームでこの権限の詳細を確認することができます。また、いつでも連携を取り消すことができます。
diff --git a/src/docs/tou.md b/src/docs/tou.md
deleted file mode 100644
index fbf87867b4..0000000000
--- a/src/docs/tou.md
+++ /dev/null
@@ -1,4 +0,0 @@
-利用規約
-================================================================
-
-公序良俗に反する行為はおやめください。
diff --git a/src/web/app/app.styl b/src/web/app/app.styl
index de66df74d4..22043b8833 100644
--- a/src/web/app/app.styl
+++ b/src/web/app/app.styl
@@ -1,29 +1,4 @@
-json('../../const.json')
-
-@charset 'utf-8'
-
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
-
-/*
-	::selection
-		background $theme-color
-		color #fff
-*/
-
-*
-	position relative
-	box-sizing border-box
-	background-clip padding-box !important
-	tap-highlight-color rgba($theme-color, 0.7)
-	-webkit-tap-highlight-color rgba($theme-color, 0.7)
-
-html, body
-	margin 0
-	padding 0
-	scroll-behavior smooth
-	text-size-adjust 100%
-	font-family sans-serif
+@import "../style"
 
 html
 	&.progress
@@ -96,17 +71,6 @@ body
 		100%
 			transform rotate(360deg)
 
-a
-	text-decoration none
-	color $theme-color
-	cursor pointer
-
-	&:hover
-		text-decoration underline
-
-	*
-		cursor pointer
-
 code
 	font-family Consolas, 'Courier New', Courier, Monaco, monospace
 
diff --git a/src/web/docs/api/endpoints/gulpfile.ts b/src/web/docs/api/endpoints/gulpfile.ts
new file mode 100644
index 0000000000..a2c3944709
--- /dev/null
+++ b/src/web/docs/api/endpoints/gulpfile.ts
@@ -0,0 +1,75 @@
+/**
+ * Gulp tasks
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as glob from 'glob';
+import * as gulp from 'gulp';
+import * as pug from 'pug';
+import * as yaml from 'js-yaml';
+import * as mkdirp from 'mkdirp';
+
+import config from './../../../../conf';
+
+const parseParam = param => {
+	const id = param.type.match(/^id\((.+?)\)/);
+	const object = param.type.match(/^object\((.+?)\)/);
+	const isArray = /\[\]$/.test(param.type);
+	if (id) {
+		param.kind = 'id';
+		param.type = 'string';
+		param.entity = id[1];
+		if (isArray) {
+			param.type += '[]';
+		}
+	}
+	if (object) {
+		param.kind = 'object';
+		param.type = 'object';
+		param.def = object[1];
+		if (isArray) {
+			param.type += '[]';
+		}
+	}
+
+	return param;
+};
+
+gulp.task('doc:endpoints', () => {
+	glob('./src/web/docs/api/endpoints/**/*.yaml', (globErr, files) => {
+		if (globErr) {
+			console.error(globErr);
+			return;
+		}
+		//console.log(files);
+		files.forEach(file => {
+			const ep = yaml.safeLoad(fs.readFileSync(file, 'utf-8'));
+			const vars = {
+				endpoint: ep.endpoint,
+				url: `${config.api_url}/${ep.endpoint}`,
+				desc: ep.desc,
+				params: ep.params.map(p => parseParam(p)),
+				paramDefs: Object.keys(ep.paramDefs).map(key => ({
+					name: key,
+					params: ep.paramDefs[key].map(p => parseParam(p))
+				})),
+				res: ep.res.map(p => parseParam(p))
+			};
+			pug.renderFile('./src/web/docs/api/endpoints/view.pug', vars, (renderErr, html) => {
+				if (renderErr) {
+					console.error(renderErr);
+					return;
+				}
+				const htmlPath = `./built/web/docs/api/endpoints/${ep.endpoint}.html`;
+				mkdirp(path.dirname(htmlPath), (mkdirErr) => {
+					if (mkdirErr) {
+						console.error(mkdirErr);
+						return;
+					}
+					fs.writeFileSync(htmlPath, html, 'utf-8');
+				});
+			});
+		});
+	});
+});
diff --git a/src/web/docs/api/endpoints/posts/create.yaml b/src/web/docs/api/endpoints/posts/create.yaml
new file mode 100644
index 0000000000..b6613038a7
--- /dev/null
+++ b/src/web/docs/api/endpoints/posts/create.yaml
@@ -0,0 +1,54 @@
+endpoint: "posts/create"
+
+desc:
+  ja: "投稿します。"
+  en: "Compose new post."
+
+params:
+  - name: "text"
+    type: "string"
+    optional: false
+    desc:
+      ja: "投稿の本文"
+      en: "Text of a post"
+  - name: "media_ids"
+    type: "id(DriveFile)[]"
+    optional: true
+    desc:
+      ja: "添付するメディア"
+      en: "Media you want to attach"
+  - name: "reply_id"
+    type: "id(Post)"
+    optional: true
+    desc:
+      ja: "返信する投稿"
+      en: "A post you want to reply"
+  - name: "repost_id"
+    type: "id(Post)"
+    optional: true
+    desc:
+      ja: "引用する投稿"
+      en: "A post you want to quote"
+  - name: "poll"
+    type: "object(poll)"
+    optional: true
+    desc:
+      ja: "投票"
+      en: "A poll"
+
+paramDefs:
+  poll:
+    - name: "choices"
+      type: "string[]"
+      optional: false
+      desc:
+        ja: "投票の選択肢"
+        en: "Choices of a poll"
+
+res:
+  - name: "created_post"
+    type: "entity(Post)"
+    optional: false
+    desc:
+      ja: "作成した投稿"
+      en: "A post that created"
diff --git a/src/web/docs/api/endpoints/style.styl b/src/web/docs/api/endpoints/style.styl
new file mode 100644
index 0000000000..12c06fe3af
--- /dev/null
+++ b/src/web/docs/api/endpoints/style.styl
@@ -0,0 +1,16 @@
+@import "../../style"
+
+#url
+	padding 8px 12px
+	font-family Consolas, 'Courier New', Courier, Monaco, monospace
+	color #fff
+	background #222e40
+	border-radius 4px
+
+table
+	.name
+		font-weight bold
+
+	.type
+		font-family Consolas, 'Courier New', Courier, Monaco, monospace
+
diff --git a/src/web/docs/api/endpoints/view.pug b/src/web/docs/api/endpoints/view.pug
new file mode 100644
index 0000000000..d9de9cb74a
--- /dev/null
+++ b/src/web/docs/api/endpoints/view.pug
@@ -0,0 +1,60 @@
+doctype html
+
+mixin i18n(xs)
+	each text, lang in xs
+		span(class=`i18n ${lang}`)= text
+
+mixin table(params)
+	table
+		thead: tr
+			th Name
+			th Type
+			th Optional
+			th Description
+		tbody
+			each param in params
+				tr
+					td.name= param.name
+					td.type
+						if param.kind == 'id'
+							| #{param.type} (ID of
+							= ' '
+							a(href=`/docs/api/entities/${param.entity}`)= param.entity
+							| )
+						else if param.kind == 'object'
+							| #{param.type} (
+							a(href=`#${param.def}`)= param.def
+							| )
+						else
+							= param.type
+					td.optional= param.optional.toString()
+					td.desc: +i18n(param.desc)
+
+html
+	head
+		meta(charset="UTF-8")
+		title #{endpoint} | Misskey API
+		link(rel="stylesheet" href="/assets/docs/api/endpoints/style.css")
+
+	body
+		main
+			h1= endpoint
+
+			p#url= url
+
+			p#desc: +i18n(desc)
+
+			section
+				h2 Params
+				+table(params)
+
+				if paramDefs
+					each paramDef in paramDefs
+						section(id= paramDef.name)
+							h3= paramDef.name
+							+table(paramDef.params)
+
+			section
+				h2 Response
+				+table(res)
+
diff --git a/src/web/docs/api/entities/post.pug b/src/web/docs/api/entities/post.pug
new file mode 100644
index 0000000000..954f172717
--- /dev/null
+++ b/src/web/docs/api/entities/post.pug
@@ -0,0 +1,149 @@
+extend ../../BASE
+
+block title
+	| Entity: Post
+
+block content
+	h1 Post
+	p 投稿を表します。
+
+	section
+		h2 Properties
+		table.entity
+			thead: tr
+				td Name
+				td Type
+				td Description
+			tbody
+				tr.nullable.optional
+					td app
+					td: a(href='./app', target='_blank') App
+					td 投稿したアプリ
+				tr.nullable
+					td app_id
+					td ID
+					td 投稿したアプリのID
+				tr
+					td created_at
+					td Date
+					td 投稿日時
+				tr
+					td id
+					td ID
+					td 投稿ID
+				tr.optional
+					td is_liked
+					td Boolean
+					td いいね したかどうか
+				tr
+					td likes_count
+					td Number
+					td いいね数
+				tr.nullable.optional
+					td media_ids
+					td ID[]
+					td 添付されたメディアのIDの配列
+				tr.nullable.optional
+					td media
+					td: a(href='./drive-file', target='_blank') DriveFile[]
+					td 添付されたメディアの配列
+				tr
+					td replies_count
+					td Number
+					td 返信数
+				tr.optional
+					td reply
+					td: a(href='./post', target='_blank') Post
+					td 返信先の投稿
+				tr.nullable
+					td reply_id
+					td ID
+					td 返信先の投稿のID
+				tr.optional
+					td repost
+					td: a(href='./post', target='_blank') Post
+					td Repostした投稿
+				tr
+					td repost_count
+					td Number
+					td Repostされた数
+				tr.nullable
+					td repost_id
+					td ID
+					td Repostした投稿のID
+				tr.nullable
+					td text
+					td String
+					td 本文
+				tr.optional
+					td user
+					td: a(href='./user', target='_blank') User
+					td 投稿者
+				tr
+					td user_id
+					td ID
+					td 投稿者のID
+
+	section
+		h2 Example
+		pre: code.
+			{
+				"created_at": "2016-12-10T00:28:50.114Z",
+				"media_ids": null,
+				"reply_id": "584a16b15860fc52320137e3",
+				"repost_id": null,
+				"text": "小日向美穂だぞ！",
+				"user_id": "5848bf7764e572683f4402f8",
+				"app_id": null,
+				"likes_count": 1,
+				"replies_count": 1,
+				"id": "584b4c42d8e5186f8f755d0c",
+				"user": {
+					"birthday": null,
+					"created_at": "2016-12-08T02:03:35.332Z",
+					"bio": "女が嫌いです、女性は好きです",
+					"followers_count": 11,
+					"following_count": 11,
+					"links": null,
+					"location": "",
+					"name": "女が嫌い",
+					"posts_count": 26,
+					"likes_count": 2,
+					"liked_count": 20,
+					"username": "onnnagakirai",
+					"id": "5848bf7764e572683f4402f8",
+					"avatar_url": "https://file.himasaku.net/5848c0ec64e572683f4402fc",
+					"banner_url": "https://file.himasaku.net/5848c12864e572683f4402fd",
+					"is_following": true,
+					"is_followed": true
+				},
+				"reply": {
+					"created_at": "2016-12-09T02:28:01.563Z",
+					"media_ids": null,
+					"reply_id": "5849d35e547e4249be329884",
+					"repost_id": null,
+					"text": "アイコン小日向美穂？",
+					"user_id": "57d01a501fdf2d07be417afe",
+					"app_id": null,
+					"replies_count": 1,
+					"id": "584a16b15860fc52320137e3",
+					"user": {
+						"birthday": null,
+						"created_at": "2016-09-07T13:46:56.605Z",
+						"bio": "どうすれば君だけのために生きていけるの",
+						"followers_count": 51,
+						"following_count": 97,
+						"links": null,
+						"location": "川崎",
+						"name": "きな子",
+						"posts_count": 4813,
+						"username": "syuilo",
+						"likes_count": 3141,
+						"liked_count": 750,
+						"id": "57d01a501fdf2d07be417afe",
+						"avatar_url": "https://file.himasaku.net/583ddc6e64df272771f74c1a",
+						"banner_url": "https://file.himasaku.net/584bfc82d8e5186f8f755ec5"
+					}
+				},
+				"is_liked": true
+			}
diff --git a/src/web/docs/api/entities/user.pug b/src/web/docs/api/entities/user.pug
new file mode 100644
index 0000000000..a37886bb19
--- /dev/null
+++ b/src/web/docs/api/entities/user.pug
@@ -0,0 +1,122 @@
+extend ../../BASE
+
+block title
+	| Entity: User
+
+block content
+	h1 User
+	p ユーザーを表します。
+
+	section
+		h2 Properties
+		table.entity
+			thead: tr
+				td Name
+				td Type
+				td Description
+			tbody
+				tr.nullable.optional
+					td avatar_id
+					td ID
+					td アバターに設定しているドライブのファイルのID
+				tr.nullable
+					td avatar_url
+					td String
+					td アバターURL
+				tr.nullable.optional
+					td banner_id
+					td ID
+					td バナーに設定しているドライブのファイルのID
+				tr.nullable
+					td banner_url
+					td String
+					td バナーURL
+				tr.nullable
+					td bio
+					td String
+					td プロフィール
+				tr.nullable
+					td birthday
+					td String
+					td 誕生日(YYYY-MM-DD)
+				tr
+					td created_at
+					td Date
+					td アカウント作成日時
+				tr.optional
+					td drive_capacity
+					td Number
+					td ドライブの最大容量(byte単位)
+				tr
+					td followers_count
+					td Number
+					td フォロワー数
+				tr
+					td following_count
+					td Number
+					td フォロー数
+				tr
+					td id
+					td ID
+					td ユーザーID
+				tr.optional
+					td is_bot
+					td Boolean
+					td botかどうか
+				tr.optional
+					td is_followed
+					td Boolean
+					td フォローされているか
+				tr.optional
+					td is_following
+					td Boolean
+					td フォローしているか
+				tr
+					td liked_count
+					td Number
+					td 投稿にいいねされた数
+				tr
+					td likes_count
+					td Number
+					td 投稿にいいねした数
+				tr.nullable
+					td location
+					td String
+					td 住処
+				tr
+					td name
+					td String
+					td ニックネーム
+				tr
+					td posts_count
+					td Number
+					td 投稿数
+				tr
+					td username
+					td String
+					td ユーザー名
+
+	section
+		h2 Example
+		pre: code.
+			{
+				"avatar_id": "583ddc6e64df272771f74c1a",
+				"avatar_url": "https://file.himasaku.net/583ddc6e64df272771f74c1a",
+				"banner_id": "584bfc82d8e5186f8f755ec5",
+				"banner_url": "https://file.himasaku.net/584bfc82d8e5186f8f755ec5",
+				"bio": "どうすれば君だけのために生きていけるの",
+				"birthday": "1997-12-06",
+				"created_at": "2016-09-07T13:46:56.605Z",
+				"drive_capacity": 1073741824,
+				"email": null,
+				"followers_count": 51,
+				"following_count": 97,
+				"id": "57d01a501fdf2d07be417afe",
+				"liked_count": 750,
+				"likes_count": 3130,
+				"links": null,
+				"location": "川崎",
+				"name": "きな子",
+				"posts_count": 4811,
+				"username": "syuilo"
+			}
diff --git a/src/web/docs/api/getting-started.md b/src/web/docs/api/getting-started.md
new file mode 100644
index 0000000000..e13659914e
--- /dev/null
+++ b/src/web/docs/api/getting-started.md
@@ -0,0 +1,73 @@
+Getting Started
+================================================================
+MisskeyはREST APIやStreaming APIを提供しており、プログラムからMisskeyの全ての機能を利用することができます。
+それらのAPIを利用するには、まずAPIを利用したいアカウントのアクセストークンを取得する必要があります:
+
+自分のアクセストークンを取得したい場合
+----------------------------------------------------------------
+自分自身のアクセストークンは、設定 > API で確認できます。
+<p class="tip">
+	アカウントを乗っ取られてしまう可能性があるため、トークンは第三者に教えないでください(アプリなどにも入力しないでください)。<br>
+	万が一トークンが漏れたりその可能性がある場合は トークンを再生成できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
+</p>
+
+他人のアクセストークンを取得する
+----------------------------------------------------------------
+不特定多数のユーザーからAPIを利用したい場合、アプリケーションを作成します。
+アプリケーションを作成すると、ユーザーが連携を許可した時に、そのユーザーのアクセストークンを取得することができます。
+
+アプリケーションを作成してアクセストークンを取得するまでの流れを説明します。
+
+### アプリケーションを作成する
+まずはあなたのアプリケーションを作成しましょう。
+				| <a href=#{dev_url} target="_blank">デベロッパーセンター</a>にアクセスし、アプリ > アプリ作成 に進みます。
+				br
+				| 次に、フォームに必要事項を記入します:
+			dl
+				dt アプリケーション名
+				dd あなたのアプリケーションの名前。
+				dt Named ID
+				dd アプリを識別する/a-z-/で構成されたID。
+				dt アプリの概要
+				dd アプリの簡単な説明を入力してください。
+				dt コールバックURL
+				dd あなたのアプリケーションがWebアプリケーションである場合、ユーザーが後述するフォームで認証を終えた際にリダイレクトするURLを設定できます。
+				dt 権限
+				dd アプリケーションが要求する権限。ここで要求した機能だけがAPIからアクセスできます。
+			p.tip
+				| 権限はアプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーはすべて無効になります。
+			p
+				| アプリケーションを作成すると、作ったアプリの管理ページに進みます。
+				br
+				| アプリのシークレットキー(App Secret)が表示されていますので、メモしておいてください。
+			p.tip
+				| アプリに成りすまされる可能性があるため、極力このシークレットキーは公開しないようにしてください。
+
+		section
+			h3 ユーザーに認証させる
+			p あなたのアプリを使ってもらうには、ユーザーにアカウントへアクセスすることを許可してもらい、Misskeyにそのユーザーのアクセストークンを発行してもらう必要があります。
+			p 認証セッションを開始するには、<code>#{api_url}/auth/session/generate</code>へパラメータに<code>app_secret</code>としてApp Secretを含めたリクエストを送信します。
+			p
+				| そうすると、レスポンスとして認証セッションのトークンや認証フォームのURLが取得できます。
+				br
+				| この認証フォームのURLをブラウザで表示し、ユーザーにフォームを表示してください。
+			section
+				h4 あなたのアプリがコールバックURLを設定している場合
+				p ユーザーがアプリの連携を許可すると設定しているコールバックURLに<code>token</code>という名前でセッションのトークンが含まれたクエリを付けてリダイレクトします。
+			section
+				h4 あなたのアプリがコールバックURLを設定していない場合
+				p ユーザーがアプリの連携を許可したことを(何らかの方法で(たとえばボタンを押させるなど))確認出来るようにしてください。
+			p
+				| 次に、<code>#{api_url}/auth/session/userkey</code>へ<code>app_secret</code>としてApp Secretを、<code>token</code>としてセッションのトークンをパラメータとして付与したリクエストを送信してください。
+				br
+				| 上手くいけば、認証したユーザーのアクセストークンがレスポンスとして取得できます。おめでとうございます！
+			p
+				| 以降アクセストークンは、<strong>ユーザーのアクセストークン+アプリのシークレットキーをsha256したもの</strong>として扱います。
+
+	p アクセストークンを取得できたら、あとは簡単です。REST APIなら、リクエストにアクセストークンを<code>i</code>としてパラメータに含めるだけです。
+
+	section
+		h2 リクエスト形式
+		p <code>application/json</code>を受け付けます。
+		p.tip
+			| 現在<code>application/x-www-form-urlencoded</code>も受け付けていますが、将来的にこのサポートはされなくなる予定です。
diff --git a/src/web/docs/api/library.md b/src/web/docs/api/library.md
new file mode 100644
index 0000000000..71ddbe345d
--- /dev/null
+++ b/src/web/docs/api/library.md
@@ -0,0 +1,8 @@
+ライブラリ
+================================================================
+
+Misskey APIを便利に利用するためのライブラリ一覧です。
+
+.NET
+----------------------------------------------------------------
+* **[Misq (公式)](https://github.com/syuilo/Misq)**
diff --git a/src/web/docs/index.md b/src/web/docs/index.md
new file mode 100644
index 0000000000..0846cf27e8
--- /dev/null
+++ b/src/web/docs/index.md
@@ -0,0 +1,4 @@
+Misskeyについて
+================================================================
+
+誰か書いて
diff --git a/src/web/docs/link-to-twitter.md b/src/web/docs/link-to-twitter.md
new file mode 100644
index 0000000000..77fb744576
--- /dev/null
+++ b/src/web/docs/link-to-twitter.md
@@ -0,0 +1,9 @@
+Twitterと連携する
+================================================================
+
+設定 -> Twitter から、お使いのMisskeyアカウントとお使いのTwitterアカウントを関連付けることができます。
+アカウントの関連付けを行うと、プロフィールにTwitterアカウントへのリンクが表示されたりなどします。
+
+MisskeyがあなたのTwitterアカウントでツイートしたり誰かをフォローしたりといったことは、
+一切行いませんのでご安心ください。(Misskeyはそのような権限を取得しないので、行おうと思っても行えません)
+Twitterのアプリケーション認証フォームでこの権限の詳細を確認することができます。また、いつでも連携を取り消すことができます。
diff --git a/src/web/docs/style.styl b/src/web/docs/style.styl
new file mode 100644
index 0000000000..9014df87fe
--- /dev/null
+++ b/src/web/docs/style.styl
@@ -0,0 +1,69 @@
+@import "../style"
+
+body
+	margin 0
+	color #34495e
+
+main
+	padding 32px
+	width 100%
+	max-width 700px
+
+footer
+	padding:32px 0 0 0
+	margin 32px 0 0 0
+	border-top solid 1px #eee
+
+	.copyright
+		margin 16px 0 0 0
+		color #aaa
+
+section
+	margin 32px 0
+
+h1
+	margin 0 0 24px 0
+	padding 16px 0
+	font-size 1.5em
+	border-bottom solid 2px #eee
+
+h2
+	margin 0 0 24px 0
+	padding 0 0 16px 0
+	font-size 1.4em
+	border-bottom solid 1px #eee
+
+h3
+	margin 0
+	padding 0
+	font-size 1.25em
+
+h4
+	margin 0
+
+p
+	margin 1em 0
+	line-height 1.6em
+
+table
+	width 100%
+	border-spacing 0
+	border-collapse collapse
+
+	thead
+		font-weight bold
+		border-bottom solid 2px #eee
+
+		tr
+			th
+				text-align left
+
+	tbody
+		tr
+			border-bottom dashed 1px #eee
+
+	th, td
+		padding 8px 16px
+
+.i18n:not(.ja)
+	display none
diff --git a/src/web/docs/tou.md b/src/web/docs/tou.md
new file mode 100644
index 0000000000..fbf87867b4
--- /dev/null
+++ b/src/web/docs/tou.md
@@ -0,0 +1,4 @@
+利用規約
+================================================================
+
+公序良俗に反する行為はおやめください。
diff --git a/src/web/server.ts b/src/web/server.ts
index 1d3687f89e..38e87754f3 100644
--- a/src/web/server.ts
+++ b/src/web/server.ts
@@ -63,6 +63,12 @@ app.get('/manifest.json', (req, res) =>
  */
 app.get(/\/api:url/, require('./service/url-preview'));
 
+/**
+ * Docs
+ */
+app.get(/^\/docs\/([a-z_\-\/]+?)$/, (req, res) =>
+	res.sendFile(`${__dirname}/docs/${req.params[0]}.html`));
+
 /**
  * Routing
  */
diff --git a/src/web/style.styl b/src/web/style.styl
new file mode 100644
index 0000000000..573df10d78
--- /dev/null
+++ b/src/web/style.styl
@@ -0,0 +1,38 @@
+json('../const.json')
+
+@charset 'utf-8'
+
+$theme-color = themeColor
+$theme-color-foreground = themeColorForeground
+
+/*
+	::selection
+		background $theme-color
+		color #fff
+*/
+
+*
+	position relative
+	box-sizing border-box
+	background-clip padding-box !important
+	tap-highlight-color rgba($theme-color, 0.7)
+	-webkit-tap-highlight-color rgba($theme-color, 0.7)
+
+html, body
+	margin 0
+	padding 0
+	scroll-behavior smooth
+	text-size-adjust 100%
+	font-family sans-serif
+
+a
+	text-decoration none
+	color $theme-color
+	cursor pointer
+
+	&:hover
+		text-decoration underline
+
+	*
+		cursor pointer
+
-- 
cgit v1.2.3-freya