This commit is contained in:
syuilo 2018-03-17 03:33:36 +09:00
parent c38b5a9b8b
commit 128b56da28
6 changed files with 243 additions and 58 deletions

View file

@ -27,6 +27,10 @@ module.exports = (params) => new Promise(async (res, rej) => {
const [poll, pollErr] = $(params.poll).optional.boolean().$;
if (pollErr) return rej('invalid poll param');
// Get 'bot' parameter
//const [bot, botErr] = $(params.bot).optional.boolean().$;
//if (botErr) return rej('invalid bot param');
// Get 'limit' parameter
const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
if (limitErr) return rej('invalid limit param');
@ -76,6 +80,11 @@ module.exports = (params) => new Promise(async (res, rej) => {
query.poll = poll ? { $exists: true, $ne: null } : null;
}
// TODO
//if (bot != undefined) {
// query.is_bot = bot;
//}
// Issue query
const posts = await Post
.find(query, {

View file

@ -23,6 +23,7 @@ import twitterSetting from './twitter-setting.vue';
import fileTypeIcon from './file-type-icon.vue';
import Switch from './switch.vue';
import Othello from './othello.vue';
import welcomeTimeline from './welcome-timeline.vue';
Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup);
@ -47,3 +48,4 @@ Vue.component('mk-twitter-setting', twitterSetting);
Vue.component('mk-file-type-icon', fileTypeIcon);
Vue.component('mk-switch', Switch);
Vue.component('mk-othello', Othello);
Vue.component('mk-welcome-timeline', welcomeTimeline);

View file

@ -0,0 +1,115 @@
<template>
<div class="mk-welcome-timeline">
<div v-for="post in posts">
<router-link class="avatar-anchor" :to="`/${post.user.username}`">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
</router-link>
<div class="body">
<header>
<router-link class="name" :to="`/${post.user.username}`">{{ post.user.name }}</router-link>
<span class="username">@{{ post.user.username }}</span>
<div class="info">
<router-link class="created-at" :to="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/>
</router-link>
</div>
</header>
<div class="text">
<mk-post-html :ast="post.ast"/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
fetching: true,
posts: []
};
},
mounted() {
this.fetch();
},
methods: {
fetch(cb?) {
this.fetching = true;
(this as any).api('posts', {
reply: false,
repost: false,
media: false,
poll: false,
bot: false
}).then(posts => {
this.posts = posts;
this.fetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
.mk-welcome-timeline
background #fff
> div
padding 16px
overflow-wrap break-word
font-size .9em
color #4C4C4C
border-bottom 1px solid rgba(0, 0, 0, 0.05)
&:after
content ""
display block
clear both
> .avatar-anchor
display block
float left
position -webkit-sticky
position sticky
top 16px
> img
display block
width 36px
height 36px
border-radius 6px
> .body
float right
width calc(100% - 36px)
padding-left 8px
> header
display flex
align-items center
margin-bottom 4px
white-space nowrap
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
font-weight bold
text-overflow ellipsis
> .username
margin 0 .5em 0 0
color #ccc
> .info
margin-left auto
font-size 0.9em
> .created-at
color #c0c0c0
</style>

View file

@ -1,13 +1,20 @@
<template>
<div class="mk-welcome">
<main>
<div>
<h1>Share<br>Everything!</h1>
<p>ようこそ <b>Misskey</b>はTwitter風ミニブログSNSです思ったこと共有したいことをシンプルに書き残せますタイムラインを見れば皆の反応や皆がどう思っているのかもすぐにわかります<a>詳しく...</a></p>
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
</div>
<div>
<div class="top">
<div>
<div>
<h1>Share<br>Everything!</h1>
<p>ようこそ <b>Misskey</b>はTwitter風ミニブログSNSです思ったことや皆と共有したいことを投稿しましょうタイムラインを見れば皆の関心事をすぐにチェックすることもできます<a>詳しく...</a></p>
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
</div>
<div>
<div>
<header>%fa:comments R% タイムライン</header>
<mk-welcome-timeline/>
</div>
</div>
</div>
</div>
</main>
<mk-forkit/>
@ -69,61 +76,85 @@ export default Vue.extend({
> main
display flex
flex 1
max-width $width
margin 0 auto
padding 80px 0 0 0
> div:first-child
margin 0 auto 0 0
width calc(100% - 500px)
color #777
> .top
display flex
width 100%
background-image url('/assets/welcome.svg')
background-size cover
background-position top center
> h1
margin 0
font-weight normal
font-variant small-caps
letter-spacing 12px
> div
display flex
max-width $width
margin 0 auto
padding 80px 0 0 0
> p
margin 0.5em 0
line-height 2em
> div:first-child
margin 0 48px 0 0
color #777
button
padding 8px 16px
font-size inherit
> h1
margin 0
font-weight normal
font-variant small-caps
letter-spacing 12px
.signup
color $theme-color
border solid 2px $theme-color
border-radius 4px
> p
margin 0.5em 0
line-height 2em
&:focus
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
button
padding 8px 16px
font-size inherit
&:hover
color $theme-color-foreground
background $theme-color
.signup
color $theme-color
border solid 2px $theme-color
border-radius 4px
&:active
color $theme-color-foreground
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
&:focus
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
.signin
&:focus
color #444
&:hover
color $theme-color-foreground
background $theme-color
&:hover
color #444
&:active
color $theme-color-foreground
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
&:active
color #333
.signin
&:focus
color #444
> div:last-child
margin 0 0 0 auto
&:hover
color #444
&:active
color #333
> div:last-child
> div
width 410px
background #fff
border-radius 8px
overflow hidden
> header
z-index 1
padding 12px 16px
color #888d94
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
> .mk-welcome-timeline
max-height 350px
overflow auto
> footer
color #666
color #949ea5
background #fff
> div

View file

@ -1,9 +1,9 @@
<template>
<div class="welcome">
<h1><b>Misskey</b>へようこそ</h1>
<p>Twitter風ミニブログSNSMisskeyへようこそ思ったことを投稿したりタイムラインでみんなの投稿を読むこともできます</p>
<p>Twitter風ミニブログSNSMisskeyへようこそ思ったことを投稿したりタイムラインでみんなの投稿を読むこともできます<a href="/signup">アカウントを作成する</a></p>
<div class="form">
<p>ログイン</p>
<p>%fa:lock% ログイン</p>
<div>
<form @submit.prevent="onSubmit">
<input v-model="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
@ -16,13 +16,19 @@
</div>
</div>
</div>
<a href="/signup">アカウントを作成する</a>
<div class="tl">
<p>%fa:comments R% タイムラインを見てみる</p>
<mk-welcome-timeline/>
</div>
<footer>
<small>{{ copyright }}</small>
</footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { apiUrl } from '../../../config';
import { apiUrl, copyright } from '../../../config';
export default Vue.extend({
data() {
@ -32,7 +38,8 @@ export default Vue.extend({
username: '',
password: '',
token: '',
apiUrl
apiUrl,
copyright
};
},
mounted() {
@ -83,16 +90,12 @@ export default Vue.extend({
color #949fa9
.form
margin-bottom 16px
background #fff
border solid 1px rgba(0, 0, 0, 0.2)
border-radius 8px
overflow hidden
& + a
display block
margin-top 16px
text-align center
> p
margin 0
padding 12px 20px
@ -143,4 +146,29 @@ export default Vue.extend({
padding 16px
text-align center
.tl
background #fff
border solid 1px rgba(0, 0, 0, 0.2)
border-radius 8px
overflow hidden
> p
margin 0
padding 12px 20px
color #555
background #f5f5f5
border-bottom solid 1px #ddd
> .mk-welcome-timeline
max-height 300px
overflow auto
> footer
text-align center
color #949fa9
> small
display block
margin 16px 0 0 0
</style>

BIN
src/web/assets/welcome.svg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB