✌️

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>