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

layouts/default.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- Bidvertiser2046222 -->
   <div class="layout">
     <aside>
       <section class="navbar columns">

package-lock.json

@@ -7316,9 +7316,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
+      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
     },
     "inquirer": {
       "version": "7.3.3",
@@ -10425,6 +10425,14 @@
         "uniq": "^1.0.1"
       }
     },
+    "postscribe": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/postscribe/-/postscribe-2.0.8.tgz",
+      "integrity": "sha1-W3pTqtS2kLbC91gY/O/nRJD0ENU=",
+      "requires": {
+        "prescribe": ">=1.1.2"
+      }
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -10436,6 +10444,11 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prescribe": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prescribe/-/prescribe-1.1.3.tgz",
+      "integrity": "sha1-jTEiRF8/uvTExYF+pSehf8gTnuY="
+    },
     "prettier": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",

pages/index.vue

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

pages/mod/_id/index.vue

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

pages/mod/_id/version/_version.vue

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

pages/mod/_id/versions.vue

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

pages/mod/create.vue

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

pages/user/_id.vue

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