良い感じに

src/web/app/common/tags/index.js

@@ -24,3 +24,4 @@ require('./messaging/message.tag');
 require('./messaging/index.tag');
 require('./messaging/form.tag');
 require('./stream-indicator.tag');
+require('./public-timeline.tag');

src/web/app/common/tags/public-timeline.tag

@@ -0,0 +1,80 @@
+<mk-public-timeline>
+	<article each={ posts }>
+		<img src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		<div>
+			<header>
+				<span class="name">{ user.name }</span>
+				<span class="username">@{ user.username }</span>
+			</header>
+			<div class="body">
+				<div class="text">{ text }</div>
+			</div>
+		</div>
+	</article>
+	<style>
+		:scope
+			display block
+
+			> article
+				padding 28px
+				border-bottom solid 1px #eee
+
+				&:last-child
+					border-bottom none
+
+				> img
+					display block
+					position absolute
+					width 58px
+					height 58px
+					margin 0
+					border-radius 100%
+					vertical-align bottom
+
+				> div
+					min-height 58px
+					padding-left 68px
+
+					> header
+						margin-bottom 2px
+
+						> .name
+							margin 0 .5em 0 0
+							padding 0
+							color #777
+
+						> .username
+							margin 0 .5em 0 0
+							color #ccc
+
+					> .body
+						> .text
+							cursor default
+							display block
+							margin 0
+							padding 0
+							overflow-wrap break-word
+							font-size 1.1em
+							color #717171
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.posts = [];
+		this.isFetching = true;
+
+		this.on('mount', () => {
+			this.api('posts', {
+				limit: 5,
+				include_reposts: false,
+				include_replies: false
+			}).then(posts => {
+				this.update({
+					isFetching: false,
+					posts: posts
+				});
+			});
+		});
+	</script>
+</mk-public-timeline>

src/web/app/desktop/tags/pages/entrance.tag

@@ -1,5 +1,6 @@
 <mk-entrance>
-	<main><img src="/resources/title.svg" alt="Misskey"/>
+	<main>
+		<img src="/resources/title.svg" alt="Misskey"/>
 		<mk-entrance-signin if={ mode == 'signin' }></mk-entrance-signin>
 		<mk-entrance-signup if={ mode == 'signup' }></mk-entrance-signup>
 		<div class="introduction" if={ mode == 'introduction' }>
@@ -8,6 +9,10 @@
 		</div>
 	</main>
 	<mk-forkit></mk-forkit>
+	<section class="tl">
+		<h2>投稿を見てみよう</h2>
+		<mk-public-timeline></mk-public-timeline>
+	</section>
 	<footer>
 		<mk-copyright></mk-copyright>
 	</footer>
@@ -26,6 +31,7 @@
 
 			> main
 				display block
+				padding-bottom 16px
 
 				> img
 					display block
@@ -53,6 +59,21 @@
 						&:hover
 							text-decoration underline
 
+			> .tl
+				padding 32px 0
+				background #fff
+
+				> h2
+					display block
+					margin 0
+					padding 0
+					text-align center
+					font-size 20px
+					color #5b6b73
+
+				> mk-public-timeline
+					max-width 500px
+					margin 0 auto
 			> footer
 				> mk-copyright
 					margin 0