Fix SVGs, cleanup, switch stats backend

pages/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <header class="columns">
-      <nuxt-link to="/"
-        ><img class="logo" src="~/assets/images/logo.svg" alt="logo"
-      /></nuxt-link>
+      <nuxt-link to="/">
+        <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
+      </nuxt-link>
       <div class="links">
         <nuxt-link to="/">Home</nuxt-link>
         <nuxt-link to="/mods">Mods</nuxt-link>

pages/mod/_id.vue

@@ -1,5 +1,5 @@
 <template>
-  <div></div>
+  <div>{{ JSON.stringify(mod) }}</div>
 </template>
 
 <script>
@@ -7,13 +7,46 @@ import axios from 'axios'
 
 export default {
   auth: false,
+  /*
+  {                                                                                                                                                                                                                                                                                                                                                                           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) {
-    const res = await axios.get(
+    let res = await axios.get(
       `https://api.modrinth.com/api/v1/mod/${data.params.id}`
     )
+    const mod = res.data
+
+    res = await axios.get(mod.body_url)
+
+    console.log(res.data)
 
     return {
-      mod: res.data,
+      mod,
+      modBody: res.data,
     }
   },
 }

pages/mods.vue

@@ -206,6 +206,7 @@
             facet-name="categories:forge"
             @toggle="toggleFacet"
           >
+            <ForgeLoader />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -213,6 +214,7 @@
             facet-name="categories:fabric"
             @toggle="toggleFacet"
           >
+            <FabricLoader />
           </SearchFilter>
           <h3>Platforms</h3>
           <SearchFilter
@@ -271,6 +273,9 @@ import StorageCategory from '~/assets/images/categories/storage.svg?inline'
 import UtilityCategory from '~/assets/images/categories/utility.svg?inline'
 import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
 
+import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
+import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
+
 export default {
   auth: false,
   components: {
@@ -290,6 +295,8 @@ export default {
     StorageCategory,
     UtilityCategory,
     WorldGenCategory,
+    ForgeLoader,
+    FabricLoader,
   },
   async fetch() {
     if (this.$route.query.q) this.query = this.$route.query.q

pages/user/_id.vue

@@ -4,9 +4,8 @@
       <img :src="user.avatar_url" :alt="user.username" />
       <div class="info">
         <h1>{{ user.username }}</h1>
-        <p>{{ user.bio }}</p>
-        <p>Joined {{ $dayjs(user.created).fromNow() }}</p>
-        <p></p>
+        <p class="joined-text">Joined {{ $dayjs(user.created).fromNow() }}</p>
+        <p class="bio" v-if="user.bio">{{ user.bio }}</p>
         <p v-if="user.role === 'admin'" class="badge red">Admin</p>
         <p v-if="user.role === 'moderator'" class="badge yellow">Moderator</p>
         <p v-if="user.role === 'developer'" class="badge green">Developer</p>
@@ -78,6 +77,7 @@ export default {
   margin-left: 15px;
 
   img {
+    border-radius: var(--size-rounded-md);
     width: 250px;
     height: 250px;
   }
@@ -85,8 +85,18 @@ export default {
   .info {
     margin-left: 15px;
 
-    p {
-      margin-right: auto;
+    h1 {
+      margin-bottom: 0;
+    }
+
+    .joined-text {
+      margin-top: 5px;
+      color: var(--color-grey-3);
+    }
+
+    .bio {
+      margin-top: 5px;
+      font-size: 16pt;
     }
 
     .badge {