diff --git a/packages/backend/src/server/api/endpoints/federation/instances.ts b/packages/backend/src/server/api/endpoints/federation/instances.ts index e5d1df0018..60b24e9585 100644 --- a/packages/backend/src/server/api/endpoints/federation/instances.ts +++ b/packages/backend/src/server/api/endpoints/federation/instances.ts @@ -10,6 +10,8 @@ export const meta = { tags: ['federation'], requireCredential: false, + allowGet: true, + cacheSec: 3600, res: { type: 'array', diff --git a/packages/backend/src/server/api/endpoints/notes/featured.ts b/packages/backend/src/server/api/endpoints/notes/featured.ts index 76834cfde9..8eff8fdb22 100644 --- a/packages/backend/src/server/api/endpoints/notes/featured.ts +++ b/packages/backend/src/server/api/endpoints/notes/featured.ts @@ -9,6 +9,8 @@ export const meta = { tags: ['notes'], requireCredential: false, + allowGet: true, + cacheSec: 3600, res: { type: 'array', @@ -41,7 +43,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { private queryService: QueryService, ) { super(meta, paramDef, async (ps, me) => { - const max = 30; const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで const query = this.notesRepository.createQueryBuilder('note') @@ -67,7 +68,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { let notes = await query .orderBy('note.score', 'DESC') - .take(max) + .take(ps.limit) .getMany(); notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue index f438603199..05c55fdf31 100644 --- a/packages/frontend/src/pages/welcome.entrance.a.vue +++ b/packages/frontend/src/pages/welcome.entrance.a.vue @@ -32,7 +32,7 @@ </div> </div> </div> - <div v-if="instances" class="federation"> + <div v-if="instances && instances.length > 0" class="federation"> <MarqueeText :duration="40"> <MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window"> <!--<MkInstanceCardMini :instance="instance"/>--> @@ -56,33 +56,16 @@ import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue'; import { instanceName } from '@/config'; import * as os from '@/os'; import { i18n } from '@/i18n'; +import { Instance } from 'misskey-js/built/entities'; -let meta = $ref(); -let stats = $ref(); -let tags = $ref(); -let onlineUsersCount = $ref(); -let instances = $ref(); +let meta = $ref<Instance>(); +let instances = $ref<any[]>(); os.api('meta', { detail: true }).then(_meta => { meta = _meta; }); -os.api('stats').then(_stats => { - stats = _stats; -}); - -os.api('get-online-users-count').then(res => { - onlineUsersCount = res.count; -}); - -os.api('hashtags/list', { - sort: '+mentionedLocalUsers', - limit: 8, -}).then(_tags => { - tags = _tags; -}); - -os.api('federation/instances', { +os.apiGet('federation/instances', { sort: '+pubSub', limit: 20, }).then(_instances => { @@ -147,8 +130,9 @@ function showMenu(ev) { bottom: 0; right: 64px; margin: auto; + padding: 128px 0; width: 500px; - height: calc(100% - 128px); + height: calc(100% - 256px); overflow: hidden; -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%); diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue index ed3c5a4af7..c34d43dc1c 100644 --- a/packages/frontend/src/pages/welcome.timeline.vue +++ b/packages/frontend/src/pages/welcome.timeline.vue @@ -1,62 +1,54 @@ <template> -<div class="civpbkhh"> - <div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }"> - <div v-for="note in notes" class="note"> - <div class="content _panel"> - <div class="body"> +<div :class="$style.root"> + <div ref="scrollEl" :class="[$style.scrollbox, { [$style.scroll]: isScrolling }]"> + <div v-for="note in notes" :key="note.id" :class="$style.note"> + <div class="_panel" :class="$style.content"> + <div :class="$style.body"> <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> - <Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i"/> + <Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" /> <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> </div> - <div v-if="note.files.length > 0" class="richcontent"> - <MkMediaList :media-list="note.files"/> + <div v-if="note.files.length > 0" :class="$style.richcontent"> + <MkMediaList :media-list="note.files" /> </div> <div v-if="note.poll"> - <MkPoll :note="note" :readOnly="true"/> + <MkPoll :note="note" :readOnly="true" /> </div> </div> - <MkReactionsViewer ref="reactionsViewer" :note="note"/> + <MkReactionsViewer ref="reactionsViewer" :note="note" /> </div> </div> </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; import MkMediaList from '@/components/MkMediaList.vue'; import MkPoll from '@/components/MkPoll.vue'; import * as os from '@/os'; +import { Note } from 'misskey-js/built/entities'; +import { onUpdated } from 'vue'; +import { getScrollContainer } from '@/scripts/scroll'; -export default defineComponent({ - components: { - MkReactionsViewer, - MkMediaList, - MkPoll, - }, +let notes = $ref<Note[]>([]); +let isScrolling = $ref(false); +let scrollEl = $ref<HTMLElement>(); - data() { - return { - notes: [], - isScrolling: false, - }; - }, +os.apiGet('notes/featured').then(_notes => { + notes = _notes; +}); - created() { - os.api('notes/featured').then(notes => { - this.notes = notes; - }); - }, - - updated() { - if (this.$refs.scroll.clientHeight > window.innerHeight) { - this.isScrolling = true; - } - }, +onUpdated(() => { + if (!scrollEl) return; + const container = getScrollContainer(scrollEl); + const containerHeight = container ? container.clientHeight : window.innerHeight; + if (scrollEl.offsetHeight > containerHeight) { + isScrolling = true; + } }); </script> -<style lang="scss" scoped> +<style lang="scss" module> @keyframes scroll { 0% { transform: translate3d(0, 0, 0); @@ -72,28 +64,28 @@ export default defineComponent({ } } -.civpbkhh { +.root { text-align: right; +} - > .scrollbox { - &.scroll { - animation: scroll 45s linear infinite; - } - - > .note { - margin: 16px 0 16px auto; - - > .content { - padding: 16px; - margin: 0 0 0 auto; - max-width: max-content; - border-radius: 16px; - - > .richcontent { - min-width: 250px; - } - } - } +.scrollbox { + &.scroll { + animation: scroll 45s linear infinite; } } + +.note { + margin: 16px 0 16px auto; +} + +.content { + padding: 16px; + margin: 0 0 0 auto; + max-width: max-content; + border-radius: 16px; +} + +.richcontent { + min-width: 250px; +} </style>