perf(client): ウェルカムページを最適化 (#9960)

* perf(client): ウェルカムページの最適化

* remove max
This commit is contained in:
tamaina 2023-02-17 12:38:30 +09:00 committed by GitHub
parent dd52be3a01
commit e8c5307f66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 81 deletions

View file

@ -10,6 +10,8 @@ export const meta = {
tags: ['federation'],
requireCredential: false,
allowGet: true,
cacheSec: 3600,
res: {
type: 'array',

View file

@ -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());

View file

@ -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%);

View file

@ -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>