Fix #93, Fix #105, Add Mod Secondary Nav Bar, Add featured versions, Remove page transition, Make load bar smaller

assets/images/utils/report.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
+</svg>

assets/styles/utils.scss

@@ -5,3 +5,5 @@
 .w-100 {
   width: 100%;
 }
+
+html { margin-left: calc(100vw - 100%); }

components/ModPage.vue

@@ -18,6 +18,23 @@
             <p class="description">
               {{ mod.description }}
             </p>
+            <div class="alt-nav">
+              <p>
+                <nuxt-link to="/mods"> Mods </nuxt-link>
+                >
+                <nuxt-link :to="'/mod/' + (mod.slug ? mod.slug : mod.id)">{{
+                  mod.title
+                }}</nuxt-link>
+                <span v-if="linkBar.length > 0"> ></span>
+                <nuxt-link
+                  v-for="(link, index) in linkBar"
+                  :key="index"
+                  :to="/mod/ + (mod.slug ? mod.slug : mod.id) + '/' + link[1]"
+                  >{{ link[0] }}
+                  <span v-if="index !== linkBar.length - 1"> > </span>
+                </nuxt-link>
+              </p>
+            </div>
           </div>
         </div>
         <Advertisement
@@ -175,7 +192,7 @@
                   v-if="mod.license.url ? mod.license.url : '#'"
                   :href="mod.license.url"
                 >
-                  {{ mod.license.name }}</a
+                  {{ mod.license.id.toUpperCase() }}</a
                 >
               </p>
             </div>
@@ -205,10 +222,10 @@
             </div>
           </div>
         </div>
-        <div v-if="versions.length > 0" class="section">
+        <div v-if="featuredVersions.length > 0" class="section">
           <h3>Featured Versions</h3>
           <div
-            v-for="version in versions"
+            v-for="version in featuredVersions"
             :key="version.id"
             class="featured-version"
           >
@@ -343,6 +360,12 @@ export default {
         return {}
       },
     },
+    featuredVersions: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
     versions: {
       type: Array,
       default() {
@@ -361,6 +384,12 @@ export default {
         return null
       },
     },
+    linkBar: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
   },
   methods: {
     formatNumber(x) {
@@ -417,9 +446,14 @@ export default {
     }
     .description {
       margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
-      height: 100%;
       color: var(--color-text-dark);
     }
+    .alt-nav {
+      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
+      p {
+        margin: 0;
+      }
+    }
   }
 }
 
@@ -508,6 +542,7 @@ export default {
         width: 1.25rem;
         margin: auto;
       }
+      flex-shrink: 0;
     }
     .info {
       @extend %column;

layouts/default.vue

@@ -191,16 +191,6 @@ export default {
 </script>
 
 <style lang="scss">
-.page-enter-active,
-.page-leave-active {
-  transition: ease-in-out 100ms;
-}
-
-.page-enter,
-.page-leave-to {
-  opacity: 0;
-}
-
 .layout {
   background-color: var(--color-bg);
   display: block;

nuxt.config.js

@@ -175,6 +175,6 @@ export default {
   },
   loading: {
     color: 'green',
-    height: '5px',
+    height: '2px',
   },
 }

pages/mod/_id/index.vue

@@ -1,9 +1,10 @@
 <template>
   <ModPage
     :mod="mod"
-    :versions="versions"
+    :featured-versions="featuredVersions"
     :members="members"
     :current-member="currentMember"
+    :link-bar="[['Description', '']]"
   >
     <div
       v-compiled-markdown="mod.body"
@@ -41,14 +42,11 @@ export default {
         mod.body = (await axios.get(mod.body_url)).data
       }
 
-      const [members, versions] = (
+      const [members, featuredVersions] = (
         await Promise.all([
           axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
           axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
-              mod.versions
-            )}`,
-            config
           ),
         ])
       ).map((it) => it.data)
@@ -74,11 +72,7 @@ export default {
 
       return {
         mod,
-        versions: versions.sort(
+        featuredVersions,
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
         members,
         currentMember,
       }

pages/mod/_id/newversion.vue

@@ -1,9 +1,10 @@
 <template>
   <ModPage
     :mod="mod"
-    :versions="versions"
+    :featured-versions="featuredVersions"
     :members="members"
     :current-member="currentMember"
+    :link-bar="[['New Version', 'newversion']]"
   >
     <div class="new-version">
       <div class="controls">
@@ -151,14 +152,16 @@ export default {
         )
       ).data
 
-      const [members, versions, selectableLoaders, selectableVersions] = (
+      const [
+        members,
+        featuredVersions,
+        selectableLoaders,
+        selectableVersions,
+      ] = (
         await Promise.all([
           axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
           axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
-              mod.versions
-            )}`,
-            config
           ),
           axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
           axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
@@ -186,11 +189,7 @@ export default {
 
       return {
         mod,
-        versions: versions.sort(
+        featuredVersions,
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
         members,
         selectableLoaders,
         selectableVersions,

pages/mod/_id/settings.vue

@@ -1,9 +1,10 @@
 <template>
   <ModPage
     :mod="mod"
-    :versions="versions"
     :members="members.filter((it) => it.accepted)"
     :current-member="currentMember"
+    :featured-versions="featuredVersions"
+    :link-bar="[['Settings', 'settings']]"
   >
     <div class="section-header columns">
       <h3 class="column-grow-1">General</h3>
@@ -260,17 +261,14 @@ export default {
         )
       ).data
 
-      const [members, versions] = (
+      const [members, featuredVersions] = (
         await Promise.all([
           axios.get(
             `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
             config
           ),
           axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
-              mod.versions
-            )}`,
-            config
           ),
         ])
       ).map((it) => it.data)
@@ -298,11 +296,7 @@ export default {
 
       return {
         mod,
-        versions: versions.sort(
+        featuredVersions,
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
         members,
         currentMember,
       }

pages/mod/_id/version/_version/edit.vue

@@ -2,8 +2,14 @@
   <ModPage
     :mod="mod"
     :versions="versions"
+    :featured-versions="featuredVersions"
     :members="members"
     :current-member="currentMember"
+    :link-bar="[
+      ['Versions', 'versions'],
+      [version.name, 'versions/' + version.id],
+      ['Edit Version', 'versions/' + version.id + '/edit'],
+    ]"
   >
     <div class="new-version">
       <div class="controls">
@@ -135,14 +141,18 @@ export default {
         )
       ).data
 
-      const [members, versions, selectableLoaders, selectableVersions] = (
+      const [
+        members,
+        versions,
+        featuredVersions,
+        selectableLoaders,
+        selectableVersions,
+      ] = (
         await Promise.all([
           axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(`https://api.modrinth.com/api/v1/mod/${mod.id}/version`),
           axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
-              mod.versions
-            )}`,
-            config
           ),
           axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
           axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
@@ -184,11 +194,8 @@ export default {
 
       return {
         mod,
-        versions: versions.sort(
+        versions,
-          (a, b) =>
+        featuredVersions,
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
         members,
         version,
         primaryFile,

pages/mod/_id/version/_version/index.vue

@@ -4,6 +4,11 @@
     :versions="versions"
     :members="members"
     :current-member="currentMember"
+    :featured-versions="featuredVersions"
+    :link-bar="[
+      ['Versions', 'versions'],
+      [version.name, 'versions/' + version.id],
+    ]"
   >
     <div class="version">
       <div class="version-header">
@@ -150,14 +155,12 @@ export default {
         )
       ).data
 
-      const [members, versions] = (
+      const [members, versions, featuredVersions] = (
         await Promise.all([
           axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(`https://api.modrinth.com/api/v1/mod/${mod.id}/version`),
           axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
-              mod.versions
-            )}`,
-            config
           ),
         ])
       ).map((it) => it.data)
@@ -197,11 +200,8 @@ export default {
 
       return {
         mod,
-        versions: versions.sort(
+        versions,
-          (a, b) =>
+        featuredVersions,
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
         members,
         version,
         primaryFile,

pages/mod/_id/versions.vue

@@ -2,8 +2,10 @@
   <ModPage
     :mod="mod"
     :versions="versions"
+    :featured-versions="featuredVersions"
     :members="members"
     :current-member="currentMember"
+    :link-bar="[['Versions', 'versions']]"
   >
     <table>
       <thead>
@@ -109,17 +111,13 @@ export default {
         )
       ).data
 
-      const [members, versions, selectableLoaders, selectableVersions] = (
+      const [members, versions, featuredVersions] = (
         await Promise.all([
           axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(`https://api.modrinth.com/api/v1/mod/${mod.id}/version`),
           axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
-              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)
 
@@ -144,14 +142,9 @@ export default {
 
       return {
         mod,
-        versions: versions.sort(
+        versions,
-          (a, b) =>
+        featuredVersions,
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
         members,
-        selectableLoaders,
-        selectableVersions,
         currentMember,
       }
     } catch {

pages/user/_id.vue

@@ -107,7 +107,7 @@ export default {
 
       let mods = []
       res = await axios.get(
-        `https://api.modrinth.com/api/v1/user/${data.params.id}/mods`,
+        `https://api.modrinth.com/api/v1/user/${user.id}/mods`,
         config
       )
       if (res.data) {