From cd9fc9a71759c8b5a51bc2e7eeb1e99dd8c699ff Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 23 Feb 2018 21:45:59 +0900
Subject: [PATCH] :v:

---
 .../components/messaging-room.message.vue     |  4 +-
 .../views/components/notifications.vue        | 56 ++++++++---------
 .../views/components/post-detail.sub.vue      | 45 +++++++-------
 .../desktop/views/components/post-preview.vue | 11 ++--
 .../views/components/posts.post.sub.vue       | 10 ++--
 .../mobile/views/components/notification.vue  | 60 +++++++++----------
 .../mobile/views/components/post-preview.vue  | 10 ++--
 7 files changed, 97 insertions(+), 99 deletions(-)

diff --git a/src/web/app/common/views/components/messaging-room.message.vue b/src/web/app/common/views/components/messaging-room.message.vue
index ae4075bef3..9772c7c0dd 100644
--- a/src/web/app/common/views/components/messaging-room.message.vue
+++ b/src/web/app/common/views/components/messaging-room.message.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="message" :data-is-me="isMe">
-	<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank">
+	<router-link class="avatar-anchor" :to="`/${message.user.username}`" :title="message.user.username" target="_blank">
 		<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
-	</a>
+	</router-link>
 	<div class="content-container">
 		<div class="balloon">
 			<p class="read" v-if="isMe && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
diff --git a/src/web/app/desktop/views/components/notifications.vue b/src/web/app/desktop/views/components/notifications.vue
index bcd7cf35fe..d61397d536 100644
--- a/src/web/app/desktop/views/components/notifications.vue
+++ b/src/web/app/desktop/views/components/notifications.vue
@@ -5,84 +5,84 @@
 			<div class="notification" :class="notification.type" :key="notification.id">
 				<mk-time :time="notification.created_at"/>
 				<template v-if="notification.type == 'reaction'">
-					<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="`/${notification.user.username}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>
 							<mk-reaction-icon :reaction="notification.reaction"/>
-							<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
+							<router-link :to="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
 						</p>
-						<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
+						<router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
-						</a>
+						</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'repost'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>%fa:retweet%
-							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
+						<router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
-						</a>
+						</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'quote'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>%fa:quote-left%
-							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+						<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'follow'">
-					<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="`/${notification.user.username}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>%fa:user-plus%
-							<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
+							<router-link :to="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
 						</p>
 					</div>
 				</template>
 				<template v-if="notification.type == 'reply'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>%fa:reply%
-							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+						<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'mention'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>%fa:at%
-							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<router-link :to="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
 						<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'poll_vote'">
-					<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="`/${notification.user.username}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
-					</a>
+					</router-link>
 					<div class="text">
 						<p>%fa:chart-pie%<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
-						<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
+						<router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
-						</a>
+						</router-link>
 					</div>
 				</template>
 			</div>
diff --git a/src/web/app/desktop/views/components/post-detail.sub.vue b/src/web/app/desktop/views/components/post-detail.sub.vue
index 69ced0925f..bf6e3ac3b2 100644
--- a/src/web/app/desktop/views/components/post-detail.sub.vue
+++ b/src/web/app/desktop/views/components/post-detail.sub.vue
@@ -1,24 +1,24 @@
 <template>
 <div class="sub" :title="title">
-	<a class="avatar-anchor" href={ '/' + post.user.username }>
-		<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" v-user-preview={ post.user_id }/>
-	</a>
+	<router-link class="avatar-anchor" :to="`/${post.user.username}`">
+		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
+	</router-link>
 	<div class="main">
 		<header>
 			<div class="left">
-				<a class="name" href={ '/' + post.user.username } v-user-preview={ post.user_id }>{ post.user.name }</a>
-				<span class="username">@{ post.user.username }</span>
+				<router-link class="name" :to="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
+				<span class="username">@{{ post.user.username }}</span>
 			</div>
 			<div class="right">
-				<a class="time" href={ '/' + post.user.username + '/' + post.id }>
-					<mk-time time={ post.created_at }/>
-				</a>
+				<router-link class="time" :to="`/${post.user.username}/${post.id}`">
+					<mk-time :time="post.created_at"/>
+				</router-link>
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/>
+			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
 			<div class="media" v-if="post.media">
-				<mk-images images={ post.media }/>
+				<mk-images :images="post.media"/>
 			</div>
 		</div>
 	</div>
@@ -108,18 +108,15 @@ export default Vue.extend({
 					font-size 0.9em
 					color #c0c0c0
 
-		> .body
-
-			> .text
-				cursor default
-				display block
-				margin 0
-				padding 0
-				overflow-wrap break-word
-				font-size 1em
-				color #717171
-
-				> .mk-url-preview
-					margin-top 8px
-
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1em
+	color #717171
 </style>
diff --git a/src/web/app/desktop/views/components/post-preview.vue b/src/web/app/desktop/views/components/post-preview.vue
index 6a0a60e4af..ec3372f908 100644
--- a/src/web/app/desktop/views/components/post-preview.vue
+++ b/src/web/app/desktop/views/components/post-preview.vue
@@ -1,14 +1,15 @@
 <template>
 <div class="mk-post-preview" :title="title">
-	<a class="avatar-anchor" :href="`/${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/${post.user.username}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
-	</a>
+	</router-link>
 	<div class="main">
 		<header>
-			<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
+			<router-link class="name" :to="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
 			<span class="username">@{{ post.user.username }}</span>
-			<a class="time" :href="`/${post.user.username}/${post.id}`">
-			<mk-time :time="post.created_at"/></a>
+			<router-link class="time" :to="`/${post.user.username}/${post.id}`">
+				<mk-time :time="post.created_at"/>
+			</router-link>
 		</header>
 		<div class="body">
 			<mk-sub-post-content class="text" :post="post"/>
diff --git a/src/web/app/desktop/views/components/posts.post.sub.vue b/src/web/app/desktop/views/components/posts.post.sub.vue
index f920775168..69c88fed50 100644
--- a/src/web/app/desktop/views/components/posts.post.sub.vue
+++ b/src/web/app/desktop/views/components/posts.post.sub.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="sub" :title="title">
-	<a class="avatar-anchor" :href="`/${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/${post.user.username}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
-	</a>
+	</router-link>
 	<div class="main">
 		<header>
-			<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
+			<router-link class="name" :to="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
 			<span class="username">@{{ post.user.username }}</span>
-			<a class="created-at" :href="`/${post.user.username}/${post.id}`">
+			<router-link class="created-at" :to="`/${post.user.username}/${post.id}`">
 				<mk-time :time="post.created_at"/>
-			</a>
+			</router-link>
 		</header>
 		<div class="body">
 			<mk-sub-post-content class="text" :post="post"/>
diff --git a/src/web/app/mobile/views/components/notification.vue b/src/web/app/mobile/views/components/notification.vue
index dce373b452..4e09f3d831 100644
--- a/src/web/app/mobile/views/components/notification.vue
+++ b/src/web/app/mobile/views/components/notification.vue
@@ -3,99 +3,99 @@
 	<mk-time :time="notification.created_at"/>
 
 	<template v-if="notification.type == 'reaction'">
-		<a class="avatar-anchor" :href="`/${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.user.username}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<a :href="`/${notification.user.username}`">{{ notification.user.name }}</a>
+				<router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
 			</p>
-			<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}
 				%fa:quote-right%
-			</a>
+			</router-link>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'repost'">
-		<a class="avatar-anchor" :href="`/${notification.post.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				%fa:retweet%
-				<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a>
+				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
 			</p>
-			<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
-			</a>
+			</router-link>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'quote'">
-		<a class="avatar-anchor" :href="`/${notification.post.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				%fa:quote-left%
-				<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a>
+				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
 			</p>
-			<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+			<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'follow'">
-		<a class="avatar-anchor" :href="`/${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.user.username}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				%fa:user-plus%
-				<a :href="`/${notification.user.username}`">{{ notification.user.name }}</a>
+				<router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
 			</p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'reply'">
-		<a class="avatar-anchor" :href="`/${notification.post.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				%fa:reply%
-				<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a>
+				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
 			</p>
-			<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+			<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'mention'">
-		<a class="avatar-anchor" :href="`/${notification.post.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				%fa:at%
-				<a :href="`/${notification.post.user.username}`">{{ notification.post.user.name }}</a>
+				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
 			</p>
-			<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+			<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'poll_vote'">
-		<a class="avatar-anchor" :href="`/${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${notification.user.username}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</a>
+		</router-link>
 		<div class="text">
 			<p>
 				%fa:chart-pie%
-				<a :href="`/${notification.user.username}`">{{ notification.user.name }}</a>
+				<router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
 			</p>
-			<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/${notification.post.user.username}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
-			</a>
+			</router-link>
 		</div>
 	</template>
 </div>
diff --git a/src/web/app/mobile/views/components/post-preview.vue b/src/web/app/mobile/views/components/post-preview.vue
index ccb8b5f336..e9a4119253 100644
--- a/src/web/app/mobile/views/components/post-preview.vue
+++ b/src/web/app/mobile/views/components/post-preview.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="mk-post-preview">
-	<a class="avatar-anchor" :href="`/${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/${post.user.username}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-	</a>
+	</router-link>
 	<div class="main">
 		<header>
-			<a class="name" :href="`/${post.user.username}`">{{ post.user.name }}</a>
+			<router-link class="name" :to="`/${post.user.username}`">{{ post.user.name }}</router-link>
 			<span class="username">@{{ post.user.username }}</span>
-			<a class="time" :href="`/${post.user.username}/${post.id}`">
+			<router-link class="time" :to="`/${post.user.username}/${post.id}`">
 				<mk-time :time="post.created_at"/>
-			</a>
+			</router-link>
 		</header>
 		<div class="body">
 			<mk-sub-post-content class="text" :post="post"/>