Fix plugin URLs, display, redirects (#619)

* Fix plugin URLs, display, redirects

* Fix user profile + some redirects not working

components/ui/ProjectCard.vue

@@ -2,7 +2,7 @@
   <article class="project-card card" :aria-label="name" role="listitem">
     <div class="columns">
       <div class="icon">
-        <nuxt-link :to="`/${type}/${id}`">
+        <nuxt-link :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`">
           <img
             :src="iconUrl || 'https://cdn.modrinth.com/placeholder.svg?inline'"
             :alt="name"
@@ -19,7 +19,10 @@
         <div class="info">
           <div class="top">
             <h2 class="title">
-              <nuxt-link :to="`/${type}/${id}`">{{ name }}</nuxt-link>
+              <nuxt-link
+                :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`"
+                >{{ name }}</nuxt-link
+              >
             </h2>
             <p v-if="author" class="author">
               by
@@ -29,7 +32,10 @@
             </p>
           </div>
           <div
-            v-if="type !== 'resourcepack' && projectTypeDisplay !== 'plugin'"
+            v-if="
+              type !== 'resourcepack' &&
+              !(projectTypeDisplay === 'plugin' && search)
+            "
             class="side-type"
           >
             <div
@@ -233,6 +239,11 @@ export default {
       required: false,
       default: false,
     },
+    search: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     projectTypeDisplay() {

pages/_type/_id.vue

@@ -621,13 +621,10 @@ export default {
     KoFiIcon,
   },
   async asyncData(data) {
-    const projectTypes = ['mod', 'modpack', 'resourcepack']
+    const projectTypes = ['mod', 'modpack', 'resourcepack', 'plugin', 'project']
 
     try {
-      if (
-        !data.params.id ||
-        !projectTypes.includes(data.params.type.toLowerCase())
-      ) {
+      if (!data.params.id || !projectTypes.includes(data.params.type)) {
         data.error({
           statusCode: 404,
           message: 'The page could not be found',
@@ -658,11 +655,30 @@ export default {
         ])
       ).map((it) => it.data)
 
-      if (project.project_type !== data.params.type) {
-        data.error({
-          statusCode: 404,
-          message: 'Project not found',
-        })
+      const projectLoaders = {}
+
+      for (const version of versions) {
+        for (const loader of version.loaders) {
+          projectLoaders[loader] = true
+        }
+      }
+
+      project.project_type = data.$getProjectTypeForUrl(
+        project.project_type,
+        Object.keys(projectLoaders)
+      )
+
+      if (
+        project.project_type !== data.params.type ||
+        data.params.id !== project.slug
+      ) {
+        const route = data.route.fullPath.split('/')
+        route.splice(0, 3)
+
+        data.redirect(
+          301,
+          `/${project.project_type}/${project.slug}/${route.join('/')}`
+        )
 
         return
       }
@@ -1122,7 +1138,9 @@ export default {
       }
 
       &.lowercase {
-        text-transform: none;
+        &::first-letter {
+          text-transform: none;
+        }
       }
     }
 

pages/index.vue

@@ -46,7 +46,7 @@
             autoplay
             loop
             muted
-            src="~/assets/images/search.mp4"
+            src="https://cdn.modrinth.com/homepage/search.mp4"
             playsinline
           />
           <video
@@ -54,7 +54,7 @@
             autoplay
             loop
             muted
-            src="~/assets/images/search-dark.mp4"
+            src="https://cdn.modrinth.com/homepage/search-dark.mp4"
             playsinline
           />
         </div>

pages/search.vue

@@ -317,6 +317,7 @@
             :client-side="result.client_side"
             :server-side="result.server_side"
             :categories="result.display_categories"
+            :search="true"
           />
           <div v-if="results && results.length === 0" class="no-results">
             <p>No results found for your query!</p>

pages/settings/index.vue

@@ -195,15 +195,6 @@ export default {
 
       return this.$formatNumber(sum)
     },
-    sumFollows() {
-      let sum = 0
-
-      for (const projects of this.$user.projects) {
-        sum += projects.followers
-      }
-
-      return this.$formatNumber(sum)
-    },
     async changeLayout() {
       await this.$store.dispatch('cosmetics/save', {
         searchLayout: this.searchLayout,

pages/user/_id.vue

@@ -178,17 +178,50 @@ export default {
         ])
       ).map((it) => it.data)
 
-      const githubUrl = (
-        await (
-          await fetch(`https://api.github.com/user/` + user.github_id)
-        ).json()
-      ).html_url
+      const [gitHubUser, versions] = (
+        await Promise.all([
+          data.$axios.get(`https://api.github.com/user/` + user.github_id),
+          data.$axios.get(
+            `versions?ids=${JSON.stringify(
+              [].concat.apply(
+                [],
+                projects.map((x) => x.versions)
+              )
+            )}`
+          ),
+        ])
+      ).map((it) => it.data)
+
+      for (const version of versions) {
+        const projectIndex = projects.findIndex(
+          (x) => x.id === version.project_id
+        )
+
+        if (projects[projectIndex].loaders) {
+          for (const loader of version.loaders) {
+            if (!projects[projectIndex].loaders.includes(loader)) {
+              projects[projectIndex].loaders.push(loader)
+            }
+          }
+        } else {
+          projects[projectIndex].loaders = version.loaders
+        }
+      }
+
+      for (const project of projects) {
+        project.categories = project.categories.concat(project.loaders)
+
+        project.project_type = data.$getProjectTypeForUrl(
+          project.project_type,
+          project.categories
+        )
+      }
 
       return {
         selectedProjectType: 'all',
         user,
         projects,
-        githubUrl,
+        githubUrl: gitHubUser.html_url,
       }
     } catch {
       data.error({

plugins/shorthands.js

@@ -150,6 +150,23 @@ export default (ctx, inject) => {
       return formatProjectType(type)
     }
   })
+  inject('getProjectTypeForUrl', (type, categories) => {
+    if (type === 'mod') {
+      const isPlugin = categories.some((category) => {
+        return ctx.store.state.tag.loaderData.allPluginLoaders.includes(
+          category
+        )
+      })
+
+      const isMod = categories.some((category) => {
+        return ctx.store.state.tag.loaderData.modLoaders.includes(category)
+      })
+
+      return isPlugin && isMod ? 'mod' : isPlugin ? 'plugin' : 'mod'
+    } else {
+      return type
+    }
+  })
 }
 
 export const formatNumber = (number) => {