Remove lots of inline SVGs, use moment.js for times, add some pages for future work

pages/create/mod.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="content">
-    <h2>Create Mod</h2>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="scss"></style>

pages/dashboard/projects.vue

@@ -4,7 +4,7 @@
 
     <div class="section-header">
       <h3>Mods</h3>
-      <nuxt-link class="create-button" to="/create/mod"
+      <nuxt-link class="create-button" to="/mod/create"
         >Create a new mod</nuxt-link
       >
     </div>

pages/index.vue

@@ -166,7 +166,6 @@
         <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
         <p class="name">modrinth</p>
       </div>
-      <img class="host" src="~/assets/images/fosshost.svg" alt="logo" />
       <p class="copyright">© Guavy LLC</p>
       <div class="column">
         <h4 class="pages">Pages</h4>
@@ -417,15 +416,9 @@ footer {
       font-family: 'Montserrat Alternates', serif;
     }
   }
-  .host {
-    grid-column-start: 1;
-    grid-row-start: 10;
-    grid-row-end: 11;
-    height: 40px;
-  }
   .copyright {
     grid-column-start: 1;
-    grid-row-start: 12;
+    grid-row-start: 10;
     color: var(--color-grey-6);
   }
   h4 {

pages/mod/_id.vue

@@ -0,0 +1,21 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  async asyncData(data) {
+    const res = await axios.get(
+      `https://api.modrinth.com/api/v1/mod/${data.params.id}`
+    )
+
+    return {
+      mod: res.data,
+    }
+  },
+}
+</script>
+
+<style lang="scss"></style>

pages/mod/create.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="content">
+    <h2>Create Mod</h2>
+    <InputLabel
+      label="Name"
+      tooltip="The name of the mod"
+      :required="true"
+    ></InputLabel>
+    <input v-model="name" type="text" />
+    <input v-model="namespace" type="text" />
+    <input v-model="description" type="text" />
+    <div class="editor">
+      <textarea v-model="body"></textarea>
+      <div v-html="$md.render(body)"></div>
+    </div>
+    <input v-model="issues_url" type="text" />
+    <input v-model="source_url" type="text" />
+    <input v-model="wiki_url" type="text" />
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import InputLabel from '@/components/InputLabel'
+
+export default {
+  components: { InputLabel },
+  data() {
+    return {
+      name: '',
+      namespace: '',
+      description: '',
+      body: '',
+      compiledBody: '',
+      versions: [],
+      categories: [],
+      issues_url: null,
+      source_url: null,
+      wiki_url: null,
+    }
+  },
+  methods: {
+    async createMod() {
+      const formData = new FormData()
+
+      formData.append(
+        'data',
+        JSON.stringify({
+          mod_name: this.name,
+          mod_namespace: this.namespace,
+          mod_description: this.description,
+          mod_body: this.body,
+          initial_versions: this.versions,
+          team_members: [
+            {
+              user_id: this.$auth.user.id,
+              name: this.$auth.user.username,
+              role: 'Owner',
+            },
+          ],
+          categories: this.categories,
+          issues_url: this.issues_url,
+          source_url: this.source_url,
+          wiki_url: this.wiki_url,
+        })
+      )
+
+      try {
+        const result = await axios({
+          url: 'https://api.modrinth.com/api/v1/mod',
+          method: 'POST',
+          data: formData,
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+
+        // eslint-disable-next-line no-console
+        console.log(result)
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err)
+      }
+    },
+    compileBody() {
+      // this.compiledBody = DomPurify.sanitize(marked(this.body))
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+input {
+  width: 200px;
+  margin-right: auto;
+  margin-bottom: 20px;
+}
+
+.editor {
+  width: 100%;
+  min-height: 500px;
+  textarea {
+    padding: 20px;
+    width: calc(50% - 50px);
+    min-height: 500px;
+    resize: none;
+    outline: none;
+    border: none;
+    margin: 0;
+    background-color: var(--color-grey-1);
+    border-right: 1px solid var(--color-text);
+    color: var(--color-text);
+    font-family: monospace;
+  }
+  div {
+    padding: 20px;
+    margin: 0;
+    min-height: 540px;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    vertical-align: top;
+    background-color: var(--color-grey-2);
+  }
+}
+</style>

pages/mods.vue

@@ -61,8 +61,8 @@
           :name="result.title"
           :description="result.description"
           :latest-version="result.versions[0]"
-          :created-at="result.date_created.substring(0, 10)"
-          :updated-at="result.date_modified.substring(0, 10)"
+          :created-at="result.date_created"
+          :updated-at="result.date_modified"
           :downloads="formatNumber(result.downloads)"
           :icon-url="result.icon_url"
           :author-url="result.author_url"
@@ -70,7 +70,7 @@
           :categories="result.categories"
           :is-ad="index === -1"
         />
-        <div class="no-results" v-if="results.length === 0">
+        <div v-if="results.length === 0" class="no-results">
           <p>No results found for your query!</p>
         </div>
       </div>
@@ -109,21 +109,7 @@
             facet-name="categories:technology"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <line x1="22" y1="12" x2="2" y2="12"></line>
-              <path
-                d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-              ></path>
-              <line x1="6" y1="16" x2="6.01" y2="16"></line>
-              <line x1="10" y1="16" x2="10.01" y2="16"></line>
-            </svg>
+            <TechCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -131,19 +117,7 @@
             facet-name="categories:adventure"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="10"></circle>
-              <polygon
-                points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
-              ></polygon>
-            </svg>
+            <AdventureCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -151,18 +125,7 @@
             facet-name="categories:magic"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z"
-              />
-            </svg>
+            <MagicCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -170,17 +133,7 @@
             facet-name="categories:utility"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
-              <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
-            </svg>
+            <UtilityCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -188,17 +141,7 @@
             facet-name="categories:decoration"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-              <polyline points="9 22 9 12 15 12 15 22" />
-            </svg>
+            <DecorationCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -206,19 +149,7 @@
             facet-name="categories:library"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
-              <path
-                d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
-              ></path>
-            </svg>
+            <LibraryCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -226,28 +157,7 @@
             facet-name="categories:cursed"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <rect x="7" y="7.5" width="10" height="14" rx="5" />
-              <polyline points="2 12.5 4 14.5 7 14.5" />
-              <polyline points="22 12.5 20 14.5 17 14.5" />
-              <polyline points="3 21.5 5 18.5 7 17.5" />
-              <polyline points="21 21.5 19 18.5 17 17.5" />
-              <polyline points="3 8.5 5 10.5 7 11.5" />
-              <polyline points="21 8.5 19 10.5 17 11.5" />
-              <line x1="12" y1="7.5" x2="12" y2="21.5" />
-              <path
-                d="M15.38,8.82A3,3,0,0,0,16,7h0a3,3,0,0,0-3-3H11A3,3,0,0,0,8,7H8a3,3,0,0,0,.61,1.82"
-              />
-              <line x1="9" y1="4.5" x2="8" y2="2.5" />
-              <line x1="15" y1="4.5" x2="16" y2="2.5" />
-            </svg>
+            <CursedCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -255,18 +165,7 @@
             facet-name="categories:worldgen"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z"
-              />
-            </svg>
+            <WorldGenCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -274,18 +173,7 @@
             facet-name="categories:storage"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <polyline points="21 8 21 21 3 21 3 8"></polyline>
-              <rect x="1" y="3" width="22" height="5"></rect>
-              <line x1="10" y1="12" x2="14" y2="12"></line>
-            </svg>
+            <StorageCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -293,20 +181,7 @@
             facet-name="categories:food"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
-              <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
-              <line x1="6" y1="1" x2="6" y2="4"></line>
-              <line x1="10" y1="1" x2="10" y2="4"></line>
-              <line x1="14" y1="1" x2="14" y2="4"></line>
-            </svg>
+            <FoodCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -314,24 +189,7 @@
             facet-name="categories:equipment"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"
-              />
-              <path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25" />
-              <path
-                d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"
-              />
-              <path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" />
-              <path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" />
-            </svg>
+            <EquipmentCategory />
           </SearchFilter>
           <SearchFilter
             :active-filters="facets"
@@ -339,20 +197,7 @@
             facet-name="categories:misc"
             @toggle="toggleFacet"
           >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="2" y1="12" x2="22" y2="12"></line>
-              <path
-                d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
-              ></path>
-            </svg>
+            <MiscCategory />
           </SearchFilter>
           <h3>Loaders</h3>
           <SearchFilter
@@ -414,11 +259,18 @@ import SearchResult from '@/components/ModResult'
 import Pagination from '@/components/Pagination'
 import SearchFilter from '@/components/SearchFilter'
 
-const config = {
-  headers: {
-    Accept: 'application/json',
-  },
-}
+import TechCategory from '~/assets/images/categories/tech.svg?inline'
+import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
+import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
+import DecorationCategory from '~/assets/images/categories/decoration.svg?inline'
+import EquipmentCategory from '~/assets/images/categories/equipment.svg?inline'
+import FoodCategory from '~/assets/images/categories/food.svg?inline'
+import LibraryCategory from '~/assets/images/categories/library.svg?inline'
+import MagicCategory from '~/assets/images/categories/magic.svg?inline'
+import MiscCategory from '~/assets/images/categories/misc.svg?inline'
+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'
 
 export default {
   auth: false,
@@ -427,6 +279,18 @@ export default {
     Pagination,
     Multiselect,
     SearchFilter,
+    TechCategory,
+    AdventureCategory,
+    CursedCategory,
+    DecorationCategory,
+    EquipmentCategory,
+    FoodCategory,
+    LibraryCategory,
+    MagicCategory,
+    MiscCategory,
+    StorageCategory,
+    UtilityCategory,
+    WorldGenCategory,
   },
   async fetch() {
     if (this.$route.query.q) this.query = this.$route.query.q
@@ -472,8 +336,7 @@ export default {
     async fillInitialVersions() {
       try {
         const res = await axios.get(
-          'https://launchermeta.mojang.com/mc/game/version_manifest.json',
-          config
+          'https://launchermeta.mojang.com/mc/game/version_manifest.json'
         )
 
         const versions = res.data.versions
@@ -554,7 +417,7 @@ export default {
           }
         }
 
-        const res = await axios.get(url, config)
+        const res = await axios.get(url)
         this.results = res.data.hits
 
         const pageAmount = Math.ceil(res.data.total_hits / res.data.limit)

pages/user/_id.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <img :src="user.avatar_url" />
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  async asyncData(data) {
+    let res = await axios.get(
+      `https://api.modrinth.com/api/v1/user/${data.params.id}`
+    )
+    const user = res.data
+
+    let mods = []
+    res = await axios.get(
+      `https://api.modrinth.com/api/v1/user/${data.params.id}/mods`
+    )
+    if (res.data) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/mods/?ids=${JSON.stringify(res.data)}`
+      )
+      mods = res.data
+    }
+
+    return {
+      mods,
+      user,
+    }
+  },
+}
+</script>
+
+<style lang="scss"></style>