wip

src/web/app/common/views/components/nav.vue

@@ -1,5 +1,5 @@
 <template>
-<span>
+<span class="mk-nav">
 	<a :href="aboutUrl">%i18n:common.tags.mk-nav-links.about%</a>
 	<i>・</i>
 	<a :href="statsUrl">%i18n:common.tags.mk-nav-links.stats%</a>
@@ -33,3 +33,9 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.mk-nav
+	a
+		color inherit
+</style>

src/web/app/desktop/script.ts

@@ -16,6 +16,7 @@ import dialog from './api/dialog';
 import input from './api/input';
 
 import MkIndex from './views/pages/index.vue';
+import MkUser from './views/pages/user/user.vue';
 
 /**
  * init
@@ -55,6 +56,8 @@ init(async (launch) => {
 
 	app.$router.addRoutes([{
 		path: '/', component: MkIndex
+	}, {
+		path: '/:user', component: MkUser
 	}]);
 }, true);
 

src/web/app/desktop/views/components/posts-post.vue

@@ -5,32 +5,34 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<a class="avatar-anchor" :href="`/${post.user.username}`" v-user-preview="post.user_id">
+			<router-link class="avatar-anchor" :to="`/${post.user.username}`" v-user-preview="post.user_id">
 				<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
-			</a>
+			</router-link>
 			%fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}}
 		</p>
 		<mk-time :time="post.created_at"/>
 	</div>
 	<article>
-		<a class="avatar-anchor" :href="`/${p.user.username}`">
+		<router-link class="avatar-anchor" :to="`/${p.user.username}`">
 			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</a>
+		</router-link>
 		<div class="main">
 			<header>
-				<a class="name" :href="`/${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</a>
+				<router-link class="name" :to="`/${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
 				<span class="is-bot" v-if="p.user.is_bot">bot</span>
 				<span class="username">@{{ p.user.username }}</span>
 				<div class="info">
 					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-					<a class="created-at" :href="url">
+					<router-link class="created-at" :to="url">
 						<mk-time :time="p.created_at"/>
-					</a>
+					</router-link>
 				</div>
 			</header>
 			<div class="body">
 				<div class="text" ref="text">
-					<p class="channel" v-if="p.channel"><a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:</p>
+					<p class="channel" v-if="p.channel">
+						<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
+					</p>
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
 					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/>
 					<a class="quote" v-if="p.repost">RP:</a>

src/web/app/desktop/views/components/ui-header-nav.vue

@@ -3,10 +3,10 @@
 	<ul>
 		<template v-if="os.isSignedIn">
 			<li class="home" :class="{ active: page == 'home' }">
-				<a href="/">
+				<router-link to="/">
 					%fa:home%
 					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
-				</a>
+				</router-link>
 			</li>
 			<li class="messaging">
 				<a @click="messaging">

src/web/app/desktop/views/directives/user-preview.ts

@@ -6,32 +6,31 @@ import MkUserPreview from '../components/user-preview.vue';
 
 export default {
 	bind(el, binding, vn) {
-		const self = vn.context._userPreviewDirective_ = {} as any;
+		const self = el._userPreviewDirective_ = {} as any;
 
 		self.user = binding.value;
-
+		self.tag = null;
-		let tag = null;
 		self.showTimer = null;
 		self.hideTimer = null;
 
 		self.close = () => {
-			if (tag) {
+			if (self.tag) {
-				tag.close();
+				self.tag.close();
-				tag = null;
+				self.tag = null;
 			}
 		};
 
 		const show = () => {
-			if (tag) return;
+			if (self.tag) return;
 
-			tag = new MkUserPreview({
+			self.tag = new MkUserPreview({
 				parent: vn.context,
 				propsData: {
 					user: self.user
 				}
 			}).$mount();
 
-			const preview = tag.$el;
+			const preview = self.tag.$el;
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + el.offsetWidth + window.pageXOffset;
 			const y = rect.top + window.pageYOffset;
@@ -65,7 +64,7 @@ export default {
 	},
 
 	unbind(el, binding, vn) {
-		const self = vn.context._userPreviewDirective_;
+		const self = el._userPreviewDirective_;
 		clearTimeout(self.showTimer);
 		clearTimeout(self.hideTimer);
 		self.close();

src/web/app/desktop/views/pages/user/user-home.vue

@@ -17,7 +17,7 @@
 			<mk-calendar-widget @warp="warp" :start="new Date(user.created_at)"/>
 			<mk-activity-widget :user="user"/>
 			<mk-user-friends :user="user"/>
-			<div class="nav"><mk-nav-links/></div>
+			<div class="nav"><mk-nav/></div>
 		</div>
 	</div>
 </div>

src/web/app/desktop/views/pages/user/user.vue

@@ -10,13 +10,16 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import Progress from '../../../common/scripts/loading';
+import Progress from '../../../../common/scripts/loading';
+import MkUserHeader from './user-header.vue';
+import MkUserHome from './user-home.vue';
 
 export default Vue.extend({
-	props: {
+	components: {
-		username: {
+		'mk-user-header': MkUserHeader,
-			type: String
+		'mk-user-home': MkUserHome
 	},
+	props: {
 		page: {
 			default: 'home'
 		}
@@ -30,7 +33,7 @@ export default Vue.extend({
 	mounted() {
 		Progress.start();
 		(this as any).api('users/show', {
-			username: this.username
+			username: this.$route.params.user
 		}).then(user => {
 			this.fetching = false;
 			this.user = user;

webpack/plugins/index.ts

@@ -9,7 +9,7 @@ const isProduction = env === 'production';
 
 export default (version, lang) => {
 	const plugins = [
-		new HardSourceWebpackPlugin(),
+		//new HardSourceWebpackPlugin(),
 		consts(lang)
 	];