From 89ebce79b2b12f7c3a73ba72539c2464f45a370b Mon Sep 17 00:00:00 2001
From: Jai A <jai.a@tuta.io>
Date: Wed, 21 Oct 2020 13:43:49 -0700
Subject: [PATCH] Add versions section

---
 components/ModPage.vue             | 359 +++++++++++++++++++++++++
 nuxt.config.js                     |  24 --
 pages/dashboard/projects.vue       |   8 +-
 pages/mod/_id/index.vue            | 408 ++++-------------------------
 pages/mod/_id/version/_version.vue |  96 +++++++
 pages/mod/_id/versions.vue         | 212 +++++++++++++++
 pages/mods.vue                     |   2 +-
 7 files changed, 732 insertions(+), 377 deletions(-)
 create mode 100644 components/ModPage.vue
 create mode 100644 pages/mod/_id/version/_version.vue

diff --git a/components/ModPage.vue b/components/ModPage.vue
new file mode 100644
index 00000000..79b7e74c
--- /dev/null
+++ b/components/ModPage.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="columns">
+    <div class="content column-grow-5">
+      <div class="mod-header columns">
+        <img
+          :src="
+            mod.icon_url
+              ? mod.icon_url
+              : 'https://cdn.modrinth.com/placeholder.png'
+          "
+          alt="mod-icon"
+        />
+        <div class="mod-header-text">
+          <div class="columns title">
+            <h2>{{ mod.title }}</h2>
+            <p>by {{ members.find((x) => x.role === 'Owner').name }}</p>
+          </div>
+          <p>{{ mod.description }}</p>
+        </div>
+      </div>
+      <div class="mod-navigation">
+        <nuxt-link :to="'/mod/' + mod.id">
+          <InfoIcon />
+          Description
+        </nuxt-link>
+        <nuxt-link :to="'/mod/' + mod.id + '/versions'">
+          <VersionIcon />
+          Versions
+        </nuxt-link>
+        <nuxt-link :to="'/mod/' + mod.id + '/settings'">
+          <SettingsIcon />
+          Settings
+        </nuxt-link>
+        <a v-if="mod.wiki_url" :href="mod.wiki_url">
+          <ExternalIcon />
+          Wiki
+        </a>
+        <a v-if="mod.issues_url" :href="mod.issues_url">
+          <ExternalIcon />
+          Issues
+        </a>
+        <a v-if="mod.source_url" :href="mod.source_url">
+          <ExternalIcon />
+          Source Code
+        </a>
+        <div class="filler" />
+      </div>
+      <slot />
+    </div>
+    <section class="mod-info">
+      <div class="mod-stats">
+        <h3>Info</h3>
+        <p>{{ mod.downloads }} Downloads</p>
+        <p>Created {{ $dayjs(mod.published).fromNow() }}</p>
+        <p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
+      </div>
+      <div>
+        <h3>Members</h3>
+        <div
+          v-for="member in members"
+          :key="member.user_id"
+          class="team-member columns"
+        >
+          <img :src="member.avatar_url" alt="profile-picture" />
+          <div class="member-info">
+            <h4>{{ member.name }}</h4>
+            <p>{{ member.role }}</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3>Featured Versions</h3>
+        <div
+          v-for="version in versions"
+          :key="version.id"
+          class="featured-version columns"
+        >
+          <div class="version-info">
+            <div class="columns">
+              <h4 class="limit-text-width">
+                {{ version.name }}
+              </h4>
+              <p v-if="version.version_type === 'release'" class="badge green">
+                Release
+              </p>
+              <p v-if="version.version_type === 'beta'" class="badge yellow">
+                Beta
+              </p>
+              <p v-if="version.version_type === 'alpha'" class="badge red">
+                Alpha
+              </p>
+            </div>
+            <div class="columns info-2">
+              <p class="version-number limit-text-width">
+                {{ version.version_number }}
+              </p>
+              <FabricIcon
+                v-if="version.loaders.includes('fabric')"
+                stroke="#AC6C3A"
+              />
+              <ForgeIcon
+                v-if="version.loaders.includes('forge')"
+                stroke="#8B81E6"
+              />
+              <p
+                v-if="version.game_versions.length > 0"
+                class="game-version limit-text-width"
+              >
+                {{ version.game_versions[0] }}
+              </p>
+            </div>
+          </div>
+          <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
+            <DownloadIcon />
+          </nuxt-link>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import ExternalIcon from '~/assets/images/utils/external.svg?inline'
+import InfoIcon from '~/assets/images/utils/info.svg?inline'
+import VersionIcon from '~/assets/images/utils/version.svg?inline'
+import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
+
+import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
+import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
+
+export default {
+  name: 'ModPage',
+  components: {
+    ExternalIcon,
+    InfoIcon,
+    VersionIcon,
+    SettingsIcon,
+    ForgeIcon,
+    FabricIcon,
+    DownloadIcon,
+  },
+  props: {
+    mod: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    versions: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    members: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.mod-header {
+  align-items: center;
+
+  img {
+    border-radius: var(--size-rounded-md);
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+  }
+
+  .mod-header-text {
+    margin-left: 15px;
+
+    .title {
+      align-items: end;
+
+      h2 {
+        margin: 0;
+      }
+
+      p {
+        align-self: flex-end;
+        margin: 0;
+        padding: 0 0 2px 5px;
+      }
+    }
+  }
+}
+
+.mod-navigation {
+  display: flex;
+  margin-top: 20px;
+  overflow-y: auto;
+
+  a {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 2px solid var(--color-grey-2);
+
+    svg {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &:focus {
+      border-bottom: 2px solid var(--color-grey-3);
+    }
+
+    &.nuxt-link-exact-active {
+      border-bottom: 2px solid var(--color-brand);
+    }
+  }
+
+  .filler {
+    flex-grow: 1;
+    border-bottom: 2px solid var(--color-grey-2);
+  }
+}
+
+.mod-info {
+  top: 1rem;
+  height: calc(100vh - 3rem);
+  position: sticky;
+  min-width: 270px;
+  max-width: 270px;
+  margin: 1rem;
+  padding: 0 0.75rem 0 1rem;
+  overflow-y: auto;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-grey-2);
+  border-radius: var(--size-rounded-sm);
+
+  h3 {
+    color: #718096;
+    font-size: 0.8rem;
+    letter-spacing: 0.02rem;
+    margin: 1.5rem 0 0.5rem 0;
+    text-transform: uppercase;
+  }
+
+  .mod-stats {
+    margin-left: 5px;
+    p {
+      color: var(--color-grey-4);
+      margin: 3px;
+    }
+  }
+
+  .team-member {
+    margin-left: 5px;
+    border: 1px solid var(--color-grey-1);
+    border-radius: var(--size-rounded-sm);
+
+    img {
+      border-radius: var(--size-rounded-sm);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      height: 50px;
+      width: 50px;
+    }
+    .member-info {
+      max-width: 150px;
+      overflow: hidden;
+      margin: auto 0 auto 20px;
+      h4 {
+        font-weight: normal;
+        margin: 0;
+      }
+      p {
+        color: var(--color-grey-4);
+        font-weight: lighter;
+        font-size: 12pt;
+        margin: 0;
+      }
+    }
+  }
+
+  .featured-version {
+    margin-left: 5px;
+    border: 1px solid var(--color-grey-1);
+    border-radius: var(--size-rounded-sm);
+
+    .version-info {
+      padding: 5px 10px;
+      h4 {
+        max-width: 120px;
+        font-weight: normal;
+        margin: 0 10px 0 0;
+      }
+      .badge {
+        margin: 0;
+        display: inline-block;
+      }
+      .info-2 {
+        overflow: hidden;
+        max-width: 180px;
+        align-items: center;
+
+        .version-number {
+          max-width: 80px;
+        }
+
+        .game-version {
+          max-width: 120px;
+        }
+
+        p {
+          color: var(--color-grey-4);
+          font-weight: lighter;
+          margin: 0 10px 0 0;
+        }
+
+        svg {
+          min-width: 24px;
+          min-height: 24px;
+          margin-right: 10px;
+        }
+      }
+    }
+
+    a {
+      display: table-cell;
+      margin-left: auto;
+      width: 40px;
+      height: 60px;
+      background-color: var(--color-grey-1);
+      color: var(--color-grey-3);
+
+      svg {
+        margin-top: 15px;
+        height: 30px;
+        width: 40px;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: var(--color-grey-3);
+        color: var(--color-grey-4);
+      }
+    }
+  }
+}
+
+.limit-text-width {
+  display: inline-block;
+  height: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 415fbb79..36a44df3 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -45,30 +45,6 @@ export default {
         name: 'og:image',
         content: 'https://cdn.modrinth.com/modrinth.png',
       },
-
-      // Twitter
-      {
-        hid: 'twitter:card',
-        name: 'twitter:card',
-        content: 'summary',
-      },
-      { hid: 'twitter:site', name: 'twitter:site', content: '@modrinth' },
-      { hid: 'twitter:creator', name: 'twitter:creator', content: '@modrinth' },
-      {
-        hid: 'twitter:title',
-        name: 'twitter:title',
-        content: 'Modrinth',
-      },
-      {
-        hid: 'twitter:description',
-        name: 'twitter:description',
-        content: 'An open source modding platform',
-      },
-      {
-        hid: 'twitter:image',
-        name: 'twitter:image',
-        content: 'https://cdn.modrinth.com/modrinth.png',
-      },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
diff --git a/pages/dashboard/projects.vue b/pages/dashboard/projects.vue
index a9ade23c..96614c25 100644
--- a/pages/dashboard/projects.vue
+++ b/pages/dashboard/projects.vue
@@ -24,7 +24,11 @@
           <td>
             <img class="rounded-md" :src="mod.icon_url" />
           </td>
-          <td>{{ mod.title }}</td>
+          <td>
+            <nuxt-link :to="'/mod/' + mod.id">
+              {{ mod.title }}
+            </nuxt-link>
+          </td>
           <td>Owner</td>
           <td>
             <span v-if="mod.status === 'approved'" class="badge green">
@@ -80,7 +84,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .section-header {
   display: flex;
   margin-bottom: 1rem;
diff --git a/pages/mod/_id/index.vue b/pages/mod/_id/index.vue
index d590f36c..e150aced 100644
--- a/pages/mod/_id/index.vue
+++ b/pages/mod/_id/index.vue
@@ -1,116 +1,7 @@
 <template>
-  <div class="columns">
-    <div class="content column-grow-5">
-      <div class="mod-header columns">
-        <img
-          :src="
-            mod.icon_url
-              ? mod.icon_url
-              : 'https://cdn.modrinth.com/placeholder.png'
-          "
-          alt="mod-icon"
-        />
-        <div class="mod-header-text">
-          <div class="columns title">
-            <h2>{{ mod.title }}</h2>
-            <p>by Author</p>
-          </div>
-          <p>{{ mod.description }}</p>
-        </div>
-      </div>
-      <div class="mod-navigation">
-        <nuxt-link :to="'/mod/' + mod.id">
-          <InfoIcon />
-          Description
-        </nuxt-link>
-        <nuxt-link :to="'/mod/' + mod.id + '/versions'">
-          <VersionIcon />
-          Versions
-        </nuxt-link>
-        <nuxt-link :to="'/mod/' + mod.id + '/settings'">
-          <SettingsIcon />
-          Settings
-        </nuxt-link>
-        <a v-if="mod.wiki_url" :href="mod.wiki_url">
-          <ExternalIcon />
-          Wiki
-        </a>
-        <a v-if="mod.issues_url" :href="mod.issues_url">
-          <ExternalIcon />
-          Issues
-        </a>
-        <a v-if="mod.source_url" :href="mod.source_url">
-          <ExternalIcon />
-          Source Code
-        </a>
-        <div class="filler" />
-      </div>
-      <div class="markdown-body" v-html="modBody"></div>
-    </div>
-    <section class="mod-info">
-      <div class="mod-stats">
-        <h3>Info</h3>
-        <p>{{ mod.downloads }} Downloads</p>
-        <p>Created {{ $dayjs(mod.published).fromNow() }}</p>
-        <p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
-      </div>
-      <div>
-        <h3>Members</h3>
-        <div class="team-member columns">
-          <img
-            src="https://cdn.modrinth.com/placeholder.png"
-            alt="profile-picture"
-          />
-          <div class="member-info">
-            <h4>Username</h4>
-            <p>Role</p>
-          </div>
-        </div>
-      </div>
-      <div>
-        <h3>Featured Versions</h3>
-        <div
-          v-for="version in versions"
-          :key="version.id"
-          class="featured-version columns"
-        >
-          <div class="version-info">
-            <div class="columns">
-              <h4>{{ version.name }}</h4>
-              <p v-if="version.version_type === 'release'" class="badge green">
-                Release
-              </p>
-              <p v-if="version.version_type === 'beta'" class="badge yellow">
-                Beta
-              </p>
-              <p v-if="version.version_type === 'alpha'" class="badge red">
-                Alpha
-              </p>
-            </div>
-            <div class="columns info-2">
-              <p class="version-number">
-                {{ version.version_number.substring(0, 5) }}
-              </p>
-              <FabricIcon
-                v-if="version.loaders.includes('fabric')"
-                stroke="#AC6C3A"
-              />
-              <ForgeIcon
-                v-if="version.loaders.includes('forge')"
-                stroke="#8B81E6"
-              />
-              <p v-if="version.game_versions.length > 0">
-                {{ version.game_versions[0].substring(0, 11) }}
-              </p>
-            </div>
-          </div>
-          <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
-            <DownloadIcon />
-          </nuxt-link>
-        </div>
-      </div>
-    </section>
-  </div>
+  <ModPage :mod="mod" :versions="versions" :members="members">
+    <div class="markdown-body" v-html="body"></div>
+  </ModPage>
 </template>
 
 <script>
@@ -118,79 +9,28 @@ import axios from 'axios'
 
 import xss from 'xss'
 import marked from 'marked'
-
-import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import ExternalIcon from '~/assets/images/utils/external.svg?inline'
-import InfoIcon from '~/assets/images/utils/info.svg?inline'
-import VersionIcon from '~/assets/images/utils/version.svg?inline'
-import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
-
-import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
-import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
+import ModPage from '@/components/ModPage'
 
 export default {
+  components: { ModPage },
   auth: false,
-  components: {
-    ExternalIcon,
-    InfoIcon,
-    VersionIcon,
-    SettingsIcon,
-    ForgeIcon,
-    FabricIcon,
-    DownloadIcon,
-  },
-  /*
-{
-  "id": "HKjRLvnb",
-  "mod_id": "AmPXo0e2",
-  "author_id": "MpxzqsyW",
-  "name": "Initial Release",
-  "version_number": "v1.5",
-  "changelog_url": "https://cdn.modrinth.com/data/AmPXo0e2/changelogs/HKjRLvnb/body.md",
-  "date_published": "2020-10-19T04:11:03.377895Z",
-  "downloads": 0,
-  "version_type": "release",
-  "files": [],
-  "dependencies": [],
-  "game_versions": [
-    "1.16.3",
-    "1.16.2"
-  ],
-  "loaders": [
-    "fabric"
-  ]
-}
-  {                                                                                                                                                                                                                                                                                                                                                                           13:42:51
-  id: 'kN7Mtmyo',
-  team: 'eiP0Hzmw',
-  title: 'Gravestones',
-  description: 'A gravestones mod for fabric with tons ' +
-    'of config options, an API, and more!',
-  body_url: 'https://cdn.modrinth.com/file/modrinth/data/kN7Mtmyo/body.md',
-  published: '2020-10-16T21:17:54.858156Z',
-  updated: '2020-10-16T21:17:50.982804Z',
-  status: 'processing',
-  downloads: 0,
-  categories: [
-    'adventure',
-    'utility',
-    'library'
-  ],
-  versions: [
-    'XUky61nw'
-  ],
-  icon_url: 'https://cdn.modrinth.com/file/modrinth/mods/icons/kN7Mtmyo/gravestones.png',
-  issues_url: null,
-  source_url: null,
-  wiki_url: null
-}
-   */
   async asyncData(data) {
     let res = await axios.get(
       `https://api.modrinth.com/api/v1/mod/${data.params.id}`
     )
     const mod = res.data
 
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/team/${mod.team}/members`
+    )
+    const members = res.data
+    for (let i = 0; i < members.length; i++) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/user/${members[i].user_id}`
+      )
+      members[i].avatar_url = res.data.avatar_url
+    }
+
     res = await axios.get(mod.body_url)
     const body = xss(marked(res.data))
 
@@ -206,189 +46,57 @@ export default {
 
     return {
       mod,
-      modBody: body,
+      body,
       versions,
+      members,
+    }
+  },
+  head() {
+    return {
+      title: this.mod.title + ' - Modrinth',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content:
+            this.mod.description +
+            ' View other minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform that is compatible with CurseForge too!',
+        },
+
+        {
+          hid: 'apple-mobile-web-app-title',
+          name: 'apple-mobile-web-app-title',
+          content: this.mod.title + ' - Modrinth',
+        },
+        {
+          hid: 'og:site_name',
+          name: 'og:site_name',
+          content: this.mod.title + ' - Modrinth',
+        },
+        {
+          hid: 'og:description',
+          name: 'og:description',
+          content: this.mod.description,
+        },
+        { hid: 'og:type', name: 'og:type', content: 'article' },
+        {
+          hid: 'og:image',
+          name: 'og:image',
+          content: this.mod.icon_url
+            ? this.mod.icon_url
+            : 'https://cdn.modrinth.com/placeholder.png',
+        },
+      ],
     }
   },
 }
 </script>
 
-<style lang="scss">
-.mod-header {
-  align-items: center;
-
-  img {
-    border-radius: var(--size-rounded-md);
-    width: 150px;
-    height: 150px;
-    object-fit: cover;
-  }
-
-  .mod-header-text {
-    margin-left: 15px;
-
-    .title {
-      align-items: end;
-
-      h2 {
-        margin: 0;
-      }
-
-      p {
-        margin: 0;
-        padding: 0 0 2px 5px;
-      }
-    }
-  }
-}
-
-.mod-navigation {
-  display: flex;
-  margin-top: 20px;
-  overflow-y: auto;
-
-  a {
-    user-select: none;
-    display: flex;
-    align-items: center;
-    padding: 10px 20px;
-    border-bottom: 2px solid var(--color-grey-2);
-
-    svg {
-      margin-right: 10px;
-    }
-
-    &:hover,
-    &:focus {
-      border-bottom: 2px solid var(--color-grey-3);
-    }
-
-    &.nuxt-link-active {
-      border-bottom: 2px solid var(--color-brand);
-    }
-  }
-
-  .filler {
-    flex-grow: 1;
-    border-bottom: 2px solid var(--color-grey-2);
-  }
-}
-
+<style lang="scss" scoped>
 .markdown-body {
-  border-radius: var(--size-rounded-sm);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   padding: 20px;
   box-shadow: 0 2px 3px 1px var(--color-grey-2);
   background: var(--color-bg);
-}
-
-.mod-info {
-  top: 1rem;
-  height: calc(100vh - 2rem);
-  position: sticky;
-  min-width: 270px;
-  max-width: 270px;
-  margin: 1rem;
-  padding: 0 0.75rem 0 1rem;
-  overflow-y: auto;
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-grey-2);
-  border-radius: var(--size-rounded-sm);
-
-  h3 {
-    color: #718096;
-    font-size: 0.8rem;
-    letter-spacing: 0.02rem;
-    margin: 1.5rem 0 0.5rem 0;
-    text-transform: uppercase;
-  }
-
-  .mod-stats {
-    margin-left: 5px;
-    p {
-      color: var(--color-grey-4);
-      margin: 3px;
-    }
-  }
-
-  .team-member {
-    margin-left: 5px;
-    border: 1px solid var(--color-grey-1);
-    border-radius: var(--size-rounded-sm);
-
-    img {
-      border-radius: var(--size-rounded-sm);
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      height: 50px;
-      width: 50px;
-    }
-    .member-info {
-      margin: auto 20px;
-      h4 {
-        font-weight: normal;
-        margin: 0;
-      }
-      p {
-        color: var(--color-grey-4);
-        font-weight: lighter;
-        font-size: 12pt;
-        margin: 0;
-      }
-    }
-  }
-
-  .featured-version {
-    margin-left: 5px;
-    border: 1px solid var(--color-grey-1);
-    border-radius: var(--size-rounded-sm);
-
-    .version-info {
-      padding: 5px 10px;
-      h4 {
-        font-weight: normal;
-        margin: 0 10px 0 0;
-      }
-      .badge {
-        margin: 0;
-        display: inline-block;
-      }
-      .info-2 {
-        align-items: center;
-
-        p {
-          color: var(--color-grey-4);
-          font-weight: lighter;
-          margin: 0 10px 0 0;
-        }
-
-        svg {
-          margin-right: 10px;
-        }
-      }
-    }
-
-    a {
-      display: table-cell;
-      margin-left: auto;
-      width: 40px;
-      height: 60px;
-      background-color: var(--color-grey-1);
-      color: var(--color-grey-3);
-
-      svg {
-        margin-top: 15px;
-        height: 30px;
-        width: 40px;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: var(--color-grey-3);
-        color: var(--color-grey-4);
-      }
-    }
-  }
+  border-radius: 0 0 var(--size-rounded-sm) var(--size-rounded-sm);
 }
 </style>
diff --git a/pages/mod/_id/version/_version.vue b/pages/mod/_id/version/_version.vue
new file mode 100644
index 00000000..6ab2a5b6
--- /dev/null
+++ b/pages/mod/_id/version/_version.vue
@@ -0,0 +1,96 @@
+<template>
+  <ModPage :mod="mod" :versions="versions" :members="members">
+    <div class="version"></div>
+  </ModPage>
+</template>
+<script>
+import axios from 'axios'
+
+import ModPage from '@/components/ModPage'
+
+export default {
+  components: {
+    ModPage,
+  },
+  auth: false,
+  async asyncData(data) {
+    let res = await axios.get(
+      `https://api.modrinth.com/api/v1/mod/${data.params.id}`
+    )
+    const mod = res.data
+
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/team/${mod.team}/members`
+    )
+    const members = res.data
+    for (let i = 0; i < members.length; i++) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/user/${members[i].user_id}`
+      )
+      members[i].avatar_url = res.data.avatar_url
+    }
+
+    const versions = []
+    for (const version of mod.versions) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/version/${version}`
+      )
+
+      versions.push(res.data)
+    }
+
+    return {
+      mod,
+      versions,
+      members,
+    }
+  },
+  head() {
+    return {
+      title: this.mod.title + ' - Modrinth - Files',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content:
+            this.mod.description +
+            ' View other minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform that is compatible with CurseForge too!',
+        },
+
+        {
+          hid: 'apple-mobile-web-app-title',
+          name: 'apple-mobile-web-app-title',
+          content: this.mod.title + ' - Modrinth',
+        },
+        {
+          hid: 'og:site_name',
+          name: 'og:site_name',
+          content: this.mod.title + ' - Modrinth',
+        },
+        {
+          hid: 'og:description',
+          name: 'og:description',
+          content: this.mod.description,
+        },
+        { hid: 'og:type', name: 'og:type', content: 'article' },
+        {
+          hid: 'og:image',
+          name: 'og:image',
+          content: this.mod.icon_url
+            ? this.mod.icon_url
+            : 'https://cdn.modrinth.com/placeholder.png',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.version {
+  background: var(--color-bg);
+  border-radius: 0 0 0.5rem 0.5rem;
+  box-shadow: 0 2px 3px 1px var(--color-grey-2);
+  padding: 1em;
+}
+</style>
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue
index e69de29b..a2d7212c 100644
--- a/pages/mod/_id/versions.vue
+++ b/pages/mod/_id/versions.vue
@@ -0,0 +1,212 @@
+<template>
+  <ModPage :mod="mod" :versions="versions" :members="members">
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Number</th>
+          <th>Loaders</th>
+          <th>Game Versions</th>
+          <th>Status</th>
+          <th>Downloads</th>
+          <th>Published</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="version in versions" :key="version.id">
+          <td>
+            <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
+              <DownloadIcon />
+            </nuxt-link>
+          </td>
+          <td>
+            <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
+              {{ version.name }}
+            </nuxt-link>
+          </td>
+          <td>{{ version.version_number }}</td>
+          <td>
+            <FabricIcon
+              v-if="version.loaders.includes('fabric')"
+              stroke="#AC6C3A"
+            />
+            <ForgeIcon
+              v-if="version.loaders.includes('forge')"
+              stroke="#8B81E6"
+            />
+          </td>
+          <td>{{ version.game_versions.join(', ') }}</td>
+          <td>
+            <span v-if="version.version_type === 'release'" class="badge green">
+              Release
+            </span>
+            <span v-if="version.version_type === 'beta'" class="badge yellow">
+              Beta
+            </span>
+            <span v-if="version.version_type === 'alpha'" class="badge red">
+              Alpha
+            </span>
+          </td>
+          <td>{{ version.downloads }}</td>
+          <td>{{ $dayjs(version.published).format('YYYY-MM-DD') }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </ModPage>
+</template>
+<script>
+import axios from 'axios'
+
+import ModPage from '@/components/ModPage'
+
+import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
+import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
+
+export default {
+  components: {
+    ModPage,
+    ForgeIcon,
+    FabricIcon,
+    DownloadIcon,
+  },
+  auth: false,
+  async asyncData(data) {
+    let res = await axios.get(
+      `https://api.modrinth.com/api/v1/mod/${data.params.id}`
+    )
+    const mod = res.data
+
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/team/${mod.team}/members`
+    )
+    const members = res.data
+    for (let i = 0; i < members.length; i++) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/user/${members[i].user_id}`
+      )
+      members[i].avatar_url = res.data.avatar_url
+    }
+
+    const versions = []
+    for (const version of mod.versions) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/version/${version}`
+      )
+
+      versions.push(res.data)
+    }
+
+    return {
+      mod,
+      versions,
+      members,
+    }
+  },
+  head() {
+    return {
+      title: this.mod.title + ' - Modrinth',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content:
+            this.mod.description +
+            ' View other minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform that is compatible with CurseForge too!',
+        },
+
+        {
+          hid: 'apple-mobile-web-app-title',
+          name: 'apple-mobile-web-app-title',
+          content: this.mod.title + ' - Modrinth',
+        },
+        {
+          hid: 'og:site_name',
+          name: 'og:site_name',
+          content: this.mod.title + ' - Modrinth',
+        },
+        {
+          hid: 'og:description',
+          name: 'og:description',
+          content: this.mod.description,
+        },
+        { hid: 'og:type', name: 'og:type', content: 'article' },
+        {
+          hid: 'og:image',
+          name: 'og:image',
+          content: this.mod.icon_url
+            ? this.mod.icon_url
+            : 'https://cdn.modrinth.com/placeholder.png',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+table {
+  background: var(--color-bg);
+  border-collapse: collapse;
+  border-radius: 0 0 0.5rem 0.5rem;
+  box-shadow: 0 2px 3px 1px var(--color-grey-2);
+  table-layout: fixed;
+  width: 100%;
+
+  * {
+    text-align: left;
+  }
+
+  tr:not(:last-child),
+  tr:first-child {
+    th,
+    td {
+      border-bottom: 1px solid var(--color-grey-2);
+    }
+  }
+
+  th,
+  td {
+    &:first-child {
+      text-align: center;
+      width: 5%;
+
+      svg {
+        color: var(--color-grey-3);
+
+        &:hover,
+        &:focus {
+          color: var(--color-grey-5);
+        }
+      }
+    }
+
+    &:nth-child(2),
+    &:nth-child(5) {
+      padding-left: 0;
+      width: 15%;
+    }
+  }
+
+  th {
+    color: #718096;
+    font-size: 0.8rem;
+    letter-spacing: 0.02rem;
+    margin-bottom: 0.5rem;
+    margin-top: 1.5rem;
+    padding: 1rem 1rem;
+    text-transform: uppercase;
+  }
+
+  td {
+    overflow: hidden;
+    padding: 0.25rem 1rem;
+
+    img {
+      height: 3rem;
+      width: 3rem;
+    }
+  }
+}
+</style>
diff --git a/pages/mods.vue b/pages/mods.vue
index bed6ea57..85bd714c 100644
--- a/pages/mods.vue
+++ b/pages/mods.vue
@@ -395,7 +395,7 @@ export default {
           if (this.selectedVersions.length > 0) {
             const versionFacets = []
             for (const facet of this.selectedVersions) {
-              versionFacets.push('versions:' + facet)
+              versionFacets.push('version:' + facet)
             }
             formattedFacets.push(versionFacets)
           }