From c88097298f204bcd3f181e84e0028b2ec0a39814 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 8 Dec 2017 21:12:49 +0900
Subject: Display Exif

---
 src/web/app/base.pug                          |  3 ++
 src/web/app/mobile/tags/drive/file-viewer.tag | 54 ++++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/base.pug b/src/web/app/base.pug
index 140286a768..d7c7f0aed4 100644
--- a/src/web/app/base.pug
+++ b/src/web/app/base.pug
@@ -24,6 +24,9 @@ html
 		//- FontAwesome style
 		style #{facss}
 
+		//- highlight.js style
+		style #{hljscss}
+
 	body
 		noscript: p
 			| JavaScriptを有効にしてください
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
index da895359dc..48fc83fa67 100644
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ b/src/web/app/mobile/tags/drive/file-viewer.tag
@@ -1,6 +1,6 @@
 <mk-drive-file-viewer>
 	<div class="preview">
-		<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }>
+		<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name } onload={ onImageLoaded } ref="img">
 		<virtual if={ kind != 'image' }>%fa:file%</virtual>
 		<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
 			<span class="size">
@@ -39,6 +39,14 @@
 			</button>
 		</div>
 	</div>
+	<div class="exif" show={ exif }>
+		<div>
+			<p>
+				%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
+			</p>
+			<pre ref="exif" class="json">{ exif ? JSON.stringify(exif, null, 2) : '' }</pre>
+		</div>
+	</div>
 	<div class="hash">
 		<div>
 			<p>
@@ -178,12 +186,45 @@
 						white-space nowrap
 						overflow auto
 						font-size 0.8em
+						color #222
+						border solid 1px #dfdfdf
+						border-radius 2px
+						background #f5f5f5
+
+			> .exif
+				padding 14px
+				border-top solid 1px #dfdfdf
+
+				> div
+					max-width 500px
+					margin 0 auto
+
+					> p
+						display block
+						margin 0
+						padding 0
+						color #555
+						font-size 0.9em
+
+						> [data-fa]
+							margin-right 4px
+
+					> pre
+						display block
+						width 100%
+						margin 6px 0 0 0
+						padding 8px
+						height 128px
+						overflow auto
+						font-size 0.9em
 						border solid 1px #dfdfdf
 						border-radius 2px
 						background #f5f5f5
 
 	</style>
 	<script>
+		import EXIF from 'exif-js';
+		import hljs from 'highlight.js';
 		import bytesToSize from '../../../common/scripts/bytes-to-size';
 		import gcd from '../../../common/scripts/gcd';
 
@@ -195,6 +236,17 @@
 		this.file = this.opts.file;
 		this.kind = this.file.type.split('/')[0];
 
+		this.onImageLoaded = () => {
+			const self = this;
+			EXIF.getData(this.refs.img, function() {
+				const allMetaData = EXIF.getAllTags(this);
+				self.update({
+					exif: allMetaData
+				});
+				hljs.highlightBlock(self.refs.exif);
+			});
+		};
+
 		this.rename = () => {
 			const name = window.prompt('名前を変更', this.file.name);
 			if (name == null || name == '' || name == this.file.name) return;
-- 
cgit v1.2.3-freya


From 6bc499f6579a9a248430748f9a69f3e5873a5ed3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 8 Dec 2017 22:57:58 +0900
Subject: #967

---
 locales/en.yml                        | 14 +++++++++
 locales/ja.yml                        | 14 +++++++++
 package.json                          |  4 +++
 src/api/endpoints.ts                  |  8 +++++
 src/api/endpoints/i/2fa/done.ts       | 37 +++++++++++++++++++++++
 src/api/endpoints/i/2fa/register.ts   | 48 ++++++++++++++++++++++++++++++
 src/api/models/user.ts                |  2 ++
 src/api/private/signin.ts             | 25 +++++++++++++++-
 src/api/serializers/user.ts           |  6 ++++
 src/web/app/common/tags/signin.tag    | 11 ++++++-
 src/web/app/desktop/tags/settings.tag | 56 +++++++++++++++++++++++++++++++++--
 11 files changed, 221 insertions(+), 4 deletions(-)
 create mode 100644 src/api/endpoints/i/2fa/done.ts
 create mode 100644 src/api/endpoints/i/2fa/register.ts

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 3009aad8cb..6b39b4b8a7 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -137,6 +137,7 @@ common:
     mk-signin:
       username: "Username"
       password: "Password"
+      token: "Token"
       signing-in: "Signing in..."
       signin: "Sign in"
 
@@ -295,6 +296,17 @@ desktop:
       not-match: "New password not matched"
       changed: "Password updated successfully"
 
+    mk-2fa-setting:
+      register: "Register a device"
+      enter-password: "Enter the password"
+      authenticator: "First, you need install Google Authenticator to your device:"
+      howtoinstall: "How to install"
+      scan: "Next, please scan displayed QR code:"
+      done: "Please enter the token displaying in your device:"
+      submit: "Submit"
+      success: "Setup completed successfully!"
+      failed: "Failed to setup. please ensure that the token is correct."
+
     mk-post-form:
       post-placeholder: "What's happening?"
       reply-placeholder: "Reply to this post..."
@@ -327,7 +339,9 @@ desktop:
       next: "Next post"
 
     mk-settings:
+      security: "Security"
       password: "Password"
+      2fa: "Two-factor authentication"
 
     mk-timeline-post:
       reposted-by: "Reposted by {}"
diff --git a/locales/ja.yml b/locales/ja.yml
index cdfcd6385c..672d4ab402 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -137,6 +137,7 @@ common:
     mk-signin:
       username: "ユーザー名"
       password: "パスワード"
+      token: "トークン"
       signing-in: "やってます..."
       signin: "サインイン"
 
@@ -295,6 +296,17 @@ desktop:
       not-match: "新しいパスワードが一致しません"
       changed: "パスワードを変更しました"
 
+    mk-2fa-setting:
+      register: "デバイスを登録する"
+      enter-password: "パスワードを入力してください"
+      authenticator: "まず、Google Authenticatorをお使いのデバイスにインストールします:"
+      howtoinstall: "インストール方法はこちら"
+      scan: "次に、表示されているQRコードをスキャンします:"
+      done: "お使いのデバイスに表示されているトークンを入力して完了します:"
+      submit: "完了"
+      success: "設定が完了しました！"
+      failed: "設定に失敗しました。トークンに誤りがないかご確認ください。"
+
     mk-post-form:
       post-placeholder: "いまどうしてる？"
       reply-placeholder: "この投稿への返信..."
@@ -327,7 +339,9 @@ desktop:
       next: "次の投稿"
 
     mk-settings:
+      security: "セキュリティ"
       password: "パスワード"
+      2fa: "二段階認証"
 
     mk-timeline-post:
       reposted-by: "{}がRepost"
diff --git a/package.json b/package.json
index 6521d65e6c..451bfc9822 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
 		"@types/node": "8.0.57",
 		"@types/page": "1.5.32",
 		"@types/proxy-addr": "2.0.0",
+		"@types/qrcode": "^0.8.0",
 		"@types/ratelimiter": "2.1.28",
 		"@types/redis": "2.8.1",
 		"@types/request": "2.0.8",
@@ -69,6 +70,7 @@
 		"@types/riot": "3.6.1",
 		"@types/seedrandom": "2.4.27",
 		"@types/serve-favicon": "2.2.30",
+		"@types/speakeasy": "^2.0.1",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.3",
 		"@types/webpack": "3.8.1",
@@ -134,6 +136,7 @@
 		"prominence": "0.2.0",
 		"proxy-addr": "2.0.2",
 		"pug": "2.0.0-rc.4",
+		"qrcode": "^1.0.0",
 		"ratelimiter": "3.0.3",
 		"recaptcha-promise": "0.1.3",
 		"reconnecting-websocket": "3.2.2",
@@ -147,6 +150,7 @@
 		"seedrandom": "^2.4.3",
 		"serve-favicon": "2.4.5",
 		"sortablejs": "1.7.0",
+		"speakeasy": "^2.0.0",
 		"string-replace-webpack-plugin": "0.1.3",
 		"style-loader": "0.19.0",
 		"stylus": "0.54.5",
diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index 06fb9a64ae..49871c0ce3 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -155,6 +155,14 @@ const endpoints: Endpoint[] = [
 		name: 'i',
 		withCredential: true
 	},
+	{
+		name: 'i/2fa/register',
+		withCredential: true
+	},
+	{
+		name: 'i/2fa/done',
+		withCredential: true
+	},
 	{
 		name: 'i/update',
 		withCredential: true,
diff --git a/src/api/endpoints/i/2fa/done.ts b/src/api/endpoints/i/2fa/done.ts
new file mode 100644
index 0000000000..0b36033bb6
--- /dev/null
+++ b/src/api/endpoints/i/2fa/done.ts
@@ -0,0 +1,37 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import * as speakeasy from 'speakeasy';
+import User from '../../../models/user';
+
+module.exports = async (params, user) => new Promise(async (res, rej) => {
+	// Get 'token' parameter
+	const [token, tokenErr] = $(params.token).string().$;
+	if (tokenErr) return rej('invalid token param');
+
+	const _token = token.replace(/\s/g, '');
+
+	if (user.two_factor_temp_secret == null) {
+		return rej('二段階認証の設定が開始されていません');
+	}
+
+	const verified = (speakeasy as any).totp.verify({
+		secret: user.two_factor_temp_secret,
+		encoding: 'base32',
+		token: _token
+	});
+
+	if (!verified) {
+		return rej('not verified');
+	}
+
+	await User.update(user._id, {
+		$set: {
+			two_factor_secret: user.two_factor_temp_secret,
+			two_factor_enabled: true
+		}
+	});
+
+	res();
+});
diff --git a/src/api/endpoints/i/2fa/register.ts b/src/api/endpoints/i/2fa/register.ts
new file mode 100644
index 0000000000..c2b5037a29
--- /dev/null
+++ b/src/api/endpoints/i/2fa/register.ts
@@ -0,0 +1,48 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import * as bcrypt from 'bcryptjs';
+import * as speakeasy from 'speakeasy';
+import * as QRCode from 'qrcode';
+import User from '../../../models/user';
+import config from '../../../../conf';
+
+module.exports = async (params, user) => new Promise(async (res, rej) => {
+	// Get 'password' parameter
+	const [password, passwordErr] = $(params.password).string().$;
+	if (passwordErr) return rej('invalid password param');
+
+	// Compare password
+	const same = await bcrypt.compare(password, user.password);
+
+	if (!same) {
+		return rej('incorrect password');
+	}
+
+	// Generate user's secret key
+	const secret = speakeasy.generateSecret({
+		length: 32
+	});
+
+	await User.update(user._id, {
+		$set: {
+			two_factor_temp_secret: secret.base32
+		}
+	});
+
+	// Get the data URL of the authenticator URL
+	QRCode.toDataURL(speakeasy.otpauthURL({
+		secret: secret.base32,
+		encoding: 'base32',
+		label: user.username,
+		issuer: config.host
+	}), (err, data_url) => {
+		res({
+			qr: data_url,
+			secret: secret.base32,
+			label: user.username,
+			issuer: config.host
+		});
+	});
+});
diff --git a/src/api/models/user.ts b/src/api/models/user.ts
index b2f3af09fa..018979158f 100644
--- a/src/api/models/user.ts
+++ b/src/api/models/user.ts
@@ -72,6 +72,8 @@ export type IUser = {
 	is_pro: boolean;
 	is_suspended: boolean;
 	keywords: string[];
+	two_factor_secret: string;
+	two_factor_enabled: boolean;
 };
 
 export function init(user): IUser {
diff --git a/src/api/private/signin.ts b/src/api/private/signin.ts
index 0ebf8d6aa1..7376921e28 100644
--- a/src/api/private/signin.ts
+++ b/src/api/private/signin.ts
@@ -1,5 +1,6 @@
 import * as express from 'express';
 import * as bcrypt from 'bcryptjs';
+import * as speakeasy from 'speakeasy';
 import { default as User, IUser } from '../models/user';
 import Signin from '../models/signin';
 import serialize from '../serializers/signin';
@@ -11,6 +12,7 @@ export default async (req: express.Request, res: express.Response) => {
 
 	const username = req.body['username'];
 	const password = req.body['password'];
+	const token = req.body['token'];
 
 	if (typeof username != 'string') {
 		res.sendStatus(400);
@@ -22,6 +24,11 @@ export default async (req: express.Request, res: express.Response) => {
 		return;
 	}
 
+	if (token != null && typeof token != 'string') {
+		res.sendStatus(400);
+		return;
+	}
+
 	// Fetch user
 	const user: IUser = await User.findOne({
 		username_lower: username.toLowerCase()
@@ -43,7 +50,23 @@ export default async (req: express.Request, res: express.Response) => {
 	const same = await bcrypt.compare(password, user.password);
 
 	if (same) {
-		signin(res, user, false);
+		if (user.two_factor_enabled) {
+			const verified = (speakeasy as any).totp.verify({
+				secret: user.two_factor_secret,
+				encoding: 'base32',
+				token: token
+			});
+
+			if (verified) {
+				signin(res, user, false);
+			} else {
+				res.status(400).send({
+					error: 'invalid token'
+				});
+			}
+		} else {
+			signin(res, user, false);
+		}
 	} else {
 		res.status(400).send({
 			error: 'incorrect password'
diff --git a/src/api/serializers/user.ts b/src/api/serializers/user.ts
index 3d84156606..fe924911c1 100644
--- a/src/api/serializers/user.ts
+++ b/src/api/serializers/user.ts
@@ -78,6 +78,8 @@ export default (
 	// Remove private properties
 	delete _user.password;
 	delete _user.token;
+	delete _user.two_factor_temp_secret;
+	delete _user.two_factor_secret;
 	delete _user.username_lower;
 	if (_user.twitter) {
 		delete _user.twitter.access_token;
@@ -91,6 +93,10 @@ export default (
 		delete _user.client_settings;
 	}
 
+	if (!opts.detail) {
+		delete _user.two_factor_enabled;
+	}
+
 	_user.avatar_url = _user.avatar_id != null
 		? `${config.drive_url}/${_user.avatar_id}`
 		: `${config.drive_url}/default-avatar.jpg`;
diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag
index f25d99974b..f5a2be94ed 100644
--- a/src/web/app/common/tags/signin.tag
+++ b/src/web/app/common/tags/signin.tag
@@ -6,6 +6,9 @@
 		<label class="password">
 			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
 		</label>
+		<label class="token" if={ user && user.two_factor_enabled }>
+			<input ref="token" type="number" placeholder="%i18n:common.tags.mk-signin.token%" required="required"/>%fa:lock%
+		</label>
 		<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
 	</form>
 	<style>
@@ -39,6 +42,7 @@
 
 					input[type=text]
 					input[type=password]
+					input[type=number]
 						user-select text
 						display inline-block
 						cursor auto
@@ -123,6 +127,10 @@
 				this.refs.password.focus();
 				return false;
 			}
+			if (this.user && this.user.two_factor_enabled && this.refs.token.value == '') {
+				this.refs.token.focus();
+				return false;
+			}
 
 			this.update({
 				signing: true
@@ -130,7 +138,8 @@
 
 			this.api('signin', {
 				username: this.refs.username.value,
-				password: this.refs.password.value
+				password: this.refs.password.value,
+				token: this.user && this.user.two_factor_enabled ? this.refs.token.value : undefined
 			}).then(() => {
 				location.reload();
 			}).catch(() => {
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 46cd405520..5ebe28a144 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -7,7 +7,7 @@
 		<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
 		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
 		<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in-alt .fw%ログイン履歴</p>
-		<p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.password%</p>
+		<p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
 		<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
 	</div>
 	<div class="pages">
@@ -59,11 +59,16 @@
 			<mk-signin-history/>
 		</section>
 
-		<section class="password" show={ page == 'password' }>
+		<section class="password" show={ page == 'security' }>
 			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
 			<mk-password-setting/>
 		</section>
 
+		<section class="2fa" show={ page == 'security' }>
+			<h1>%i18n:desktop.tags.mk-settings.2fa%</h1>
+			<mk-2fa-setting/>
+		</section>
+
 		<section class="api" show={ page == 'api' }>
 			<h1>API</h1>
 			<mk-api-info/>
@@ -285,3 +290,50 @@
 		};
 	</script>
 </mk-password-setting>
+
+<mk-2fa-setting>
+	<p><button onclick={ register }>%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<div if={ data }>
+		<ol>
+			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
+				<input type="number" ref="token"><button onclick={ submit }>%i18n:desktop.tags.mk-2fa-setting.submit%</button>
+			</li>
+		</ol>
+	</div>
+	<style>
+		:scope
+			display block
+			color #4a535a
+
+	</style>
+	<script>
+		import passwordDialog from '../scripts/password-dialog';
+		import notify from '../scripts/notify';
+
+		this.mixin('api');
+
+		this.register = () => {
+			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
+				this.api('i/2fa/register', {
+					password: password
+				}).then(data => {
+					this.update({
+						data: data
+					});
+				});
+			});
+		};
+
+		this.submit = () => {
+			this.api('i/2fa/done', {
+				token: this.refs.token.value
+			}).then(() => {
+				notify('%i18n:desktop.tags.mk-2fa-setting.success%');
+			}).catch(() => {
+				notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
+			});
+		};
+	</script>
+</mk-2fa-setting>
-- 
cgit v1.2.3-freya


From 9ed68439e550d0f3d95b258df114598e1a05cd92 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 8 Dec 2017 23:13:03 +0900
Subject: :v:

---
 locales/en.yml                        | 3 +++
 locales/ja.yml                        | 3 +++
 src/web/app/desktop/tags/settings.tag | 3 +++
 3 files changed, 9 insertions(+)

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 6b39b4b8a7..020fc39497 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -297,6 +297,8 @@ desktop:
       changed: "Password updated successfully"
 
     mk-2fa-setting:
+      intro: "If you set up 2-step verification, you will need not only a password at sign-in but also a pre-registered physical device (such as your smartphone), which will improve security."
+      caution: "As a caveat, security improves, but you can not sign in to Misskey if you lose a registered device, etc."
       register: "Register a device"
       enter-password: "Enter the password"
       authenticator: "First, you need install Google Authenticator to your device:"
@@ -306,6 +308,7 @@ desktop:
       submit: "Submit"
       success: "Setup completed successfully!"
       failed: "Failed to setup. please ensure that the token is correct."
+      info: "From the next sign in, enter the token that is displayed on the device in addition to the password."
 
     mk-post-form:
       post-placeholder: "What's happening?"
diff --git a/locales/ja.yml b/locales/ja.yml
index 672d4ab402..27804aa7c2 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -297,6 +297,8 @@ desktop:
       changed: "パスワードを変更しました"
 
     mk-2fa-setting:
+      intro: "二段階認証を設定すると、サインイン時にパスワードだけでなく、予め登録しておいた物理的なデバイス(例えばあなたのスマートフォンなど)も必要になり、よりセキュリティが向上します。"
+      caution: "注意点として、セキュリティは向上しますが、登録したデバイスを紛失するなどした場合、Misskeyにサインインできなくなります。"
       register: "デバイスを登録する"
       enter-password: "パスワードを入力してください"
       authenticator: "まず、Google Authenticatorをお使いのデバイスにインストールします:"
@@ -306,6 +308,7 @@ desktop:
       submit: "完了"
       success: "設定が完了しました！"
       failed: "設定に失敗しました。トークンに誤りがないかご確認ください。"
+      info: "次回サインインからは、同様にパスワードに加えてデバイスに表示されているトークンを入力します。"
 
     mk-post-form:
       post-placeholder: "いまどうしてる？"
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 5ebe28a144..2c38f13523 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -292,6 +292,8 @@
 </mk-password-setting>
 
 <mk-2fa-setting>
+	<p>%i18n:desktop.tags.mk-2fa-setting.intro%</p>
+	<p>%i18n:desktop.tags.mk-2fa-setting.caution%</p>
 	<p><button onclick={ register }>%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
 	<div if={ data }>
 		<ol>
@@ -300,6 +302,7 @@
 			<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
 				<input type="number" ref="token"><button onclick={ submit }>%i18n:desktop.tags.mk-2fa-setting.submit%</button>
 			</li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.info%</li>
 		</ol>
 	</div>
 	<style>
-- 
cgit v1.2.3-freya


From 03a35b3fd52343959e27d4a80245fd4052b6517d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 01:51:05 +0900
Subject: #297

---
 src/web/app/mobile/tags/drive.tag        |  10 +-
 src/web/app/mobile/tags/drive/file.tag   | 213 ++++++++++++++++---------------
 src/web/app/mobile/tags/drive/folder.tag |  57 +++++----
 3 files changed, 148 insertions(+), 132 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 8350ce07e1..a72c8d51c8 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -1,9 +1,9 @@
 <mk-drive>
 	<nav ref="nav">
-		<p onclick={ goRoot }>%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</p>
+		<a onclick={ goRoot } href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
 		<virtual each={ folder in hierarchyFolders }>
 			<span>%fa:angle-right%</span>
-			<p onclick={ move }>{ folder.name }</p>
+			<a onclick={ move } href="/i/drive/folder/{ folder.id }">{ folder.name }</a>
 		</virtual>
 		<virtual if={ folder != null }>
 			<span>%fa:angle-right%</span>
@@ -74,9 +74,12 @@
 				border-bottom solid 1px rgba(0, 0, 0, 0.13)
 
 				> p
+				> a
 					display inline
 					margin 0
 					padding 0
+					text-decoration none !important
+					color inherit
 
 					&:last-child
 						font-weight bold
@@ -246,6 +249,7 @@
 
 		this.move = ev => {
 			this.cd(ev.item.folder);
+			return false;
 		};
 
 		this.cd = (target, silent = false) => {
@@ -339,6 +343,8 @@
 				this.trigger('move-root');
 				this.fetch();
 			}
+
+			return false;
 		};
 
 		this.fetch = () => {
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index 93a8dba7e5..0b3506a430 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -1,119 +1,123 @@
-<mk-drive-file onclick={ onclick } data-is-selected={ isSelected }>
-	<div class="container">
-		<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
-		<div class="body">
-			<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
-			<!--
-			if file.tags.length > 0
-				ul.tags
-					each tag in file.tags
-						li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-			-->
-			<footer>
-				<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
-				<p class="separator"></p>
-				<p class="data-size">{ bytesToSize(file.datasize) }</p>
-				<p class="separator"></p>
-				<p class="created-at">
-					%fa:R clock%<mk-time time={ file.created_at }/>
-				</p>
-			</footer>
+<mk-drive-file data-is-selected={ isSelected }>
+	<a onclick={ onclick } href="/i/drive/file/{ file.id }">
+		<div class="container">
+			<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
+			<div class="body">
+				<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
+				<!--
+				if file.tags.length > 0
+					ul.tags
+						each tag in file.tags
+							li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
+				-->
+				<footer>
+					<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
+					<p class="separator"></p>
+					<p class="data-size">{ bytesToSize(file.datasize) }</p>
+					<p class="separator"></p>
+					<p class="created-at">
+						%fa:R clock%<mk-time time={ file.created_at }/>
+					</p>
+				</footer>
+			</div>
 		</div>
-	</div>
+	</a>
 	<style>
 		:scope
 			display block
 
-			&, *
-				user-select none
-
-			*
-				pointer-events none
-
-			> .container
-				max-width 500px
-				margin 0 auto
-				padding 16px
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				> .thumbnail
-					display block
-					float left
-					width 64px
-					height 64px
-					background-size cover
-					background-position center center
-
-				> .body
-					display block
-					float left
-					width calc(100% - 74px)
-					margin-left 10px
-
-					> .name
-						display block
-						margin 0
-						padding 0
-						font-size 0.9em
-						font-weight bold
-						color #555
-						text-overflow ellipsis
-						overflow-wrap break-word
-
-						> .ext
-							opacity 0.5
-
-					> .tags
-						display block
-						margin 4px 0 0 0
-						padding 0
-						list-style none
-						font-size 0.5em
-
-						> .tag
-							display inline-block
-							margin 0 5px 0 0
-							padding 1px 5px
-							border-radius 2px
-
-					> footer
-						display block
-						margin 4px 0 0 0
-						font-size 0.7em
+			> a
+				display block
+				text-decoration none !important
 
-						> .separator
-							display inline
-							margin 0
-							padding 0 4px
-							color #CDCDCD
+				*
+					user-select none
+					pointer-events none
 
-						> .type
-							display inline
-							margin 0
-							padding 0
-							color #9D9D9D
+				> .container
+					max-width 500px
+					margin 0 auto
+					padding 16px
+
+					&:after
+						content ""
+						display block
+						clear both
 
-							> mk-file-type-icon
-								margin-right 4px
+					> .thumbnail
+						display block
+						float left
+						width 64px
+						height 64px
+						background-size cover
+						background-position center center
 
-						> .data-size
-							display inline
-							margin 0
-							padding 0
-							color #9D9D9D
+					> .body
+						display block
+						float left
+						width calc(100% - 74px)
+						margin-left 10px
 
-						> .created-at
-							display inline
+						> .name
+							display block
 							margin 0
 							padding 0
-							color #BDBDBD
-
-							> [data-fa]
-								margin-right 2px
+							font-size 0.9em
+							font-weight bold
+							color #555
+							text-overflow ellipsis
+							overflow-wrap break-word
+
+							> .ext
+								opacity 0.5
+
+						> .tags
+							display block
+							margin 4px 0 0 0
+							padding 0
+							list-style none
+							font-size 0.5em
+
+							> .tag
+								display inline-block
+								margin 0 5px 0 0
+								padding 1px 5px
+								border-radius 2px
+
+						> footer
+							display block
+							margin 4px 0 0 0
+							font-size 0.7em
+
+							> .separator
+								display inline
+								margin 0
+								padding 0 4px
+								color #CDCDCD
+
+							> .type
+								display inline
+								margin 0
+								padding 0
+								color #9D9D9D
+
+								> mk-file-type-icon
+									margin-right 4px
+
+							> .data-size
+								display inline
+								margin 0
+								padding 0
+								color #9D9D9D
+
+							> .created-at
+								display inline
+								margin 0
+								padding 0
+								color #BDBDBD
+
+								> [data-fa]
+									margin-right 2px
 
 			&[data-is-selected]
 				background $theme-color
@@ -136,6 +140,7 @@
 
 		this.onclick = () => {
 			this.browser.chooseFile(this.file);
+			return false;
 		};
 	</script>
 </mk-drive-file>
diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
index 196e7e326b..785847a9ca 100644
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ b/src/web/app/mobile/tags/drive/folder.tag
@@ -1,39 +1,43 @@
 <mk-drive-folder onclick={ onclick }>
-	<div class="container">
-		<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
-	</div>
+	<a onclick={ onclick } href="/i/drive/folder/{ folder.id }">
+		<div class="container">
+			<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
+		</div>
+	</a>
 	<style>
 		:scope
 			display block
-			color #777
 
-			&, *
-				user-select none
+			> a
+				display block
+				color #777
+				text-decoration none !important
 
-			*
-				pointer-events none
+				*
+					user-select none
+					pointer-events none
 
-			> .container
-				max-width 500px
-				margin 0 auto
-				padding 16px
+				> .container
+					max-width 500px
+					margin 0 auto
+					padding 16px
 
-				> .name
-					display block
-					margin 0
-					padding 0
+					> .name
+						display block
+						margin 0
+						padding 0
 
-					> [data-fa]
-						margin-right 6px
+						> [data-fa]
+							margin-right 6px
 
-				> [data-fa]
-					position absolute
-					top 0
-					bottom 0
-					right 8px
-					margin auto 0 auto 0
-					width 1em
-					height 1em
+					> [data-fa]
+						position absolute
+						top 0
+						bottom 0
+						right 8px
+						margin auto 0 auto 0
+						width 1em
+						height 1em
 
 	</style>
 	<script>
@@ -42,6 +46,7 @@
 
 		this.onclick = () => {
 			this.browser.cd(this.folder);
+			return false;
 		};
 	</script>
 </mk-drive-folder>
-- 
cgit v1.2.3-freya


From 23e4674966f87a2292f58c2c0a7fb0e8bbb7dcf9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 02:11:48 +0900
Subject: Fix bug

---
 src/web/app/mobile/tags/drive.tag        | 5 ++++-
 src/web/app/mobile/tags/drive/file.tag   | 3 ++-
 src/web/app/mobile/tags/drive/folder.tag | 5 +++--
 3 files changed, 9 insertions(+), 4 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index a72c8d51c8..41dbfddae9 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -248,6 +248,7 @@
 		};
 
 		this.move = ev => {
+			ev.preventDefault();
 			this.cd(ev.item.folder);
 			return false;
 		};
@@ -333,7 +334,9 @@
 		this.prependFile = file => this.addFile(file, true);
 		this.prependFolder = file => this.addFolder(file, true);
 
-		this.goRoot = () => {
+		this.goRoot = ev => {
+			ev.preventDefault();
+
 			if (this.folder || this.file) {
 				this.update({
 					file: null,
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index 0b3506a430..196dd1141e 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -138,7 +138,8 @@
 			this.isSelected = selections.some(f => f.id == this.file.id);
 		});
 
-		this.onclick = () => {
+		this.onclick = ev => {
+			ev.preventDefault();
 			this.browser.chooseFile(this.file);
 			return false;
 		};
diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
index 785847a9ca..da55cf474e 100644
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ b/src/web/app/mobile/tags/drive/folder.tag
@@ -1,4 +1,4 @@
-<mk-drive-folder onclick={ onclick }>
+<mk-drive-folder>
 	<a onclick={ onclick } href="/i/drive/folder/{ folder.id }">
 		<div class="container">
 			<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
@@ -44,7 +44,8 @@
 		this.browser = this.parent;
 		this.folder = this.opts.folder;
 
-		this.onclick = () => {
+		this.onclick = ev => {
+			ev.preventDefault();
 			this.browser.cd(this.folder);
 			return false;
 		};
-- 
cgit v1.2.3-freya


From b9ad38d56c5d1d05aff694bd05b08b26391dcb56 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 20:23:58 +0900
Subject: :art:

---
 locales/en.yml                              |   1 +
 locales/ja.yml                              |   1 +
 src/web/app/common/tags/authorized-apps.tag |   4 +-
 src/web/app/common/tags/signin-history.tag  | 120 +++++++++++-------
 src/web/app/desktop/style.styl              |  65 +---------
 src/web/app/desktop/tags/settings.tag       | 190 ++++++++++++----------------
 src/web/app/desktop/ui.styl                 | 119 +++++++++++++++++
 7 files changed, 280 insertions(+), 220 deletions(-)
 create mode 100644 src/web/app/desktop/ui.styl

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 020fc39497..16f68ab632 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -342,6 +342,7 @@ desktop:
       next: "Next post"
 
     mk-settings:
+      profile: "Profile"
       security: "Security"
       password: "Password"
       2fa: "Two-factor authentication"
diff --git a/locales/ja.yml b/locales/ja.yml
index c5996c76b3..f50e50a5ce 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -342,6 +342,7 @@ desktop:
       next: "次の投稿"
 
     mk-settings:
+      profile: "プロフィール"
       security: "セキュリティ"
       password: "パスワード"
       2fa: "二段階認証"
diff --git a/src/web/app/common/tags/authorized-apps.tag b/src/web/app/common/tags/authorized-apps.tag
index 0078a18636..3f3714332e 100644
--- a/src/web/app/common/tags/authorized-apps.tag
+++ b/src/web/app/common/tags/authorized-apps.tag
@@ -1,5 +1,7 @@
 <mk-authorized-apps>
-	<p class="none" if={ !fetching && apps.length == 0 }>%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+	<div class="none ui info" if={ !fetching && apps.length == 0 }>
+		<p>%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+	</div>
 	<div class="apps" if={ apps.length != 0 }>
 		<div each={ app in apps }>
 			<p><b>{ app.name }</b></p>
diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag
index 03afd72326..cdd58c4c67 100644
--- a/src/web/app/common/tags/signin-history.tag
+++ b/src/web/app/common/tags/signin-history.tag
@@ -1,55 +1,11 @@
 <mk-signin-history>
 	<div class="records" if={ history.length != 0 }>
-		<div each={ history }>
-			<mk-time time={ created_at }/>
-			<header>
-				<virtual if={ success }>%fa:check%</virtual>
-				<virtual if={ !success }>%fa:times%</virtual>
-				<span class="ip">{ ip }</span>
-			</header>
-			<pre><code>{ JSON.stringify(headers, null, '    ') }</code></pre>
-		</div>
+		<mk-signin-record each={ rec in history } rec={ rec }/>
 	</div>
 	<style>
 		:scope
 			display block
 
-			> .records
-				> div
-					padding 16px 0 0 0
-					border-bottom solid 1px #eee
-
-					> header
-
-						> [data-fa]
-							margin-right 8px
-
-							&.check
-								color #0fda82
-
-							&.times
-								color #ff3100
-
-						> .ip
-							display inline-block
-							color #444
-							background #f8f8f8
-
-					> mk-time
-						position absolute
-						top 16px
-						right 0
-						color #777
-
-					> pre
-						overflow auto
-						max-height 100px
-
-						> code
-							white-space pre-wrap
-							word-break break-all
-							color #4a535a
-
 	</style>
 	<script>
 		this.mixin('i');
@@ -84,3 +40,77 @@
 		};
 	</script>
 </mk-signin-history>
+
+<mk-signin-record>
+	<header onclick={ toggle }>
+		<virtual if={ rec.success }>%fa:check%</virtual>
+		<virtual if={ !rec.success }>%fa:times%</virtual>
+		<span class="ip">{ rec.ip }</span>
+		<mk-time time={ rec.created_at }/>
+	</header>
+	<pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
+
+	<style>
+		:scope
+			display block
+			border-bottom solid 1px #eee
+
+			> header
+				display flex
+				padding 8px 0
+				line-height 32px
+				cursor pointer
+
+				> [data-fa]
+					margin-right 8px
+					text-align left
+
+					&.check
+						color #0fda82
+
+					&.times
+						color #ff3100
+
+				> .ip
+					display inline-block
+					text-align left
+					padding 8px
+					line-height 16px
+					font-family monospace
+					font-size 14px
+					color #444
+					background #f8f8f8
+					border-radius 4px
+
+				> mk-time
+					margin-left auto
+					text-align right
+					color #777
+
+			> pre
+				overflow auto
+				margin 0 0 16px 0
+				max-height 100px
+				white-space pre-wrap
+				word-break break-all
+				color #4a535a
+
+	</style>
+
+	<script>
+		import hljs from 'highlight.js';
+
+		this.rec = this.opts.rec;
+		this.show = false;
+
+		this.on('mount', () => {
+			hljs.highlightBlock(this.refs.headers);
+		});
+
+		this.toggle = () => {
+			this.update({
+				show: !this.show
+			});
+		};
+	</script>
+</mk-signin-record>
diff --git a/src/web/app/desktop/style.styl b/src/web/app/desktop/style.styl
index d99e5df2b4..c893e2ed67 100644
--- a/src/web/app/desktop/style.styl
+++ b/src/web/app/desktop/style.styl
@@ -2,6 +2,8 @@
 @import "../reset"
 @import "../../../../node_modules/cropperjs/dist/cropper.css"
 
+@import "./ui"
+
 *::input-placeholder
 	color #D8CBC5
 
@@ -47,66 +49,3 @@ html
 		#wait
 			right auto
 			left 15px
-
-button
-	font-family sans-serif
-
-	*
-		pointer-events none
-
-	&.style-normal
-	&.style-primary
-		display block
-		cursor pointer
-		padding 0 16px
-		margin 0
-		min-width 100px
-		height 40px
-		font-size 1em
-		outline none
-		border-radius 4px
-
-		&:focus
-			&:after
-				content ""
-				pointer-events none
-				position absolute
-				top -5px
-				right -5px
-				bottom -5px
-				left -5px
-				border 2px solid rgba($theme-color, 0.3)
-				border-radius 8px
-
-		&:disabled
-			opacity 0.7
-			cursor default
-
-	&.style-normal
-		color #888
-		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-		border solid 1px #e2e2e2
-
-		&:hover
-			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-			border-color #dcdcdc
-
-		&:active
-			background #ececec
-			border-color #dcdcdc
-
-	&.style-primary
-		color $theme-color-foreground
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-		border solid 1px lighten($theme-color, 15%)
-
-		&:not(:disabled)
-			font-weight bold
-
-		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
-
-		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 2c38f13523..f44cef8503 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -1,47 +1,23 @@
 <mk-settings>
 	<div class="nav">
-		<p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }>%fa:user .fw%アカウント</p>
+		<p class={ active: page == 'profile' } onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
 		<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
 		<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
 		<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p>
 		<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
 		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
-		<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in-alt .fw%ログイン履歴</p>
 		<p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
 		<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
 	</div>
 	<div class="pages">
-		<section class="account" show={ page == 'account' }>
-			<h1>アカウント</h1>
-			<label class="avatar">
-				<p>アバター</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
-				<button class="style-normal" onclick={ avatar }>画像を選択</button>
-			</label>
-			<label>
-				<p>名前</p>
-				<input ref="accountName" type="text" value={ I.name }/>
-			</label>
-			<label>
-				<p>場所</p>
-				<input ref="accountLocation" type="text" value={ I.profile.location }/>
-			</label>
-			<label>
-				<p>自己紹介</p>
-				<textarea ref="accountDescription">{ I.description }</textarea>
-			</label>
-			<label>
-				<p>誕生日</p>
-				<input ref="accountBirthday" type="date" value={ I.profile.birthday }/>
-			</label>
-			<button class="style-primary" onclick={ updateAccount }>保存</button>
+		<section class="profile" show={ page == 'profile' }>
+			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
+			<mk-profile-setting/>
 		</section>
 
 		<section class="web" show={ page == 'web' }>
 			<h1>デザイン</h1>
-			<a href="/i/customize-home">ホームをカスタマイズ</a>
-		</section>
-
-		<section class="web" show={ page == 'web' }>
+			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
 		</section>
 
 		<section class="apps" show={ page == 'apps' }>
@@ -54,11 +30,6 @@
 			<mk-twitter-setting/>
 		</section>
 
-		<section class="signin" show={ page == 'signin' }>
-			<h1>ログイン履歴</h1>
-			<mk-signin-history/>
-		</section>
-
 		<section class="password" show={ page == 'security' }>
 			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
 			<mk-password-setting/>
@@ -69,6 +40,11 @@
 			<mk-2fa-setting/>
 		</section>
 
+		<section class="signin" show={ page == 'security' }>
+			<h1>サインイン履歴</h1>
+			<mk-signin-history/>
+		</section>
+
 		<section class="api" show={ page == 'api' }>
 			<h1>API</h1>
 			<mk-api-info/>
@@ -80,25 +56,6 @@
 			width 100%
 			height 100%
 
-			input:not([type])
-			input[type='text']
-			input[type='password']
-			input[type='email']
-			input[type='date']
-			textarea
-				padding 8px
-				width 100%
-				font-size 16px
-				color #55595c
-				border solid 1px #dadada
-				border-radius 4px
-
-				&:hover
-					border-color #aeaeae
-
-				&:focus
-					border-color #aeaeae
-
 			> .nav
 				flex 0 0 200px
 				width 100%
@@ -133,64 +90,80 @@
 				overflow auto
 
 				> section
-					padding 32px
-
-					//	& + section
-					//		margin-top 16px
+					margin 32px
 
 					h1
 						display block
-						margin 0
+						margin 0 0 1em 0
 						padding 0 0 8px 0
 						font-size 1em
 						color #555
 						border-bottom solid 1px #eee
 
-					label
-						display block
-						margin 16px 0
+					label.checkbox
+						> input
+							position absolute
+							top 0
+							left 0
 
-						&:after
-							content ""
-							display block
-							clear both
+							&:checked + p
+								color $theme-color
 
 						> p
-							margin 0 0 8px 0
+							width calc(100% - 32px)
+							margin 0 0 0 32px
 							font-weight bold
-							color #373a3c
-
-						&.checkbox
-							> input
-								position absolute
-								top 0
-								left 0
-
-								&:checked + p
-									color $theme-color
-
-							> p
-								width calc(100% - 32px)
-								margin 0 0 0 32px
-								font-weight bold
-
-								&:last-child
-									font-weight normal
-									color #999
-
-					&.account
-						> .general
-							> .avatar
-								> img
-									display block
-									float left
-									width 64px
-									height 64px
-									border-radius 4px
-
-								> button
-									float left
-									margin-left 8px
+
+							&:last-child
+								font-weight normal
+								color #999
+
+	</style>
+	<script>
+		this.page = 'profile';
+
+		this.setPage = page => {
+			this.page = page;
+		};
+	</script>
+</mk-settings>
+
+<mk-profile-setting>
+	<label class="avatar ui from group">
+		<p>アバター</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		<button class="ui" onclick={ avatar }>画像を選択</button>
+	</label>
+	<label class="ui from group">
+		<p>名前</p>
+		<input ref="accountName" type="text" value={ I.name } class="ui"/>
+	</label>
+	<label class="ui from group">
+		<p>場所</p>
+		<input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/>
+	</label>
+	<label class="ui from group">
+		<p>自己紹介</p>
+		<textarea ref="accountDescription" class="ui">{ I.description }</textarea>
+	</label>
+	<label class="ui from group">
+		<p>誕生日</p>
+		<input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/>
+	</label>
+	<button class="ui primary" onclick={ updateAccount }>保存</button>
+	<style>
+		:scope
+			display block
+
+			> .avatar
+				> img
+					display inline-block
+					vertical-align top
+					width 64px
+					height 64px
+					border-radius 4px
+
+				> button
+					margin-left 8px
 
 	</style>
 	<script>
@@ -200,12 +173,6 @@
 		this.mixin('i');
 		this.mixin('api');
 
-		this.page = 'account';
-
-		this.setPage = page => {
-			this.page = page;
-		};
-
 		this.avatar = () => {
 			updateAvatar(this.I);
 		};
@@ -221,7 +188,7 @@
 			});
 		};
 	</script>
-</mk-settings>
+</mk-profile-setting>
 
 <mk-api-info>
 	<p>Token:<code>{ I.token }</code></p>
@@ -254,7 +221,7 @@
 </mk-api-info>
 
 <mk-password-setting>
-	<button onclick={ reset }>%i18n:desktop.tags.mk-password-setting.reset%</button>
+	<button onclick={ reset } class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
 	<style>
 		:scope
 			display block
@@ -293,17 +260,18 @@
 
 <mk-2fa-setting>
 	<p>%i18n:desktop.tags.mk-2fa-setting.intro%</p>
-	<p>%i18n:desktop.tags.mk-2fa-setting.caution%</p>
-	<p><button onclick={ register }>%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<div class="ui info warn"><p>%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
+	<p if={ !data }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
 	<div if={ data }>
 		<ol>
 			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
 			<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li>
 			<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
-				<input type="number" ref="token"><button onclick={ submit }>%i18n:desktop.tags.mk-2fa-setting.submit%</button>
+				<input type="number" ref="token" class="ui">
+				<button onclick={ submit } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
 			</li>
-			<li>%i18n:desktop.tags.mk-2fa-setting.info%</li>
 		</ol>
+		<div class="ui info"><p>%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
 	</div>
 	<style>
 		:scope
diff --git a/src/web/app/desktop/ui.styl b/src/web/app/desktop/ui.styl
new file mode 100644
index 0000000000..a98bfb4196
--- /dev/null
+++ b/src/web/app/desktop/ui.styl
@@ -0,0 +1,119 @@
+@import "../app"
+
+button
+	font-family sans-serif
+
+	*
+		pointer-events none
+
+button.ui
+.button.ui
+	display inline-block
+	cursor pointer
+	padding 0 14px
+	margin 0
+	min-width 100px
+	line-height 38px
+	font-size 14px
+	color #888
+	text-decoration none
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+	border-radius 4px
+	outline none
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+	&.primary
+		color $theme-color-foreground
+		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		border solid 1px lighten($theme-color, 15%)
+
+		&:not(:disabled)
+			font-weight bold
+
+		&:hover:not(:disabled)
+			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+			border-color $theme-color
+
+		&:active:not(:disabled)
+			background $theme-color
+			border-color $theme-color
+
+input:not([type]).ui
+input[type='text'].ui
+input[type='password'].ui
+input[type='email'].ui
+input[type='date'].ui
+input[type='number'].ui
+textarea.ui
+	display block
+	padding 10px
+	width 100%
+	height 40px
+	font-family sans-serif
+	font-size 16px
+	color #55595c
+	border solid 1px #dadada
+	border-radius 4px
+
+	&:hover
+		border-color #b0b0b0
+
+	&:focus
+		border-color $theme-color
+
+textarea.ui
+	min-width 100%
+	max-width 100%
+	min-height 64px
+
+.ui.info
+	display block
+	margin 1em 0
+	padding 0 1em
+	font-size 90%
+	color rgba(#000, 0.87)
+	background #f8f8f9
+	border solid 1px rgba(34, 36, 38, 0.22)
+	border-radius 4px
+
+	> p
+		opacity 0.8
+
+	&.warn
+		color #573a08
+		background #FFFAF3
+		border-color #C9BA9B
+
+.ui.from.group
+	display block
+	margin 16px 0
+
+	> p:first-child
+		margin 0 0 6px 0
+		font-size 90%
+		font-weight bold
+		color rgba(#373a3c, 0.9)
-- 
cgit v1.2.3-freya


From 0a29dd598afa34e1027fd438dfe91c49f249763a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 20:31:33 +0900
Subject: :art:

---
 src/web/app/common/tags/authorized-apps.tag | 2 +-
 src/web/app/desktop/tags/settings.tag       | 4 ++--
 src/web/app/desktop/ui.styl                 | 3 +++
 3 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/common/tags/authorized-apps.tag b/src/web/app/common/tags/authorized-apps.tag
index 3f3714332e..0594032de6 100644
--- a/src/web/app/common/tags/authorized-apps.tag
+++ b/src/web/app/common/tags/authorized-apps.tag
@@ -1,6 +1,6 @@
 <mk-authorized-apps>
 	<div class="none ui info" if={ !fetching && apps.length == 0 }>
-		<p>%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
 	</div>
 	<div class="apps" if={ apps.length != 0 }>
 		<div each={ app in apps }>
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index f44cef8503..b6e50cdb42 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -260,7 +260,7 @@
 
 <mk-2fa-setting>
 	<p>%i18n:desktop.tags.mk-2fa-setting.intro%</p>
-	<div class="ui info warn"><p>%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
 	<p if={ !data }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
 	<div if={ data }>
 		<ol>
@@ -271,7 +271,7 @@
 				<button onclick={ submit } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
 			</li>
 		</ol>
-		<div class="ui info"><p>%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
+		<div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
 	</div>
 	<style>
 		:scope
diff --git a/src/web/app/desktop/ui.styl b/src/web/app/desktop/ui.styl
index a98bfb4196..cb98bf06a0 100644
--- a/src/web/app/desktop/ui.styl
+++ b/src/web/app/desktop/ui.styl
@@ -103,6 +103,9 @@ textarea.ui
 	> p
 		opacity 0.8
 
+		> [data-fa]:first-child
+			margin-right 0.25em
+
 	&.warn
 		color #573a08
 		background #FFFAF3
-- 
cgit v1.2.3-freya


From 7792192848ca3442474377403fc99e4e94709750 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 20:45:08 +0900
Subject: :v:

---
 locales/en.yml                        | 13 ++++++++++++-
 locales/ja.yml                        | 11 +++++++++++
 src/web/app/desktop/tags/settings.tag | 16 ++++++++--------
 3 files changed, 31 insertions(+), 9 deletions(-)

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 16f68ab632..b1fe4a50b3 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -288,6 +288,15 @@ desktop:
     mk-ui-header-notifications:
       title: "Notifications"
 
+    mk-profile-setting:
+      avatar: "Avatar"
+      choice-avatar: "Choice an image"
+      name: "Name"
+      location: "Location"
+      description: "Description"
+      birthday: "Birthday"
+      save: "Update profile"
+
     mk-password-setting:
       reset: "Change your password"
       enter-current-password: "Enter the current password"
@@ -297,7 +306,9 @@ desktop:
       changed: "Password updated successfully"
 
     mk-2fa-setting:
-      intro: "If you set up 2-step verification, you will need not only a password at sign-in but also a pre-registered physical device (such as your smartphone), which will improve security."
+      intro: "If you set up 2-step verification, you will need not only a password at sign-in but also a pre-registered physical device (such as your smartphone), which will improve security. "
+      detail: "See details..."
+      url: "https://www.google.com/landing/2step/"
       caution: "As a caveat, security improves, but you can not sign in to Misskey if you lose a registered device, etc."
       register: "Register a device"
       enter-password: "Enter the password"
diff --git a/locales/ja.yml b/locales/ja.yml
index f50e50a5ce..12f5580e2d 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -288,6 +288,15 @@ desktop:
     mk-ui-header-notifications:
       title: "通知"
 
+    mk-profile-setting:
+      avatar: "アバター"
+      choice-avatar: "画像を選択"
+      name: "名前"
+      location: "場所"
+      description: "自己紹介"
+      birthday: "誕生日"
+      save: "保存"
+
     mk-password-setting:
       reset: "パスワードを変更する"
       enter-current-password: "現在のパスワードを入力してください"
@@ -298,6 +307,8 @@ desktop:
 
     mk-2fa-setting:
       intro: "二段階認証を設定すると、サインイン時にパスワードだけでなく、予め登録しておいた物理的なデバイス(例えばあなたのスマートフォンなど)も必要になり、よりセキュリティが向上します。"
+      detail: "詳細..."
+      url: "https://www.google.co.jp/intl/ja/landing/2step/"
       caution: "登録したデバイスを紛失するなどした場合、Misskeyにサインインできなくなりますのでご注意ください。"
       register: "デバイスを登録する"
       enter-password: "パスワードを入力してください"
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index b6e50cdb42..63458baa2c 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -130,26 +130,26 @@
 
 <mk-profile-setting>
 	<label class="avatar ui from group">
-		<p>アバター</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
-		<button class="ui" onclick={ avatar }>画像を選択</button>
+		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		<button class="ui" onclick={ avatar }>%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
 	</label>
 	<label class="ui from group">
-		<p>名前</p>
+		<p>%i18n:desktop.tags.mk-profile-setting.name%</p>
 		<input ref="accountName" type="text" value={ I.name } class="ui"/>
 	</label>
 	<label class="ui from group">
-		<p>場所</p>
+		<p>%i18n:desktop.tags.mk-profile-setting.location%</p>
 		<input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/>
 	</label>
 	<label class="ui from group">
-		<p>自己紹介</p>
+		<p>%i18n:desktop.tags.mk-profile-setting.description%</p>
 		<textarea ref="accountDescription" class="ui">{ I.description }</textarea>
 	</label>
 	<label class="ui from group">
-		<p>誕生日</p>
+		<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p>
 		<input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/>
 	</label>
-	<button class="ui primary" onclick={ updateAccount }>保存</button>
+	<button class="ui primary" onclick={ updateAccount }>%i18n:desktop.tags.mk-profile-setting.save%</button>
 	<style>
 		:scope
 			display block
@@ -259,7 +259,7 @@
 </mk-password-setting>
 
 <mk-2fa-setting>
-	<p>%i18n:desktop.tags.mk-2fa-setting.intro%</p>
+	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
 	<p if={ !data }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
 	<div if={ data }>
-- 
cgit v1.2.3-freya


From 42aef0abe0a98e46acb0e9278dbd4347b79a7b53 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 23:03:34 +0900
Subject: :v:

---
 locales/en.yml                        |  1 +
 locales/ja.yml                        |  1 +
 src/web/app/desktop/tags/settings.tag | 68 ++++++++++++++++++++++++++++++++++-
 3 files changed, 69 insertions(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index b1fe4a50b3..4dadcb8065 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -354,6 +354,7 @@ desktop:
 
     mk-settings:
       profile: "Profile"
+      drive: "Drive"
       security: "Security"
       password: "Password"
       2fa: "Two-factor authentication"
diff --git a/locales/ja.yml b/locales/ja.yml
index 12f5580e2d..d38ae682ed 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -354,6 +354,7 @@ desktop:
 
     mk-settings:
       profile: "プロフィール"
+      drive: "ドライブ"
       security: "セキュリティ"
       password: "パスワード"
       2fa: "二段階認証"
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 63458baa2c..9f71da6876 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -3,7 +3,7 @@
 		<p class={ active: page == 'profile' } onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
 		<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
 		<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
-		<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p>
+		<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
 		<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
 		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
 		<p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
@@ -20,6 +20,11 @@
 			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
 		</section>
 
+		<section class="drive" show={ page == 'drive' }>
+			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
+			<mk-drive-setting/>
+		</section>
+
 		<section class="apps" show={ page == 'apps' }>
 			<h1>アプリケーション</h1>
 			<mk-authorized-apps/>
@@ -308,3 +313,64 @@
 		};
 	</script>
 </mk-2fa-setting>
+
+<mk-drive-setting>
+	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
+		<circle
+			riot-r={ r }
+			cx="50%" cy="50%"
+			fill="none"
+			stroke-width="0.1"
+			stroke="rgba(0, 0, 0, 0.05)"/>
+		<circle
+			riot-r={ r }
+			cx="50%" cy="50%"
+			riot-stroke-dasharray={ Math.PI * (r * 2) }
+			riot-stroke-dashoffset={ strokeDashoffset }
+			fill="none"
+			stroke-width="0.1"
+			riot-stroke={ color }/>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle">{ (usageP * 100).toFixed(0) }%</text>
+	</svg>
+
+	<style>
+		:scope
+			display block
+			color #4a535a
+
+			> svg
+				display block
+				height 128px
+
+				> circle
+					transform-origin center
+					transform rotate(-90deg)
+					transition stroke-dashoffset 0.5s ease
+
+				> text
+					font-size 0.15px
+					fill rgba(0, 0, 0, 0.6)
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.r = 0.4;
+
+		this.on('mount', () => {
+			this.api('drive').then(info => {
+				const usageP = info.usage / info.capacity * 100;
+				const color = `hsl(${180 - (usageP * 180)}, 80%, 70%)`;
+				const strokeDashoffset = (1 - usageP) * (Math.PI * (this.r * 2));
+
+				this.update({
+					color,
+					strokeDashoffset,
+					usageP,
+					usage: info.usage,
+					capacity: info.capacity
+				});
+			});
+		});
+	</script>
+</mk-drive-setting>
-- 
cgit v1.2.3-freya


From d0cfe112e11c52acaeebb42c3229a37af23c846a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 02:45:32 +0900
Subject: #973

---
 locales/en.yml                        |  3 +++
 locales/ja.yml                        |  3 +++
 src/api/endpoints.ts                  | 17 +++++++++++++----
 src/api/endpoints/i/2fa/unregister.ts | 28 ++++++++++++++++++++++++++++
 src/web/app/desktop/tags/settings.tag | 21 ++++++++++++++++++++-
 5 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/api/endpoints/i/2fa/unregister.ts

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 4dadcb8065..8392e170c4 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -311,6 +311,9 @@ desktop:
       url: "https://www.google.com/landing/2step/"
       caution: "As a caveat, security improves, but you can not sign in to Misskey if you lose a registered device, etc."
       register: "Register a device"
+      already-registered: "The setting has already been completed."
+      unregister: "Disable"
+      unregistered: "Two-step authentication has been disabled."
       enter-password: "Enter the password"
       authenticator: "First, you need install Google Authenticator to your device:"
       howtoinstall: "How to install"
diff --git a/locales/ja.yml b/locales/ja.yml
index d38ae682ed..f9d41d9092 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -311,6 +311,9 @@ desktop:
       url: "https://www.google.co.jp/intl/ja/landing/2step/"
       caution: "登録したデバイスを紛失するなどした場合、Misskeyにサインインできなくなりますのでご注意ください。"
       register: "デバイスを登録する"
+      already-registered: "既に設定は完了しています。"
+      unregister: "設定を解除"
+      unregistered: "二段階認証が無効になりました。"
       enter-password: "パスワードを入力してください"
       authenticator: "まず、Google Authenticatorをお使いのデバイスにインストールします:"
       howtoinstall: "インストール方法はこちら"
diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index 49871c0ce3..1138df193b 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -157,11 +157,18 @@ const endpoints: Endpoint[] = [
 	},
 	{
 		name: 'i/2fa/register',
-		withCredential: true
+		withCredential: true,
+		secure: true
+	},
+	{
+		name: 'i/2fa/unregister',
+		withCredential: true,
+		secure: true
 	},
 	{
 		name: 'i/2fa/done',
-		withCredential: true
+		withCredential: true,
+		secure: true
 	},
 	{
 		name: 'i/update',
@@ -179,11 +186,13 @@ const endpoints: Endpoint[] = [
 	},
 	{
 		name: 'i/change_password',
-		withCredential: true
+		withCredential: true,
+		secure: true
 	},
 	{
 		name: 'i/regenerate_token',
-		withCredential: true
+		withCredential: true,
+		secure: true
 	},
 	{
 		name: 'i/pin',
diff --git a/src/api/endpoints/i/2fa/unregister.ts b/src/api/endpoints/i/2fa/unregister.ts
new file mode 100644
index 0000000000..6bee6a26f2
--- /dev/null
+++ b/src/api/endpoints/i/2fa/unregister.ts
@@ -0,0 +1,28 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import * as bcrypt from 'bcryptjs';
+import User from '../../../models/user';
+
+module.exports = async (params, user) => new Promise(async (res, rej) => {
+	// Get 'password' parameter
+	const [password, passwordErr] = $(params.password).string().$;
+	if (passwordErr) return rej('invalid password param');
+
+	// Compare password
+	const same = await bcrypt.compare(password, user.password);
+
+	if (!same) {
+		return rej('incorrect password');
+	}
+
+	await User.update(user._id, {
+		$set: {
+			two_factor_secret: null,
+			two_factor_enabled: false
+		}
+	});
+
+	res();
+});
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 9f71da6876..3fa1f50fce 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -266,7 +266,11 @@
 <mk-2fa-setting>
 	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
-	<p if={ !data }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<p if={ !data && !I.two_factor_enabled }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<virtual if={ I.two_factor_enabled }>
+		<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
+		<button onclick={ unregister } class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
+	</virtual>
 	<div if={ data }>
 		<ol>
 			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
@@ -288,6 +292,7 @@
 		import passwordDialog from '../scripts/password-dialog';
 		import notify from '../scripts/notify';
 
+		this.mixin('i');
 		this.mixin('api');
 
 		this.register = () => {
@@ -302,11 +307,25 @@
 			});
 		};
 
+		this.unregister = () => {
+			passwordDialog('%i18n:desktop.tags.mk-2fa-setting.enter-password%', password => {
+				this.api('i/2fa/unregister', {
+					password: password
+				}).then(data => {
+					notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%');
+					this.I.two_factor_enabled = false;
+					this.I.update();
+				});
+			});
+		};
+
 		this.submit = () => {
 			this.api('i/2fa/done', {
 				token: this.refs.token.value
 			}).then(() => {
 				notify('%i18n:desktop.tags.mk-2fa-setting.success%');
+				this.I.two_factor_enabled = true;
+				this.I.update();
 			}).catch(() => {
 				notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
 			});
-- 
cgit v1.2.3-freya


From c4369a3489c8501e18c6840a294f663cf9e9c820 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 02:48:22 +0900
Subject: Fix bug

---
 src/web/app/desktop/tags/settings.tag | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 3fa1f50fce..f7ecfe3e8a 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -378,7 +378,7 @@
 
 		this.on('mount', () => {
 			this.api('drive').then(info => {
-				const usageP = info.usage / info.capacity * 100;
+				const usageP = info.usage / info.capacity;
 				const color = `hsl(${180 - (usageP * 180)}, 80%, 70%)`;
 				const strokeDashoffset = (1 - usageP) * (Math.PI * (this.r * 2));
 
-- 
cgit v1.2.3-freya


From 386d915d8953dc45da013471ac8dbb5f3f7ce9b6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 02:57:23 +0900
Subject: :art:

---
 src/web/app/desktop/tags/ui.tag          | 3 +++
 src/web/app/mobile/tags/drive/folder.tag | 3 +++
 2 files changed, 6 insertions(+)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 052568062a..bc0a937a53 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -146,6 +146,9 @@
 					color #9eaba8
 					pointer-events none
 
+					> *
+						vertical-align middle
+
 				> input
 					user-select text
 					cursor auto
diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
index da55cf474e..c1b44dcb2c 100644
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ b/src/web/app/mobile/tags/drive/folder.tag
@@ -39,6 +39,9 @@
 						width 1em
 						height 1em
 
+						> *
+							vertical-align initial
+
 	</style>
 	<script>
 		this.browser = this.parent;
-- 
cgit v1.2.3-freya


From d6cc08b1350db0c873c9f76d2f89651a6a717ba5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 03:09:30 +0900
Subject: :art:

---
 src/web/app/desktop/tags/select-file-from-drive-window.tag | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/select-file-from-drive-window.tag b/src/web/app/desktop/tags/select-file-from-drive-window.tag
index 17cc607988..c660a2fe90 100644
--- a/src/web/app/desktop/tags/select-file-from-drive-window.tag
+++ b/src/web/app/desktop/tags/select-file-from-drive-window.tag
@@ -33,7 +33,7 @@
 						height 72px
 						background lighten($theme-color, 95%)
 
-						.upload
+						> .upload
 							display inline-block
 							position absolute
 							top 8px
@@ -72,8 +72,8 @@
 									border 2px solid rgba($theme-color, 0.3)
 									border-radius 8px
 
-						.ok
-						.cancel
+						> .ok
+						> .cancel
 							display block
 							position absolute
 							bottom 16px
@@ -102,7 +102,7 @@
 								opacity 0.7
 								cursor default
 
-						.ok
+						> .ok
 							right 16px
 							color $theme-color-foreground
 							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
@@ -119,7 +119,7 @@
 								background $theme-color
 								border-color $theme-color
 
-						.cancel
+						> .cancel
 							right 148px
 							color #888
 							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-- 
cgit v1.2.3-freya


From c1a676c3ac661a3505c393ba09fc6df7b6743235 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 03:33:28 +0900
Subject: :art:

---
 src/web/app/mobile/tags/drive/folder.tag | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
index c1b44dcb2c..6125e0b254 100644
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ b/src/web/app/mobile/tags/drive/folder.tag
@@ -34,13 +34,10 @@
 						position absolute
 						top 0
 						bottom 0
-						right 8px
-						margin auto 0 auto 0
-						width 1em
-						height 1em
+						right 20px
 
 						> *
-							vertical-align initial
+							height 100%
 
 	</style>
 	<script>
-- 
cgit v1.2.3-freya


From e51bd95a8d5e7bd006ab2f3db67b9c3cc2cab7cf Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 10 Dec 2017 20:39:26 +0900
Subject: channel以外mk-images-viewer化・mk-images-viewer強化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/app/desktop/tags/images-viewer.tag   | 49 ++++++++++++++++++++--------
 src/web/app/desktop/tags/post-detail-sub.tag |  6 ++--
 src/web/app/desktop/tags/post-detail.tag     |  7 +---
 3 files changed, 38 insertions(+), 24 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
index 44a61cb747..3edd1300b2 100644
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ b/src/web/app/desktop/tags/images-viewer.tag
@@ -1,32 +1,46 @@
 <mk-images-viewer>
-	<div class="image" ref="view" onmousemove={ mousemove } style={ 'background-image: url(' + image.url + '?thumbnail' } onclick={ click }><img src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
+	<virtual each={ image in images }>
+		<mk-images-viewer-image ref="wrap" image={ image } images={ images }/>
+	</virtual>
 	<style>
 		:scope
-			display block
+			display grid
 			overflow hidden
 			border-radius 4px
+			grid-gap .25em
 
-			> .image
+			> div
 				cursor zoom-in
+				overflow hidden
+				background-position center
 
 				> img
-					display block
-					max-height 256px
-					max-width 100%
-					margin 0 auto
-
-				&:hover
-					> img
-						visibility hidden
+					visibility hidden
+					max-width: 100%
+					max-height: 256px
 
 				&:not(:hover)
-					background-image none !important
+					background-size cover
 
+				&:nth-child(1):nth-last-child(3)
+					grid-row 1 / 3
 	</style>
 	<script>
 		this.images = this.opts.images;
-		this.image = this.images[0];
 
+		this.on('mount', () => {
+			if(this.images.length >= 3) this.refs.wrap.style.gridAutoRows = "9em";
+			if(this.images.length == 2) this.refs.wrap.style.gridAutoRows = "12em";
+			if(this.images.length == 1) this.refs.wrap.style.gridAutoRows = "256px";
+			if(this.images.length == 4 || this.images.length == 2) this.refs.wrap.style.gridTemplateColumns = "repeat(2, 1fr)";
+			if(this.images.length == 3) this.refs.wrap.style.gridTemplateColumns = "65% 1fr";
+		})
+	</script>
+</mk-images-viewer>
+
+<mk-images-viewer-image>
+	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail?size=512' } onclick={ click }><img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
+	<script>
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
 			const mouseX = e.clientX - rect.left;
@@ -34,12 +48,19 @@
 			const xp = mouseX / this.refs.view.offsetWidth * 100;
 			const yp = mouseY / this.refs.view.offsetHeight * 100;
 			this.refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
 		};
 
+		this.mouseleave = () => {
+			this.refs.view.style.backgroundPosition = "";
+		}
+
 		this.click = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
 				image: this.image
 			});
 		};
+
+		this.image = this.opts.image;
 	</script>
-</mk-images-viewer>
+</mk-images-viewer-image>
\ No newline at end of file
diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag
index e22386df91..99899929d6 100644
--- a/src/web/app/desktop/tags/post-detail-sub.tag
+++ b/src/web/app/desktop/tags/post-detail-sub.tag
@@ -9,7 +9,7 @@
 				<span class="username">@{ post.user.username }</span>
 			</div>
 			<div class="right">
-				<a class="time" href={ '/' + this.post.user.username + '/' + this.post.id }>
+				<a class="time" href={ '/' + post.user.username + '/' + post.id }>
 					<mk-time time={ post.created_at }/>
 				</a>
 			</div>
@@ -17,9 +17,7 @@
 		<div class="body">
 			<div class="text" ref="text"></div>
 			<div class="media" if={ post.media }>
-				<virtual each={ file in post.media }>
-					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
-				</virtual>
+				<mk-images-viewer images={ post.media }/>
 			</div>
 		</div>
 	</div>
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index 37f90a6ffb..23f7a41985 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -37,7 +37,7 @@
 			<div class="body">
 				<div class="text" ref="text"></div>
 				<div class="media" if={ p.media }>
-					<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
+					<mk-images-viewer images={ p.media }/>
 				</div>
 				<mk-poll if={ p.poll } post={ p }/>
 			</div>
@@ -208,11 +208,6 @@
 							> mk-url-preview
 								margin-top 8px
 
-						> .media
-							> img
-								display block
-								max-width 100%
-
 					> footer
 						font-size 1.2em
 
-- 
cgit v1.2.3-freya


From 4da6fafe43b61c191e193b6bef985ae2c30e0f3c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 10 Dec 2017 20:49:12 +0900
Subject: URL修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/app/desktop/tags/images-viewer.tag | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
index 3edd1300b2..9fd6b8de92 100644
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ b/src/web/app/desktop/tags/images-viewer.tag
@@ -39,7 +39,7 @@
 </mk-images-viewer>
 
 <mk-images-viewer-image>
-	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail?size=512' } onclick={ click }><img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
+	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click }><img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
 	<script>
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
-- 
cgit v1.2.3-freya


From 3cd0c45176b85870c345c32e5ba19f71a63309c2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 10 Dec 2017 21:01:25 +0900
Subject: 推測でCSSを動かす
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/app/desktop/tags/images-viewer.tag   | 1 +
 src/web/app/desktop/tags/post-detail-sub.tag | 5 -----
 src/web/app/desktop/tags/timeline.tag        | 5 -----
 3 files changed, 1 insertion(+), 10 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
index 9fd6b8de92..0369ea9f66 100644
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ b/src/web/app/desktop/tags/images-viewer.tag
@@ -15,6 +15,7 @@
 				background-position center
 
 				> img
+					display block
 					visibility hidden
 					max-width: 100%
 					max-height: 256px
diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag
index 99899929d6..ab45b55234 100644
--- a/src/web/app/desktop/tags/post-detail-sub.tag
+++ b/src/web/app/desktop/tags/post-detail-sub.tag
@@ -105,11 +105,6 @@
 						> mk-url-preview
 							margin-top 8px
 
-					> .media
-						> img
-							display block
-							max-width 100%
-
 	</style>
 	<script>
 		import compile from '../../common/scripts/text-compiler';
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
index 08e658a3c6..77e4a573b1 100644
--- a/src/web/app/desktop/tags/timeline.tag
+++ b/src/web/app/desktop/tags/timeline.tag
@@ -357,11 +357,6 @@
 								background $theme-color
 								border-radius 4px
 
-						> .media
-							> img
-								display block
-								max-width 100%
-
 						> mk-poll
 							font-size 80%
 
-- 
cgit v1.2.3-freya


From 6bf5a4edffc8eac26d10f0880317618e1861cc71 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 21:57:17 +0900
Subject: :v:

---
 src/web/app/desktop/tags/images-viewer.tag | 79 ++++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 21 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
index 0369ea9f66..1ad382dda8 100644
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ b/src/web/app/desktop/tags/images-viewer.tag
@@ -1,17 +1,71 @@
 <mk-images-viewer>
 	<virtual each={ image in images }>
-		<mk-images-viewer-image ref="wrap" image={ image } images={ images }/>
+		<mk-images-viewer-image image={ image } images={ images }/>
 	</virtual>
 	<style>
 		:scope
 			display grid
+			grid-gap .25em
+	</style>
+	<script>
+		this.images = this.opts.images;
+
+		this.on('mount', () => {
+			if (this.images.length == 1) {
+				this.root.style.gridTemplateRows = '256px';
+
+				this.tags['mk-images-viewer-image'].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-viewer-image'].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 2) {
+				this.root.style.gridTemplateColumns = '50% 50%';
+				this.root.style.gridTemplateRows = '256px';
+
+				this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 3) {
+				this.root.style.gridTemplateColumns = '70% 30%';
+				this.root.style.gridTemplateRows = '128px 128px';
+
+				this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 3';
+				this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-viewer-image'][2].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-viewer-image'][2].root.style.gridRow = '2 / 3';
+			} else if (this.images.length == 4) {
+				this.root.style.gridTemplateColumns = '50% 50%';
+				this.root.style.gridTemplateRows = '128px 128px';
+
+				this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-viewer-image'][2].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-viewer-image'][2].root.style.gridRow = '2 / 3';
+				this.tags['mk-images-viewer-image'][3].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-viewer-image'][3].root.style.gridRow = '2 / 3';
+			}
+		});
+	</script>
+</mk-images-viewer>
+
+<mk-images-viewer-image>
+	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click }>
+		<img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/>
+	</div>
+	<style>
+		:scope
+			display block
 			overflow hidden
 			border-radius 4px
-			grid-gap .25em
 
 			> div
 				cursor zoom-in
 				overflow hidden
+				width 100%
+				height 100%
 				background-position center
 
 				> img
@@ -23,24 +77,7 @@
 				&:not(:hover)
 					background-size cover
 
-				&:nth-child(1):nth-last-child(3)
-					grid-row 1 / 3
 	</style>
-	<script>
-		this.images = this.opts.images;
-
-		this.on('mount', () => {
-			if(this.images.length >= 3) this.refs.wrap.style.gridAutoRows = "9em";
-			if(this.images.length == 2) this.refs.wrap.style.gridAutoRows = "12em";
-			if(this.images.length == 1) this.refs.wrap.style.gridAutoRows = "256px";
-			if(this.images.length == 4 || this.images.length == 2) this.refs.wrap.style.gridTemplateColumns = "repeat(2, 1fr)";
-			if(this.images.length == 3) this.refs.wrap.style.gridTemplateColumns = "65% 1fr";
-		})
-	</script>
-</mk-images-viewer>
-
-<mk-images-viewer-image>
-	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click }><img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
 	<script>
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
@@ -54,7 +91,7 @@
 
 		this.mouseleave = () => {
 			this.refs.view.style.backgroundPosition = "";
-		}
+		};
 
 		this.click = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
@@ -64,4 +101,4 @@
 
 		this.image = this.opts.image;
 	</script>
-</mk-images-viewer-image>
\ No newline at end of file
+</mk-images-viewer-image>
-- 
cgit v1.2.3-freya


From 1a015457fa251c1f873c8eb81400047d28500c18 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 22:32:09 +0900
Subject: :art:

---
 src/web/app/desktop/tags/images-viewer.tag    | 104 --------------------------
 src/web/app/desktop/tags/images.tag           | 100 +++++++++++++++++++++++++
 src/web/app/desktop/tags/index.ts             |   2 +-
 src/web/app/desktop/tags/post-detail-sub.tag  |   2 +-
 src/web/app/desktop/tags/post-detail.tag      |   2 +-
 src/web/app/desktop/tags/sub-post-content.tag |   2 +-
 src/web/app/desktop/tags/timeline.tag         |   2 +-
 src/web/app/mobile/tags/images-viewer.tag     |  26 -------
 src/web/app/mobile/tags/images.tag            |  78 +++++++++++++++++++
 src/web/app/mobile/tags/index.ts              |   2 +-
 src/web/app/mobile/tags/post-detail.tag       |   2 +-
 src/web/app/mobile/tags/sub-post-content.tag  |   2 +-
 src/web/app/mobile/tags/timeline.tag          |   2 +-
 13 files changed, 187 insertions(+), 139 deletions(-)
 delete mode 100644 src/web/app/desktop/tags/images-viewer.tag
 create mode 100644 src/web/app/desktop/tags/images.tag
 delete mode 100644 src/web/app/mobile/tags/images-viewer.tag
 create mode 100644 src/web/app/mobile/tags/images.tag

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
deleted file mode 100644
index 1ad382dda8..0000000000
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ /dev/null
@@ -1,104 +0,0 @@
-<mk-images-viewer>
-	<virtual each={ image in images }>
-		<mk-images-viewer-image image={ image } images={ images }/>
-	</virtual>
-	<style>
-		:scope
-			display grid
-			grid-gap .25em
-	</style>
-	<script>
-		this.images = this.opts.images;
-
-		this.on('mount', () => {
-			if (this.images.length == 1) {
-				this.root.style.gridTemplateRows = '256px';
-
-				this.tags['mk-images-viewer-image'].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-viewer-image'].root.style.gridRow = '1 / 2';
-			} else if (this.images.length == 2) {
-				this.root.style.gridTemplateColumns = '50% 50%';
-				this.root.style.gridTemplateRows = '256px';
-
-				this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
-			} else if (this.images.length == 3) {
-				this.root.style.gridTemplateColumns = '70% 30%';
-				this.root.style.gridTemplateRows = '128px 128px';
-
-				this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 3';
-				this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-viewer-image'][2].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-viewer-image'][2].root.style.gridRow = '2 / 3';
-			} else if (this.images.length == 4) {
-				this.root.style.gridTemplateColumns = '50% 50%';
-				this.root.style.gridTemplateRows = '128px 128px';
-
-				this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
-				this.tags['mk-images-viewer-image'][2].root.style.gridColumn = '1 / 2';
-				this.tags['mk-images-viewer-image'][2].root.style.gridRow = '2 / 3';
-				this.tags['mk-images-viewer-image'][3].root.style.gridColumn = '2 / 3';
-				this.tags['mk-images-viewer-image'][3].root.style.gridRow = '2 / 3';
-			}
-		});
-	</script>
-</mk-images-viewer>
-
-<mk-images-viewer-image>
-	<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click }>
-		<img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/>
-	</div>
-	<style>
-		:scope
-			display block
-			overflow hidden
-			border-radius 4px
-
-			> div
-				cursor zoom-in
-				overflow hidden
-				width 100%
-				height 100%
-				background-position center
-
-				> img
-					display block
-					visibility hidden
-					max-width: 100%
-					max-height: 256px
-
-				&:not(:hover)
-					background-size cover
-
-	</style>
-	<script>
-		this.mousemove = e => {
-			const rect = this.refs.view.getBoundingClientRect();
-			const mouseX = e.clientX - rect.left;
-			const mouseY = e.clientY - rect.top;
-			const xp = mouseX / this.refs.view.offsetWidth * 100;
-			const yp = mouseY / this.refs.view.offsetHeight * 100;
-			this.refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
-			this.refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
-		};
-
-		this.mouseleave = () => {
-			this.refs.view.style.backgroundPosition = "";
-		};
-
-		this.click = () => {
-			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
-				image: this.image
-			});
-		};
-
-		this.image = this.opts.image;
-	</script>
-</mk-images-viewer-image>
diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
new file mode 100644
index 0000000000..ce67d26a9f
--- /dev/null
+++ b/src/web/app/desktop/tags/images.tag
@@ -0,0 +1,100 @@
+<mk-images>
+	<virtual each={ image in images }>
+		<mk-images-image image={ image }/>
+	</virtual>
+	<style>
+		:scope
+			display grid
+			grid-gap 4px
+			height 256px
+	</style>
+	<script>
+		this.images = this.opts.images;
+
+		this.on('mount', () => {
+			if (this.images.length == 1) {
+				this.root.style.gridTemplateRows = '1fr';
+
+				this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 2) {
+				this.root.style.gridTemplateColumns = '1fr 1fr';
+				this.root.style.gridTemplateRows = '1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 3) {
+				this.root.style.gridTemplateColumns = '1fr 0.5fr';
+				this.root.style.gridTemplateRows = '1fr 1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+			} else if (this.images.length == 4) {
+				this.root.style.gridTemplateColumns = '1fr 1fr';
+				this.root.style.gridTemplateRows = '1fr 1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+				this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
+			}
+		});
+	</script>
+</mk-images>
+
+<mk-images-image>
+	<a ref="view" href={ image.url } onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click } title={ image.name }></a>
+	<style>
+		:scope
+			display block
+			overflow hidden
+			border-radius 4px
+
+			> a
+				display block
+				cursor zoom-in
+				overflow hidden
+				width 100%
+				height 100%
+				background-position center
+
+				&:not(:hover)
+					background-size cover
+
+	</style>
+	<script>
+		this.image = this.opts.image;
+
+		this.mousemove = e => {
+			const rect = this.refs.view.getBoundingClientRect();
+			const mouseX = e.clientX - rect.left;
+			const mouseY = e.clientY - rect.top;
+			const xp = mouseX / this.refs.view.offsetWidth * 100;
+			const yp = mouseY / this.refs.view.offsetHeight * 100;
+			this.refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
+		};
+
+		this.mouseleave = () => {
+			this.refs.view.style.backgroundPosition = '';
+		};
+
+		this.click = ev => {
+			ev.preventDefault();
+			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
+				image: this.image
+			});
+			return false;
+		};
+	</script>
+</mk-images-image>
diff --git a/src/web/app/desktop/tags/index.ts b/src/web/app/desktop/tags/index.ts
index 3ec1d108aa..30a13b584d 100644
--- a/src/web/app/desktop/tags/index.ts
+++ b/src/web/app/desktop/tags/index.ts
@@ -76,7 +76,7 @@ require('./set-avatar-suggestion.tag');
 require('./set-banner-suggestion.tag');
 require('./repost-form.tag');
 require('./sub-post-content.tag');
-require('./images-viewer.tag');
+require('./images.tag');
 require('./image-dialog.tag');
 require('./donation.tag');
 require('./users-list.tag');
diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag
index ab45b55234..cccd85c474 100644
--- a/src/web/app/desktop/tags/post-detail-sub.tag
+++ b/src/web/app/desktop/tags/post-detail-sub.tag
@@ -17,7 +17,7 @@
 		<div class="body">
 			<div class="text" ref="text"></div>
 			<div class="media" if={ post.media }>
-				<mk-images-viewer images={ post.media }/>
+				<mk-images images={ post.media }/>
 			</div>
 		</div>
 	</div>
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index 23f7a41985..47c71a6c12 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -37,7 +37,7 @@
 			<div class="body">
 				<div class="text" ref="text"></div>
 				<div class="media" if={ p.media }>
-					<mk-images-viewer images={ p.media }/>
+					<mk-images images={ p.media }/>
 				</div>
 				<mk-poll if={ p.poll } post={ p }/>
 			</div>
diff --git a/src/web/app/desktop/tags/sub-post-content.tag b/src/web/app/desktop/tags/sub-post-content.tag
index 8989ff1c5b..1a81b545b6 100644
--- a/src/web/app/desktop/tags/sub-post-content.tag
+++ b/src/web/app/desktop/tags/sub-post-content.tag
@@ -8,7 +8,7 @@
 	</div>
 	<details if={ post.media }>
 		<summary>({ post.media.length }つのメディア)</summary>
-		<mk-images-viewer images={ post.media }/>
+		<mk-images images={ post.media }/>
 	</details>
 	<details if={ post.poll }>
 		<summary>投票</summary>
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
index 77e4a573b1..ed77a9e608 100644
--- a/src/web/app/desktop/tags/timeline.tag
+++ b/src/web/app/desktop/tags/timeline.tag
@@ -120,7 +120,7 @@
 					<a class="quote" if={ p.repost != null }>RP:</a>
 				</div>
 				<div class="media" if={ p.media }>
-					<mk-images-viewer images={ p.media }/>
+					<mk-images images={ p.media }/>
 				</div>
 				<mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
 				<div class="repost" if={ p.repost }>%fa:quote-right -flip-h%
diff --git a/src/web/app/mobile/tags/images-viewer.tag b/src/web/app/mobile/tags/images-viewer.tag
deleted file mode 100644
index 8ef4a50be0..0000000000
--- a/src/web/app/mobile/tags/images-viewer.tag
+++ /dev/null
@@ -1,26 +0,0 @@
-<mk-images-viewer>
-	<div class="image" ref="view" onclick={ click }><img ref="img" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
-	<style>
-		:scope
-			display block
-			overflow hidden
-			border-radius 4px
-
-			> .image
-
-				> img
-					display block
-					max-height 256px
-					max-width 100%
-					margin 0 auto
-
-	</style>
-	<script>
-		this.images = this.opts.images;
-		this.image = this.images[0];
-
-		this.click = () => {
-			window.open(this.image.url);
-		};
-	</script>
-</mk-images-viewer>
diff --git a/src/web/app/mobile/tags/images.tag b/src/web/app/mobile/tags/images.tag
new file mode 100644
index 0000000000..aaa80e4fd1
--- /dev/null
+++ b/src/web/app/mobile/tags/images.tag
@@ -0,0 +1,78 @@
+<mk-images>
+	<virtual each={ image in images }>
+		<mk-images-image image={ image }/>
+	</virtual>
+	<style>
+		:scope
+			display grid
+			grid-gap 4px
+			height 256px
+
+			@media (max-width 500px)
+				height 192px
+	</style>
+	<script>
+		this.images = this.opts.images;
+
+		this.on('mount', () => {
+			if (this.images.length == 1) {
+				this.root.style.gridTemplateRows = '1fr';
+
+				this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 2) {
+				this.root.style.gridTemplateColumns = '1fr 1fr';
+				this.root.style.gridTemplateRows = '1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+			} else if (this.images.length == 3) {
+				this.root.style.gridTemplateColumns = '1fr 0.5fr';
+				this.root.style.gridTemplateRows = '1fr 1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+			} else if (this.images.length == 4) {
+				this.root.style.gridTemplateColumns = '1fr 1fr';
+				this.root.style.gridTemplateRows = '1fr 1fr';
+
+				this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
+				this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+				this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
+				this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
+			}
+		});
+	</script>
+</mk-images>
+
+<mk-images-image>
+	<a ref="view" href={ image.url } target="_blank" style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } title={ image.name }></a>
+	<style>
+		:scope
+			display block
+			overflow hidden
+			border-radius 4px
+
+			> a
+				display block
+				overflow hidden
+				width 100%
+				height 100%
+				background-position center
+				background-size cover
+
+	</style>
+	<script>
+		this.image = this.opts.image;
+	</script>
+</mk-images-image>
diff --git a/src/web/app/mobile/tags/index.ts b/src/web/app/mobile/tags/index.ts
index 19952c20cd..fd5952ea13 100644
--- a/src/web/app/mobile/tags/index.ts
+++ b/src/web/app/mobile/tags/index.ts
@@ -25,7 +25,7 @@ require('./home-timeline.tag');
 require('./timeline.tag');
 require('./post-preview.tag');
 require('./sub-post-content.tag');
-require('./images-viewer.tag');
+require('./images.tag');
 require('./drive.tag');
 require('./drive-selector.tag');
 require('./drive-folder-selector.tag');
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 9f212a2496..1816d1bf93 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -34,7 +34,7 @@
 		<div class="body">
 			<div class="text" ref="text"></div>
 			<div class="media" if={ p.media }>
-				<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
+				<mk-images images={ p.media }/>
 			</div>
 			<mk-poll if={ p.poll } post={ p }/>
 		</div>
diff --git a/src/web/app/mobile/tags/sub-post-content.tag b/src/web/app/mobile/tags/sub-post-content.tag
index 9436b6c1d7..adeb84dea0 100644
--- a/src/web/app/mobile/tags/sub-post-content.tag
+++ b/src/web/app/mobile/tags/sub-post-content.tag
@@ -2,7 +2,7 @@
 	<div class="body"><a class="reply" if={ post.reply_id }>%fa:reply%</a><span ref="text"></span><a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a></div>
 	<details if={ post.media }>
 		<summary>({ post.media.length }個のメディア)</summary>
-		<mk-images-viewer images={ post.media }/>
+		<mk-images images={ post.media }/>
 	</details>
 	<details if={ post.poll }>
 		<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>
diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag
index 19f90a1c11..9e85f97da3 100644
--- a/src/web/app/mobile/tags/timeline.tag
+++ b/src/web/app/mobile/tags/timeline.tag
@@ -172,7 +172,7 @@
 					<a class="quote" if={ p.repost != null }>RP:</a>
 				</div>
 				<div class="media" if={ p.media }>
-					<mk-images-viewer images={ p.media }/>
+					<mk-images images={ p.media }/>
 				</div>
 				<mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
 				<span class="app" if={ p.app }>via <b>{ p.app.name }</b></span>
-- 
cgit v1.2.3-freya


From d3e5a546d7c7a86967d1ef3cbb3b5fa6432cfa3c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Dec 2017 02:54:34 +0900
Subject: :v:

---
 locales/en.yml                                |  7 ++++--
 locales/ja.yml                                |  9 ++++---
 src/web/app/desktop/tags/settings.tag         | 16 +++++++-----
 src/web/app/mobile/router.ts                  |  5 ----
 src/web/app/mobile/tags/index.ts              |  1 -
 src/web/app/mobile/tags/page/settings.tag     |  1 -
 src/web/app/mobile/tags/page/settings/api.tag | 36 ---------------------------
 7 files changed, 21 insertions(+), 54 deletions(-)
 delete mode 100644 src/web/app/mobile/tags/page/settings/api.tag

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 8392e170c4..8e1dee826d 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -199,7 +199,11 @@ ch:
 desktop:
   tags:
     mk-api-info:
-      regenerate-token: "Please enter the password"
+      intro: "APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。"
+      caution: "アカウントを不正利用される可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。"
+      regeneration-of-token: "万が一このトークンが漏れたりその可能性がある場合はトークンを再生成できます。"
+      regenerate-token: "Regenerate the token"
+      enter-password: "Please enter the password"
 
     mk-drive-browser-base-contextmenu:
       create-folder: "Create a folder"
@@ -524,7 +528,6 @@ mobile:
       applications: "Applications"
       twitter-integration: "Twitter integration"
       signin-history: "Sign in history"
-      api: "API"
       link: "MisskeyLink"
       settings: "Settings"
       signout: "Sign out"
diff --git a/locales/ja.yml b/locales/ja.yml
index f9d41d9092..1497bdb6d1 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -199,7 +199,11 @@ ch:
 desktop:
   tags:
     mk-api-info:
-      regenerate-token: "パスワードを入力してください"
+      intro: "APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。"
+      caution: "アカウントを不正利用される可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。"
+      regeneration-of-token: "万が一このトークンが漏れたりその可能性がある場合はトークンを再生成できます。"
+      regenerate-token: "トークンを再生成"
+      enter-password: "パスワードを入力してください"
 
     mk-drive-browser-base-contextmenu:
       create-folder: "フォルダーを作成"
@@ -523,8 +527,7 @@ mobile:
       profile: "プロフィール"
       applications: "アプリケーション"
       twitter-integration: "Twitter連携"
-      signin-history: "ログイン履歴"
-      api: "API"
+      signin-history: "サインイン履歴"
       link: "Misskeyリンク"
       settings: "設定"
       signout: "サインアウト"
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index f7ecfe3e8a..0a9a16250a 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -196,18 +196,22 @@
 </mk-profile-setting>
 
 <mk-api-info>
-	<p>Token:<code>{ I.token }</code></p>
-	<p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
-	<p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
-	<p>万が一このトークンが漏れたりその可能性がある場合は<a class="regenerate" onclick={ regenerateToken }>トークンを再生成</a>できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)</p>
+	<p>Token: <code>{ I.token }</code></p>
+	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
+	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
+	<button class="ui" onclick={ regenerateToken }>%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
 	<style>
 		:scope
 			display block
 			color #4a535a
 
 			code
-				padding 4px
+				display inline-block
+				padding 4px 6px
+				color #555
 				background #eee
+				border-radius 2px
 	</style>
 	<script>
 		import passwordDialog from '../scripts/password-dialog';
@@ -216,7 +220,7 @@
 		this.mixin('api');
 
 		this.regenerateToken = () => {
-			passwordDialog('%i18n:desktop.tags.mk-api-info.regenerate-token%', password => {
+			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
 				this.api('i/regenerate_token', {
 					password: password
 				});
diff --git a/src/web/app/mobile/router.ts b/src/web/app/mobile/router.ts
index 0358d10e9e..d0c6add0b8 100644
--- a/src/web/app/mobile/router.ts
+++ b/src/web/app/mobile/router.ts
@@ -19,7 +19,6 @@ export default (mios: MiOS) => {
 	route('/i/settings',                 settings);
 	route('/i/settings/profile',         settingsProfile);
 	route('/i/settings/signin-history',  settingsSignin);
-	route('/i/settings/api',             settingsApi);
 	route('/i/settings/twitter',         settingsTwitter);
 	route('/i/settings/authorized-apps', settingsAuthorizedApps);
 	route('/post/new',                   newPost);
@@ -74,10 +73,6 @@ export default (mios: MiOS) => {
 		mount(document.createElement('mk-signin-history-page'));
 	}
 
-	function settingsApi() {
-		mount(document.createElement('mk-api-info-page'));
-	}
-
 	function settingsTwitter() {
 		mount(document.createElement('mk-twitter-setting-page'));
 	}
diff --git a/src/web/app/mobile/tags/index.ts b/src/web/app/mobile/tags/index.ts
index fd5952ea13..20934cdd8d 100644
--- a/src/web/app/mobile/tags/index.ts
+++ b/src/web/app/mobile/tags/index.ts
@@ -14,7 +14,6 @@ require('./page/search.tag');
 require('./page/settings.tag');
 require('./page/settings/profile.tag');
 require('./page/settings/signin.tag');
-require('./page/settings/api.tag');
 require('./page/settings/authorized-apps.tag');
 require('./page/settings/twitter.tag');
 require('./page/messaging.tag');
diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
index 9789782144..9a73b0af3c 100644
--- a/src/web/app/mobile/tags/page/settings.tag
+++ b/src/web/app/mobile/tags/page/settings.tag
@@ -24,7 +24,6 @@
 		<li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li>
 		<li><a href="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
 		<li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
-		<li><a href="./settings/api">%fa:key%%i18n:mobile.tags.mk-settings-page.api%%fa:angle-right%</a></li>
 	</ul>
 	<ul>
 		<li><a onclick={ signout }>%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
diff --git a/src/web/app/mobile/tags/page/settings/api.tag b/src/web/app/mobile/tags/page/settings/api.tag
deleted file mode 100644
index 8de0e96963..0000000000
--- a/src/web/app/mobile/tags/page/settings/api.tag
+++ /dev/null
@@ -1,36 +0,0 @@
-<mk-api-info-page>
-	<mk-ui ref="ui">
-		<mk-api-info/>
-	</mk-ui>
-	<style>
-		:scope
-			display block
-	</style>
-	<script>
-		import ui from '../../../scripts/ui-event';
-
-		this.on('mount', () => {
-			document.title = 'Misskey | API';
-			ui.trigger('title', '%fa:key%API');
-		});
-	</script>
-</mk-api-info-page>
-
-<mk-api-info>
-	<p>Token:<code>{ I.token }</code></p>
-	<p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
-	<p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
-	<p>万が一このトークンが漏れたりその可能性がある場合はデスクトップ版Misskeyから再生成できます。</p>
-	<style>
-		:scope
-			display block
-			color #4a535a
-
-			code
-				padding 4px
-				background #eee
-	</style>
-	<script>
-		this.mixin('i');
-	</script>
-</mk-api-info>
-- 
cgit v1.2.3-freya


From f849dcb7b91233eaad9b679feef512bb4ad1dcd5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Dec 2017 03:25:58 +0900
Subject: #983

---
 locales/en.yml                         |  1 -
 locales/ja.yml                         |  1 -
 src/web/app/desktop/tags/post-form.tag | 69 ++++++++++++++----------------
 src/web/app/mobile/tags/post-form.tag  | 76 ++++++++++++++--------------------
 4 files changed, 60 insertions(+), 87 deletions(-)

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 8e1dee826d..9ac9a36cd5 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -591,7 +591,6 @@ mobile:
       submit: "Post"
       reply-placeholder: "Reply to this post..."
       post-placeholder: "What's happening?"
-      attach-media-from-local: "Attach media from your device"
 
     mk-search-posts:
       empty: "There is no post related to the 「{}」"
diff --git a/locales/ja.yml b/locales/ja.yml
index 1497bdb6d1..2f95998a86 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -591,7 +591,6 @@ mobile:
       submit: "投稿"
       reply-placeholder: "この投稿への返信..."
       post-placeholder: "いまどうしてる？"
-      attach-media-from-local: "デバイスからメディアを添付"
 
     mk-search-posts:
       empty: "「{}」に関する投稿は見つかりませんでした。"
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
index 8e5171c83e..0b4c07906a 100644
--- a/src/web/app/desktop/tags/post-form.tag
+++ b/src/web/app/desktop/tags/post-form.tag
@@ -1,13 +1,12 @@
 <mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
 	<div class="content">
 		<textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea>
-		<div class="medias { with: poll }" if={ files.length != 0 }>
-			<ul>
-				<li each={ files }>
+		<div class="medias { with: poll }" show={ files.length != 0 }>
+			<ul ref="media">
+				<li each={ files } data-id={ id }>
 					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
 					<img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
 				</li>
-				<li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
 			</ul>
 			<p class="remain">{ 4 - files.length }/4</p>
 		</div>
@@ -118,8 +117,9 @@
 						> li
 							display block
 							float left
-							margin 4px
+							margin 0
 							padding 0
+							border solid 4px transparent
 							cursor move
 
 							&:hover > .remove
@@ -140,29 +140,6 @@
 								height 16px
 								cursor pointer
 
-						> .add
-							display block
-							float left
-							margin 4px
-							padding 0
-							border dashed 2px rgba($theme-color, 0.2)
-							cursor pointer
-
-							&:hover
-								border-color rgba($theme-color, 0.3)
-
-								> i
-									color rgba($theme-color, 0.4)
-
-							> i
-								display block
-								width 60px
-								height 60px
-								line-height 60px
-								text-align center
-								font-size 1.2em
-								color rgba($theme-color, 0.2)
-
 				> mk-poll-editor
 					background lighten($theme-color, 98%)
 					border solid 1px rgba($theme-color, 0.1)
@@ -306,6 +283,7 @@
 
 	</style>
 	<script>
+		import Sortable from 'sortablejs';
 		import getKao from '../../common/scripts/get-kao';
 		import notify from '../scripts/notify';
 		import Autocomplete from '../scripts/autocomplete';
@@ -365,6 +343,10 @@
 				this.trigger('change-files', this.files);
 				this.update();
 			}
+
+			new Sortable(this.refs.media, {
+				animation: 150
+			});
 		});
 
 		this.on('unmount', () => {
@@ -413,14 +395,17 @@
 			const data = e.dataTransfer.getData('text');
 			if (data == null) return false;
 
-			// パース
-			// TODO: Validate JSON
-			const obj = JSON.parse(data);
+			try {
+				// パース
+				const obj = JSON.parse(data);
+
+				// (ドライブの)ファイルだったら
+				if (obj.type == 'file') {
+					this.files.push(obj.file);
+					this.update();
+				}
+			} catch (e) {
 
-			// (ドライブの)ファイルだったら
-			if (obj.type == 'file') {
-				this.files.push(obj.file);
-				this.update();
 			}
 		};
 
@@ -483,13 +468,19 @@
 		this.post = e => {
 			this.wait = true;
 
-			const files = this.files && this.files.length > 0
-				? this.files.map(f => f.id)
-				: undefined;
+			const files = [];
+
+			if (this.files.length > 0) {
+				Array.from(this.refs.media.children).forEach(el => {
+					const id = el.getAttribute('data-id');
+					const file = this.files.find(f => f.id == id);
+					files.push(file);
+				});
+			}
 
 			this.api('posts/create', {
 				text: this.refs.text.value == '' ? undefined : this.refs.text.value,
-				media_ids: files,
+				media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined,
 				reply_id: this.inReplyToPost ? this.inReplyToPost.id : undefined,
 				repost_id: this.repost ? this.repost.id : undefined,
 				poll: this.poll ? this.refs.poll.get() : undefined
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 3ac7296f73..f09f40bb5c 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -9,12 +9,11 @@
 	<div class="form">
 		<mk-post-preview if={ opts.reply } post={ opts.reply }/>
 		<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%' }></textarea>
-		<div class="attaches" if={ files.length != 0 }>
+		<div class="attaches" show={ files.length != 0 }>
 			<ul class="files" ref="attaches">
-				<li class="file" each={ files }>
-					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
+				<li class="file" each={ files } data-id={ id }>
+					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name } onclick={ removeFile }></div>
 				</li>
-				<li class="add" if={ files.length < 4 } title="%i18n:mobile.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
 			</ul>
 		</div>
 		<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
@@ -93,12 +92,9 @@
 						> .file
 							display block
 							float left
-							margin 4px
+							margin 0
 							padding 0
-							cursor move
-
-							&:hover > .remove
-								display block
+							border solid 4px transparent
 
 							> .img
 								width 64px
@@ -106,38 +102,6 @@
 								background-size cover
 								background-position center center
 
-							> .remove
-								display none
-								position absolute
-								top -6px
-								right -6px
-								width 16px
-								height 16px
-								cursor pointer
-
-						> .add
-							display block
-							float left
-							margin 4px
-							padding 0
-							border dashed 2px rgba($theme-color, 0.2)
-							cursor pointer
-
-							&:hover
-								border-color rgba($theme-color, 0.3)
-
-								> [data-fa]
-									color rgba($theme-color, 0.4)
-
-							> [data-fa]
-								display block
-								width 60px
-								height 60px
-								line-height 60px
-								text-align center
-								font-size 1.2em
-								color rgba($theme-color, 0.2)
-
 				> mk-uploader
 					margin 8px 0 0 0
 					padding 8px
@@ -181,6 +145,7 @@
 
 	</style>
 	<script>
+		import Sortable from 'sortablejs';
 		import getKao from '../../common/scripts/get-kao';
 
 		this.mixin('api');
@@ -200,6 +165,10 @@
 			});
 
 			this.refs.text.focus();
+
+			new Sortable(this.refs.attaches, {
+				animation: 150
+			});
 		});
 
 		this.onkeydown = e => {
@@ -247,6 +216,13 @@
 			this.update();
 		};
 
+		this.removeFile = e => {
+			const file = e.item;
+			this.files = this.files.filter(x => x.id != file.id);
+			this.trigger('change-files', this.files);
+			this.update();
+		};
+
 		this.addPoll = () => {
 			this.poll = true;
 		};
@@ -258,15 +234,23 @@
 		};
 
 		this.post = () => {
-			this.wait = true;
+			this.update({
+				wait: true
+			});
 
-			const files = this.files && this.files.length > 0
-				? this.files.map(f => f.id)
-				: undefined;
+			const files = [];
+
+			if (this.files.length > 0) {
+				Array.from(this.refs.attaches.children).forEach(el => {
+					const id = el.getAttribute('data-id');
+					const file = this.files.find(f => f.id == id);
+					files.push(file);
+				});
+			}
 
 			this.api('posts/create', {
 				text: this.refs.text.value == '' ? undefined : this.refs.text.value,
-				media_ids: files,
+				media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined,
 				reply_id: opts.reply ? opts.reply.id : undefined,
 				poll: this.poll ? this.refs.poll.get() : undefined
 			}).then(data => {
-- 
cgit v1.2.3-freya


From 845dc261846661359d38fccea0f84b99ed6968e5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Dec 2017 03:38:31 +0900
Subject: :v:

---
 locales/en.yml                        |  2 ++
 locales/ja.yml                        |  2 ++
 src/web/app/desktop/tags/settings.tag | 27 ++++++++-------------------
 webpack/module/rules/index.ts         |  2 ++
 webpack/module/rules/license.ts       | 22 ++++++++++++++++++++++
 5 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 webpack/module/rules/license.ts

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 9ac9a36cd5..b49af68bdf 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -365,6 +365,8 @@ desktop:
       security: "Security"
       password: "Password"
       2fa: "Two-factor authentication"
+      other: "Other"
+      license: "License"
 
     mk-timeline-post:
       reposted-by: "Reposted by {}"
diff --git a/locales/ja.yml b/locales/ja.yml
index 2f95998a86..afafa5a63a 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -365,6 +365,8 @@ desktop:
       security: "セキュリティ"
       password: "パスワード"
       2fa: "二段階認証"
+      other: "その他"
+      license: "ライセンス"
 
     mk-timeline-post:
       reposted-by: "{}がRepost"
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 0a9a16250a..2f36d9b3ec 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -8,6 +8,7 @@
 		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
 		<p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
 		<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
+		<p class={ active: page == 'other' } onmousedown={ setPage.bind(null, 'other') }>%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p>
 	</div>
 	<div class="pages">
 		<section class="profile" show={ page == 'profile' }>
@@ -54,6 +55,11 @@
 			<h1>API</h1>
 			<mk-api-info/>
 		</section>
+
+		<section class="other" show={ page == 'other' }>
+			<h1>%i18n:desktop.tags.mk-settings.license%</h1>
+			%license%
+		</section>
 	</div>
 	<style>
 		:scope
@@ -96,8 +102,9 @@
 
 				> section
 					margin 32px
+					color #4a535a
 
-					h1
+					> h1
 						display block
 						margin 0 0 1em 0
 						padding 0 0 8px 0
@@ -105,24 +112,6 @@
 						color #555
 						border-bottom solid 1px #eee
 
-					label.checkbox
-						> input
-							position absolute
-							top 0
-							left 0
-
-							&:checked + p
-								color $theme-color
-
-						> p
-							width calc(100% - 32px)
-							margin 0 0 0 32px
-							font-weight bold
-
-							&:last-child
-								font-weight normal
-								color #999
-
 	</style>
 	<script>
 		this.page = 'profile';
diff --git a/webpack/module/rules/index.ts b/webpack/module/rules/index.ts
index 79740ce48e..b6a0a5e2ec 100644
--- a/webpack/module/rules/index.ts
+++ b/webpack/module/rules/index.ts
@@ -1,4 +1,5 @@
 import i18n from './i18n';
+import license from './license';
 import fa from './fa';
 import base64 from './base64';
 import themeColor from './theme-color';
@@ -8,6 +9,7 @@ import typescript from './typescript';
 
 export default (lang, locale) => [
 	i18n(lang, locale),
+	license(),
 	fa(),
 	base64(),
 	themeColor(),
diff --git a/webpack/module/rules/license.ts b/webpack/module/rules/license.ts
new file mode 100644
index 0000000000..1795af960d
--- /dev/null
+++ b/webpack/module/rules/license.ts
@@ -0,0 +1,22 @@
+/**
+ * Inject license
+ */
+
+import * as fs from 'fs';
+const StringReplacePlugin = require('string-replace-webpack-plugin');
+
+const license = fs.readFileSync(__dirname + '/../../../LICENSE', 'utf-8')
+	.replace(/\r\n/g, '\n')
+	.replace(/(.)\n(.)/g, '$1 $2')
+	.replace(/(^|\n)(.*?)($|\n)/g, '<p>$2</p>');
+
+export default () => ({
+	enforce: 'pre',
+	test: /\.(tag|js)$/,
+	exclude: /node_modules/,
+	loader: StringReplacePlugin.replace({
+		replacements: [{
+			pattern: '%license%', replacement: () => license
+		}]
+	})
+});
-- 
cgit v1.2.3-freya


From e36a7081324b9e538ae40918072edd93ebc9b2cb Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Dec 2017 13:33:33 +0900
Subject: #986

---
 src/api/common/add-file-to-drive.ts           | 39 +++++++++++++++-
 src/api/endpoints/drive/files/create.ts       | 14 ++++--
 src/web/app/desktop/tags/drive/file.tag       | 16 ++++++-
 src/web/app/desktop/tags/images.tag           | 13 +++++-
 src/web/app/mobile/tags/drive/file-viewer.tag |  7 ++-
 src/web/app/mobile/tags/drive/file.tag        |  6 ++-
 src/web/app/mobile/tags/images.tag            |  6 ++-
 tools/migration/node.2017-12-11.js            | 67 +++++++++++++++++++++++++++
 8 files changed, 157 insertions(+), 11 deletions(-)
 create mode 100644 tools/migration/node.2017-12-11.js

(limited to 'src/web/app')

diff --git a/src/api/common/add-file-to-drive.ts b/src/api/common/add-file-to-drive.ts
index 109e886106..427b54d72b 100644
--- a/src/api/common/add-file-to-drive.ts
+++ b/src/api/common/add-file-to-drive.ts
@@ -110,7 +110,7 @@ const addFile = async (
 		}
 	}
 
-	const [wh, folder] = await Promise.all([
+	const [wh, averageColor, folder] = await Promise.all([
 		// Width and height (when image)
 		(async () => {
 			// 画像かどうか
@@ -125,14 +125,45 @@ const addFile = async (
 				return null;
 			}
 
+			log('calculate image width and height...');
+
 			// Calculate width and height
 			const g = gm(fs.createReadStream(path), name);
 			const size = await prominence(g).size();
 
-			log('image width and height is calculated');
+			log(`image width and height is calculated: ${size.width}, ${size.height}`);
 
 			return [size.width, size.height];
 		})(),
+		// average color (when image)
+		(async () => {
+			// 画像かどうか
+			if (!/^image\/.*$/.test(mime)) {
+				return null;
+			}
+
+			const imageType = mime.split('/')[1];
+
+			// 画像でもPNGかJPEGでないならスキップ
+			if (imageType != 'png' && imageType != 'jpeg') {
+				return null;
+			}
+
+			log('calculate average color...');
+
+			const buffer = await prominence(gm(fs.createReadStream(path), name)
+				.setFormat('ppm')
+				.resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック
+				.toBuffer();
+
+			const r = buffer.readUInt8(buffer.length - 3);
+			const g = buffer.readUInt8(buffer.length - 2);
+			const b = buffer.readUInt8(buffer.length - 1);
+
+			log(`average color is calculated: ${r}, ${g}, ${b}`);
+
+			return [r, g, b];
+		})(),
 		// folder
 		(async () => {
 			if (!folderId) {
@@ -188,6 +219,10 @@ const addFile = async (
 		properties['height'] = wh[1];
 	}
 
+	if (averageColor) {
+		properties['average_color'] = averageColor;
+	}
+
 	return addToGridFS(detectedName, readable, mime, {
 		user_id: user._id,
 		folder_id: folder !== null ? folder._id : null,
diff --git a/src/api/endpoints/drive/files/create.ts b/src/api/endpoints/drive/files/create.ts
index 7546eca309..437348a1ef 100644
--- a/src/api/endpoints/drive/files/create.ts
+++ b/src/api/endpoints/drive/files/create.ts
@@ -38,9 +38,15 @@ module.exports = async (file, params, user): Promise<any> => {
 	const [folderId = null, folderIdErr] = $(params.folder_id).optional.nullable.id().$;
 	if (folderIdErr) throw 'invalid folder_id param';
 
-	// Create file
-	const driveFile = await create(user, file.path, name, null, folderId);
+	try {
+		// Create file
+		const driveFile = await create(user, file.path, name, null, folderId);
 
-	// Serialize
-	return serialize(driveFile);
+		// Serialize
+		return serialize(driveFile);
+	} catch (e) {
+		console.error(e);
+
+		throw e;
+	}
 };
diff --git a/src/web/app/desktop/tags/drive/file.tag b/src/web/app/desktop/tags/drive/file.tag
index 0f019d95bf..8b3d36b3f3 100644
--- a/src/web/app/desktop/tags/drive/file.tag
+++ b/src/web/app/desktop/tags/drive/file.tag
@@ -5,7 +5,9 @@
 	<div class="label" if={ I.banner_id == file.id }><img src="/assets/label.svg"/>
 		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
 	</div>
-	<div class="thumbnail"><img src={ file.url + '?thumbnail&size=128' } alt=""/></div>
+	<div class="thumbnail" ref="thumbnail" style="background-color:{ file.properties.average_color ? 'rgb(' + file.properties.average_color.join(',') + ')' : 'transparent' }">
+		<img src={ file.url + '?thumbnail&size=128' } alt="" onload={ onload }/>
+	</div>
 	<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
 	<style>
 		:scope
@@ -139,6 +141,7 @@
 
 	</style>
 	<script>
+		import anime from 'animejs';
 		import bytesToSize from '../../../common/scripts/bytes-to-size';
 
 		this.mixin('i');
@@ -199,5 +202,16 @@
 			this.isDragging = false;
 			this.browser.isDragSource = false;
 		};
+
+		this.onload = () => {
+			if (this.file.properties.average_color) {
+				anime({
+					targets: this.refs.thumbnail,
+					backgroundColor: `rgba(${this.file.properties.average_color.join(',')}, 0)`,
+					duration: 100,
+					easing: 'linear'
+				});
+			}
+		};
 	</script>
 </mk-drive-browser-file>
diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
index ce67d26a9f..5e4be481dc 100644
--- a/src/web/app/desktop/tags/images.tag
+++ b/src/web/app/desktop/tags/images.tag
@@ -53,7 +53,13 @@
 </mk-images>
 
 <mk-images-image>
-	<a ref="view" href={ image.url } onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click } title={ image.name }></a>
+	<a ref="view"
+		href={ image.url }
+		onmousemove={ mousemove }
+		onmouseleave={ mouseleave }
+		style={ styles }
+		onclick={ click }
+		title={ image.name }></a>
 	<style>
 		:scope
 			display block
@@ -74,6 +80,11 @@
 	</style>
 	<script>
 		this.image = this.opts.image;
+		this.styles = {
+			'background-color': `rgb(${this.image.properties.average_color.join(',')})`,
+			'background-image': `url(${this.image.url}?thumbnail&size=512)`
+		};
+		console.log(this.styles);
 
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
index 48fc83fa67..259873d95c 100644
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ b/src/web/app/mobile/tags/drive/file-viewer.tag
@@ -1,6 +1,11 @@
 <mk-drive-file-viewer>
 	<div class="preview">
-		<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name } onload={ onImageLoaded } ref="img">
+		<img if={ kind == 'image' } ref="img"
+			src={ file.url }
+			alt={ file.name }
+			title={ file.name }
+			onload={ onImageLoaded }
+			style="background-color:rgb({ file.properties.average_color.join(',') })">
 		<virtual if={ kind != 'image' }>%fa:file%</virtual>
 		<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
 			<span class="size">
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index 196dd1141e..684df7dd08 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -1,7 +1,7 @@
 <mk-drive-file data-is-selected={ isSelected }>
 	<a onclick={ onclick } href="/i/drive/file/{ file.id }">
 		<div class="container">
-			<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
+			<div class="thumbnail" style={ thumbnail }></div>
 			<div class="body">
 				<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
 				<!--
@@ -132,6 +132,10 @@
 
 		this.browser = this.parent;
 		this.file = this.opts.file;
+		this.thumbnail = {
+			'background-color': this.file.properties.average_color ? `rgb(${this.file.properties.average_color.join(',')})` : 'transparent',
+			'background-image': `url(${this.file.url}?thumbnail&size=128)`
+		};
 		this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id);
 
 		this.browser.on('change-selection', selections => {
diff --git a/src/web/app/mobile/tags/images.tag b/src/web/app/mobile/tags/images.tag
index aaa80e4fd1..b200eefe7e 100644
--- a/src/web/app/mobile/tags/images.tag
+++ b/src/web/app/mobile/tags/images.tag
@@ -56,7 +56,7 @@
 </mk-images>
 
 <mk-images-image>
-	<a ref="view" href={ image.url } target="_blank" style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } title={ image.name }></a>
+	<a ref="view" href={ image.url } target="_blank" style={ styles } title={ image.name }></a>
 	<style>
 		:scope
 			display block
@@ -74,5 +74,9 @@
 	</style>
 	<script>
 		this.image = this.opts.image;
+		this.styles = {
+			'background-color': `rgb(${this.image.properties.average_color.join(',')})`,
+			'background-image': `url(${this.image.url}?thumbnail&size=512)`
+		};
 	</script>
 </mk-images-image>
diff --git a/tools/migration/node.2017-12-11.js b/tools/migration/node.2017-12-11.js
new file mode 100644
index 0000000000..3a3fef0518
--- /dev/null
+++ b/tools/migration/node.2017-12-11.js
@@ -0,0 +1,67 @@
+// for Node.js interpret
+
+const { default: DriveFile, getGridFSBucket } = require('../../built/api/models/drive-file')
+const { default: zip } = require('@prezzemolo/zip')
+
+const _gm = require('gm');
+const gm = _gm.subClass({
+	imageMagick: true
+});
+
+const migrate = doc => new Promise(async (res, rej) => {
+	const bucket = await getGridFSBucket();
+
+	const readable = bucket.openDownloadStream(doc._id);
+
+	gm(readable)
+		.setFormat('ppm')
+		.resize(1, 1)
+		.toBuffer(async (err, buffer) => {
+			if (err) rej(err);
+			const r = buffer.readUInt8(buffer.length - 3);
+			const g = buffer.readUInt8(buffer.length - 2);
+			const b = buffer.readUInt8(buffer.length - 1);
+
+			const result = await DriveFile.update(doc._id, {
+				$set: {
+					'metadata.properties.average_color': [r, g, b]
+				}
+			})
+
+			res(result.ok === 1);
+		});
+});
+
+async function main() {
+	const query = {
+		contentType: {
+			$in: [
+				'image/png',
+				'image/jpeg'
+			]
+		}
+	}
+
+	const count = await DriveFile.count(query);
+
+	const dop = Number.parseInt(process.argv[2]) || 5
+	const idop = ((count - (count % dop)) / dop) + 1
+
+	return zip(
+		1,
+		async (time) => {
+			console.log(`${time} / ${idop}`)
+			const doc = await DriveFile.find(query, {
+				limit: dop, skip: time * dop
+			})
+			return Promise.all(doc.map(migrate))
+		},
+		idop
+	).then(a => {
+		const rv = []
+		a.forEach(e => rv.push(...e))
+		return rv
+	})
+}
+
+main().then(console.dir).catch(console.error)
-- 
cgit v1.2.3-freya


From 82ab9c5d1c8d2cc66978633ecefd14adf1de877a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Dec 2017 14:19:51 +0900
Subject: Fix bug

---
 src/web/app/desktop/tags/images.tag | 2 +-
 src/web/app/mobile/tags/images.tag  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
index 5e4be481dc..eeaf4cd3d2 100644
--- a/src/web/app/desktop/tags/images.tag
+++ b/src/web/app/desktop/tags/images.tag
@@ -81,7 +81,7 @@
 	<script>
 		this.image = this.opts.image;
 		this.styles = {
-			'background-color': `rgb(${this.image.properties.average_color.join(',')})`,
+			'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
 			'background-image': `url(${this.image.url}?thumbnail&size=512)`
 		};
 		console.log(this.styles);
diff --git a/src/web/app/mobile/tags/images.tag b/src/web/app/mobile/tags/images.tag
index b200eefe7e..5899364aef 100644
--- a/src/web/app/mobile/tags/images.tag
+++ b/src/web/app/mobile/tags/images.tag
@@ -75,7 +75,7 @@
 	<script>
 		this.image = this.opts.image;
 		this.styles = {
-			'background-color': `rgb(${this.image.properties.average_color.join(',')})`,
+			'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
 			'background-image': `url(${this.image.url}?thumbnail&size=512)`
 		};
 	</script>
-- 
cgit v1.2.3-freya


From 2c2764cd058649ef2097edcbd4385127ec83a664 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Dec 2017 16:46:38 +0900
Subject: Clean up

---
 src/web/app/desktop/tags/images.tag | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
index eeaf4cd3d2..29540747f8 100644
--- a/src/web/app/desktop/tags/images.tag
+++ b/src/web/app/desktop/tags/images.tag
@@ -84,7 +84,6 @@
 			'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
 			'background-image': `url(${this.image.url}?thumbnail&size=512)`
 		};
-		console.log(this.styles);
 
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
-- 
cgit v1.2.3-freya


From b0bcdc929b29cca5102acd326fc055ee0fc681ce Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 12 Dec 2017 21:31:03 +0900
Subject: Fix

---
 src/web/app/desktop/tags/ui.tag | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index bc0a937a53..059d88528d 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -165,7 +165,7 @@
 					transition color 0.5s ease, border 0.5s ease
 					font-family FontAwesome, sans-serif
 
-					&:placeholder-shown
+					&::placeholder
 						color #9eaba8
 
 					&:hover
-- 
cgit v1.2.3-freya


From 02d68cc80f467a230c450efc15ace661be755c83 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Dec 2017 07:11:20 +0900
Subject: Update post-form.tag

---
 src/web/app/mobile/tags/post-form.tag | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index f09f40bb5c..05466a6ec2 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -12,7 +12,7 @@
 		<div class="attaches" show={ files.length != 0 }>
 			<ul class="files" ref="attaches">
 				<li class="file" each={ files } data-id={ id }>
-					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name } onclick={ removeFile }></div>
+					<div class="img" style="background-image: url({ url + '?thumbnail&size=128' })" onclick={ removeFile }></div>
 				</li>
 			</ul>
 		</div>
-- 
cgit v1.2.3-freya


From d408d19f72e0ac930e55d8383fecc0109f8afced Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 14 Dec 2017 12:32:23 +0900
Subject: Refactor

---
 src/web/app/desktop/tags/image-dialog.tag | 61 ------------------------------
 src/web/app/desktop/tags/images.tag       | 62 +++++++++++++++++++++++++++++++
 src/web/app/desktop/tags/index.ts         |  1 -
 3 files changed, 62 insertions(+), 62 deletions(-)
 delete mode 100644 src/web/app/desktop/tags/image-dialog.tag

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/image-dialog.tag b/src/web/app/desktop/tags/image-dialog.tag
deleted file mode 100644
index 39d16ca139..0000000000
--- a/src/web/app/desktop/tags/image-dialog.tag
+++ /dev/null
@@ -1,61 +0,0 @@
-<mk-image-dialog>
-	<div class="bg" ref="bg" onclick={ close }></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } onclick={ close }/>
-	<style>
-		:scope
-			display block
-			position fixed
-			z-index 2048
-			top 0
-			left 0
-			width 100%
-			height 100%
-			opacity 0
-
-			> .bg
-				display block
-				position fixed
-				z-index 1
-				top 0
-				left 0
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.7)
-
-			> img
-				position fixed
-				z-index 2
-				top 0
-				right 0
-				bottom 0
-				left 0
-				max-width 100%
-				max-height 100%
-				margin auto
-				cursor zoom-out
-
-	</style>
-	<script>
-		import anime from 'animejs';
-
-		this.image = this.opts.image;
-
-		this.on('mount', () => {
-			anime({
-				targets: this.root,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-		});
-
-		this.close = () => {
-			anime({
-				targets: this.root,
-				opacity: 0,
-				duration: 100,
-				easing: 'linear',
-				complete: () => this.unmount()
-			});
-		};
-	</script>
-</mk-image-dialog>
diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
index 29540747f8..0cd408576f 100644
--- a/src/web/app/desktop/tags/images.tag
+++ b/src/web/app/desktop/tags/images.tag
@@ -108,3 +108,65 @@
 		};
 	</script>
 </mk-images-image>
+
+<mk-image-dialog>
+	<div class="bg" ref="bg" onclick={ close }></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } onclick={ close }/>
+	<style>
+		:scope
+			display block
+			position fixed
+			z-index 2048
+			top 0
+			left 0
+			width 100%
+			height 100%
+			opacity 0
+
+			> .bg
+				display block
+				position fixed
+				z-index 1
+				top 0
+				left 0
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.7)
+
+			> img
+				position fixed
+				z-index 2
+				top 0
+				right 0
+				bottom 0
+				left 0
+				max-width 100%
+				max-height 100%
+				margin auto
+				cursor zoom-out
+
+	</style>
+	<script>
+		import anime from 'animejs';
+
+		this.image = this.opts.image;
+
+		this.on('mount', () => {
+			anime({
+				targets: this.root,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+		});
+
+		this.close = () => {
+			anime({
+				targets: this.root,
+				opacity: 0,
+				duration: 100,
+				easing: 'linear',
+				complete: () => this.unmount()
+			});
+		};
+	</script>
+</mk-image-dialog>
diff --git a/src/web/app/desktop/tags/index.ts b/src/web/app/desktop/tags/index.ts
index 30a13b584d..4edda83534 100644
--- a/src/web/app/desktop/tags/index.ts
+++ b/src/web/app/desktop/tags/index.ts
@@ -77,7 +77,6 @@ require('./set-banner-suggestion.tag');
 require('./repost-form.tag');
 require('./sub-post-content.tag');
 require('./images.tag');
-require('./image-dialog.tag');
 require('./donation.tag');
 require('./users-list.tag');
 require('./user-following.tag');
-- 
cgit v1.2.3-freya


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

(limited to 'src/web/app')

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


From 076956640871df99249e43e7df133f4f4e06043e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 17 Dec 2017 01:41:22 +0900
Subject: :v:

---
 docs/setup.en.md                            |  2 +-
 docs/setup.ja.md                            |  2 +-
 gulpfile.ts                                 | 15 ++++-----------
 package.json                                |  2 --
 src/config.ts                               |  4 ++--
 src/web/app/common/tags/introduction.tag    |  2 +-
 src/web/app/common/tags/nav-links.tag       |  5 ++++-
 src/web/app/common/tags/signup.tag          |  4 +++-
 src/web/app/common/tags/twitter-setting.tag |  2 +-
 src/web/app/desktop/tags/pages/entrance.tag |  2 +-
 src/web/app/mobile/tags/ui.tag              |  4 +++-
 src/web/docs/about.en.pug                   |  3 +++
 src/web/docs/about.ja.pug                   |  3 +++
 src/web/docs/api/endpoints/view.pug         |  2 +-
 src/web/docs/api/entities/view.pug          |  2 +-
 src/web/docs/api/mixins.pug                 |  4 ++--
 src/web/docs/gulpfile.ts                    |  2 +-
 src/web/docs/layout.pug                     |  4 ++--
 src/web/docs/server.ts                      | 21 +++++++++++++++++++++
 src/web/docs/tou.ja.pug                     |  3 +++
 src/web/docs/tou.md                         |  4 ----
 src/web/server.ts                           | 11 +++++------
 tools/letsencrypt/get-cert.sh               |  2 +-
 webpack/plugins/consts.ts                   |  2 +-
 24 files changed, 65 insertions(+), 42 deletions(-)
 create mode 100644 src/web/docs/about.en.pug
 create mode 100644 src/web/docs/about.ja.pug
 create mode 100644 src/web/docs/server.ts
 create mode 100644 src/web/docs/tou.ja.pug
 delete mode 100644 src/web/docs/tou.md

(limited to 'src/web/app')

diff --git a/docs/setup.en.md b/docs/setup.en.md
index b81245d892..13b0bdaeb5 100644
--- a/docs/setup.en.md
+++ b/docs/setup.en.md
@@ -24,7 +24,7 @@ Note that Misskey uses following subdomains:
 
 * **api**.*{primary domain}*
 * **auth**.*{primary domain}*
-* **about**.*{primary domain}*
+* **docs**.*{primary domain}*
 * **ch**.*{primary domain}*
 * **stats**.*{primary domain}*
 * **status**.*{primary domain}*
diff --git a/docs/setup.ja.md b/docs/setup.ja.md
index 1662d1ee5a..564c790978 100644
--- a/docs/setup.ja.md
+++ b/docs/setup.ja.md
@@ -25,7 +25,7 @@ Misskeyは以下のサブドメインを使います:
 
 * **api**.*{primary domain}*
 * **auth**.*{primary domain}*
-* **about**.*{primary domain}*
+* **docs**.*{primary domain}*
 * **ch**.*{primary domain}*
 * **stats**.*{primary domain}*
 * **status**.*{primary domain}*
diff --git a/gulpfile.ts b/gulpfile.ts
index e7d4770610..3b7a126407 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -9,7 +9,6 @@ import * as gulp from 'gulp';
 import * as gutil from 'gulp-util';
 import * as ts from 'gulp-typescript';
 import tslint from 'gulp-tslint';
-import * as es from 'event-stream';
 import cssnano = require('gulp-cssnano');
 import * as uglifyComposer from 'gulp-uglify/composer';
 import pug = require('gulp-pug');
@@ -74,16 +73,10 @@ gulp.task('build:ts', () => {
 });
 
 gulp.task('build:copy', () =>
-	es.merge(
-		gulp.src([
-			'./src/**/assets/**/*',
-			'!./src/web/app/**/assets/**/*'
-		]).pipe(gulp.dest('./built/')) as any,
-		gulp.src([
-			'./src/web/about/**/*',
-			'!./src/web/about/**/*.pug'
-		]).pipe(gulp.dest('./built/web/about/')) as any
-	)
+	gulp.src([
+		'./src/**/assets/**/*',
+		'!./src/web/app/**/assets/**/*'
+	]).pipe(gulp.dest('./built/'))
 );
 
 gulp.task('test', ['lint', 'mocha']);
diff --git a/package.json b/package.json
index 29ba72bbe4..8c0cf340db 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
 		"@types/debug": "0.0.30",
 		"@types/deep-equal": "1.0.1",
 		"@types/elasticsearch": "5.0.19",
-		"@types/event-stream": "3.3.33",
 		"@types/eventemitter3": "2.0.2",
 		"@types/express": "4.0.39",
 		"@types/gm": "1.17.33",
@@ -99,7 +98,6 @@
 		"diskusage": "0.2.4",
 		"elasticsearch": "14.0.0",
 		"escape-regexp": "0.0.1",
-		"event-stream": "3.3.4",
 		"eventemitter3": "3.0.0",
 		"exif-js": "2.3.0",
 		"express": "4.16.2",
diff --git a/src/config.ts b/src/config.ts
index 3ff8007586..3ffefe278b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -101,7 +101,7 @@ type Mixin = {
 	secondary_scheme: string;
 	api_url: string;
 	auth_url: string;
-	about_url: string;
+	docs_url: string;
 	ch_url: string;
 	stats_url: string;
 	status_url: string;
@@ -131,7 +131,7 @@ export default function load() {
 	mixin.auth_url = `${mixin.scheme}://auth.${mixin.host}`;
 	mixin.ch_url = `${mixin.scheme}://ch.${mixin.host}`;
 	mixin.dev_url = `${mixin.scheme}://dev.${mixin.host}`;
-	mixin.about_url = `${mixin.scheme}://about.${mixin.host}`;
+	mixin.docs_url = `${mixin.scheme}://docs.${mixin.host}`;
 	mixin.stats_url = `${mixin.scheme}://stats.${mixin.host}`;
 	mixin.status_url = `${mixin.scheme}://status.${mixin.host}`;
 	mixin.drive_url = `${mixin.secondary_scheme}://file.${mixin.secondary_host}`;
diff --git a/src/web/app/common/tags/introduction.tag b/src/web/app/common/tags/introduction.tag
index 3256688d10..28afc6fa46 100644
--- a/src/web/app/common/tags/introduction.tag
+++ b/src/web/app/common/tags/introduction.tag
@@ -3,7 +3,7 @@
 		<h1>Misskeyとは？</h1>
 		<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
 		<p>無料で誰でも利用でき、広告も掲載していません。</p>
-		<p><a href={ _ABOUT_URL_ } target="_blank">もっと知りたい方はこちら</a></p>
+		<p><a href={ _DOCS_URL_ } target="_blank">もっと知りたい方はこちら</a></p>
 	</article>
 	<style>
 		:scope
diff --git a/src/web/app/common/tags/nav-links.tag b/src/web/app/common/tags/nav-links.tag
index 71f0453db0..ea122575aa 100644
--- a/src/web/app/common/tags/nav-links.tag
+++ b/src/web/app/common/tags/nav-links.tag
@@ -1,7 +1,10 @@
 <mk-nav-links>
-	<a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
+	<a href={ aboutUrl }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
 	<style>
 		:scope
 			display inline
 	</style>
+	<script>
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/about`;
+	</script>
 </mk-nav-links>
diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag
index 4816fe66db..b488efb927 100644
--- a/src/web/app/common/tags/signup.tag
+++ b/src/web/app/common/tags/signup.tag
@@ -34,7 +34,7 @@
 		</label>
 		<label class="agree-tou">
 			<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
-			<p><a href="https://github.com/syuilo/misskey/blob/master/src/docs/tou.md" target="_blank">利用規約</a>に同意する</p>
+			<p><a href={ touUrl } target="_blank">利用規約</a>に同意する</p>
 		</label>
 		<button onclick={ onsubmit }>%i18n:common.tags.mk-signup.create%</button>
 	</form>
@@ -182,6 +182,8 @@
 		this.passwordRetypeState = null;
 		this.recaptchaed = false;
 
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/tou`;
+
 		window.onRecaptchaed = () => {
 			this.recaptchaed = true;
 			this.update();
diff --git a/src/web/app/common/tags/twitter-setting.tag b/src/web/app/common/tags/twitter-setting.tag
index 3b70505ba2..4d57cfa55a 100644
--- a/src/web/app/common/tags/twitter-setting.tag
+++ b/src/web/app/common/tags/twitter-setting.tag
@@ -1,5 +1,5 @@
 <mk-twitter-setting>
-	<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _ABOUT_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
+	<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _DOCS_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
 	<p class="account" if={ I.twitter } title={ 'Twitter ID: ' + I.twitter.user_id }>%i18n:common.tags.mk-twitter-setting.connected-to%: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
 	<p>
 		<a href={ _API_URL_ + '/connect/twitter' } target="_blank" onclick={ connect }>{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
diff --git a/src/web/app/desktop/tags/pages/entrance.tag b/src/web/app/desktop/tags/pages/entrance.tag
index 44548e4183..b07b22c80c 100644
--- a/src/web/app/desktop/tags/pages/entrance.tag
+++ b/src/web/app/desktop/tags/pages/entrance.tag
@@ -150,7 +150,7 @@
 </mk-entrance>
 
 <mk-entrance-signin>
-	<a class="help" href={ _ABOUT_URL_ + '/help' } title="お困りですか？">%fa:question%</a>
+	<a class="help" href={ _DOCS_URL_ + '/help' } title="お困りですか？">%fa:question%</a>
 	<div class="form">
 		<h1><img if={ user } src={ user.avatar_url + '?thumbnail&size=32' }/>
 			<p>{ user ? user.name : 'アカウント' }</p>
diff --git a/src/web/app/mobile/tags/ui.tag b/src/web/app/mobile/tags/ui.tag
index 62e128489a..621f89f336 100644
--- a/src/web/app/mobile/tags/ui.tag
+++ b/src/web/app/mobile/tags/ui.tag
@@ -248,7 +248,7 @@
 				<li><a href="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</a></li>
 			</ul>
 		</div>
-		<a href={ _ABOUT_URL_ }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a>
+		<a href={ aboutUrl }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a>
 	</div>
 	<style>
 		:scope
@@ -359,6 +359,8 @@
 		this.connection = this.stream.getConnection();
 		this.connectionId = this.stream.use();
 
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/about`;
+
 		this.on('mount', () => {
 			this.connection.on('read_all_notifications', this.onReadAllNotifications);
 			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
diff --git a/src/web/docs/about.en.pug b/src/web/docs/about.en.pug
new file mode 100644
index 0000000000..893d9dd6a1
--- /dev/null
+++ b/src/web/docs/about.en.pug
@@ -0,0 +1,3 @@
+h1 About Misskey
+
+p Misskey is a mini blog SNS.
diff --git a/src/web/docs/about.ja.pug b/src/web/docs/about.ja.pug
new file mode 100644
index 0000000000..fec933b0c6
--- /dev/null
+++ b/src/web/docs/about.ja.pug
@@ -0,0 +1,3 @@
+h1 Misskeyについて
+
+p MisskeyはミニブログSNSです。
diff --git a/src/web/docs/api/endpoints/view.pug b/src/web/docs/api/endpoints/view.pug
index 62a6f59edd..9ba1c4e852 100644
--- a/src/web/docs/api/endpoints/view.pug
+++ b/src/web/docs/api/endpoints/view.pug
@@ -2,7 +2,7 @@ extends ../../layout.pug
 include ../mixins
 
 block meta
-	link(rel="stylesheet" href="/assets/docs/api/endpoints/style.css")
+	link(rel="stylesheet" href="/assets/api/endpoints/style.css")
 
 block main
 	h1= endpoint
diff --git a/src/web/docs/api/entities/view.pug b/src/web/docs/api/entities/view.pug
index 57c6d4cad7..6fc05bd555 100644
--- a/src/web/docs/api/entities/view.pug
+++ b/src/web/docs/api/entities/view.pug
@@ -2,7 +2,7 @@ extends ../../layout.pug
 include ../mixins
 
 block meta
-	link(rel="stylesheet" href="/assets/docs/api/entities/style.css")
+	link(rel="stylesheet" href="/assets/api/entities/style.css")
 
 block main
 	h1= name
diff --git a/src/web/docs/api/mixins.pug b/src/web/docs/api/mixins.pug
index 3ddd7cb48a..5180698574 100644
--- a/src/web/docs/api/mixins.pug
+++ b/src/web/docs/api/mixins.pug
@@ -14,13 +14,13 @@ mixin propTable(props)
 						if prop.kind == 'id'
 							if prop.entity
 								|  (
-								a(href=`/docs/${lang}/api/entities/${kebab(prop.entity)}`)= prop.entity
+								a(href=`/${lang}/api/entities/${kebab(prop.entity)}`)= prop.entity
 								|  ID)
 							else
 								|  (ID)
 						else if prop.kind == 'entity'
 							|   (
-							a(href=`/docs/${lang}/api/entities/${kebab(prop.entity)}`)= prop.entity
+							a(href=`/${lang}/api/entities/${kebab(prop.entity)}`)= prop.entity
 							| )
 						else if prop.kind == 'object'
 							if prop.def
diff --git a/src/web/docs/gulpfile.ts b/src/web/docs/gulpfile.ts
index 2377844650..61e44a1dc3 100644
--- a/src/web/docs/gulpfile.ts
+++ b/src/web/docs/gulpfile.ts
@@ -70,5 +70,5 @@ gulp.task('doc:styles', () =>
 	gulp.src('./src/web/docs/**/*.styl')
 		.pipe(stylus())
 		.pipe((cssnano as any)())
-		.pipe(gulp.dest('./built/web/assets/docs/'))
+		.pipe(gulp.dest('./built/web/docs/assets/'))
 );
diff --git a/src/web/docs/layout.pug b/src/web/docs/layout.pug
index ac3743d2f4..bc9710d7c6 100644
--- a/src/web/docs/layout.pug
+++ b/src/web/docs/layout.pug
@@ -6,9 +6,9 @@ html(lang= lang)
 		meta(name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no")
 		title
 			| #{title} | Misskey Docs
-		link(rel="stylesheet" href="/assets/docs/style.css")
+		link(rel="stylesheet" href="/assets/style.css")
 		block meta
-		base(href=`/docs/${lang}/`)
+		base(href=`/${lang}/`)
 
 	body
 		nav
diff --git a/src/web/docs/server.ts b/src/web/docs/server.ts
new file mode 100644
index 0000000000..b2e50457e5
--- /dev/null
+++ b/src/web/docs/server.ts
@@ -0,0 +1,21 @@
+/**
+ * Docs Server
+ */
+
+import * as express from 'express';
+
+/**
+ * Init app
+ */
+const app = express();
+app.disable('x-powered-by');
+
+app.use('/assets', express.static(`${__dirname}/assets`));
+
+/**
+ * Routing
+ */
+app.get(/^\/([a-z_\-\/]+?)$/, (req, res) =>
+	res.sendFile(`${__dirname}/${req.params[0]}.html`));
+
+module.exports = app;
diff --git a/src/web/docs/tou.ja.pug b/src/web/docs/tou.ja.pug
new file mode 100644
index 0000000000..7663258f82
--- /dev/null
+++ b/src/web/docs/tou.ja.pug
@@ -0,0 +1,3 @@
+h1 利用規約
+
+p 公序良俗に反する行為はおやめください。
diff --git a/src/web/docs/tou.md b/src/web/docs/tou.md
deleted file mode 100644
index fbf87867b4..0000000000
--- a/src/web/docs/tou.md
+++ /dev/null
@@ -1,4 +0,0 @@
-利用規約
-================================================================
-
-公序良俗に反する行為はおやめください。
diff --git a/src/web/server.ts b/src/web/server.ts
index 38e87754f3..062d1f197a 100644
--- a/src/web/server.ts
+++ b/src/web/server.ts
@@ -10,6 +10,9 @@ import * as express from 'express';
 import * as bodyParser from 'body-parser';
 import * as favicon from 'serve-favicon';
 import * as compression from 'compression';
+import vhost = require('vhost');
+
+import config from '../conf';
 
 /**
  * Init app
@@ -17,6 +20,8 @@ import * as compression from 'compression';
 const app = express();
 app.disable('x-powered-by');
 
+app.use(vhost(`docs.${config.host}`, require('./docs/server')));
+
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json({
 	type: ['application/json', 'text/plain']
@@ -63,12 +68,6 @@ 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/tools/letsencrypt/get-cert.sh b/tools/letsencrypt/get-cert.sh
index 409f2fa5e3..d44deb1443 100644
--- a/tools/letsencrypt/get-cert.sh
+++ b/tools/letsencrypt/get-cert.sh
@@ -4,7 +4,7 @@ certbot certonly --standalone\
   -d $1\
   -d api.$1\
   -d auth.$1\
-  -d about.$1\
+  -d docs.$1\
   -d ch.$1\
   -d stats.$1\
   -d status.$1\
diff --git a/webpack/plugins/consts.ts b/webpack/plugins/consts.ts
index 7d1ff7c8d5..6e18fa296d 100644
--- a/webpack/plugins/consts.ts
+++ b/webpack/plugins/consts.ts
@@ -16,7 +16,7 @@ export default lang => {
 		_VERSION_: version,
 		_STATUS_URL_: config.status_url,
 		_STATS_URL_: config.stats_url,
-		_ABOUT_URL_: config.about_url,
+		_DOCS_URL_: config.docs_url,
 		_API_URL_: config.api_url,
 		_DEV_URL_: config.dev_url,
 		_CH_URL_: config.ch_url,
-- 
cgit v1.2.3-freya


From 74f3a6aadbb01b7032d40b82cf725ec706b103a3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 17 Dec 2017 04:31:24 +0900
Subject: :v:

---
 src/const.json                              | 1 +
 src/web/app/common/tags/copyright.tag       | 7 -------
 src/web/app/common/tags/index.ts            | 1 -
 src/web/app/desktop/tags/pages/entrance.tag | 4 ++--
 src/web/app/mobile/tags/page/entrance.tag   | 4 ++--
 src/web/docs/layout.pug                     | 1 +
 src/web/docs/style.styl                     | 2 +-
 src/web/docs/vars.ts                        | 3 +++
 webpack/plugins/consts.ts                   | 1 +
 9 files changed, 11 insertions(+), 13 deletions(-)
 delete mode 100644 src/web/app/common/tags/copyright.tag

(limited to 'src/web/app')

diff --git a/src/const.json b/src/const.json
index 924b4dd8b3..0ee6ac2068 100644
--- a/src/const.json
+++ b/src/const.json
@@ -1,4 +1,5 @@
 {
+	"copyright": "Copyright (c) 2014-2017 syuilo",
 	"themeColor": "#ff4e45",
 	"themeColorForeground": "#fff"
 }
diff --git a/src/web/app/common/tags/copyright.tag b/src/web/app/common/tags/copyright.tag
deleted file mode 100644
index 9c3f1f648b..0000000000
--- a/src/web/app/common/tags/copyright.tag
+++ /dev/null
@@ -1,7 +0,0 @@
-<mk-copyright>
-	<span>(c) syuilo 2014-2017</span>
-	<style>
-		:scope
-			display block
-	</style>
-</mk-copyright>
diff --git a/src/web/app/common/tags/index.ts b/src/web/app/common/tags/index.ts
index 2f4e1181d4..df99d93cc5 100644
--- a/src/web/app/common/tags/index.ts
+++ b/src/web/app/common/tags/index.ts
@@ -12,7 +12,6 @@ require('./signin.tag');
 require('./signup.tag');
 require('./forkit.tag');
 require('./introduction.tag');
-require('./copyright.tag');
 require('./signin-history.tag');
 require('./twitter-setting.tag');
 require('./authorized-apps.tag');
diff --git a/src/web/app/desktop/tags/pages/entrance.tag b/src/web/app/desktop/tags/pages/entrance.tag
index b07b22c80c..974f49a4fe 100644
--- a/src/web/app/desktop/tags/pages/entrance.tag
+++ b/src/web/app/desktop/tags/pages/entrance.tag
@@ -18,7 +18,7 @@
 	<footer>
 		<div>
 			<mk-nav-links/>
-			<mk-copyright/>
+			<p class="c">{ _COPYRIGHT_ }</p>
 		</div>
 	</footer>
 	<!-- ↓ https://github.com/riot/riot/issues/2134 (将来的)-->
@@ -101,7 +101,7 @@
 					text-align center
 					border-top solid 1px #fff
 
-					> mk-copyright
+					> .c
 						margin 0
 						line-height 64px
 						font-size 10px
diff --git a/src/web/app/mobile/tags/page/entrance.tag b/src/web/app/mobile/tags/page/entrance.tag
index 380fb780bc..191874caf9 100644
--- a/src/web/app/mobile/tags/page/entrance.tag
+++ b/src/web/app/mobile/tags/page/entrance.tag
@@ -8,7 +8,7 @@
 		</div>
 	</main>
 	<footer>
-		<mk-copyright/>
+		<p class="c">{ _COPYRIGHT_ }</p>
 	</footer>
 	<style>
 		:scope
@@ -34,7 +34,7 @@
 						margin 16px auto 0 auto
 
 			> footer
-				> mk-copyright
+				> .c
 					margin 0
 					text-align center
 					line-height 64px
diff --git a/src/web/docs/layout.pug b/src/web/docs/layout.pug
index 22d89375af..ee8018ec63 100644
--- a/src/web/docs/layout.pug
+++ b/src/web/docs/layout.pug
@@ -35,3 +35,4 @@ html(lang= lang)
 				p
 					= common.i18n[lang]['docs']['edit-this-page-on-github']
 					a(href=src target="_blank")= common.i18n[lang]['docs']['edit-this-page-on-github-link']
+				small= common.copyright
diff --git a/src/web/docs/style.styl b/src/web/docs/style.styl
index 285b92bdb8..32a2264f15 100644
--- a/src/web/docs/style.styl
+++ b/src/web/docs/style.styl
@@ -41,7 +41,7 @@ main
 		margin 32px 0 0 0
 		border-top solid 2px #eee
 
-		.copyright
+		> small
 			margin 16px 0 0 0
 			color #aaa
 
diff --git a/src/web/docs/vars.ts b/src/web/docs/vars.ts
index 2c744be61b..da590d7bd9 100644
--- a/src/web/docs/vars.ts
+++ b/src/web/docs/vars.ts
@@ -3,6 +3,7 @@ import * as glob from 'glob';
 import * as yaml from 'js-yaml';
 import langs from '../../../locales';
 import config from '../../conf';
+const constants = require('../../const.json');
 
 export default function(): { [key: string]: any } {
 	const vars = {} as { [key: string]: any };
@@ -38,5 +39,7 @@ export default function(): { [key: string]: any } {
 
 	vars['i18n'] = langs;
 
+	vars['copyright'] = constants.copyright;
+
 	return vars;
 }
diff --git a/webpack/plugins/consts.ts b/webpack/plugins/consts.ts
index 6e18fa296d..16a5691622 100644
--- a/webpack/plugins/consts.ts
+++ b/webpack/plugins/consts.ts
@@ -13,6 +13,7 @@ export default lang => {
 		_RECAPTCHA_SITEKEY_: config.recaptcha.site_key,
 		_SW_PUBLICKEY_: config.sw ? config.sw.public_key : null,
 		_THEME_COLOR_: constants.themeColor,
+		_COPYRIGHT_: constants.copyright,
 		_VERSION_: version,
 		_STATUS_URL_: config.status_url,
 		_STATS_URL_: config.stats_url,
-- 
cgit v1.2.3-freya


From d4fb399c95c65e4a6805e02074b8e5cc754a3822 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 17 Dec 2017 14:35:30 +0900
Subject: なんかもうめっちゃ変えた
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gulpfile.ts                         | 12 ++------
 src/common/build/fa.ts              | 57 +++++++++++++++++++++++++++++++++++++
 src/common/build/i18n.ts            | 50 ++++++++++++++++++++++++++++++++
 src/web/app/desktop/ui.styl         |  2 +-
 src/web/const.styl                  |  4 +++
 src/web/docs/api.ja.pug             | 10 +++----
 src/web/docs/api/endpoints/view.pug |  4 +--
 src/web/docs/api/entities/view.pug  |  2 +-
 src/web/docs/api/gulpfile.ts        | 11 ++++++-
 src/web/docs/api/mixins.pug         | 12 ++++----
 src/web/docs/gulpfile.ts            |  8 ++++--
 src/web/docs/layout.pug             |  7 +++--
 src/web/docs/style.styl             |  1 +
 src/web/docs/ui.styl                | 19 +++++++++++++
 src/web/docs/vars.ts                |  7 +++--
 src/web/style.styl                  |  5 +---
 webpack/module/index.ts             |  4 +--
 webpack/module/rules/fa.ts          | 47 ++----------------------------
 webpack/module/rules/i18n.ts        | 33 +++------------------
 webpack/module/rules/index.ts       |  4 +--
 webpack/webpack.config.ts           |  4 +--
 21 files changed, 185 insertions(+), 118 deletions(-)
 create mode 100644 src/common/build/fa.ts
 create mode 100644 src/common/build/i18n.ts
 create mode 100644 src/web/const.styl
 create mode 100644 src/web/docs/ui.styl

(limited to 'src/web/app')

diff --git a/gulpfile.ts b/gulpfile.ts
index 3b7a126407..21870473ed 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -20,16 +20,8 @@ import * as mocha from 'gulp-mocha';
 import * as replace from 'gulp-replace';
 import * as htmlmin from 'gulp-htmlmin';
 const uglifyes = require('uglify-es');
-import * as fontawesome from '@fortawesome/fontawesome';
-import * as regular from '@fortawesome/fontawesome-free-regular';
-import * as solid from '@fortawesome/fontawesome-free-solid';
-import * as brands from '@fortawesome/fontawesome-free-brands';
-
-// Add icons
-fontawesome.library.add(regular);
-fontawesome.library.add(solid);
-fontawesome.library.add(brands);
 
+import { fa } from './src/common/build/fa';
 import version from './src/version';
 import config from './src/conf';
 
@@ -179,7 +171,7 @@ gulp.task('build:client:pug', [
 			.pipe(pug({
 				locals: {
 					themeColor: constants.themeColor,
-					facss: fontawesome.dom.css(),
+					facss: fa.dom.css(),
 					//hljscss: fs.readFileSync('./node_modules/highlight.js/styles/default.css', 'utf8')
 					hljscss: fs.readFileSync('./src/web/assets/code-highlight.css', 'utf8')
 				}
diff --git a/src/common/build/fa.ts b/src/common/build/fa.ts
new file mode 100644
index 0000000000..0c21be9504
--- /dev/null
+++ b/src/common/build/fa.ts
@@ -0,0 +1,57 @@
+/**
+ * Replace fontawesome symbols
+ */
+
+import * as fontawesome from '@fortawesome/fontawesome';
+import * as regular from '@fortawesome/fontawesome-free-regular';
+import * as solid from '@fortawesome/fontawesome-free-solid';
+import * as brands from '@fortawesome/fontawesome-free-brands';
+
+// Add icons
+fontawesome.library.add(regular);
+fontawesome.library.add(solid);
+fontawesome.library.add(brands);
+
+export const pattern = /%fa:(.+?)%/g;
+
+export const replacement = (_, key) => {
+	const args = key.split(' ');
+	let prefix = 'fas';
+	const classes = [];
+	let transform = '';
+	let name;
+
+	args.forEach(arg => {
+		if (arg == 'R' || arg == 'S' || arg == 'B') {
+			prefix =
+				arg == 'R' ? 'far' :
+				arg == 'S' ? 'fas' :
+				arg == 'B' ? 'fab' :
+				'';
+		} else if (arg[0] == '.') {
+			classes.push('fa-' + arg.substr(1));
+		} else if (arg[0] == '-') {
+			transform = arg.substr(1).split('|').join(' ');
+		} else {
+			name = arg;
+		}
+	});
+
+	const icon = fontawesome.icon({ prefix, iconName: name }, {
+		classes: classes
+	});
+
+	if (icon) {
+		icon.transform = fontawesome.parse.transform(transform);
+		return `<i data-fa class="${name}">${icon.html[0]}</i>`;
+	} else {
+		console.warn(`'${name}' not found in fa`);
+		return '';
+	}
+};
+
+export default (src: string) => {
+	return src.replace(pattern, replacement);
+};
+
+export const fa = fontawesome;
diff --git a/src/common/build/i18n.ts b/src/common/build/i18n.ts
new file mode 100644
index 0000000000..1ae22147c4
--- /dev/null
+++ b/src/common/build/i18n.ts
@@ -0,0 +1,50 @@
+/**
+ * Replace i18n texts
+ */
+
+import locale from '../../../locales';
+
+export default class Replacer {
+	private lang: string;
+
+	public pattern = /"%i18n:(.+?)%"|'%i18n:(.+?)%'|%i18n:(.+?)%/g;
+
+	constructor(lang: string) {
+		this.lang = lang;
+
+		this.get = this.get.bind(this);
+		this.replacement = this.replacement.bind(this);
+	}
+
+	private get(key: string) {
+		let text = locale[this.lang];
+
+		// Check the key existance
+		const error = key.split('.').some(k => {
+			if (text.hasOwnProperty(k)) {
+				text = text[k];
+				return false;
+			} else {
+				return true;
+			}
+		});
+
+		if (error) {
+			console.warn(`key '${key}' not found in '${this.lang}'`);
+			return key; // Fallback
+		} else {
+			return text;
+		}
+	}
+
+	public replacement(match, a, b, c) {
+		const key = a || b || c;
+		if (match[0] == '"') {
+			return '"' + this.get(key).replace(/"/g, '\\"') + '"';
+		} else if (match[0] == "'") {
+			return '\'' + this.get(key).replace(/'/g, '\\\'') + '\'';
+		} else {
+			return this.get(key);
+		}
+	}
+}
diff --git a/src/web/app/desktop/ui.styl b/src/web/app/desktop/ui.styl
index cb98bf06a0..058271876b 100644
--- a/src/web/app/desktop/ui.styl
+++ b/src/web/app/desktop/ui.styl
@@ -1,4 +1,4 @@
-@import "../app"
+@import "../../const"
 
 button
 	font-family sans-serif
diff --git a/src/web/const.styl b/src/web/const.styl
new file mode 100644
index 0000000000..b6560701d9
--- /dev/null
+++ b/src/web/const.styl
@@ -0,0 +1,4 @@
+json('../const.json')
+
+$theme-color = themeColor
+$theme-color-foreground = themeColorForeground
diff --git a/src/web/docs/api.ja.pug b/src/web/docs/api.ja.pug
index 5514a40975..2584b08581 100644
--- a/src/web/docs/api.ja.pug
+++ b/src/web/docs/api.ja.pug
@@ -7,6 +7,7 @@ section
 	h2 自分の所有するアカウントからAPIにアクセスする場合
 	p 「設定 > API」で、APIにアクセスするのに必要なAPIキーを取得してください。
 	p APIにアクセスする際には、リクエストにAPIキーを「i」というパラメータ名で含めます。
+	div.ui.info.warn: p %fa:exclamation-triangle%アカウントを不正利用される可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。
 	p APIの詳しい使用法は「Misskey APIの利用」セクションをご覧ください。
 
 section
@@ -15,7 +16,7 @@ section
 		| 直接ユーザーのAPIキーをアプリケーションが扱うのは危険なので、
 		| アプリケーションからAPIを利用する際には、アプリケーションとアプリケーションを利用するユーザーが結び付けられた専用のトークン(アクセストークン)をMisskeyに発行してもらい、
 		| そのトークンをリクエストのパラメータに含める必要があります。
-		| (アクセストークンは、ユーザーが自分のアカウントにあなたのアプリケーションがアクセスすることを許可した場合のみ発行されます)
+	div.ui.info: p %fa:info-circle%アクセストークンは、ユーザーが自分のアカウントにあなたのアプリケーションがアクセスすることを許可した場合のみ発行されます
 
 	p それでは、アクセストークンを取得するまでの流れを説明します。
 
@@ -46,9 +47,8 @@ section
 					td 権限
 					td あなたのアプリケーションやWebサービスが要求する権限。ここで要求した機能だけがAPIからアクセスできます。
 
-		p
-			| 登録が済むとアプリケーションのシークレットキーが入手できます。このシークレットキーは後で使用します。
-			| アプリに成りすまされる可能性があるため、極力このシークレットキーは公開しないようにしてください。
+		p 登録が済むとアプリケーションのシークレットキーが入手できます。このシークレットキーは後で使用します。
+		div.ui.info.warn: p %fa:exclamation-triangle%アプリに成りすまされる可能性があるため、極力このシークレットキーは公開しないようにしてください。
 
 	section
 		h3 2.ユーザーに認証させる
@@ -93,7 +93,7 @@ section
 	h2 Misskey APIの利用
 	p APIはすべてリクエストのパラメータ・レスポンスともにJSON形式です。また、すべてのエンドポイントはPOSTメソッドのみ受け付けます。
 	p APIリファレンスもご確認ください。
-	
+
 	section
 		h3 レートリミット
 		p Misskey APIにはレートリミットがあり、短時間のうちに多数のリクエストを送信すると、一定時間APIを利用することができなくなることがあります。
diff --git a/src/web/docs/api/endpoints/view.pug b/src/web/docs/api/endpoints/view.pug
index 90084ab276..d271a5517a 100644
--- a/src/web/docs/api/endpoints/view.pug
+++ b/src/web/docs/api/endpoints/view.pug
@@ -17,7 +17,7 @@ block main
 	p#desc= desc[lang] || desc['ja']
 
 	section
-		h2= common.i18n[lang]['docs']['api']['endpoints']['params']
+		h2 %i18n:docs.api.endpoints.params%
 		+propTable(params)
 
 		if paramDefs
@@ -28,5 +28,5 @@ block main
 
 	if res
 		section
-			h2= common.i18n[lang]['docs']['api']['endpoints']['res']
+			h2 %i18n:docs.api.endpoints.res%
 			+propTable(res)
diff --git a/src/web/docs/api/entities/view.pug b/src/web/docs/api/entities/view.pug
index 99e786c694..2156463dc7 100644
--- a/src/web/docs/api/entities/view.pug
+++ b/src/web/docs/api/entities/view.pug
@@ -10,7 +10,7 @@ block main
 	p#desc= desc[lang] || desc['ja']
 
 	section
-		h2= common.i18n[lang]['docs']['api']['entities']['properties']
+		h2 %i18n:docs.api.entities.properties%
 		+propTable(props)
 
 		if propDefs
diff --git a/src/web/docs/api/gulpfile.ts b/src/web/docs/api/gulpfile.ts
index 2e8409c595..4c30871a0f 100644
--- a/src/web/docs/api/gulpfile.ts
+++ b/src/web/docs/api/gulpfile.ts
@@ -10,13 +10,16 @@ import * as pug from 'pug';
 import * as yaml from 'js-yaml';
 import * as mkdirp from 'mkdirp';
 
+import locales from '../../../../locales';
+import I18nReplacer from '../../../common/build/i18n';
+import fa from '../../../common/build/fa';
 import config from './../../../conf';
 
 import generateVars from '../vars';
 
 const commonVars = generateVars();
 
-const langs = Object.keys(commonVars.i18n);
+const langs = Object.keys(locales);
 
 const kebab = string => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
 
@@ -124,6 +127,9 @@ gulp.task('doc:api:endpoints', () => {
 						console.error(renderErr);
 						return;
 					}
+					const i18n = new I18nReplacer(lang);
+					html = html.replace(i18n.pattern, i18n.replacement);
+					html = fa(html);
 					const htmlPath = `./built/web/docs/${lang}/api/endpoints/${ep.endpoint}.html`;
 					mkdirp(path.dirname(htmlPath), (mkdirErr) => {
 						if (mkdirErr) {
@@ -164,6 +170,9 @@ gulp.task('doc:api:entities', () => {
 						console.error(renderErr);
 						return;
 					}
+					const i18n = new I18nReplacer(lang);
+					html = html.replace(i18n.pattern, i18n.replacement);
+					html = fa(html);
 					const htmlPath = `./built/web/docs/${lang}/api/entities/${kebab(entity.name)}.html`;
 					mkdirp(path.dirname(htmlPath), (mkdirErr) => {
 						if (mkdirErr) {
diff --git a/src/web/docs/api/mixins.pug b/src/web/docs/api/mixins.pug
index b563a121db..686bf6a2b6 100644
--- a/src/web/docs/api/mixins.pug
+++ b/src/web/docs/api/mixins.pug
@@ -1,10 +1,10 @@
 mixin propTable(props)
 	table.props
 		thead: tr
-			th= common.i18n[lang]['docs']['api']['props']['name']
-			th= common.i18n[lang]['docs']['api']['props']['type']
-			th= common.i18n[lang]['docs']['api']['props']['optional']
-			th= common.i18n[lang]['docs']['api']['props']['description']
+			th %i18n:docs.api.props.name%
+			th %i18n:docs.api.props.type%
+			th %i18n:docs.api.props.optional%
+			th %i18n:docs.api.props.description%
 		tbody
 			each prop in props
 				tr
@@ -31,7 +31,7 @@ mixin propTable(props)
 							|  (Date)
 					td.optional
 						if prop.optional
-							= common.i18n[lang]['docs']['api']['props']['yes']
+							| %i18n:docs.api.props.yes%
 						else
-							= common.i18n[lang]['docs']['api']['props']['no']
+							| %i18n:docs.api.props.no%
 					td.desc!= prop.desc[lang] || prop.desc['ja']
diff --git a/src/web/docs/gulpfile.ts b/src/web/docs/gulpfile.ts
index 6668abdec6..71033e1bc7 100644
--- a/src/web/docs/gulpfile.ts
+++ b/src/web/docs/gulpfile.ts
@@ -7,13 +7,12 @@ 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 stylus = require('gulp-stylus');
 import cssnano = require('gulp-cssnano');
 
-//import config from './../../conf';
-
+import I18nReplacer from '../../common/build/i18n';
+import fa from '../../common/build/fa';
 import generateVars from './vars';
 
 require('./api/gulpfile.ts');
@@ -53,6 +52,9 @@ gulp.task('doc:docs', () => {
 						console.error(renderErr2);
 						return;
 					}
+					const i18n = new I18nReplacer(lang);
+					html = html.replace(i18n.pattern, i18n.replacement);
+					html = fa(html);
 					const htmlPath = `./built/web/docs/${lang}/${name}.html`;
 					mkdirp(path.dirname(htmlPath), (mkdirErr) => {
 						if (mkdirErr) {
diff --git a/src/web/docs/layout.pug b/src/web/docs/layout.pug
index ee8018ec63..9dfd0ab7af 100644
--- a/src/web/docs/layout.pug
+++ b/src/web/docs/layout.pug
@@ -9,6 +9,9 @@ html(lang= lang)
 		link(rel="stylesheet" href="/assets/style.css")
 		block meta
 
+		//- FontAwesome style
+		style #{common.facss}
+
 	body
 		nav
 			ul
@@ -33,6 +36,6 @@ html(lang= lang)
 
 			footer
 				p
-					= common.i18n[lang]['docs']['edit-this-page-on-github']
-					a(href=src target="_blank")= common.i18n[lang]['docs']['edit-this-page-on-github-link']
+					| %i18n:docs.edit-this-page-on-github%
+					a(href=src target="_blank") %i18n:docs.edit-this-page-on-github-link%
 				small= common.copyright
diff --git a/src/web/docs/style.styl b/src/web/docs/style.styl
index 32a2264f15..414be5c53d 100644
--- a/src/web/docs/style.styl
+++ b/src/web/docs/style.styl
@@ -1,4 +1,5 @@
 @import "../style"
+@import "./ui"
 
 body
 	margin 0
diff --git a/src/web/docs/ui.styl b/src/web/docs/ui.styl
new file mode 100644
index 0000000000..8d5515712f
--- /dev/null
+++ b/src/web/docs/ui.styl
@@ -0,0 +1,19 @@
+.ui.info
+	display block
+	margin 1em 0
+	padding 0 1em
+	font-size 90%
+	color rgba(#000, 0.87)
+	background #f8f8f9
+	border-radius 4px
+	overflow hidden
+
+	> p
+		opacity 0.8
+
+		> [data-fa]:first-child
+			margin-right 0.25em
+
+	&.warn
+		color #573a08
+		background #FFFAF3
diff --git a/src/web/docs/vars.ts b/src/web/docs/vars.ts
index da590d7bd9..65b224fbff 100644
--- a/src/web/docs/vars.ts
+++ b/src/web/docs/vars.ts
@@ -1,7 +1,8 @@
 import * as fs from 'fs';
 import * as glob from 'glob';
 import * as yaml from 'js-yaml';
-import langs from '../../../locales';
+
+import { fa } from '../../common/build/fa';
 import config from '../../conf';
 const constants = require('../../const.json');
 
@@ -37,9 +38,9 @@ export default function(): { [key: string]: any } {
 
 	vars['config'] = config;
 
-	vars['i18n'] = langs;
-
 	vars['copyright'] = constants.copyright;
 
+	vars['facss'] = fa.dom.css();
+
 	return vars;
 }
diff --git a/src/web/style.styl b/src/web/style.styl
index 573df10d78..c25fc8fb52 100644
--- a/src/web/style.styl
+++ b/src/web/style.styl
@@ -1,9 +1,6 @@
-json('../const.json')
-
 @charset 'utf-8'
 
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
+@import "./const"
 
 /*
 	::selection
diff --git a/webpack/module/index.ts b/webpack/module/index.ts
index 15f36557ce..088aca7238 100644
--- a/webpack/module/index.ts
+++ b/webpack/module/index.ts
@@ -1,5 +1,5 @@
 import rules from './rules';
 
-export default (lang, locale) => ({
-	rules: rules(lang, locale)
+export default lang => ({
+	rules: rules(lang)
 });
diff --git a/webpack/module/rules/fa.ts b/webpack/module/rules/fa.ts
index 47c72a28a1..891b78ece2 100644
--- a/webpack/module/rules/fa.ts
+++ b/webpack/module/rules/fa.ts
@@ -3,16 +3,7 @@
  */
 
 const StringReplacePlugin = require('string-replace-webpack-plugin');
-
-import * as fontawesome from '@fortawesome/fontawesome';
-import * as regular from '@fortawesome/fontawesome-free-regular';
-import * as solid from '@fortawesome/fontawesome-free-solid';
-import * as brands from '@fortawesome/fontawesome-free-brands';
-
-// Add icons
-fontawesome.library.add(regular);
-fontawesome.library.add(solid);
-fontawesome.library.add(brands);
+import { pattern, replacement } from '../../../src/common/build/fa';
 
 export default () => ({
 	enforce: 'pre',
@@ -20,41 +11,7 @@ export default () => ({
 	exclude: /node_modules/,
 	loader: StringReplacePlugin.replace({
 		replacements: [{
-			pattern: /%fa:(.+?)%/g, replacement: (_, key) => {
-				const args = key.split(' ');
-				let prefix = 'fas';
-				const classes = [];
-				let transform = '';
-				let name;
-
-				args.forEach(arg => {
-					if (arg == 'R' || arg == 'S' || arg == 'B') {
-						prefix =
-							arg == 'R' ? 'far' :
-							arg == 'S' ? 'fas' :
-							arg == 'B' ? 'fab' :
-							'';
-					} else if (arg[0] == '.') {
-						classes.push('fa-' + arg.substr(1));
-					} else if (arg[0] == '-') {
-						transform = arg.substr(1).split('|').join(' ');
-					} else {
-						name = arg;
-					}
-				});
-
-				const icon = fontawesome.icon({ prefix, iconName: name }, {
-					classes: classes
-				});
-
-				if (icon) {
-					icon.transform = fontawesome.parse.transform(transform);
-					return `<i data-fa class="${name}">${icon.html[0]}</i>`;
-				} else {
-					console.warn(`'${name}' not found in fa`);
-					return '';
-				}
-			}
+			pattern, replacement
 		}]
 	})
 });
diff --git a/webpack/module/rules/i18n.ts b/webpack/module/rules/i18n.ts
index aa4e58448f..7261548be5 100644
--- a/webpack/module/rules/i18n.ts
+++ b/webpack/module/rules/i18n.ts
@@ -3,28 +3,10 @@
  */
 
 const StringReplacePlugin = require('string-replace-webpack-plugin');
+import Replacer from '../../../src/common/build/i18n';
 
-export default (lang, locale) => {
-	function get(key: string) {
-		let text = locale;
-
-		// Check the key existance
-		const error = key.split('.').some(k => {
-			if (text.hasOwnProperty(k)) {
-				text = text[k];
-				return false;
-			} else {
-				return true;
-			}
-		});
-
-		if (error) {
-			console.warn(`key '${key}' not found in '${lang}'`);
-			return key; // Fallback
-		} else {
-			return text;
-		}
-	}
+export default lang => {
+	const replacer = new Replacer(lang);
 
 	return {
 		enforce: 'pre',
@@ -32,14 +14,7 @@ export default (lang, locale) => {
 		exclude: /node_modules/,
 		loader: StringReplacePlugin.replace({
 			replacements: [{
-				pattern: /"%i18n:(.+?)%"/g, replacement: (_, key) =>
-					'"' + get(key).replace(/"/g, '\\"') + '"'
-			}, {
-				pattern: /'%i18n:(.+?)%'/g, replacement: (_, key) =>
-					'\'' + get(key).replace(/'/g, '\\\'') + '\''
-			}, {
-				pattern: /%i18n:(.+?)%/g, replacement: (_, key) =>
-					get(key)
+				pattern: replacer.pattern, replacement: replacer.replacement
 			}]
 		})
 	};
diff --git a/webpack/module/rules/index.ts b/webpack/module/rules/index.ts
index b6a0a5e2ec..b02bdef723 100644
--- a/webpack/module/rules/index.ts
+++ b/webpack/module/rules/index.ts
@@ -7,8 +7,8 @@ import tag from './tag';
 import stylus from './stylus';
 import typescript from './typescript';
 
-export default (lang, locale) => [
-	i18n(lang, locale),
+export default lang => [
+	i18n(lang),
 	license(),
 	fa(),
 	base64(),
diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts
index 124bd975b9..d67b8ef774 100644
--- a/webpack/webpack.config.ts
+++ b/webpack/webpack.config.ts
@@ -8,7 +8,7 @@ import plugins from './plugins';
 import langs from '../locales';
 import version from '../src/version';
 
-module.exports = Object.entries(langs).map(([lang, locale]) => {
+module.exports = Object.keys(langs).map(lang => {
 	// Chunk name
 	const name = lang;
 
@@ -32,7 +32,7 @@ module.exports = Object.entries(langs).map(([lang, locale]) => {
 	return {
 		name,
 		entry,
-		module: module_(lang, locale),
+		module: module_(lang),
 		plugins: plugins(version, lang),
 		output,
 		resolve: {
-- 
cgit v1.2.3-freya


From 332d9a98eb630d0e229922ea571c30153d035f0f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 19 Dec 2017 13:18:17 +0900
Subject: :v:

---
 src/web/app/desktop/tags/drive/browser.tag | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag
index 901daabfd8..a60a46b790 100644
--- a/src/web/app/desktop/tags/drive/browser.tag
+++ b/src/web/app/desktop/tags/drive/browser.tag
@@ -18,14 +18,16 @@
 				<virtual each={ folder in folders }>
 					<mk-drive-browser-folder class="folder" folder={ folder }/>
 				</virtual>
-				<div class="padding" each={ folders }></div>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div class="padding" each={ Array(10).fill(16) }></div>
 				<button if={ moreFolders }>%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="files" ref="filesContainer" if={ files.length > 0 }>
 				<virtual each={ file in files }>
 					<mk-drive-browser-file class="file" file={ file }/>
 				</virtual>
-				<div class="padding" each={ files }></div>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div class="padding" each={ Array(10).fill(16) }></div>
 				<button if={ moreFiles } onclick={ fetchMoreFiles }>%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
-- 
cgit v1.2.3-freya


From c378e5fc946722d6e8a88bcf6a47109c31d70116 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 02:20:02 +0900
Subject: #1021

---
 src/api/endpoints/channels.ts                      | 16 ++++++-------
 src/api/endpoints/channels/posts.ts                | 16 ++++++-------
 src/api/endpoints/drive/files.ts                   | 16 ++++++-------
 src/api/endpoints/drive/folders.ts                 | 16 ++++++-------
 src/api/endpoints/drive/stream.ts                  | 16 ++++++-------
 src/api/endpoints/i/notifications.ts               | 16 ++++++-------
 src/api/endpoints/i/signin_history.ts              | 16 ++++++-------
 src/api/endpoints/messaging/messages.ts            | 16 ++++++-------
 src/api/endpoints/posts.ts                         | 16 ++++++-------
 src/api/endpoints/posts/mentions.ts                | 16 ++++++-------
 src/api/endpoints/posts/reposts.ts                 | 16 ++++++-------
 src/api/endpoints/posts/timeline.ts                | 26 +++++++++++-----------
 src/api/endpoints/users.ts                         | 16 ++++++-------
 src/api/endpoints/users/posts.ts                   | 26 +++++++++++-----------
 src/web/app/common/tags/messaging/room.tag         |  2 +-
 src/web/app/desktop/tags/home-widgets/mentions.tag |  2 +-
 src/web/app/desktop/tags/home-widgets/timeline.tag |  4 ++--
 src/web/app/desktop/tags/notifications.tag         |  2 +-
 src/web/app/desktop/tags/user-timeline.tag         |  4 ++--
 src/web/app/mobile/tags/drive.tag                  |  2 +-
 src/web/app/mobile/tags/home-timeline.tag          |  2 +-
 src/web/app/mobile/tags/notifications.tag          |  2 +-
 src/web/app/mobile/tags/user-timeline.tag          |  2 +-
 src/web/docs/api/endpoints/posts/timeline.yaml     |  4 ++--
 24 files changed, 135 insertions(+), 135 deletions(-)

(limited to 'src/web/app')

diff --git a/src/api/endpoints/channels.ts b/src/api/endpoints/channels.ts
index e10c943896..14817d9bd8 100644
--- a/src/api/endpoints/channels.ts
+++ b/src/api/endpoints/channels.ts
@@ -21,13 +21,13 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Construct query
@@ -40,9 +40,9 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/channels/posts.ts b/src/api/endpoints/channels/posts.ts
index 5c071a124f..9c2d607edb 100644
--- a/src/api/endpoints/channels/posts.ts
+++ b/src/api/endpoints/channels/posts.ts
@@ -22,13 +22,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Get 'channel_id' parameter
@@ -58,9 +58,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 	//#endregion Construct query
diff --git a/src/api/endpoints/drive/files.ts b/src/api/endpoints/drive/files.ts
index b2e094775c..3d5f81339a 100644
--- a/src/api/endpoints/drive/files.ts
+++ b/src/api/endpoints/drive/files.ts
@@ -22,13 +22,13 @@ module.exports = async (params, user, app) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) throw 'invalid since_id param';
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) throw 'invalid max_id param';
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) throw 'invalid until_id param';
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		throw 'cannot set since_id and max_id';
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		throw 'cannot set since_id and until_id';
 	}
 
 	// Get 'folder_id' parameter
@@ -52,9 +52,9 @@ module.exports = async (params, user, app) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 	if (type) {
diff --git a/src/api/endpoints/drive/folders.ts b/src/api/endpoints/drive/folders.ts
index d49ef0af03..7944e2c6a6 100644
--- a/src/api/endpoints/drive/folders.ts
+++ b/src/api/endpoints/drive/folders.ts
@@ -22,13 +22,13 @@ module.exports = (params, user, app) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Get 'folder_id' parameter
@@ -48,9 +48,9 @@ module.exports = (params, user, app) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/drive/stream.ts b/src/api/endpoints/drive/stream.ts
index 7ee255e5d1..5b0eb0a0d8 100644
--- a/src/api/endpoints/drive/stream.ts
+++ b/src/api/endpoints/drive/stream.ts
@@ -21,13 +21,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Get 'type' parameter
@@ -46,9 +46,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 	if (type) {
diff --git a/src/api/endpoints/i/notifications.ts b/src/api/endpoints/i/notifications.ts
index 607e0768a4..48254e5e67 100644
--- a/src/api/endpoints/i/notifications.ts
+++ b/src/api/endpoints/i/notifications.ts
@@ -36,13 +36,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	const query = {
@@ -73,9 +73,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/i/signin_history.ts b/src/api/endpoints/i/signin_history.ts
index 1a6e50c7c8..e38bfa4d98 100644
--- a/src/api/endpoints/i/signin_history.ts
+++ b/src/api/endpoints/i/signin_history.ts
@@ -21,13 +21,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	const query = {
@@ -43,9 +43,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/messaging/messages.ts b/src/api/endpoints/messaging/messages.ts
index 7b270924eb..3d3c6950a1 100644
--- a/src/api/endpoints/messaging/messages.ts
+++ b/src/api/endpoints/messaging/messages.ts
@@ -44,13 +44,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	const query = {
@@ -72,9 +72,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/posts.ts b/src/api/endpoints/posts.ts
index f6efcc108d..db166cd67a 100644
--- a/src/api/endpoints/posts.ts
+++ b/src/api/endpoints/posts.ts
@@ -36,13 +36,13 @@ module.exports = (params) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Construct query
@@ -55,9 +55,9 @@ module.exports = (params) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/posts/mentions.ts b/src/api/endpoints/posts/mentions.ts
index 0ebe8be503..3bb4ec3fa0 100644
--- a/src/api/endpoints/posts/mentions.ts
+++ b/src/api/endpoints/posts/mentions.ts
@@ -27,13 +27,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Construct query
@@ -58,9 +58,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/posts/reposts.ts b/src/api/endpoints/posts/reposts.ts
index b701ff7574..bcc6163a11 100644
--- a/src/api/endpoints/posts/reposts.ts
+++ b/src/api/endpoints/posts/reposts.ts
@@ -25,13 +25,13 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Lookup post
@@ -55,9 +55,9 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/posts/timeline.ts b/src/api/endpoints/posts/timeline.ts
index 0d08b95463..91cba0a047 100644
--- a/src/api/endpoints/posts/timeline.ts
+++ b/src/api/endpoints/posts/timeline.ts
@@ -25,21 +25,21 @@ module.exports = async (params, user, app) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) throw 'invalid since_id param';
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) throw 'invalid max_id param';
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) throw 'invalid until_id param';
 
 	// Get 'since_date' parameter
 	const [sinceDate, sinceDateErr] = $(params.since_date).optional.number().$;
 	if (sinceDateErr) throw 'invalid since_date param';
 
-	// Get 'max_date' parameter
-	const [maxDate, maxDateErr] = $(params.max_date).optional.number().$;
-	if (maxDateErr) throw 'invalid max_date param';
+	// Get 'until_date' parameter
+	const [untilDate, untilDateErr] = $(params.until_date).optional.number().$;
+	if (untilDateErr) throw 'invalid until_date param';
 
-	// Check if only one of since_id, max_id, since_date, max_date specified
-	if ([sinceId, maxId, sinceDate, maxDate].filter(x => x != null).length > 1) {
-		throw 'only one of since_id, max_id, since_date, max_date can be specified';
+	// Check if only one of since_id, until_id, since_date, until_date specified
+	if ([sinceId, untilId, sinceDate, untilDate].filter(x => x != null).length > 1) {
+		throw 'only one of since_id, until_id, since_date, until_date can be specified';
 	}
 
 	const { followingIds, watchingChannelIds } = await rap({
@@ -85,18 +85,18 @@ module.exports = async (params, user, app) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	} else if (sinceDate) {
 		sort._id = 1;
 		query.created_at = {
 			$gt: new Date(sinceDate)
 		};
-	} else if (maxDate) {
+	} else if (untilDate) {
 		query.created_at = {
-			$lt: new Date(maxDate)
+			$lt: new Date(untilDate)
 		};
 	}
 	//#endregion
diff --git a/src/api/endpoints/users.ts b/src/api/endpoints/users.ts
index 134f262fb1..f3c9b66a5e 100644
--- a/src/api/endpoints/users.ts
+++ b/src/api/endpoints/users.ts
@@ -21,13 +21,13 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
-	// Check if both of since_id and max_id is specified
-	if (sinceId && maxId) {
-		return rej('cannot set since_id and max_id');
+	// Check if both of since_id and until_id is specified
+	if (sinceId && untilId) {
+		return rej('cannot set since_id and until_id');
 	}
 
 	// Construct query
@@ -40,9 +40,9 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	}
 
diff --git a/src/api/endpoints/users/posts.ts b/src/api/endpoints/users/posts.ts
index fe821cf17a..0d8384a43d 100644
--- a/src/api/endpoints/users/posts.ts
+++ b/src/api/endpoints/users/posts.ts
@@ -42,21 +42,21 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [sinceId, sinceIdErr] = $(params.since_id).optional.id().$;
 	if (sinceIdErr) return rej('invalid since_id param');
 
-	// Get 'max_id' parameter
-	const [maxId, maxIdErr] = $(params.max_id).optional.id().$;
-	if (maxIdErr) return rej('invalid max_id param');
+	// Get 'until_id' parameter
+	const [untilId, untilIdErr] = $(params.until_id).optional.id().$;
+	if (untilIdErr) return rej('invalid until_id param');
 
 	// Get 'since_date' parameter
 	const [sinceDate, sinceDateErr] = $(params.since_date).optional.number().$;
 	if (sinceDateErr) throw 'invalid since_date param';
 
-	// Get 'max_date' parameter
-	const [maxDate, maxDateErr] = $(params.max_date).optional.number().$;
-	if (maxDateErr) throw 'invalid max_date param';
+	// Get 'until_date' parameter
+	const [untilDate, untilDateErr] = $(params.until_date).optional.number().$;
+	if (untilDateErr) throw 'invalid until_date param';
 
-	// Check if only one of since_id, max_id, since_date, max_date specified
-	if ([sinceId, maxId, sinceDate, maxDate].filter(x => x != null).length > 1) {
-		throw 'only one of since_id, max_id, since_date, max_date can be specified';
+	// Check if only one of since_id, until_id, since_date, until_date specified
+	if ([sinceId, untilId, sinceDate, untilDate].filter(x => x != null).length > 1) {
+		throw 'only one of since_id, until_id, since_date, until_date can be specified';
 	}
 
 	const q = userId !== undefined
@@ -88,18 +88,18 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 		query._id = {
 			$gt: sinceId
 		};
-	} else if (maxId) {
+	} else if (untilId) {
 		query._id = {
-			$lt: maxId
+			$lt: untilId
 		};
 	} else if (sinceDate) {
 		sort._id = 1;
 		query.created_at = {
 			$gt: new Date(sinceDate)
 		};
-	} else if (maxDate) {
+	} else if (untilDate) {
 		query.created_at = {
-			$lt: new Date(maxDate)
+			$lt: new Date(untilDate)
 		};
 	}
 
diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag
index a149e1de22..7b4d1be569 100644
--- a/src/web/app/common/tags/messaging/room.tag
+++ b/src/web/app/common/tags/messaging/room.tag
@@ -254,7 +254,7 @@
 			this.api('messaging/messages', {
 				user_id: this.user.id,
 				limit: max + 1,
-				max_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined
+				until_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined
 			}).then(messages => {
 				if (messages.length == max + 1) {
 					this.moreMessagesIsInStock = true;
diff --git a/src/web/app/desktop/tags/home-widgets/mentions.tag b/src/web/app/desktop/tags/home-widgets/mentions.tag
index a48c7239a1..2687283079 100644
--- a/src/web/app/desktop/tags/home-widgets/mentions.tag
+++ b/src/web/app/desktop/tags/home-widgets/mentions.tag
@@ -101,7 +101,7 @@
 			});
 			this.api('posts/mentions', {
 				following: this.mode == 'following',
-				max_id: this.refs.timeline.tail().id
+				until_id: this.refs.timeline.tail().id
 			}).then(posts => {
 				this.update({
 					moreLoading: false
diff --git a/src/web/app/desktop/tags/home-widgets/timeline.tag b/src/web/app/desktop/tags/home-widgets/timeline.tag
index 4c58aa4aa8..9571b09f34 100644
--- a/src/web/app/desktop/tags/home-widgets/timeline.tag
+++ b/src/web/app/desktop/tags/home-widgets/timeline.tag
@@ -86,7 +86,7 @@
 			});
 
 			this.api('posts/timeline', {
-				max_date: this.date ? this.date.getTime() : undefined
+				until_date: this.date ? this.date.getTime() : undefined
 			}).then(posts => {
 				this.update({
 					isLoading: false,
@@ -103,7 +103,7 @@
 				moreLoading: true
 			});
 			this.api('posts/timeline', {
-				max_id: this.refs.timeline.tail().id
+				until_id: this.refs.timeline.tail().id
 			}).then(posts => {
 				this.update({
 					moreLoading: false
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
index 3218c00f6a..39862487e9 100644
--- a/src/web/app/desktop/tags/notifications.tag
+++ b/src/web/app/desktop/tags/notifications.tag
@@ -283,7 +283,7 @@
 
 			this.api('i/notifications', {
 				limit: max + 1,
-				max_id: this.notifications[this.notifications.length - 1].id
+				until_id: this.notifications[this.notifications.length - 1].id
 			}).then(notifications => {
 				if (notifications.length == max + 1) {
 					this.moreNotifications = true;
diff --git a/src/web/app/desktop/tags/user-timeline.tag b/src/web/app/desktop/tags/user-timeline.tag
index 2b05f6b5cf..134aeee28c 100644
--- a/src/web/app/desktop/tags/user-timeline.tag
+++ b/src/web/app/desktop/tags/user-timeline.tag
@@ -96,7 +96,7 @@
 		this.fetch = cb => {
 			this.api('users/posts', {
 				user_id: this.user.id,
-				max_date: this.date ? this.date.getTime() : undefined,
+				until_date: this.date ? this.date.getTime() : undefined,
 				with_replies: this.mode == 'with-replies'
 			}).then(posts => {
 				this.update({
@@ -116,7 +116,7 @@
 			this.api('users/posts', {
 				user_id: this.user.id,
 				with_replies: this.mode == 'with-replies',
-				max_id: this.refs.timeline.tail().id
+				until_id: this.refs.timeline.tail().id
 			}).then(posts => {
 				this.update({
 					moreLoading: false
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 41dbfddae9..2a3ff23bfa 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -430,7 +430,7 @@
 			this.api('drive/files', {
 				folder_id: this.folder ? this.folder.id : null,
 				limit: max + 1,
-				max_id: this.files[this.files.length - 1].id
+				until_id: this.files[this.files.length - 1].id
 			}).then(files => {
 				if (files.length == max + 1) {
 					this.moreFiles = true;
diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index e96823fa10..397d2b3980 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -47,7 +47,7 @@
 
 		this.more = () => {
 			return this.api('posts/timeline', {
-				max_id: this.refs.timeline.tail().id
+				until_id: this.refs.timeline.tail().id
 			});
 		};
 
diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag
index c3500d1b84..742cc45145 100644
--- a/src/web/app/mobile/tags/notifications.tag
+++ b/src/web/app/mobile/tags/notifications.tag
@@ -146,7 +146,7 @@
 
 			this.api('i/notifications', {
 				limit: max + 1,
-				max_id: this.notifications[this.notifications.length - 1].id
+				until_id: this.notifications[this.notifications.length - 1].id
 			}).then(notifications => {
 				if (notifications.length == max + 1) {
 					this.moreNotifications = true;
diff --git a/src/web/app/mobile/tags/user-timeline.tag b/src/web/app/mobile/tags/user-timeline.tag
index 4dbe719f5a..86ead5971f 100644
--- a/src/web/app/mobile/tags/user-timeline.tag
+++ b/src/web/app/mobile/tags/user-timeline.tag
@@ -26,7 +26,7 @@
 			return this.api('users/posts', {
 				user_id: this.user.id,
 				with_media: this.withMedia,
-				max_id: this.refs.timeline.tail().id
+				until_id: this.refs.timeline.tail().id
 			});
 		};
 	</script>
diff --git a/src/web/docs/api/endpoints/posts/timeline.yaml b/src/web/docs/api/endpoints/posts/timeline.yaml
index e1d78c082e..01976b0611 100644
--- a/src/web/docs/api/endpoints/posts/timeline.yaml
+++ b/src/web/docs/api/endpoints/posts/timeline.yaml
@@ -15,7 +15,7 @@ params:
     optional: true
     desc:
       ja: "指定すると、この投稿を基点としてより新しい投稿を取得します"
-  - name: "max_id"
+  - name: "until_id"
     type: "id(Post)"
     optional: true
     desc:
@@ -25,7 +25,7 @@ params:
     optional: true
     desc:
       ja: "指定した時間を基点としてより新しい投稿を取得します。数値は、1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。"
-  - name: "max_date"
+  - name: "until_date"
     type: "number"
     optional: true
     desc:
-- 
cgit v1.2.3-freya


From eaf0d5e637e0fd5be62b7ccf940ba1bcebeba786 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 04:01:44 +0900
Subject: #1017 #155

---
 src/api/endpoints/posts/search.ts                | 96 ++++++++++++++++++++----
 src/web/app/common/scripts/parse-search-query.ts | 41 ++++++++++
 src/web/app/desktop/router.ts                    |  4 +-
 src/web/app/desktop/tags/search-posts.tag        |  6 +-
 src/web/app/desktop/tags/ui.tag                  |  2 +-
 src/web/app/mobile/router.ts                     |  4 +-
 src/web/app/mobile/tags/search-posts.tag         |  6 +-
 src/web/app/mobile/tags/ui.tag                   |  2 +-
 src/web/docs/search.ja.pug                       | 38 ++++++++++
 9 files changed, 172 insertions(+), 27 deletions(-)
 create mode 100644 src/web/app/common/scripts/parse-search-query.ts
 create mode 100644 src/web/docs/search.ja.pug

(limited to 'src/web/app')

diff --git a/src/api/endpoints/posts/search.ts b/src/api/endpoints/posts/search.ts
index b434f64342..dba7a53b5f 100644
--- a/src/api/endpoints/posts/search.ts
+++ b/src/api/endpoints/posts/search.ts
@@ -5,6 +5,7 @@ import * as mongo from 'mongodb';
 import $ from 'cafy';
 const escapeRegexp = require('escape-regexp');
 import Post from '../../models/post';
+import User from '../../models/user';
 import serialize from '../../serializers/post';
 import config from '../../../conf';
 
@@ -16,33 +17,98 @@ import config from '../../../conf';
  * @return {Promise<any>}
  */
 module.exports = (params, me) => new Promise(async (res, rej) => {
-	// Get 'query' parameter
-	const [query, queryError] = $(params.query).string().pipe(x => x != '').$;
-	if (queryError) return rej('invalid query param');
+	// Get 'text' parameter
+	const [text, textError] = $(params.text).optional.string().$;
+	if (textError) return rej('invalid text param');
+
+	// Get 'user_id' parameter
+	const [userId, userIdErr] = $(params.user_id).optional.id().$;
+	if (userIdErr) return rej('invalid user_id param');
+
+	// Get 'username' parameter
+	const [username, usernameErr] = $(params.username).optional.string().$;
+	if (usernameErr) return rej('invalid username param');
+
+	// Get 'include_replies' parameter
+	const [includeReplies = true, includeRepliesErr] = $(params.include_replies).optional.boolean().$;
+	if (includeRepliesErr) return rej('invalid include_replies param');
+
+	// Get 'with_media' parameter
+	const [withMedia = false, withMediaErr] = $(params.with_media).optional.boolean().$;
+	if (withMediaErr) return rej('invalid with_media param');
+
+	// Get 'since_date' parameter
+	const [sinceDate, sinceDateErr] = $(params.since_date).optional.number().$;
+	if (sinceDateErr) throw 'invalid since_date param';
+
+	// Get 'until_date' parameter
+	const [untilDate, untilDateErr] = $(params.until_date).optional.number().$;
+	if (untilDateErr) throw 'invalid until_date param';
 
 	// Get 'offset' parameter
 	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
 	if (offsetErr) return rej('invalid offset param');
 
-	// Get 'max' parameter
-	const [max = 10, maxErr] = $(params.max).optional.number().range(1, 30).$;
-	if (maxErr) return rej('invalid max param');
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 30).$;
+	if (limitErr) return rej('invalid limit param');
+
+	let user = userId;
+
+	if (user == null && username != null) {
+		const _user = await User.findOne({
+			username_lower: username.toLowerCase()
+		});
+		if (_user) {
+			user = _user._id;
+		}
+	}
 
-	// If Elasticsearch is available, search by $
+	// If Elasticsearch is available, search by it
 	// If not, search by MongoDB
 	(config.elasticsearch.enable ? byElasticsearch : byNative)
-		(res, rej, me, query, offset, max);
+		(res, rej, me, text, user, includeReplies, withMedia, sinceDate, untilDate, offset, limit);
 });
 
 // Search by MongoDB
-async function byNative(res, rej, me, query, offset, max) {
-	const escapedQuery = escapeRegexp(query);
+async function byNative(res, rej, me, text, userId, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
+	const q: any = {};
+
+	if (text) {
+		q.$and = text.split(' ').map(x => ({
+			text: new RegExp(escapeRegexp(x))
+		}));
+	}
+
+	if (userId) {
+		q.user_id = userId;
+	}
+
+	if (!includeReplies) {
+		q.reply_id = null;
+	}
+
+	if (withMedia) {
+		q.media_ids = {
+			$exists: true,
+			$ne: null
+		};
+	}
+
+	if (sinceDate) {
+		q.created_at = {
+			$gt: new Date(sinceDate)
+		};
+	}
+
+	if (untilDate) {
+		if (q.created_at == undefined) q.created_at = {};
+		q.created_at.$lt = new Date(untilDate);
+	}
 
 	// Search posts
 	const posts = await Post
-		.find({
-			text: new RegExp(escapedQuery)
-		}, {
+		.find(q, {
 			sort: {
 				_id: -1
 			},
@@ -56,7 +122,7 @@ async function byNative(res, rej, me, query, offset, max) {
 }
 
 // Search by Elasticsearch
-async function byElasticsearch(res, rej, me, query, offset, max) {
+async function byElasticsearch(res, rej, me, text, userId, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
 	const es = require('../../db/elasticsearch');
 
 	es.search({
@@ -68,7 +134,7 @@ async function byElasticsearch(res, rej, me, query, offset, max) {
 			query: {
 				simple_query_string: {
 					fields: ['text'],
-					query: query,
+					query: text,
 					default_operator: 'and'
 				}
 			},
diff --git a/src/web/app/common/scripts/parse-search-query.ts b/src/web/app/common/scripts/parse-search-query.ts
new file mode 100644
index 0000000000..adcbfbb8fe
--- /dev/null
+++ b/src/web/app/common/scripts/parse-search-query.ts
@@ -0,0 +1,41 @@
+export default function(qs: string) {
+	const q = {
+		text: ''
+	};
+
+	qs.split(' ').forEach(x => {
+		if (/^([a-z_]+?):(.+?)$/.test(x)) {
+			const [key, value] = x.split(':');
+			switch (key) {
+				case 'user':
+					q['username'] = value;
+					break;
+				case 'reply':
+					q['include_replies'] = value == 'true';
+					break;
+				case 'media':
+					q['with_media'] = value == 'true';
+					break;
+				case 'until':
+				case 'since':
+					// YYYY-MM-DD
+					if (/^[0-9]+\-[0-9]+\-[0-9]+$/) {
+						const [yyyy, mm, dd] = value.split('-');
+						q[`${key}_date`] = (new Date(parseInt(yyyy, 10), parseInt(mm, 10) - 1, parseInt(dd, 10))).getTime();
+					}
+					break;
+				default:
+					q[key] = value;
+					break;
+			}
+		} else {
+			q.text += x + ' ';
+		}
+	});
+
+	if (q.text) {
+		q.text = q.text.trim();
+	}
+
+	return q;
+}
diff --git a/src/web/app/desktop/router.ts b/src/web/app/desktop/router.ts
index 27b63ab2ef..ce68c4f2d1 100644
--- a/src/web/app/desktop/router.ts
+++ b/src/web/app/desktop/router.ts
@@ -16,7 +16,7 @@ export default (mios: MiOS) => {
 	route('/i/messaging/:user',      messaging);
 	route('/i/mentions',             mentions);
 	route('/post::post',             post);
-	route('/search::query',          search);
+	route('/search',                 search);
 	route('/:user',                  user.bind(null, 'home'));
 	route('/:user/graphs',           user.bind(null, 'graphs'));
 	route('/:user/:post',            post);
@@ -47,7 +47,7 @@ export default (mios: MiOS) => {
 
 	function search(ctx) {
 		const el = document.createElement('mk-search-page');
-		el.setAttribute('query', ctx.params.query);
+		el.setAttribute('query', ctx.querystring.substr(2));
 		mount(el);
 	}
 
diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag
index 52f765d1a1..c6b24837d2 100644
--- a/src/web/app/desktop/tags/search-posts.tag
+++ b/src/web/app/desktop/tags/search-posts.tag
@@ -33,6 +33,8 @@
 
 	</style>
 	<script>
+		import parse from '../../common/scripts/parse-search-query';
+
 		this.mixin('api');
 
 		this.query = this.opts.query;
@@ -45,9 +47,7 @@
 			document.addEventListener('keydown', this.onDocumentKeydown);
 			window.addEventListener('scroll', this.onScroll);
 
-			this.api('posts/search', {
-				query: this.query
-			}).then(posts => {
+			this.api('posts/search', parse(this.query)).then(posts => {
 				this.update({
 					isLoading: false,
 					isEmpty: posts.length == 0
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 059d88528d..3dfdeec01c 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -180,7 +180,7 @@
 
 		this.onsubmit = e => {
 			e.preventDefault();
-			this.page('/search:' + this.refs.q.value);
+			this.page('/search?q=' + encodeURIComponent(this.refs.q.value));
 		};
 	</script>
 </mk-ui-header-search>
diff --git a/src/web/app/mobile/router.ts b/src/web/app/mobile/router.ts
index d0c6add0b8..afb9aa6201 100644
--- a/src/web/app/mobile/router.ts
+++ b/src/web/app/mobile/router.ts
@@ -23,7 +23,7 @@ export default (mios: MiOS) => {
 	route('/i/settings/authorized-apps', settingsAuthorizedApps);
 	route('/post/new',                   newPost);
 	route('/post::post',                 post);
-	route('/search::query',              search);
+	route('/search',                     search);
 	route('/:user',                      user.bind(null, 'overview'));
 	route('/:user/graphs',               user.bind(null, 'graphs'));
 	route('/:user/followers',            userFollowers);
@@ -83,7 +83,7 @@ export default (mios: MiOS) => {
 
 	function search(ctx) {
 		const el = document.createElement('mk-search-page');
-		el.setAttribute('query', ctx.params.query);
+		el.setAttribute('query', ctx.querystring.substr(2));
 		mount(el);
 	}
 
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
index 967764bc2c..023a35bf62 100644
--- a/src/web/app/mobile/tags/search-posts.tag
+++ b/src/web/app/mobile/tags/search-posts.tag
@@ -15,6 +15,8 @@
 				width calc(100% - 32px)
 	</style>
 	<script>
+		import parse from '../../common/scripts/parse-search-query';
+
 		this.mixin('api');
 
 		this.max = 30;
@@ -24,9 +26,7 @@
 		this.withMedia = this.opts.withMedia;
 
 		this.init = new Promise((res, rej) => {
-			this.api('posts/search', {
-				query: this.query
-			}).then(posts => {
+			this.api('posts/search', parse(this.query)).then(posts => {
 				res(posts);
 				this.trigger('loaded');
 			});
diff --git a/src/web/app/mobile/tags/ui.tag b/src/web/app/mobile/tags/ui.tag
index 621f89f336..77ad14530d 100644
--- a/src/web/app/mobile/tags/ui.tag
+++ b/src/web/app/mobile/tags/ui.tag
@@ -413,7 +413,7 @@
 		this.search = () => {
 			const query = window.prompt('%i18n:mobile.tags.mk-ui-nav.search%');
 			if (query == null || query == '') return;
-			this.page('/search:' + query);
+			this.page('/search?q=' + encodeURIComponent(query));
 		};
 	</script>
 </mk-ui-nav>
diff --git a/src/web/docs/search.ja.pug b/src/web/docs/search.ja.pug
new file mode 100644
index 0000000000..f7ec9519f5
--- /dev/null
+++ b/src/web/docs/search.ja.pug
@@ -0,0 +1,38 @@
+h1 検索
+
+p 投稿を検索することができます。
+p
+	| キーワードを半角スペースで区切ると、and検索になります。
+	| 例えば、「git コミット」と検索すると、「gitで編集したファイルの特定の行だけコミットする方法がわからない」などがマッチします。
+
+section
+	h2 オプション
+	p
+		| オプションを使用して、より高度な検索をすることもできます。
+		| オプションを指定するには、「オプション名:値」という形式でクエリに含めます。
+	p 利用可能なオプション一覧です:
+
+	table
+		thead
+			tr
+				th 名前
+				th 説明
+		tbody
+			tr
+				td user
+				td ユーザー名。投稿者を限定します。
+			tr
+				td reply
+				td 返信を含めるか否か。(trueかfalse)
+			tr
+				td media
+				td メディアが添付されているか。(trueかfalse)
+			tr
+				td until
+				td 上限の日時。(YYYY-MM-DD)
+			tr
+				td since
+				td 下限の日時。(YYYY-MM-DD)
+
+	p 例えば、「@syuiloの2017年11月1日から2017年12月31日までの『Misskey』というテキストを含む返信ではない投稿」を検索したい場合、クエリは以下のようになります:
+	code user:syuilo since:2017-11-01 until:2017-12-31 reply:false Misskey
-- 
cgit v1.2.3-freya


From 59120063fe792ba0bc230749a36b1e4acf86443f Mon Sep 17 00:00:00 2001
From: こぴなたみぽ <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 06:31:56 +0900
Subject: #1023

---
 src/api/endpoints/posts/search.ts                | 21 ++++++++++++++++++---
 src/web/app/common/scripts/parse-search-query.ts |  3 +++
 src/web/docs/search.ja.pug                       |  3 +++
 3 files changed, 24 insertions(+), 3 deletions(-)

(limited to 'src/web/app')

diff --git a/src/api/endpoints/posts/search.ts b/src/api/endpoints/posts/search.ts
index dba7a53b5f..88cdd32dac 100644
--- a/src/api/endpoints/posts/search.ts
+++ b/src/api/endpoints/posts/search.ts
@@ -6,6 +6,7 @@ import $ from 'cafy';
 const escapeRegexp = require('escape-regexp');
 import Post from '../../models/post';
 import User from '../../models/user';
+import getFriends from '../../common/get-friends';
 import serialize from '../../serializers/post';
 import config from '../../../conf';
 
@@ -29,6 +30,10 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [username, usernameErr] = $(params.username).optional.string().$;
 	if (usernameErr) return rej('invalid username param');
 
+	// Get 'following' parameter
+	const [following = null, followingErr] = $(params.following).optional.nullable.boolean().$;
+	if (followingErr) return rej('invalid following param');
+
 	// Get 'include_replies' parameter
 	const [includeReplies = true, includeRepliesErr] = $(params.include_replies).optional.boolean().$;
 	if (includeRepliesErr) return rej('invalid include_replies param');
@@ -67,11 +72,11 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	// If Elasticsearch is available, search by it
 	// If not, search by MongoDB
 	(config.elasticsearch.enable ? byElasticsearch : byNative)
-		(res, rej, me, text, user, includeReplies, withMedia, sinceDate, untilDate, offset, limit);
+		(res, rej, me, text, user, following, includeReplies, withMedia, sinceDate, untilDate, offset, limit);
 });
 
 // Search by MongoDB
-async function byNative(res, rej, me, text, userId, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
+async function byNative(res, rej, me, text, userId, following, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
 	const q: any = {};
 
 	if (text) {
@@ -84,6 +89,16 @@ async function byNative(res, rej, me, text, userId, includeReplies, withMedia, s
 		q.user_id = userId;
 	}
 
+	if (following != null) {
+		const ids = await getFriends(me._id, false);
+		q.user_id = {};
+		if (following) {
+			q.user_id.$in = ids;
+		} else {
+			q.user_id.$nin = ids;
+		}
+	}
+
 	if (!includeReplies) {
 		q.reply_id = null;
 	}
@@ -122,7 +137,7 @@ async function byNative(res, rej, me, text, userId, includeReplies, withMedia, s
 }
 
 // Search by Elasticsearch
-async function byElasticsearch(res, rej, me, text, userId, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
+async function byElasticsearch(res, rej, me, text, userId, following, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
 	const es = require('../../db/elasticsearch');
 
 	es.search({
diff --git a/src/web/app/common/scripts/parse-search-query.ts b/src/web/app/common/scripts/parse-search-query.ts
index adcbfbb8fe..62b2cf51b1 100644
--- a/src/web/app/common/scripts/parse-search-query.ts
+++ b/src/web/app/common/scripts/parse-search-query.ts
@@ -10,6 +10,9 @@ export default function(qs: string) {
 				case 'user':
 					q['username'] = value;
 					break;
+				case 'follow':
+					q['following'] = value == 'null' ? null : value == 'true';
+					break;
 				case 'reply':
 					q['include_replies'] = value == 'true';
 					break;
diff --git a/src/web/docs/search.ja.pug b/src/web/docs/search.ja.pug
index f7ec9519f5..7d4d23fb6a 100644
--- a/src/web/docs/search.ja.pug
+++ b/src/web/docs/search.ja.pug
@@ -21,6 +21,9 @@ section
 			tr
 				td user
 				td ユーザー名。投稿者を限定します。
+			tr
+				td follow
+				td フォローしているユーザーのみに限定。(trueかfalse)
 			tr
 				td reply
 				td 返信を含めるか否か。(trueかfalse)
-- 
cgit v1.2.3-freya


From 40f5e67ff0f803fab117c405a0614df915381433 Mon Sep 17 00:00:00 2001
From: こぴなたみぽ <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 07:35:16 +0900
Subject: :v:

---
 src/api/endpoints/posts/search.ts                | 130 +++++++++++++++++------
 src/web/app/common/scripts/parse-search-query.ts |   7 +-
 src/web/docs/search.ja.pug                       |  29 ++++-
 3 files changed, 131 insertions(+), 35 deletions(-)

(limited to 'src/web/app')

diff --git a/src/api/endpoints/posts/search.ts b/src/api/endpoints/posts/search.ts
index 88cdd32dac..21e9134d38 100644
--- a/src/api/endpoints/posts/search.ts
+++ b/src/api/endpoints/posts/search.ts
@@ -34,13 +34,17 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [following = null, followingErr] = $(params.following).optional.nullable.boolean().$;
 	if (followingErr) return rej('invalid following param');
 
-	// Get 'include_replies' parameter
-	const [includeReplies = true, includeRepliesErr] = $(params.include_replies).optional.boolean().$;
-	if (includeRepliesErr) return rej('invalid include_replies param');
+	// Get 'reply' parameter
+	const [reply = null, replyErr] = $(params.reply).optional.nullable.boolean().$;
+	if (replyErr) return rej('invalid reply param');
 
-	// Get 'with_media' parameter
-	const [withMedia = false, withMediaErr] = $(params.with_media).optional.boolean().$;
-	if (withMediaErr) return rej('invalid with_media param');
+	// Get 'repost' parameter
+	const [repost = null, repostErr] = $(params.repost).optional.nullable.boolean().$;
+	if (repostErr) return rej('invalid repost param');
+
+	// Get 'media' parameter
+	const [media = null, mediaErr] = $(params.media).optional.nullable.boolean().$;
+	if (mediaErr) return rej('invalid media param');
 
 	// Get 'since_date' parameter
 	const [sinceDate, sinceDateErr] = $(params.since_date).optional.number().$;
@@ -72,53 +76,119 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	// If Elasticsearch is available, search by it
 	// If not, search by MongoDB
 	(config.elasticsearch.enable ? byElasticsearch : byNative)
-		(res, rej, me, text, user, following, includeReplies, withMedia, sinceDate, untilDate, offset, limit);
+		(res, rej, me, text, user, following, reply, repost, media, sinceDate, untilDate, offset, limit);
 });
 
 // Search by MongoDB
-async function byNative(res, rej, me, text, userId, following, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
-	const q: any = {};
+async function byNative(res, rej, me, text, userId, following, reply, repost, media, sinceDate, untilDate, offset, max) {
+	const q: any = {
+		$and: []
+	};
+
+	const push = q.$and.push;
 
 	if (text) {
-		q.$and = text.split(' ').map(x => ({
-			text: new RegExp(escapeRegexp(x))
-		}));
+		push({
+			$and: text.split(' ').map(x => ({
+				text: new RegExp(escapeRegexp(x))
+			}))
+		});
 	}
 
 	if (userId) {
-		q.user_id = userId;
+		push({
+			user_id: userId
+		});
 	}
 
 	if (following != null) {
 		const ids = await getFriends(me._id, false);
-		q.user_id = {};
-		if (following) {
-			q.user_id.$in = ids;
+		push({
+			user_id: following ? {
+				$in: ids
+			} : {
+				$nin: ids
+			}
+		});
+	}
+
+	if (reply != null) {
+		if (reply) {
+			push({
+				reply_id: {
+					$exists: true,
+					$ne: null
+				}
+			});
 		} else {
-			q.user_id.$nin = ids;
+			push({
+				$or: [{
+					reply_id: {
+						$exists: false
+					}
+				}, {
+					reply_id: null
+				}]
+			});
 		}
 	}
 
-	if (!includeReplies) {
-		q.reply_id = null;
+	if (repost != null) {
+		if (repost) {
+			push({
+				repost_id: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					repost_id: {
+						$exists: false
+					}
+				}, {
+					repost_id: null
+				}]
+			});
+		}
 	}
 
-	if (withMedia) {
-		q.media_ids = {
-			$exists: true,
-			$ne: null
-		};
+	if (media != null) {
+		if (media) {
+			push({
+				media_ids: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					media_ids: {
+						$exists: false
+					}
+				}, {
+					media_ids: null
+				}]
+			});
+		}
 	}
 
 	if (sinceDate) {
-		q.created_at = {
-			$gt: new Date(sinceDate)
-		};
+		push({
+			created_at: {
+				$gt: new Date(sinceDate)
+			}
+		});
 	}
 
 	if (untilDate) {
-		if (q.created_at == undefined) q.created_at = {};
-		q.created_at.$lt = new Date(untilDate);
+		push({
+			created_at: {
+				$lt: new Date(untilDate)
+			}
+		});
 	}
 
 	// Search posts
@@ -137,7 +207,7 @@ async function byNative(res, rej, me, text, userId, following, includeReplies, w
 }
 
 // Search by Elasticsearch
-async function byElasticsearch(res, rej, me, text, userId, following, includeReplies, withMedia, sinceDate, untilDate, offset, max) {
+async function byElasticsearch(res, rej, me, text, userId, following, reply, repost, media, sinceDate, untilDate, offset, max) {
 	const es = require('../../db/elasticsearch');
 
 	es.search({
diff --git a/src/web/app/common/scripts/parse-search-query.ts b/src/web/app/common/scripts/parse-search-query.ts
index 62b2cf51b1..f65e4683a6 100644
--- a/src/web/app/common/scripts/parse-search-query.ts
+++ b/src/web/app/common/scripts/parse-search-query.ts
@@ -14,10 +14,13 @@ export default function(qs: string) {
 					q['following'] = value == 'null' ? null : value == 'true';
 					break;
 				case 'reply':
-					q['include_replies'] = value == 'true';
+					q['reply'] = value == 'null' ? null : value == 'true';
+					break;
+				case 'repost':
+					q['repost'] = value == 'null' ? null : value == 'true';
 					break;
 				case 'media':
-					q['with_media'] = value == 'true';
+					q['media'] = value == 'null' ? null : value == 'true';
 					break;
 				case 'until':
 				case 'since':
diff --git a/src/web/docs/search.ja.pug b/src/web/docs/search.ja.pug
index 7d4d23fb6a..d46e5f4a04 100644
--- a/src/web/docs/search.ja.pug
+++ b/src/web/docs/search.ja.pug
@@ -23,13 +23,36 @@ section
 				td ユーザー名。投稿者を限定します。
 			tr
 				td follow
-				td フォローしているユーザーのみに限定。(trueかfalse)
+				td
+					| true ... フォローしているユーザーに限定。
+					br
+					| false ... フォローしていないユーザーに限定。
+					br
+					| null ... 特に限定しない(デフォルト)
 			tr
 				td reply
-				td 返信を含めるか否か。(trueかfalse)
+				td
+					| true ... 返信に限定。
+					br
+					| false ... 返信でない投稿に限定。
+					br
+					| null ... 特に限定しない(デフォルト)
+			tr
+				td repost
+				td
+					| true ... Repostに限定。
+					br
+					| false ... Repostでない投稿に限定。
+					br
+					| null ... 特に限定しない(デフォルト)
 			tr
 				td media
-				td メディアが添付されているか。(trueかfalse)
+				td
+					| true ... メディアが添付されている投稿に限定。
+					br
+					| false ... メディアが添付されていない投稿に限定。
+					br
+					| null ... 特に限定しない(デフォルト)
 			tr
 				td until
 				td 上限の日時。(YYYY-MM-DD)
-- 
cgit v1.2.3-freya


From aff76a57c0d123b992d7284faba6c5a146985246 Mon Sep 17 00:00:00 2001
From: こぴなたみぽ <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 07:57:31 +0900
Subject: :v:

---
 src/api/endpoints/posts/search.ts                | 31 +++++++++++++++++++++---
 src/web/app/common/scripts/parse-search-query.ts |  3 +++
 src/web/docs/search.ja.pug                       |  8 ++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

(limited to 'src/web/app')

diff --git a/src/api/endpoints/posts/search.ts b/src/api/endpoints/posts/search.ts
index a3c44d09ce..777cd7909a 100644
--- a/src/api/endpoints/posts/search.ts
+++ b/src/api/endpoints/posts/search.ts
@@ -46,6 +46,10 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [media = null, mediaErr] = $(params.media).optional.nullable.boolean().$;
 	if (mediaErr) return rej('invalid media param');
 
+	// Get 'poll' parameter
+	const [poll = null, pollErr] = $(params.poll).optional.nullable.boolean().$;
+	if (pollErr) return rej('invalid poll param');
+
 	// Get 'since_date' parameter
 	const [sinceDate, sinceDateErr] = $(params.since_date).optional.number().$;
 	if (sinceDateErr) throw 'invalid since_date param';
@@ -76,11 +80,11 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	// If Elasticsearch is available, search by it
 	// If not, search by MongoDB
 	(config.elasticsearch.enable ? byElasticsearch : byNative)
-		(res, rej, me, text, user, following, reply, repost, media, sinceDate, untilDate, offset, limit);
+		(res, rej, me, text, user, following, reply, repost, media, poll, sinceDate, untilDate, offset, limit);
 });
 
 // Search by MongoDB
-async function byNative(res, rej, me, text, userId, following, reply, repost, media, sinceDate, untilDate, offset, max) {
+async function byNative(res, rej, me, text, userId, following, reply, repost, media, poll, sinceDate, untilDate, offset, max) {
 	const q: any = {
 		$and: []
 	};
@@ -175,6 +179,27 @@ async function byNative(res, rej, me, text, userId, following, reply, repost, me
 		}
 	}
 
+	if (poll != null) {
+		if (poll) {
+			push({
+				poll: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					poll: {
+						$exists: false
+					}
+				}, {
+					poll: null
+				}]
+			});
+		}
+	}
+
 	if (sinceDate) {
 		push({
 			created_at: {
@@ -207,7 +232,7 @@ async function byNative(res, rej, me, text, userId, following, reply, repost, me
 }
 
 // Search by Elasticsearch
-async function byElasticsearch(res, rej, me, text, userId, following, reply, repost, media, sinceDate, untilDate, offset, max) {
+async function byElasticsearch(res, rej, me, text, userId, following, reply, repost, media, poll, sinceDate, untilDate, offset, max) {
 	const es = require('../../db/elasticsearch');
 
 	es.search({
diff --git a/src/web/app/common/scripts/parse-search-query.ts b/src/web/app/common/scripts/parse-search-query.ts
index f65e4683a6..c021ee6417 100644
--- a/src/web/app/common/scripts/parse-search-query.ts
+++ b/src/web/app/common/scripts/parse-search-query.ts
@@ -22,6 +22,9 @@ export default function(qs: string) {
 				case 'media':
 					q['media'] = value == 'null' ? null : value == 'true';
 					break;
+				case 'poll':
+					q['poll'] = value == 'null' ? null : value == 'true';
+					break;
 				case 'until':
 				case 'since':
 					// YYYY-MM-DD
diff --git a/src/web/docs/search.ja.pug b/src/web/docs/search.ja.pug
index d46e5f4a04..41e443d746 100644
--- a/src/web/docs/search.ja.pug
+++ b/src/web/docs/search.ja.pug
@@ -53,6 +53,14 @@ section
 					| false ... メディアが添付されていない投稿に限定。
 					br
 					| null ... 特に限定しない(デフォルト)
+			tr
+				td poll
+				td
+					| true ... 投票が添付されている投稿に限定。
+					br
+					| false ... 投票が添付されていない投稿に限定。
+					br
+					| null ... 特に限定しない(デフォルト)
 			tr
 				td until
 				td 上限の日時。(YYYY-MM-DD)
-- 
cgit v1.2.3-freya


From 169142cec3e10f157b43342267e22c11f890ff29 Mon Sep 17 00:00:00 2001
From: こぴなたみぽ <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 11:08:17 +0900
Subject: Fix #1025

---
 src/web/app/desktop/tags/search-posts.tag | 13 +++++++------
 src/web/app/mobile/tags/search-posts.tag  | 10 ++++------
 2 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag
index c6b24837d2..2acb675d44 100644
--- a/src/web/app/desktop/tags/search-posts.tag
+++ b/src/web/app/desktop/tags/search-posts.tag
@@ -41,7 +41,8 @@
 		this.isLoading = true;
 		this.isEmpty = false;
 		this.moreLoading = false;
-		this.page = 0;
+		this.limit = 30;
+		this.offset = 0;
 
 		this.on('mount', () => {
 			document.addEventListener('keydown', this.onDocumentKeydown);
@@ -72,16 +73,16 @@
 
 		this.more = () => {
 			if (this.moreLoading || this.isLoading || this.timeline.posts.length == 0) return;
+			this.offset += this.limit;
 			this.update({
 				moreLoading: true
 			});
-			this.api('posts/search', {
-				query: this.query,
-				page: this.page + 1
+			return this.api('posts/search', Object.assign({}, parse(this.query), {
+				limit: this.limit,
+				offset: this.offset
 			}).then(posts => {
 				this.update({
-					moreLoading: false,
-					page: page + 1
+					moreLoading: false
 				});
 				this.refs.timeline.prependPosts(posts);
 			});
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
index 023a35bf62..b37ba69e85 100644
--- a/src/web/app/mobile/tags/search-posts.tag
+++ b/src/web/app/mobile/tags/search-posts.tag
@@ -19,11 +19,10 @@
 
 		this.mixin('api');
 
-		this.max = 30;
+		this.limit = 30;
 		this.offset = 0;
 
 		this.query = this.opts.query;
-		this.withMedia = this.opts.withMedia;
 
 		this.init = new Promise((res, rej) => {
 			this.api('posts/search', parse(this.query)).then(posts => {
@@ -33,10 +32,9 @@
 		});
 
 		this.more = () => {
-			this.offset += this.max;
-			return this.api('posts/search', {
-				query: this.query,
-				max: this.max,
+			this.offset += this.limit;
+			return this.api('posts/search', Object.assign({}, parse(this.query), {
+				limit: this.limit,
 				offset: this.offset
 			});
 		};
-- 
cgit v1.2.3-freya


From f7d3b2c6ec8b467390bd030ddf7215a09610faad Mon Sep 17 00:00:00 2001
From: こぴなたみぽ <syuilotan@yahoo.co.jp>
Date: Thu, 21 Dec 2017 11:13:49 +0900
Subject: oops

---
 src/web/app/desktop/tags/search-posts.tag | 2 +-
 src/web/app/mobile/tags/search-posts.tag  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/web/app')

diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag
index 2acb675d44..f7ec85a4fe 100644
--- a/src/web/app/desktop/tags/search-posts.tag
+++ b/src/web/app/desktop/tags/search-posts.tag
@@ -80,7 +80,7 @@
 			return this.api('posts/search', Object.assign({}, parse(this.query), {
 				limit: this.limit,
 				offset: this.offset
-			}).then(posts => {
+			})).then(posts => {
 				this.update({
 					moreLoading: false
 				});
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
index b37ba69e85..3e3c034f21 100644
--- a/src/web/app/mobile/tags/search-posts.tag
+++ b/src/web/app/mobile/tags/search-posts.tag
@@ -36,7 +36,7 @@
 			return this.api('posts/search', Object.assign({}, parse(this.query), {
 				limit: this.limit,
 				offset: this.offset
-			});
+			}));
 		};
 	</script>
 </mk-search-posts>
-- 
cgit v1.2.3-freya


From 34923888c7f504b95912719e54325cb8633c8cda Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 22 Dec 2017 06:56:37 +0900
Subject: wip

---
 locales/en.yml                      |  5 +++++
 locales/ja.yml                      |  5 +++++
 src/api/serializers/user.ts         | 15 +++++++++++++--
 src/web/app/desktop/tags/user.tag   | 27 ++++++++++++++++++++++++++-
 src/web/docs/api/entities/user.yaml |  6 ++++++
 src/web/docs/mute.ja.pug            |  3 +++
 6 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/web/docs/mute.ja.pug

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index 57e0c4116f..dd3ee2a2a2 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -473,6 +473,11 @@ desktop:
     mk-user:
       last-used-at: "Last used at"
 
+      follows-you: "Follows you"
+      mute: "Mute"
+      muted: "Muting"
+      unmute: "Unmute"
+
       photos:
         title: "Photos"
         loading: "Loading"
diff --git a/locales/ja.yml b/locales/ja.yml
index ee52f07166..d12eec86d1 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -473,6 +473,11 @@ desktop:
     mk-user:
       last-used-at: "最終アクセス"
 
+      follows-you: "フォローされています"
+      mute: "ミュートする"
+      muted: "ミュートしています"
+      unmute: "ミュート解除"
+
       photos:
         title: "フォト"
         loading: "読み込み中"
diff --git a/src/api/serializers/user.ts b/src/api/serializers/user.ts
index fe924911c1..ac157097a8 100644
--- a/src/api/serializers/user.ts
+++ b/src/api/serializers/user.ts
@@ -6,6 +6,7 @@ import deepcopy = require('deepcopy');
 import { default as User, IUser } from '../models/user';
 import serializePost from './post';
 import Following from '../models/following';
+import Mute from '../models/mute';
 import getFriends from '../common/get-friends';
 import config from '../../conf';
 import rap from '@prezzemolo/rap';
@@ -113,7 +114,7 @@ export default (
 	}
 
 	if (meId && !meId.equals(_user.id)) {
-		// If the user is following
+		// Whether the user is following
 		_user.is_following = (async () => {
 			const follow = await Following.findOne({
 				follower_id: meId,
@@ -123,7 +124,7 @@ export default (
 			return follow !== null;
 		})();
 
-		// If the user is followed
+		// Whether the user is followed
 		_user.is_followed = (async () => {
 			const follow2 = await Following.findOne({
 				follower_id: _user.id,
@@ -132,6 +133,16 @@ export default (
 			});
 			return follow2 !== null;
 		})();
+
+		// Whether the user is muted
+		_user.is_muted = (async () => {
+			const mute = await Mute.findOne({
+				muter_id: meId,
+				mutee_id: _user.id,
+				deleted_at: { $exists: false }
+			});
+			return mute !== null;
+		})();
 	}
 
 	if (opts.detail) {
diff --git a/src/web/app/desktop/tags/user.tag b/src/web/app/desktop/tags/user.tag
index b4db47f9dd..b29d1eaebc 100644
--- a/src/web/app/desktop/tags/user.tag
+++ b/src/web/app/desktop/tags/user.tag
@@ -226,7 +226,9 @@
 <mk-user-profile>
 	<div class="friend-form" if={ SIGNIN && I.id != user.id }>
 		<mk-big-follow-button user={ user }/>
-		<p class="followed" if={ user.is_followed }>フォローされています</p>
+		<p class="followed" if={ user.is_followed }>%i18n:desktop.tags.mk-user.follows-you%</p>
+		<p if={ user.is_muted }>%i18n:desktop.tags.mk-user.muted% <a onclick={ unmute }>%i18n:desktop.tags.mk-user.unmute%</a></p>
+		<p if={ !user.is_muted }><a onclick={ mute }>%i18n:desktop.tags.mk-user.mute%</a></p>
 	</div>
 	<div class="description" if={ user.description }>{ user.description }</div>
 	<div class="birthday" if={ user.profile.birthday }>
@@ -311,6 +313,7 @@
 		this.age = require('s-age');
 
 		this.mixin('i');
+		this.mixin('api');
 
 		this.user = this.opts.user;
 
@@ -325,6 +328,28 @@
 				user: this.user
 			});
 		};
+
+		this.mute = () => {
+			this.api('mute/create', {
+				user_id: this.user.id
+			}).then(() => {
+				this.user.is_muted = true;
+				this.update();
+			}, e => {
+				alert('error');
+			});
+		};
+
+		this.unmute = () => {
+			this.api('mute/delete', {
+				user_id: this.user.id
+			}).then(() => {
+				this.user.is_muted = false;
+				this.update();
+			}, e => {
+				alert('error');
+			});
+		};
 	</script>
 </mk-user-profile>
 
diff --git a/src/web/docs/api/entities/user.yaml b/src/web/docs/api/entities/user.yaml
index abc3f300d2..e62ad84db8 100644
--- a/src/web/docs/api/entities/user.yaml
+++ b/src/web/docs/api/entities/user.yaml
@@ -75,6 +75,12 @@ props:
     optional: true
     desc:
       ja: "自分がこのユーザーにフォローされているか"
+  - name: "is_muted"
+    type: "boolean"
+    optional: true
+    desc:
+      ja: "自分がこのユーザーをミュートしているか"
+      en: "Whether you muted this user"
   - name: "last_used_at"
     type: "date"
     optional: false
diff --git a/src/web/docs/mute.ja.pug b/src/web/docs/mute.ja.pug
new file mode 100644
index 0000000000..4f5fad8b68
--- /dev/null
+++ b/src/web/docs/mute.ja.pug
@@ -0,0 +1,3 @@
+h1 ミュート
+
+p ユーザーをミュートすると、タイムラインや検索結果に対象のユーザーの投稿(およびそれらの投稿に対する返信やRepost)が表示されなくなります。
-- 
cgit v1.2.3-freya


From 2c4d86d8a0fca323b162adb73af60bbf644e7beb Mon Sep 17 00:00:00 2001
From: こぴなたみぽ <syuilotan@yahoo.co.jp>
Date: Fri, 22 Dec 2017 10:38:59 +0900
Subject: wip

---
 locales/en.yml                        |  4 ++++
 locales/ja.yml                        |  4 ++++
 src/web/app/desktop/tags/settings.tag | 38 +++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+)

(limited to 'src/web/app')

diff --git a/locales/en.yml b/locales/en.yml
index dd3ee2a2a2..e559846772 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -346,6 +346,9 @@ desktop:
       failed: "Failed to setup. please ensure that the token is correct."
       info: "From the next sign in, enter the token that is displayed on the device in addition to the password."
 
+    mk-mute-setting:
+      no-users: "No muted users"
+
     mk-post-form:
       post-placeholder: "What's happening?"
       reply-placeholder: "Reply to this post..."
@@ -379,6 +382,7 @@ desktop:
 
     mk-settings:
       profile: "Profile"
+      mute: "Mute"
       drive: "Drive"
       security: "Security"
       password: "Password"
diff --git a/locales/ja.yml b/locales/ja.yml
index d12eec86d1..70ff8739f3 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -346,6 +346,9 @@ desktop:
       failed: "設定に失敗しました。トークンに誤りがないかご確認ください。"
       info: "次回サインインからは、同様にパスワードに加えてデバイスに表示されているトークンを入力します。"
 
+    mk-mute-setting:
+      no-users: "ミュートしているユーザーはいません"
+
     mk-post-form:
       post-placeholder: "いまどうしてる？"
       reply-placeholder: "この投稿への返信..."
@@ -379,6 +382,7 @@ desktop:
 
     mk-settings:
       profile: "プロフィール"
+      mute: "ミュート"
       drive: "ドライブ"
       security: "セキュリティ"
       password: "パスワード"
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 2f36d9b3ec..457b7e2276 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -4,6 +4,7 @@
 		<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
 		<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
 		<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
+		<p class={ active: page == 'mute' } onmousedown={ setPage.bind(null, 'mute') }>%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p>
 		<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
 		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
 		<p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
@@ -26,6 +27,11 @@
 			<mk-drive-setting/>
 		</section>
 
+		<section class="mute" show={ page == 'mute' }>
+			<h1>%i18n:desktop.tags.mk-settings.mute%</h1>
+			<mk-mute-setting/>
+		</section>
+
 		<section class="apps" show={ page == 'apps' }>
 			<h1>アプリケーション</h1>
 			<mk-authorized-apps/>
@@ -386,3 +392,35 @@
 		});
 	</script>
 </mk-drive-setting>
+
+<mk-mute-setting>
+	<div class="none ui info" if={ !fetching && users.length == 0 }>
+		<p>%fa:info-circle%%i18n:desktop.tags.mk-mute-setting.no-users%</p>
+	</div>
+	<div class="users" if={ users.length != 0 }>
+		<div each={ user in users }>
+			<p><b>{ user.name }</b> @{ user.username }</p>
+		</div>
+	</div>
+
+	<style>
+		:scope
+			display block
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.apps = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.api('mute/list').then(x => {
+				this.update({
+					fetching: false,
+					users: x.users
+				});
+			});
+		});
+	</script>
+</mk-mute-setting>
-- 
cgit v1.2.3-freya


From f0818edd6e1d566a3d7e2b5495eeb389d728f564 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 23 Dec 2017 07:21:52 +0900
Subject: #1037 #1038

---
 src/api/endpoints/posts/search.ts                | 136 ++++++++---------------
 src/web/app/common/scripts/parse-search-query.ts |   5 +-
 src/web/docs/search.ja.pug                       |  19 +++-
 3 files changed, 71 insertions(+), 89 deletions(-)

(limited to 'src/web/app')

diff --git a/src/api/endpoints/posts/search.ts b/src/api/endpoints/posts/search.ts
index 26675989dd..31c9a8d3c8 100644
--- a/src/api/endpoints/posts/search.ts
+++ b/src/api/endpoints/posts/search.ts
@@ -1,7 +1,6 @@
 /**
  * Module dependencies
  */
-import * as mongo from 'mongodb';
 import $ from 'cafy';
 const escapeRegexp = require('escape-regexp');
 import Post from '../../models/post';
@@ -9,7 +8,6 @@ import User from '../../models/user';
 import Mute from '../../models/mute';
 import getFriends from '../../common/get-friends';
 import serialize from '../../serializers/post';
-import config from '../../../conf';
 
 /**
  * Search a post
@@ -23,13 +21,21 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [text, textError] = $(params.text).optional.string().$;
 	if (textError) return rej('invalid text param');
 
-	// Get 'user_id' parameter
-	const [userId, userIdErr] = $(params.user_id).optional.id().$;
-	if (userIdErr) return rej('invalid user_id param');
+	// Get 'include_user_ids' parameter
+	const [includeUserIds = [], includeUserIdsErr] = $(params.include_user_ids).optional.array('id').$;
+	if (includeUserIdsErr) return rej('invalid include_user_ids param');
 
-	// Get 'username' parameter
-	const [username, usernameErr] = $(params.username).optional.string().$;
-	if (usernameErr) return rej('invalid username param');
+	// Get 'exclude_user_ids' parameter
+	const [excludeUserIds = [], excludeUserIdsErr] = $(params.exclude_user_ids).optional.array('id').$;
+	if (excludeUserIdsErr) return rej('invalid exclude_user_ids param');
+
+	// Get 'include_user_usernames' parameter
+	const [includeUserUsernames = [], includeUserUsernamesErr] = $(params.include_user_usernames).optional.array('string').$;
+	if (includeUserUsernamesErr) return rej('invalid include_user_usernames param');
+
+	// Get 'exclude_user_usernames' parameter
+	const [excludeUserUsernames = [], excludeUserUsernamesErr] = $(params.exclude_user_usernames).optional.array('string').$;
+	if (excludeUserUsernamesErr) return rej('invalid exclude_user_usernames param');
 
 	// Get 'following' parameter
 	const [following = null, followingErr] = $(params.following).optional.nullable.boolean().$;
@@ -71,25 +77,36 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 30).$;
 	if (limitErr) return rej('invalid limit param');
 
-	let user = userId;
+	let includeUsers = includeUserIds;
+	if (includeUserUsernames != null) {
+		const ids = (await Promise.all(includeUserUsernames.map(async (username) => {
+			const _user = await User.findOne({
+				username_lower: username.toLowerCase()
+			});
+			return _user ? _user._id : null;
+		}))).filter(id => id != null);
+		includeUsers = includeUsers.concat(ids);
+	}
 
-	if (user == null && username != null) {
-		const _user = await User.findOne({
-			username_lower: username.toLowerCase()
-		});
-		if (_user) {
-			user = _user._id;
-		}
+	let excludeUsers = excludeUserIds;
+	if (excludeUserUsernames != null) {
+		const ids = (await Promise.all(excludeUserUsernames.map(async (username) => {
+			const _user = await User.findOne({
+				username_lower: username.toLowerCase()
+			});
+			return _user ? _user._id : null;
+		}))).filter(id => id != null);
+		excludeUsers = excludeUsers.concat(ids);
 	}
 
-	// If Elasticsearch is available, search by it
-	// If not, search by MongoDB
-	(config.elasticsearch.enable ? byElasticsearch : byNative)
-		(res, rej, me, text, user, following, mute, reply, repost, media, poll, sinceDate, untilDate, offset, limit);
+	search(res, rej, me, text, includeUsers, excludeUsers, following,
+			mute, reply, repost, media, poll, sinceDate, untilDate, offset, limit);
 });
 
-// Search by MongoDB
-async function byNative(res, rej, me, text, userId, following, mute, reply, repost, media, poll, sinceDate, untilDate, offset, max) {
+async function search(
+	res, rej, me, text, includeUserIds, excludeUserIds, following,
+	mute, reply, repost, media, poll, sinceDate, untilDate, offset, max) {
+
 	let q: any = {
 		$and: []
 	};
@@ -115,9 +132,17 @@ async function byNative(res, rej, me, text, userId, following, mute, reply, repo
 		}
 	}
 
-	if (userId) {
+	if (includeUserIds && includeUserIds.length != 0) {
 		push({
-			user_id: userId
+			user_id: {
+				$in: includeUserIds
+			}
+		});
+	} else if (excludeUserIds && excludeUserIds.length != 0) {
+		push({
+			user_id: {
+				$nin: excludeUserIds
+			}
 		});
 	}
 
@@ -328,66 +353,3 @@ async function byNative(res, rej, me, text, userId, following, mute, reply, repo
 	res(await Promise.all(posts.map(async post =>
 		await serialize(post, me))));
 }
-
-// Search by Elasticsearch
-async function byElasticsearch(res, rej, me, text, userId, following, mute, reply, repost, media, poll, sinceDate, untilDate, offset, max) {
-	const es = require('../../db/elasticsearch');
-
-	es.search({
-		index: 'misskey',
-		type: 'post',
-		body: {
-			size: max,
-			from: offset,
-			query: {
-				simple_query_string: {
-					fields: ['text'],
-					query: text,
-					default_operator: 'and'
-				}
-			},
-			sort: [
-				{ _doc: 'desc' }
-			],
-			highlight: {
-				pre_tags: ['<mark>'],
-				post_tags: ['</mark>'],
-				encoder: 'html',
-				fields: {
-					text: {}
-				}
-			}
-		}
-	}, async (error, response) => {
-		if (error) {
-			console.error(error);
-			return res(500);
-		}
-
-		if (response.hits.total === 0) {
-			return res([]);
-		}
-
-		const hits = response.hits.hits.map(hit => new mongo.ObjectID(hit._id));
-
-		// Fetch found posts
-		const posts = await Post
-			.find({
-				_id: {
-					$in: hits
-				}
-			}, {
-				sort: {
-					_id: -1
-				}
-			});
-
-		posts.map(post => {
-			post._highlight = response.hits.hits.filter(hit => post._id.equals(hit._id))[0].highlight.text[0];
-		});
-
-		// Serialize
-		res(await Promise.all(posts.map(async post =>
-			await serialize(post, me))));
-	});
-}
diff --git a/src/web/app/common/scripts/parse-search-query.ts b/src/web/app/common/scripts/parse-search-query.ts
index c021ee6417..512791ecb0 100644
--- a/src/web/app/common/scripts/parse-search-query.ts
+++ b/src/web/app/common/scripts/parse-search-query.ts
@@ -8,7 +8,10 @@ export default function(qs: string) {
 			const [key, value] = x.split(':');
 			switch (key) {
 				case 'user':
-					q['username'] = value;
+					q['include_user_usernames'] = value.split(',');
+					break;
+				case 'exclude_user':
+					q['exclude_user_usernames'] = value.split(',');
 					break;
 				case 'follow':
 					q['following'] = value == 'null' ? null : value == 'true';
diff --git a/src/web/docs/search.ja.pug b/src/web/docs/search.ja.pug
index 9e64789488..f33091ee6b 100644
--- a/src/web/docs/search.ja.pug
+++ b/src/web/docs/search.ja.pug
@@ -31,7 +31,24 @@ section
 		tbody
 			tr
 				td user
-				td ユーザー名。投稿者を限定します。
+				td
+					| 指定されたユーザー名のユーザーの投稿に限定します。
+					| 「,」(カンマ)で区切って、複数ユーザーを指定することもできます。
+					br
+					| 例えば、
+					code user:himawari,sakurako
+					| と検索すると「@himawariまたは@sakurakoの投稿」だけに限定します。
+					| (つまりユーザーのホワイトリストです)
+			tr
+				td exclude_user
+				td
+					| 指定されたユーザー名のユーザーの投稿を除外します。
+					| 「,」(カンマ)で区切って、複数ユーザーを指定することもできます。
+					br
+					| 例えば、
+					code exclude_user:akari,chinatsu
+					| と検索すると「@akariまたは@chinatsu以外の投稿」に限定します。
+					| (つまりユーザーのブラックリストです)
 			tr
 				td follow
 				td
-- 
cgit v1.2.3-freya


From d8f8730a7423c2c7a3ccc0365680319c2ff57f14 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 19 Jan 2018 09:22:30 +0900
Subject: Update api.ts

---
 src/web/app/common/scripts/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/app')

diff --git a/src/web/app/common/scripts/api.ts b/src/web/app/common/scripts/api.ts
index 2008e6f5ac..bba838f56b 100644
--- a/src/web/app/common/scripts/api.ts
+++ b/src/web/app/common/scripts/api.ts
@@ -40,7 +40,7 @@ export default (i, endpoint, data = {}): Promise<{ [x: string]: any }> => {
 			} else {
 				res.json().then(err => {
 					reject(err.error);
-				});
+				}, reject);
 			}
 		}).catch(reject);
 	});
-- 
cgit v1.2.3-freya