✌️

locales/ja.yml

@@ -3,7 +3,9 @@ meta:
   divider: ""
 
 common:
-  misskey: "Misskeyで皆と共有しよう。"
+  misskey: "A planet of fediverse"
+  about-title: "A ⭐ of fediverse."
+  about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
 
   time:
     unknown: "なぞのじかん"
@@ -631,6 +633,8 @@ desktop/views/components/window.vue:
   close: "閉じる"
 
 desktop/views/pages/welcome.vue:
+  about: "詳しく..."
+  gotit: "わかった"
   signin: "ログイン"
   signup: "新規登録"
   signin-button: "やってる"

src/client/app/base.pug

@@ -19,7 +19,7 @@ html
 				| Misskey
 
 		block desc
-			meta(name='description' content='A SNS')
+			meta(name='description' content='A planet of fediverse')
 
 		block meta
 

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

@@ -13,7 +13,7 @@
 
 .a
 	display block
-	position absolute
+	position fixed
 	top 0
 	right 0
 

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

@@ -4,9 +4,20 @@
 		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
 		<template v-else>%fa:R moon%</template>
 	</button>
-	<main>
+	<main v-if="about" class="about">
+		<article>
+			<h1>%i18n:common.about-title%</h1>
+			<p v-html="'%i18n:common.about%'"></p>
+			<span class="gotit" @click="about = false">%i18n:@gotit%</span>
+		</article>
+	</main>
+	<main v-else class="index">
 		<img :src="$store.state.device.darkmode ? 'assets/title-dark.svg' : 'assets/title.svg'" alt="Misskey">
-		<p><button class="signup" @click="signup">%i18n:@signup-button%</button><button class="signin" @click="signin">%i18n:@signin-button%</button></p>
+		<p class="desc"><b>%i18n:common.misskey%</b> - <span @click="about = true">%i18n:@about%</span></p>
+		<p class="account">
+			<button class="signup" @click="signup">%i18n:@signup-button%</button>
+			<button class="signin" @click="signin">%i18n:@signin-button%</button>
+		</p>
 
 		<div class="tl">
 			<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
@@ -33,12 +44,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { docsUrl, copyright, lang } from '../../../config';
+import { copyright } from '../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
-			aboutUrl: `${docsUrl}/${lang}/about`,
+			about: false,
 			copyright
 		};
 	},
@@ -73,9 +84,12 @@ root(isDark)
 	display flex
 	flex-direction column
 	flex 1
+	background-image isDark ? url('/assets/welcome-bg.dark.svg') : url('/assets/welcome-bg.light.svg')
+	background-size cover
+	background-position center
 
 	> button
-		position absolute
+		position fixed
 		z-index 1
 		top 0
 		left 0
@@ -87,81 +101,119 @@ root(isDark)
 		flex 1
 		padding 64px 0 0 0
 		text-align center
-		color isDark ? #9aa4b3 : #555
 
-		> img
+		&.about
-			width 350px
+			color isDark ? #fff : #627574
 
-		> p
+			> article
-			margin 8px 0
+				max-width 700px
-			line-height 2em
+				margin 42px auto 0 auto
+				padding 64px
+				background isDark ? #282C37 : #fff
+				box-shadow 0 8px 32px rgba(#000, 0.15)
 
-			button
+				> h1
-				padding 8px 16px
+					margin 0
-				font-size inherit
+					font-variant small-caps
 
-			.signup
+				> p
-				color $theme-color
+					margin 20px 0
-				border solid 2px $theme-color
+					line-height 2em
-				border-radius 4px
 
-				&:focus
+				> .gotit
-					box-shadow 0 0 0 3px rgba($theme-color, 0.2)
+					color $theme-color
+					cursor pointer
 
-				&:hover
+					&:hover
-					color $theme-color-foreground
+						text-decoration underline
-					background $theme-color
 
-				&:active
+		&.index
-					color $theme-color-foreground
+			color isDark ? #9aa4b3 : #555
-					background darken($theme-color, 10%)
-					border-color darken($theme-color, 10%)
 
-			.signin
+			> img
-				&:hover
+				width 350px
-					color isDark ? #fff : #000
 
-		> .tl
+			> .desc
-			margin 32px auto 0 auto
+				margin -12px 0 24px 0
-			width 410px
+				color isDark ? #fff : #555
-			text-align left
-			background isDark ? #313543 : #fff
-			border-radius 8px
-			box-shadow 0 8px 32px rgba(#000, 0.15)
-			overflow hidden
 
-			> header
+				> span
-				z-index 1
+					color $theme-color
-				padding 12px 16px
+					cursor pointer
-				color isDark ? #e3e5e8 : #888d94
-				box-shadow 0 1px 0px rgba(#000, 0.1)
 
-				> div
+					&:hover
-					position absolute
+						text-decoration underline
-					top 0
-					right 0
-					padding inherit
 
-					> span
+			> .account
-						display inline-block
+				margin 8px 0
-						height 11px
+				line-height 2em
-						width 11px
-						margin-left 6px
-						border-radius 100%
-						vertical-align middle
 
-						&:nth-child(1)
+				button
-							background #5BCC8B
+					padding 8px 16px
+					font-size inherit
 
-						&:nth-child(2)
+				.signup
-							background #E6BB46
+					color $theme-color
+					border solid 2px $theme-color
+					border-radius 4px
 
-						&:nth-child(3)
+					&:focus
-							background #DF7065
+						box-shadow 0 0 0 3px rgba($theme-color, 0.2)
 
-			> .mk-welcome-timeline
+					&:hover
-				max-height 350px
+						color $theme-color-foreground
-				overflow auto
+						background $theme-color
+
+					&:active
+						color $theme-color-foreground
+						background darken($theme-color, 10%)
+						border-color darken($theme-color, 10%)
+
+				.signin
+					&:hover
+						color isDark ? #fff : #000
+
+			> .tl
+				margin 32px auto 0 auto
+				width 410px
+				text-align left
+				background isDark ? #313543 : #fff
+				border-radius 8px
+				box-shadow 0 8px 32px rgba(#000, 0.15)
+				overflow hidden
+
+				> header
+					z-index 1
+					padding 12px 16px
+					color isDark ? #e3e5e8 : #888d94
+					box-shadow 0 1px 0px rgba(#000, 0.1)
+
+					> div
+						position absolute
+						top 0
+						right 0
+						padding inherit
+
+						> span
+							display inline-block
+							height 11px
+							width 11px
+							margin-left 6px
+							border-radius 100%
+							vertical-align middle
+
+							&:nth-child(1)
+								background #5BCC8B
+
+							&:nth-child(2)
+								background #E6BB46
+
+							&:nth-child(3)
+								background #DF7065
+
+				> .mk-welcome-timeline
+					max-height 350px
+					overflow auto
 
 	> footer
 		font-size 12px

src/client/app/init.ts

@@ -67,14 +67,6 @@ const html = document.documentElement;
 html.setAttribute('lang', lang);
 //#endregion
 
-//#region Set description meta tag
-const head = document.getElementsByTagName('head')[0];
-const meta = document.createElement('meta');
-meta.setAttribute('name', 'description');
-meta.setAttribute('content', '%i18n:common.misskey%');
-head.appendChild(meta);
-//#endregion
-
 // iOSでプライベートモードだとlocalStorageが使えないので既存のメソッドを上書きする
 try {
 	localStorage.setItem('kyoppie', 'yuppie');