Peformance fixes for mod pages, Fix #52, #51

This commit is contained in:
Jai A
2020-12-10 17:01:00 -07:00
parent f5ed0b700f
commit 7ac56b1a0c
11 changed files with 98 additions and 86 deletions

View File

@@ -18,13 +18,19 @@
<p>
We implemented <span>fast and adaptable</span> search algorithms so
you don't have to wait, while creating a responsive interface that
makes sense. Modrinth <span>imports from other platforms</span> along
with it's own, so you can stick to elegant mod discovery and a
makes sense. Modrinth is full of elegant mod discovery and a platform
platform which just works.
</p>
</div>
<div class="right hero-image">
<img src="~/assets/images/search.gif" alt="search" loading="lazy" />
<video
src="~/assets/images/search.mp4"
alt="search"
loading="lazy"
loop
muted
autoplay
/>
</div>
</div>
<div class="default-hero columns">
@@ -281,7 +287,8 @@ export default {
padding-top: 75px;
padding-right: 10%;
img {
img,
video {
height: 300px;
}
}

View File

@@ -27,36 +27,35 @@ export default {
)
).data
const members = (
await axios.get(
`https://api.modrinth.com/api/v1/team/${mod.team}/members`,
config
)
).data
for (let i = 0; i < members.length; i++) {
members[i].avatar_url = (
await axios.get(
`https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
const [members, versions, body] = (
await Promise.all([
axios.get(
`https://api.modrinth.com/api/v1/team/${mod.team}/members`,
config
)
).data.avatar_url
}
),
axios.get(
`https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
mod.versions
)}`,
config
),
axios.get(mod.body_url),
])
).map((it) => it.data)
const versions = (
await axios.get(
`https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
mod.versions
)}`,
config
const users = await Promise.all(
members.map((it) =>
axios.get(`https://api.modrinth.com/api/v1/user/${it.user_id}`, config)
)
).data.reverse()
const body = (await axios.get(mod.body_url)).data
)
users.forEach(
(it, index) => (members[index].avatar_url = it.data.avatar_url)
)
return {
mod,
body,
versions,
versions: versions.reverse(),
members,
}
},

View File

@@ -41,13 +41,13 @@
<h4>Created</h4>
<p
v-tooltip="
$dayjs(version.published).format(
$dayjs(version.date_published).format(
'[Created on] YYYY-MM-DD [at] HH:mm A'
)
"
class="value"
>
{{ $dayjs(version.published).fromNow() }}
{{ $dayjs(version.date_published).fromNow() }}
</p>
</div>
</div>
@@ -134,29 +134,29 @@ export default {
)
).data
const members = (
await axios.get(
`https://api.modrinth.com/api/v1/team/${mod.team}/members`,
config
)
).data
for (let i = 0; i < members.length; i++) {
members[i].avatar_url = (
await axios.get(
`https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
const [members, versions] = (
await Promise.all([
axios.get(
`https://api.modrinth.com/api/v1/team/${mod.team}/members`,
config
)
).data.avatar_url
}
),
axios.get(
`https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
mod.versions
)}`,
config
),
])
).map((it) => it.data)
const versions = (
await axios.get(
`https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
mod.versions
)}`,
config
const users = await Promise.all(
members.map((it) =>
axios.get(`https://api.modrinth.com/api/v1/user/${it.user_id}`, config)
)
).data.reverse()
)
users.forEach(
(it, index) => (members[index].avatar_url = it.data.avatar_url)
)
const version = versions.find((x) => x.id === data.params.version)

View File

@@ -52,7 +52,7 @@
</span>
</td>
<td>{{ version.downloads }}</td>
<td>{{ $dayjs(version.published).format('YYYY-MM-DD') }}</td>
<td>{{ $dayjs(version.date_published).format('YYYY-MM-DD') }}</td>
</tr>
</tbody>
</table>
@@ -233,41 +233,35 @@ export default {
)
).data
const members = (
await axios.get(
`https://api.modrinth.com/api/v1/team/${mod.team}/members`,
config
)
).data
for (let i = 0; i < members.length; i++) {
members[i].avatar_url = (
await axios.get(
`https://api.modrinth.com/api/v1/user/${members[i].user_id}`,
const [members, versions, selectableLoaders, selectableVersions] = (
await Promise.all([
axios.get(
`https://api.modrinth.com/api/v1/team/${mod.team}/members`,
config
)
).data.avatar_url
}
),
axios.get(
`https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
mod.versions
)}`,
config
),
axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
])
).map((it) => it.data)
const versions = (
await axios.get(
`https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
mod.versions
)}`,
config
const users = await Promise.all(
members.map((it) =>
axios.get(`https://api.modrinth.com/api/v1/user/${it.user_id}`, config)
)
).data.reverse()
const selectableLoaders = (
await axios.get(`https://api.modrinth.com/api/v1/tag/loader`)
).data
const selectableVersions = (
await axios.get(`https://api.modrinth.com/api/v1/tag/game_version`)
).data
)
users.forEach(
(it, index) => (members[index].avatar_url = it.data.avatar_url)
)
return {
mod,
versions,
versions: versions.reverse(),
members,
selectableLoaders,
selectableVersions,

View File

@@ -155,7 +155,7 @@
for="body"
title="You can type the of the long form of your description here."
>
Description
Body
</label>
</h3>
<span>

View File

@@ -22,11 +22,11 @@
<div class="stat">
<CalendarIcon />
<div class="info">
<h4>Created</h4>
<h4>Joined</h4>
<p
v-tooltip="
$dayjs(user.created).format(
'[Created on] YYYY-MM-DD [at] HH:mm A'
'[Joined] YYYY-MM-DD [at] HH:mm A'
)
"
class="value"