非ログイン時のユーザーページにインスタンスの紹介を表示するように

src/client/app/common/views/components/index.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import instance from './instance.vue';
 import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
 import trends from './trends.vue';
@@ -43,6 +44,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-instance', instance);
 Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
 Vue.component('mk-trends', trends);

src/client/app/common/views/components/instance.vue

@@ -0,0 +1,57 @@
+<template>
+<div class="nhasjydimbopojusarffqjyktglcuxjy" v-if="meta">
+	<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
+
+	<h1>{{ meta.name }}</h1>
+	<p v-html="meta.description || '%i18n:common.about%'"></p>
+	<router-link to="/">%i18n:@start%</router-link>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			meta: null
+		}
+	},
+	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.meta = meta;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	color isDark ? #fff : #5b646f
+	background isDark ? #21242f : #fff
+	text-align center
+
+	> .banner
+		height 100px
+		background-position center
+		background-size cover
+
+	> h1
+		margin 16px
+		font-size 16px
+
+	> p
+		margin 16px
+		font-size 14px
+
+	> a
+		display block
+		padding-bottom 16px
+
+.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
+	root(true)
+
+.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
+	root(false)
+
+</style>

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

@@ -10,6 +10,7 @@
 				<x-timeline class="timeline" ref="tl" :user="user"/>
 			</div>
 			<div class="side">
+				<div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div>
 				<x-profile :user="user"/>
 				<x-twitter :user="user" v-if="user.host === null && user.twitter"/>
 				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
@@ -131,6 +132,10 @@ root(isDark)
 				font-size 0.8em
 				color #aaa
 
+			> .instance
+				box-shadow var(--shadow)
+				border-radius var(--round)
+
 			> .nav
 				padding 16px
 				font-size 12px