<template> <div class="mk-welcome-timeline"> <div v-for="post in posts"> <router-link class="avatar-anchor" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id"> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=96`" alt="avatar"/> </router-link> <div class="body"> <header> <router-link class="name" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">{{ post.user.name }}</router-link> <span class="username">@{{ getAcct(post.user) }}</span> <div class="info"> <router-link class="created-at" :to="`/@${getAcct(post.user)}/${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'; import getAcct from '../../../../../common/user/get-acct'; export default Vue.extend({ data() { return { fetching: true, posts: [] }; }, mounted() { this.fetch(); }, methods: { getAcct, 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 42px height 42px border-radius 6px > .body float right width calc(100% - 42px) padding-left 12px > 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 color #627079 > .username margin 0 .5em 0 0 color #ccc > .info margin-left auto font-size 0.9em > .created-at color #c0c0c0 </style>