Fix #81, Fix #82, Add missing data to mod pages, donation platforms WIP

assets/images/utils/client.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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+</svg>

assets/images/utils/file-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>

assets/images/utils/server.svg

@@ -0,0 +1 @@
+<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>

assets/styles/components.scss

@@ -216,8 +216,7 @@
   user-select: none;
   display: flex;
   align-items: center;
-  padding: 0.5rem 0.25rem;
+  padding: 0.5rem 0.25rem 0.2rem;
-  padding-bottom: 0.2rem;
   margin: auto 0.5rem;
   border-bottom: 3px solid transparent;
 

assets/styles/injected.scss

@@ -83,5 +83,8 @@
       margin: 0;
       color: var(--color-text-dark);
     }
+    .capitalize {
+      text-transform: capitalize;
+    }
   }
 }

components/ModPage.vue

@@ -37,6 +37,13 @@
             >
               Versions
             </nuxt-link>
+            <nuxt-link
+              v-if="currentMember"
+              :to="'/mod/' + mod.id + '/settings'"
+              class="tab"
+            >
+              Settings
+            </nuxt-link>
             <a v-if="mod.wiki_url" :href="mod.wiki_url" class="tab">
               <ExternalIcon />
               Wiki
@@ -59,13 +66,10 @@
               <ExternalIcon />
               Source
             </a>
-            <nuxt-link
+            <a v-if="mod.discord_url" :href="mod.discord_url" class="tab">
-              v-if="currentMember"
+              <ExternalIcon />
-              :to="'/mod/' + mod.id + '/settings'"
+              Discord
-              class="tab"
+            </a>
-            >
-              Settings
-            </nuxt-link>
             <div class="filler" />
           </div>
         </div>
@@ -129,6 +133,41 @@
               </p>
             </div>
           </div>
+          <div class="stat">
+            <ClientIcon />
+            <div class="info">
+              <h4>Client Side</h4>
+              <p class="value capitalize">{{ mod.client_side }}</p>
+            </div>
+          </div>
+          <div class="stat">
+            <ServerIcon />
+            <div class="info">
+              <h4>Server Side</h4>
+              <p class="value capitalize">{{ mod.server_side }}</p>
+            </div>
+          </div>
+          <div class="stat">
+            <FileTextIcon />
+            <div class="info">
+              <h4>License</h4>
+              <p class="value">
+                <a
+                  v-if="mod.license.url ? mod.license.url : '#'"
+                  :href="mod.license.url"
+                >
+                  {{ mod.license.name }}</a
+                >
+              </p>
+            </div>
+          </div>
+          <div class="stat">
+            <CodeIcon />
+            <div class="info">
+              <h4>Project ID</h4>
+              <p class="value">{{ mod.id }}</p>
+            </div>
+          </div>
           <Categories :categories="mod.categories.concat(mod.loaders)" />
         </div>
         <div class="section">
@@ -211,6 +250,22 @@
             </div>
           </div>
         </div>
+        <div
+          v-if="mod.donation_urls && mod.donation_urls.length > 0"
+          class="section"
+        >
+          <h3>Donation Links</h3>
+          <div
+            v-for="(item, index) in mod.donation_urls"
+            :key="index"
+            class="links"
+          >
+            <a :href="item.url" class="link">
+              <ExternalIcon />
+              {{ item.platform }}
+            </a>
+          </div>
+        </div>
         <m-footer class="footer" />
       </section>
     </div>
@@ -228,6 +283,10 @@ import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import TagIcon from '~/assets/images/utils/tag.svg?inline'
+import ClientIcon from '~/assets/images/utils/client.svg?inline'
+import ServerIcon from '~/assets/images/utils/server.svg?inline'
+import FileTextIcon from '~/assets/images/utils/file-text.svg?inline'
+import CodeIcon from '~/assets/images/sidebar/mod.svg?inline'
 
 import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 
@@ -247,6 +306,10 @@ export default {
     CalendarIcon,
     EditIcon,
     TagIcon,
+    ClientIcon,
+    ServerIcon,
+    FileTextIcon,
+    CodeIcon,
   },
   props: {
     mod: {
@@ -361,6 +424,10 @@ export default {
     margin-top: 0;
     margin-left: 5px;
     p {
+      max-width: 6rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: '';
       margin: 3px;
     }
     .stat {
@@ -439,6 +506,29 @@ export default {
       }
     }
   }
+
+  .links {
+    padding: 0.5rem 1rem;
+
+    .link {
+      display: flex;
+      align-items: center;
+      padding: 0.25rem 0;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        margin-right: 0.3rem;
+      }
+
+      &:hover,
+      &:focus {
+        padding-bottom: calc(0.25rem - 3px);
+        border-bottom: 3px solid var(--color-brand-disabled);
+        color: var(--color-text-medium);
+      }
+    }
+  }
 }
 
 .limit-text-width {

nuxt.config.js

@@ -172,6 +172,12 @@ export default {
     styleResources: {
       scss: './assets/styles/injected.scss',
     },
+    html: {
+      minify: {
+        collapseWhitespace: true, // as @dario30186 mentioned
+        removeComments: true, // 👈 add this line
+      },
+    },
   },
   loading: {
     color: 'green',

pages/mod/_id/edit.vue

@@ -251,14 +251,55 @@
           </div>
         </label>
       </section>
-      <!--
       <section class="donations">
         <div class="title">
           <h3>Donation links</h3>
-          <i>— this section is optional</i>
+          <button
+            title="Add a link"
+            class="button"
+            :disabled="false"
+            @click="
+              donationPlatforms.push({})
+              donationLinks.push('')
+            "
+          >
+            Add a link
+          </button>
+        </div>
+        <div v-for="(item, index) in donationPlatforms" :key="index">
+          <label title="The donation link.">
+            <span>Donation Link</span>
+            <input
+              v-model="donationLinks[index]"
+              type="url"
+              placeholder="Enter a valid URL"
+            />
+          </label>
+          <label title="The donation platform of the link.">
+            <span>Donation Platform</span>
+            <Multiselect
+              v-model="donationPlatforms[index]"
+              placeholder="Select one"
+              track-by="short"
+              label="name"
+              :options="availableDonationPlatforms"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+            />
+          </label>
+          <button
+            class="button"
+            @click="
+              donationPlatforms.splice(index, 1)
+              donationLinks.splice(index, 1)
+            "
+          >
+            Remove Link
+          </button>
+          <hr />
         </div>
       </section>
-      -->
       <m-footer class="footer" centered />
     </div>
   </div>
@@ -295,7 +336,7 @@ export default {
         availableLoaders,
         availableGameVersions,
         availableLicenses,
-        // availableDonationPlatforms,
+        availableDonationPlatforms,
       ] = (
         await Promise.all([
           axios.get(
@@ -306,19 +347,33 @@ export default {
           axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
           axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
           axios.get(`https://api.modrinth.com/api/v1/tag/license`),
-          // axios.get(`https://api.modrinth.com/api/v1/tag/donation_platform`),
+          axios.get(`https://api.modrinth.com/api/v1/tag/donation_platform`),
         ])
       ).map((it) => it.data)
 
       mod.license = {
         short: mod.license.id,
         name: mod.license.name,
+        url: mod.license.url,
       }
 
       if (mod.body_url && !mod.body) {
         mod.body = (await axios.get(mod.body_url)).data
       }
 
+      const donationPlatforms = []
+      const donationLinks = []
+
+      if (mod.donation_urls) {
+        for (const platform of mod.donation_urls) {
+          donationPlatforms.push({
+            short: platform.id,
+            name: platform.platform,
+          })
+          donationLinks.push(platform.url)
+        }
+      }
+
       return {
         mod,
         clientSideType: {
@@ -338,7 +393,9 @@ export default {
           name: mod.license.name,
         },
         license_url: mod.license.url,
-        // availableDonationPlatforms,
+        availableDonationPlatforms,
+        donationPlatforms,
+        donationLinks,
       }
     } catch {
       data.error({
@@ -408,6 +465,14 @@ export default {
           client_side: this.clientSideType.id,
           server_side: this.serverSideType.id,
           slug: this.mod.slug,
+          license: this.license.short,
+          donation_urls: this.donationPlatforms.map((it, index) => {
+            return {
+              id: it.short,
+              platform: it.name,
+              url: this.donationLinks[index],
+            }
+          }),
         }
 
         if (this.isProcessing) {
@@ -444,7 +509,6 @@ export default {
 
       this.$nuxt.$loading.finish()
     },
-
     showPreviewImage(files) {
       const reader = new FileReader()
       this.iconChanged = true
@@ -464,6 +528,9 @@ export default {
   * {
     display: inline;
   }
+  .button {
+    margin-left: 1rem;
+  }
 }
 
 label {
@@ -622,6 +689,15 @@ section.license {
 
 section.donations {
   grid-area: donations;
+
+  label {
+    align-items: center;
+    margin-top: var(--spacing-card-sm);
+
+    span {
+      flex: 1;
+    }
+  }
 }
 
 .footer {

pages/mod/create.vue

@@ -443,14 +443,56 @@
           </div>
         </label>
       </section>
-      <!--
       <section class="donations">
         <div class="title">
           <h3>Donation links</h3>
           <i>— this section is optional</i>
+          <button
+            title="Add a link"
+            class="button"
+            :disabled="false"
+            @click="
+              donationPlatforms.push({})
+              donationLinks.push('')
+            "
+          >
+            Add a link
+          </button>
+        </div>
+        <div v-for="(item, index) in donationPlatforms" :key="index">
+          <label title="The donation link.">
+            <span>Donation Link</span>
+            <input
+              v-model="donationLinks[index]"
+              type="url"
+              placeholder="Enter a valid URL"
+            />
+          </label>
+          <label title="The donation platform of the link.">
+            <span>Donation Platform</span>
+            <Multiselect
+              v-model="donationPlatforms[index]"
+              placeholder="Select one"
+              track-by="short"
+              label="name"
+              :options="availableDonationPlatforms"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+            />
+          </label>
+          <button
+            class="button"
+            @click="
+              donationPlatforms.splice(index, 1)
+              donationLinks.splice(index, 1)
+            "
+          >
+            Remove Link
+          </button>
+          <hr />
         </div>
       </section>
-      -->
       <m-footer class="footer" centered />
     </div>
   </div>
@@ -482,14 +524,14 @@ export default {
       availableLoaders,
       availableGameVersions,
       availableLicenses,
-      // availableDonationPlatforms,
+      availableDonationPlatforms,
     ] = (
       await Promise.all([
         axios.get(`https://api.modrinth.com/api/v1/tag/category`),
         axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
         axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
         axios.get(`https://api.modrinth.com/api/v1/tag/license`),
-        // axios.get(`https://api.modrinth.com/api/v1/tag/donation_platform`),
+        axios.get(`https://api.modrinth.com/api/v1/tag/donation_platform`),
       ])
     ).map((it) => it.data)
 
@@ -498,7 +540,7 @@ export default {
       availableLoaders,
       availableGameVersions,
       availableLicenses,
-      // availableDonationPlatforms,
+      availableDonationPlatforms,
     }
   },
   data() {
@@ -530,6 +572,9 @@ export default {
       ],
       clientSideType: { label: 'Required', id: 'required' },
       serverSideType: { label: 'Required', id: 'required' },
+
+      donationLinks: [],
+      donationPlatforms: [],
     }
   },
   watch: {
@@ -587,9 +632,16 @@ export default {
           discord_url: this.discord_url,
           client_side: this.clientSideType.id,
           server_side: this.serverSideType.id,
-          license_id: this.license ? this.license.short : null,
+          license_id: this.license ? this.license.short : 'arr',
           license_url: this.license_url,
           is_draft: this.draft,
+          donation_urls: this.donationPlatforms.map((it, index) => {
+            return {
+              id: it.short,
+              platform: it.name,
+              url: this.donationLinks[index],
+            }
+          }),
         })
       )
 
@@ -620,10 +672,16 @@ export default {
 
         await this.$router.replace('/dashboard/projects')
       } catch (err) {
+        let description = err.response.data.description
+
+        if (description.includes('JSON')) {
+          description = 'Please fill in missing required fields.'
+        }
+
         this.$notify({
           group: 'main',
           title: 'An Error Occurred',
-          text: err.response.data.description,
+          text: description,
           type: 'error',
         })
 
@@ -684,6 +742,9 @@ export default {
   * {
     display: inline;
   }
+  .button {
+    margin-left: 1rem;
+  }
 }
 
 label {
@@ -947,6 +1008,15 @@ section.license {
 
 section.donations {
   grid-area: donations;
+
+  label {
+    align-items: center;
+    margin-top: var(--spacing-card-sm);
+
+    span {
+      flex: 1;
+    }
+  }
 }
 
 .footer {