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

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>