From 673f7a82d19700ee2be06739277cbb8ae9f3cb43 Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Sun, 14 Aug 2022 12:42:58 -0700
Subject: [PATCH] New features (#592)

* New features

* Lots of bug fixes

* Fix respack creation

* Improve mobile nav with more project types

* Fix resolution sorting and remove icons

* Move cookie consent to top on small devices to get out of the way of navigation

* Move cookie consent + fix hydration

* Fix project editing + update search features

* Centralize hardcoding of loader/category names, fix cookie consent shadow, fix mobile navbar rounding

* Fix plugin platforms formatting

* Kitchen sink!

* Add support for display names

* LiteLoader formatting

* Fixed "show all loaders" toggle not resetting when changing pages

* Allow multiple loaders in version filter controls

* Fix clear filters button

* Revert "Add support for display names"

This reverts commit 370838763d86bcae51bf06c304248f7a1f8fc28f.

* Let's see how this goes. Upstream filters, attempt 1

* github? hello?

* No more "Server mod" on plugins

* Fix formatting of project types in project creation

* Move where project creation sets the resource pack loader

* Allow setting pixelated image-rendering

Allows to apply 'style' attribute to IMG tags with value
'image-rendering' set to 'pixelated', which can be useful for people who
use pixel art in their READMEs (to demonstrate items, for example).

* fix user page + hydration issue fix from Brawaru

* Rename to proxies

* Make categories use title case

* Always show project type on moderation page, improve project type display on project pages

* Remove invalid key

* Missed a check

* Fix browse menu animation

* Fix disabled button condition and minimum width for 2 lines

* Body -> Description in edit pages

* More casing consistency issues

* Fix duplicate version URLs

* Fix version creation

* Edit URLs, fix privacy page buttons

* Fix notifications popup overlaying

* Final merge fixes

Co-authored-by: Prospector <prospectordev@gmail.com>
Co-authored-by: Sasha Sorokin <10401817+Brawaru@users.noreply.github.com>
---
 app/router.scrollBehavior.js           |   6 +-
 assets/styles/components.scss          |  54 +++--
 assets/styles/global.scss              |   8 +-
 components/ads/CookieConsent.vue       |  47 +++-
 components/ui/ProjectCard.vue          |  29 ++-
 components/ui/ThisOrThat.vue           |   6 +-
 components/ui/VersionFilterControl.vue |  20 +-
 components/ui/search/Categories.vue    |   9 +-
 components/ui/search/SearchFilter.vue  |   1 -
 layouts/default.vue                    | 225 +++++++++++++----
 nuxt.config.js                         |  20 +-
 pages/_type/_id.vue                    | 124 ++++++----
 pages/_type/_id/changelog.vue          |  14 +-
 pages/_type/_id/edit.vue               |  73 +++++-
 pages/_type/_id/version.vue            |  61 ++---
 pages/_type/_id/versions.vue           |  18 +-
 pages/create/project.vue               | 181 +++++++++++---
 pages/moderation.vue                   |   1 +
 pages/notifications.vue                |   4 +-
 pages/search.vue                       | 168 ++++++++++---
 pages/search/modpacks.vue              |   3 -
 pages/search/mods.vue                  |   3 -
 pages/search/plugins.vue               |  31 +++
 pages/search/resourcepacks.vue         |  31 +++
 pages/settings/privacy.vue             |   3 +
 pages/user/_id.vue                     |  16 +-
 plugins/shorthands.js                  | 320 +++++++++++++++++++------
 plugins/xss.js                         |   9 +
 static/favicon-dark.ico                | Bin 15086 -> 0 bytes
 static/favicon.ico                     | Bin 15086 -> 15086 bytes
 store/tag.js                           |  15 ++
 31 files changed, 1152 insertions(+), 348 deletions(-)
 create mode 100644 pages/search/plugins.vue
 create mode 100644 pages/search/resourcepacks.vue
 delete mode 100644 static/favicon-dark.ico

diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js
index 1dd2f351..76cf84ed 100644
--- a/app/router.scrollBehavior.js
+++ b/app/router.scrollBehavior.js
@@ -1,5 +1,9 @@
 export default function (to, from, savedPosition) {
-  if (to.name.startsWith('type-id') && from.name.startsWith('type-id')) {
+  if (
+    from == null ||
+    (to.name.startsWith('type-id') && from.name.startsWith('type-id')) ||
+    to.name === from.name
+  ) {
     return savedPosition
   } else {
     return { x: 0, y: 0 }
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 413ec3da..30e49862 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -263,6 +263,14 @@
   > :last-child {
     margin-bottom: 0 !important;
   }
+
+  @media screen and (max-width: 850px) {
+    iframe {
+      aspect-ratio: 16 / 9;
+      width: 100%;
+      height: auto;
+    }
+  }
 }
 
 .tooltip {
@@ -826,12 +834,12 @@ label {
 }
 
 .vue-notification {
-  background: #44A4FC;
-  border-left: 5px solid #44A4FC;
+  background: #44a4fc;
+  border-left: 5px solid #44a4fc;
 
   &.success {
-    background: #68CD86;
-    border-left-color: #68CD86;
+    background: #68cd86;
+    border-left-color: #68cd86;
   }
 
   &.warn {
@@ -840,25 +848,43 @@ label {
   }
 
   &.error {
-    background: #E54D42;
-    border-left-color: #E54D42;
+    background: #e54d42;
+    border-left-color: #e54d42;
   }
 }
 
 .vue-notification-group {
   right: 25px !important;
+  bottom: 25px !important;
 
-  .vue-notification-template {
-    border-radius: var(--size-rounded-card);
-    margin: 0 0 25px 0;
+  .vue-notification-wrapper {
+    margin-bottom: 10px;
 
-    .notification-title {
-      font-size: var(--font-size-lg);
-      margin-right: auto;
+    .vue-notification-template {
+      border-radius: var(--size-rounded-card);
+      margin: 0;
+
+      .notification-title {
+        font-size: var(--font-size-lg);
+        margin-right: auto;
+      }
+
+      .notification-content {
+        font-size: var(--font-size-md);
+      }
     }
 
-    .notification-content {
-      font-size: var(--font-size-md);
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  @media screen and (max-width: 750px) {
+    transition: bottom 0.25s ease-in-out;
+    bottom: calc(var(--size-mobile-navbar-height) + 10px) !important;
+
+    &.browse-menu-open {
+      bottom: calc(var(--size-mobile-navbar-height-expanded) + 10px) !important;
     }
   }
 }
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 491a0697..989bfc04 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -208,7 +208,9 @@ body {
   --size-rounded-tooltip: 0.25rem;
 
   --size-navbar-height: 3.5rem;
-  --size-mobile-navbar-height: 4rem;
+  --size-mobile-navbar-height: 3.5rem;
+  // --size-mobile-navbar-height-expanded: 10rem;
+  --size-mobile-navbar-height-expanded: 7.5rem;
 
   --spacing-card-lg: 1.5rem;
   --spacing-card-bg: 1rem;
@@ -235,6 +237,10 @@ body {
   --font-weight-text: var(--font-weight-medium);
   --font-weight-heading: var(--font-weight-extrabold);
   --font-weight-title: var(--font-weight-extrabold);
+
+  @media screen and (min-width: 501px) {
+    --size-mobile-navbar-height-expanded: 7rem;
+  }
 }
 
 svg {
diff --git a/components/ads/CookieConsent.vue b/components/ads/CookieConsent.vue
index 014a0c55..66f2c4ae 100644
--- a/components/ads/CookieConsent.vue
+++ b/components/ads/CookieConsent.vue
@@ -3,13 +3,15 @@
     <div
       ref="container"
       class="container"
-      :style="{ visibility: shown ? 'visible' : 'hidden' }"
+      :class="{ 'mobile-menu-open': mobileMenuOpen }"
+      :style="{
+        visibility: shown ? 'visible' : 'hidden',
+      }"
     >
       <div class="card banner">
         <span>
-          Modrinth uses cookies for various purposes, including advertising.<br />
-          We encourage you to review your privacy settings by clicking on the
-          button below:
+          Modrinth uses cookies for various purposes. We encourage you to review
+          your privacy settings by clicking on the button below:
         </span>
         <div class="actions">
           <button class="btn button" @click="review">Review</button>
@@ -24,6 +26,12 @@
 import scopes from '~/privacy-toggles'
 export default {
   name: 'CookieConsent',
+  props: {
+    mobileMenuOpen: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return {
       shown: false,
@@ -68,15 +76,18 @@ export default {
   width: 100%;
   text-align: center;
 
-  z-index: 20;
+  z-index: 2;
   position: fixed;
-  bottom: 4rem;
   right: 0;
+  bottom: 0;
+
   .banner {
-    padding: 1rem;
     font-size: 1.05rem;
     border-radius: 0;
     margin-bottom: 0;
+    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+    padding: 1rem 1rem calc(var(--size-mobile-navbar-height) + 1rem);
+    transition: padding-bottom 0.25s ease-in-out;
   }
   .actions {
     display: flex;
@@ -89,11 +100,23 @@ export default {
     }
   }
 
-  @media screen and (min-width: 750px) {
-    bottom: 0;
+  .banner {
+    margin-bottom: 0;
+  }
 
+  &.mobile-menu-open {
     .banner {
-      margin-bottom: 0;
+      padding-bottom: calc(var(--size-mobile-navbar-height-expanded) + 1rem);
+    }
+  }
+
+  @media screen and (min-width: 750px) {
+    .banner {
+      padding-bottom: 1rem;
+    }
+
+    &.mobile-menu-open {
+      bottom: 0;
     }
   }
 
@@ -102,7 +125,9 @@ export default {
     text-align: unset;
 
     .banner {
-      max-width: 18vw;
+      border-radius: var(--size-rounded-card);
+      width: 18vw;
+      min-width: 16rem;
       border-left: solid 5px var(--color-brand);
       margin: 0 2rem 2rem 0;
     }
diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
index b4f12e10..a7bd489d 100644
--- a/components/ui/ProjectCard.vue
+++ b/components/ui/ProjectCard.vue
@@ -28,13 +28,16 @@
               </nuxt-link>
             </p>
           </div>
-          <div class="side-type">
+          <div
+            v-if="type !== 'resourcepack' && projectTypeDisplay !== 'plugin'"
+            class="side-type"
+          >
             <div
               v-if="clientSide === 'optional' && serverSide === 'optional'"
               class="side-descriptor"
             >
               <InfoIcon aria-hidden="true" />
-              Universal {{ type }}
+              Universal {{ projectTypeDisplay }}
             </div>
             <div
               v-else-if="
@@ -44,7 +47,7 @@
               class="side-descriptor"
             >
               <InfoIcon aria-hidden="true" />
-              Client {{ type }}
+              Client {{ projectTypeDisplay }}
             </div>
             <div
               v-else-if="
@@ -54,8 +57,16 @@
               class="side-descriptor"
             >
               <InfoIcon aria-hidden="true" />
-              Server {{ type }}
+              Server {{ projectTypeDisplay }}
             </div>
+            <div v-else-if="moderation" class="side-descriptor">
+              <InfoIcon aria-hidden="true" />
+              A {{ projectTypeDisplay }}
+            </div>
+          </div>
+          <div v-else-if="moderation" class="side-descriptor">
+            <InfoIcon aria-hidden="true" />
+            A {{ projectTypeDisplay }}
           </div>
           <p class="description">
             {{ description }}
@@ -217,6 +228,16 @@ export default {
       required: false,
       default: '',
     },
+    moderation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    projectTypeDisplay() {
+      return this.$getProjectTypeForDisplay(this.type, this.categories)
+    },
   },
 }
 </script>
diff --git a/components/ui/ThisOrThat.vue b/components/ui/ThisOrThat.vue
index 91c3411e..6a682a57 100644
--- a/components/ui/ThisOrThat.vue
+++ b/components/ui/ThisOrThat.vue
@@ -43,11 +43,15 @@ export default {
 
 <style scoped>
 button {
+  text-transform: capitalize;
   margin: 0;
   padding: 0;
-  text-transform: capitalize;
   background-color: transparent;
   border-radius: 0;
   color: inherit;
 }
+
+button span::first-letter {
+  text-transform: uppercase;
+}
 </style>
diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue
index 65f2dc9a..1a5e81e1 100644
--- a/components/ui/VersionFilterControl.vue
+++ b/components/ui/VersionFilterControl.vue
@@ -5,16 +5,16 @@
   >
     <Multiselect
       v-if="getValidLoaders().length > 1"
-      v-model="selectedLoader"
+      v-model="selectedLoaders"
       :options="getValidLoaders()"
       :custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
-      :multiple="false"
+      :multiple="true"
       :searchable="false"
       :show-no-results="false"
       :close-on-select="true"
       :clear-search-on-select="false"
       :show-labels="false"
-      :allow-empty="false"
+      :allow-empty="true"
       :disabled="getValidLoaders().length === 1"
       placeholder="Filter loader..."
       @input="updateVersionFilters()"
@@ -51,10 +51,12 @@
     />
     <button
       title="Clear filters"
-      :disabled="selectedLoader === null && selectedGameVersions.length === 0"
+      :disabled="
+        selectedLoaders.length === 0 && selectedGameVersions.length === 0
+      "
       class="iconified-button"
       @click="
-        selectedLoader = null
+        selectedLoaders = []
         selectedGameVersions = []
         updateVersionFilters()
       "
@@ -90,7 +92,7 @@ export default {
       cachedValidVersions: null,
       cachedValidLoaders: null,
       selectedGameVersions: [],
-      selectedLoader: null,
+      selectedLoaders: [],
     }
   },
   methods: {
@@ -124,8 +126,10 @@ export default {
             this.selectedGameVersions.some((gameVersion) =>
               projectVersion.game_versions.includes(gameVersion)
             )) &&
-          (this.selectedLoader === null ||
-            projectVersion.loaders.includes(this.selectedLoader))
+          (this.selectedLoaders.length === 0 ||
+            this.selectedLoaders.some((loader) =>
+              projectVersion.loaders.includes(loader)
+            ))
       )
       this.$emit('updateVersions', temp)
     },
diff --git a/components/ui/search/Categories.vue b/components/ui/search/Categories.vue
index 2f33d927..2085e541 100644
--- a/components/ui/search/Categories.vue
+++ b/components/ui/search/Categories.vue
@@ -3,10 +3,7 @@
     <span
       v-for="category in categoriesFiltered"
       :key="category.name"
-      v-html="
-        category.icon +
-        (category.name === 'modloader' ? 'ModLoader' : category.name)
-      "
+      v-html="category.icon + $formatCategory(category.name)"
     />
   </div>
 </template>
@@ -33,7 +30,8 @@ export default {
         .filter(
           (x) =>
             this.categories.includes(x.name) &&
-            (!x.project_type || x.project_type === this.type)
+            (!x.project_type || x.project_type === this.type) &&
+            x.name !== 'minecraft'
         )
     },
   },
@@ -52,7 +50,6 @@ export default {
     flex-direction: row;
     color: var(--color-icon);
     margin-right: 1em;
-    text-transform: capitalize;
 
     svg {
       width: 1rem;
diff --git a/components/ui/search/SearchFilter.vue b/components/ui/search/SearchFilter.vue
index 51d25984..75fffe77 100644
--- a/components/ui/search/SearchFilter.vue
+++ b/components/ui/search/SearchFilter.vue
@@ -69,7 +69,6 @@ export default {
   }
 
   span {
-    text-transform: capitalize;
     user-select: none;
   }
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 3acdbd68..3c47cdff 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="layout">
+  <div ref="layout" class="layout">
     <header class="site-header" role="presentation">
       <section class="navbar columns" role="navigation">
         <section class="skip column" role="presentation">
           <a href="#main">Skip to Main Content</a>
-          <a v-if="registeredSkipLink" :href="registeredSkipLink.id">{{
-            registeredSkipLink.text
-          }}</a>
+          <a
+            v-show="!!registeredSkipLink"
+            :href="(registeredSkipLink || {}).id"
+            >{{ (registeredSkipLink || {}).text }}</a
+          >
         </section>
         <section class="logo column" role="presentation">
           <NuxtLink to="/" aria-label="Modrinth home page">
@@ -19,7 +21,13 @@
               <NuxtLink to="/mods" class="tab">
                 <span>Mods</span>
               </NuxtLink>
-              <NuxtLink to="/modpacks" class="tab tab--alpha">
+              <!--              <NuxtLink to="/plugins" class="tab">-->
+              <!--                <span>Plugins</span>-->
+              <!--              </NuxtLink>-->
+              <!--              <NuxtLink to="/resourcepacks" class="tab">-->
+              <!--                <span>Resource Packs</span>-->
+              <!--              </NuxtLink>-->
+              <NuxtLink to="/modpacks" class="tab">
                 <span>Modpacks</span>
               </NuxtLink>
             </div>
@@ -162,23 +170,62 @@
           </section>
         </section>
       </section>
-      <section class="mobile-navbar">
-        <NuxtLink to="/" class="tab">
-          <HomeIcon />
-          <span>Home</span>
-        </NuxtLink>
-        <NuxtLink to="/mods" class="tab">
-          <ModIcon />
-          <span>Mods</span>
-        </NuxtLink>
-        <NuxtLink to="/modpacks" class="tab">
-          <ModpackIcon />
-          <span>Modpacks</span>
-        </NuxtLink>
-        <button class="tab" @click="toggleMobileMenu()">
-          <HamburgerIcon />
-          <span>{{ isMobileMenuOpen ? 'Less' : 'More' }}</span>
-        </button>
+      <section ref="mobileNavBar" class="mobile-navbar">
+        <div class="top-row">
+          <NuxtLink to="/" class="tab" @click.native="closeBrowseMenu()">
+            <HomeIcon />
+          </NuxtLink>
+          <div class="spacer"></div>
+          <button class="tab browse" @click="toggleBrowseMenu()">
+            <DropdownIcon :class="{ closed: !isBrowseMenuOpen }" />
+            <span>Browse</span>
+          </button>
+          <div class="spacer"></div>
+          <button class="tab" @click="toggleMobileMenu()">
+            <HamburgerIcon v-if="!isMobileMenuOpen" />
+            <CrossIcon v-else />
+          </button>
+        </div>
+        <div
+          :class="{ 'disable-childern': !isBrowseMenuOpen }"
+          class="project-types"
+        >
+          <NuxtLink
+            :tabindex="isBrowseMenuOpen ? 0 : -1"
+            to="/mods"
+            class="tab"
+            @click.native="closeBrowseMenu()"
+          >
+            <span>Mods</span>
+          </NuxtLink>
+
+          <!--          <NuxtLink-->
+          <!--            :tabindex="isBrowseMenuOpen ? 0 : -1"-->
+          <!--            to="/plugins"-->
+          <!--            class="tab"-->
+          <!--            @click.native="closeBrowseMenu()"-->
+          <!--          >-->
+          <!--            <span>Plugins</span>-->
+          <!--          </NuxtLink>-->
+
+          <!--          <NuxtLink-->
+          <!--            :tabindex="isBrowseMenuOpen ? 0 : -1"-->
+          <!--            to="/resourcepacks"-->
+          <!--            class="tab"-->
+          <!--            @click.native="closeBrowseMenu()"-->
+          <!--          >-->
+          <!--            <span>Resource Packs</span>-->
+          <!--          </NuxtLink>-->
+
+          <NuxtLink
+            :tabindex="isBrowseMenuOpen ? 0 : -1"
+            to="/modpacks"
+            class="tab"
+            @click.native="closeBrowseMenu()"
+          >
+            <span>Modpacks</span>
+          </NuxtLink>
+        </div>
       </section>
       <section ref="mobileMenu" class="mobile-menu">
         <div class="mobile-menu-wrapper">
@@ -239,11 +286,12 @@
       </section>
     </header>
     <main>
-      <CookieConsent />
+      <CookieConsent :mobile-menu-open="isBrowseMenuOpen" />
       <notifications
         group="main"
         position="bottom right"
         :max="5"
+        :class="{ 'browse-menu-open': isBrowseMenuOpen }"
         :ignore-duplicates="true"
         :duration="10000"
       />
@@ -312,16 +360,15 @@ import ClickOutside from 'vue-click-outside'
 import ModrinthLogo from '~/assets/images/text-logo.svg?inline'
 
 import HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
 
 import NotificationIcon from '~/assets/images/sidebar/notifications.svg?inline'
 import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 import ShieldIcon from '~/assets/images/utils/shield.svg?inline'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 import HomeIcon from '~/assets/images/sidebar/home.svg?inline'
-import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
-import ModpackIcon from '~/assets/images/sidebar/modpack.svg?inline'
-import MoonIcon from '~/assets/images/utils/moon.svg?inline'
 
+import MoonIcon from '~/assets/images/utils/moon.svg?inline'
 import SunIcon from '~/assets/images/utils/sun.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
@@ -343,8 +390,7 @@ export default {
     GitHubIcon,
     NotificationIcon,
     HomeIcon,
-    ModIcon,
-    ModpackIcon,
+    CrossIcon,
     HamburgerIcon,
     CookieConsent,
     SettingsIcon,
@@ -365,6 +411,7 @@ export default {
       branch: process.env.branch || 'master',
       hash: process.env.hash || 'unknown',
       isMobileMenuOpen: false,
+      isBrowseMenuOpen: false,
       registeredSkipLink: null,
       moderationNotifications: 0,
     }
@@ -429,6 +476,37 @@ export default {
         document.body.style.overflowY !== 'hidden' ? 'hidden' : overflowStyle
 
       this.isMobileMenuOpen = !currentlyActive
+
+      if (this.isMobileMenuOpen) {
+        this.$refs.mobileNavBar.className = `mobile-navbar`
+        this.$refs.layout.className = `layout`
+
+        this.isBrowseMenuOpen = false
+      }
+    },
+    toggleBrowseMenu() {
+      const currentlyActive =
+        this.$refs.mobileNavBar.className === 'mobile-navbar expanded'
+      this.$refs.mobileNavBar.className = `mobile-navbar${
+        currentlyActive ? '' : ' expanded'
+      }`
+      this.$refs.layout.className = `layout${
+        currentlyActive ? '' : ' expanded-mobile-nav'
+      }`
+
+      this.isBrowseMenuOpen = !currentlyActive
+
+      if (this.isBrowseMenuOpen) {
+        this.$refs.mobileMenu.className = `mobile-menu`
+
+        this.isMobileMenuOpen = false
+      }
+    },
+    closeBrowseMenu() {
+      this.$refs.mobileNavBar.className = `mobile-navbar`
+      this.$refs.layout.className = `layout`
+
+      this.isBrowseMenuOpen = false
     },
     async logout() {
       this.$cookies.set('auth-token-reset', true)
@@ -453,16 +531,6 @@ export default {
     removeFocus() {
       document.activeElement.blur() // This doesn't work, sadly. Help
     },
-    async getModerationCount() {
-      const [projects, reports] = (
-        await Promise.all([
-          this.$axios.get(`moderation/projects`, this.$defaultHeaders()),
-          this.$axios.get(`report`, this.$defaultHeaders()),
-        ])
-      ).map((it) => it.data)
-
-      return projects.length + reports.length
-    },
   },
 }
 </script>
@@ -819,34 +887,36 @@ export default {
     .mobile-navbar {
       display: none;
       width: 100%;
+      transition: height 0.25s ease-in-out;
       height: var(--size-mobile-navbar-height);
       position: fixed;
       left: 0;
       bottom: 0;
-      justify-content: center;
-      align-items: center;
       background-color: var(--color-raised-bg);
       box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
       z-index: 6;
+      flex-direction: column;
+      border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
+
+      overflow: hidden;
 
       .tab {
         background: none;
         display: flex;
-        flex-grow: 1;
         flex-basis: 0;
         justify-content: center;
         align-items: center;
-        flex-direction: column;
+        flex-direction: row;
+        gap: 0.25rem;
         font-weight: bold;
         padding: 0;
-        margin: auto;
         transition: color ease-in-out 0.15s;
         color: var(--color-text-inactive);
+        text-align: center;
 
         svg {
           height: 1.75rem;
           width: 1.75rem;
-          margin-bottom: 0.25rem;
         }
 
         &:hover,
@@ -863,9 +933,72 @@ export default {
         }
       }
 
+      .top-row {
+        min-height: var(--size-mobile-navbar-height);
+        display: flex;
+        width: 100%;
+
+        .browse {
+          flex-grow: 10;
+
+          svg {
+            transition: transform 0.125s ease-in-out;
+
+            &.closed {
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+        .tab {
+          &:first-child {
+            margin-left: 2rem;
+          }
+
+          &:last-child {
+            margin-right: 2rem;
+          }
+        }
+
+        .spacer {
+          flex-grow: 1;
+        }
+      }
+
+      .disable-childern {
+        a {
+          pointer-events: none;
+        }
+      }
+
+      .project-types {
+        margin-top: 0.5rem;
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        row-gap: 0.5rem;
+
+        .tab {
+          flex: 0 0 fit-content;
+          background-color: var(--color-button-bg);
+          padding: 0.5rem 1.25rem;
+          margin: 0 0.25rem;
+          border-radius: var(--size-rounded-max);
+
+          &.nuxt-link-exact-active {
+            background-color: var(--color-brand);
+            color: var(--color-brand-inverted);
+          }
+        }
+      }
+
       @media screen and (max-width: 750px) {
         display: flex;
       }
+
+      &.expanded {
+        height: var(--size-mobile-navbar-height-expanded);
+      }
     }
   }
 
@@ -874,12 +1007,13 @@ export default {
     position: absolute;
     top: 0;
     background-color: var(--color-bg);
-    height: calc(100% - var(--size-mobile-navbar-height));
+    height: 100%;
     width: 100%;
     z-index: 5;
 
     .mobile-menu-wrapper {
       max-height: calc(100vh - var(--size-mobile-navbar-height));
+      margin-bottom: var(--size-mobile-navbar-height);
       overflow-y: auto;
       margin-top: auto;
 
@@ -903,6 +1037,7 @@ export default {
 
           &.nuxt-link-exact-active {
             color: var(--color-button-text-active);
+
             svg {
               color: var(--color-brand);
             }
diff --git a/nuxt.config.js b/nuxt.config.js
index d3da43c5..5d3dcd4b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -155,6 +155,16 @@ export default {
             component: resolve(__dirname, 'pages/search/modpacks.vue'),
             name: 'modpacks',
           },
+          {
+            path: '/plugins',
+            component: resolve(__dirname, 'pages/search/plugins.vue'),
+            name: 'plugins',
+          },
+          {
+            path: '/resourcepacks',
+            component: resolve(__dirname, 'pages/search/resourcepacks.vue'),
+            name: 'resourcepacks',
+          },
         ],
       })
 
@@ -222,7 +232,7 @@ export default {
       '/search/**',
       '/create/**',
     ],
-    routes: ['mods', 'modpacks'],
+    routes: ['mods', 'modpacks', 'resourcepacks', 'plugins'],
   },
   /*
    ** Axios module configuration
@@ -309,7 +319,7 @@ export default {
   },
   hooks: {
     render: {
-      routeDone(url) {
+      routeDone(url, result, context) {
         setTimeout(() => {
           axios
             .post(
@@ -323,6 +333,12 @@ export default {
               {
                 headers: {
                   'Modrinth-Admin': process.env.ARIADNE_ADMIN_KEY || 'feedbeef',
+                  'User-Agent':
+                    context.req.rawHeaders[
+                      context.req.rawHeaders.findIndex(
+                        (x) => x === 'User-Agent'
+                      ) + 1
+                    ],
                 },
               }
             )
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index d59baf7e..fe6dab26 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -36,38 +36,46 @@
         </nuxt-link>
         <div
           v-if="
-            project.client_side === 'optional' &&
-            project.server_side === 'optional'
+            project.project_type !== 'resourcepack' &&
+            projectTypeDisplay !== 'plugin'
           "
-          class="side-descriptor"
         >
-          <InfoIcon aria-hidden="true" />
-          Universal {{ project.project_type }}
-        </div>
-        <div
-          v-else-if="
-            (project.client_side === 'optional' ||
-              project.client_side === 'required') &&
-            (project.server_side === 'optional' ||
-              project.server_side === 'unsupported')
-          "
-          class="side-descriptor"
-        >
-          <InfoIcon aria-hidden="true" />
-          Client {{ project.project_type }}
-        </div>
-        <div
-          v-else-if="
-            (project.server_side === 'optional' ||
-              project.server_side === 'required') &&
-            (project.client_side === 'optional' ||
-              project.client_side === 'unsupported')
-          "
-          class="side-descriptor"
-        >
-          <InfoIcon aria-hidden="true" />
-          Server {{ project.project_type }}
+          <div
+            v-if="
+              project.client_side === 'optional' &&
+              project.server_side === 'optional'
+            "
+            class="side-descriptor"
+          >
+            <InfoIcon aria-hidden="true" />
+            Universal {{ projectTypeDisplay }}
+          </div>
+          <div
+            v-else-if="
+              (project.client_side === 'optional' ||
+                project.client_side === 'required') &&
+              (project.server_side === 'optional' ||
+                project.server_side === 'unsupported')
+            "
+            class="side-descriptor"
+          >
+            <InfoIcon aria-hidden="true" />
+            Client {{ projectTypeDisplay }}
+          </div>
+          <div
+            v-else-if="
+              (project.server_side === 'optional' ||
+                project.server_side === 'required') &&
+              (project.client_side === 'optional' ||
+                project.client_side === 'unsupported')
+            "
+            class="side-descriptor"
+          >
+            <InfoIcon aria-hidden="true" />
+            Server {{ projectTypeDisplay }}
+          </div>
         </div>
+
         <p class="description">
           {{ project.description }}
         </p>
@@ -389,7 +397,7 @@
               <nuxt-link
                 :to="`/${project.project_type}/${
                   project.slug ? project.slug : project.id
-                }/version/${encodeURIComponent(version.version_number)}`"
+                }/version/${encodeURI(version.displayUrlEnding)}`"
                 class="top title-link"
               >
                 {{ version.name }}
@@ -398,15 +406,7 @@
                 v-if="version.game_versions.length > 0"
                 class="game-version item"
               >
-                {{
-                  version.loaders
-                    .map((x) =>
-                      x.toLowerCase() === 'modloader'
-                        ? 'ModLoader'
-                        : x.charAt(0).toUpperCase() + x.slice(1)
-                    )
-                    .join(', ')
-                }}
+                {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
                 {{ $formatVersion(version.game_versions) }}
               </div>
               <VersionBadge
@@ -455,13 +455,25 @@
               }}</a>
             </div>
           </div>
-          <div class="info">
+          <div
+            v-if="
+              project.project_type !== 'resourcepack' &&
+              projectTypeDisplay !== 'plugin'
+            "
+            class="info"
+          >
             <div class="key">Client side</div>
             <div class="value">
               {{ project.client_side }}
             </div>
           </div>
-          <div class="info">
+          <div
+            v-if="
+              project.project_type !== 'resourcepack' &&
+              projectTypeDisplay !== 'plugin'
+            "
+            class="info"
+          >
             <div class="key">Server side</div>
             <div class="value">
               {{ project.server_side }}
@@ -647,7 +659,7 @@ export default {
     Categories,
   },
   async asyncData(data) {
-    const projectTypes = ['mod', 'modpack']
+    const projectTypes = ['mod', 'modpack', 'resourcepack']
 
     try {
       if (
@@ -706,6 +718,16 @@ export default {
         project.body = (await data.$axios.get(project.body_url)).data
       }
 
+      const loaders = []
+
+      versions.forEach((version) => {
+        version.loaders.forEach((loader) => {
+          if (!loaders.includes(loader)) {
+            loaders.push(loader)
+          }
+        })
+      })
+
       return {
         project,
         versions,
@@ -714,6 +736,7 @@ export default {
         allMembers: members,
         currentMember,
         dependencies,
+        loaders,
       }
     } catch {
       data.error({
@@ -727,6 +750,10 @@ export default {
       showKnownErrors: false,
     }
   },
+  fetch() {
+    this.versions = this.$computeVersions(this.versions)
+    this.featuredVersions = this.$computeVersions(this.featuredVersions)
+  },
   head() {
     return {
       title: `${this.project.title} - ${
@@ -779,6 +806,14 @@ export default {
       ],
     }
   },
+  computed: {
+    projectTypeDisplay() {
+      return this.$getProjectTypeForDisplay(
+        this.project.project_type,
+        this.loaders
+      )
+    },
+  },
   methods: {
     findPrimary(version) {
       let file = version.files.find((x) => x.primary)
@@ -1119,7 +1154,10 @@ export default {
 
     .value {
       width: 50%;
-      text-transform: capitalize;
+
+      &::first-letter {
+        text-transform: capitalize;
+      }
 
       &.lowercase {
         text-transform: none;
diff --git a/pages/_type/_id/changelog.vue b/pages/_type/_id/changelog.vue
index 2e09daec..97d7a55f 100644
--- a/pages/_type/_id/changelog.vue
+++ b/pages/_type/_id/changelog.vue
@@ -14,7 +14,7 @@
               <nuxt-link
                 :to="`/${project.project_type}/${
                   project.slug ? project.slug : project.id
-                }/version/${encodeURIComponent(version.version_number)}`"
+                }/version/${encodeURI(version.displayUrlEnding)}`"
                 >{{ version.name }}</nuxt-link
               >
             </h2>
@@ -69,12 +69,6 @@ export default {
     DownloadIcon,
     VersionFilterControl,
   },
-  data() {
-    return {
-      filteredVersions: this.versions,
-    }
-  },
-  auth: false,
   props: {
     project: {
       type: Object,
@@ -95,6 +89,12 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      filteredVersions: this.versions,
+    }
+  },
+  auth: false,
   methods: {
     updateVersions(updatedVersions) {
       this.filteredVersions = updatedVersions
diff --git a/pages/_type/_id/edit.vue b/pages/_type/_id/edit.vue
index 5ff20170..1a6b3bc9 100644
--- a/pages/_type/_id/edit.vue
+++ b/pages/_type/_id/edit.vue
@@ -110,17 +110,13 @@
         <Multiselect
           id="categories"
           v-model="newProject.categories"
-          :options="
-            $tag.categories
-              .filter((x) => x.project_type === project.project_type)
-              .map((it) => it.name)
-          "
+          :options="selectableCategories"
           :custom-label="
             (value) => value.charAt(0).toUpperCase() + value.slice(1)
           "
           :loading="$tag.categories.length === 0"
           :multiple="true"
-          :searchable="false"
+          :searchable="true"
           :show-no-results="false"
           :close-on-select="false"
           :clear-on-select="false"
@@ -132,13 +128,46 @@
           :disabled="
             (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
           "
+          @input="setCategories"
+        />
+      </label>
+      <label>
+        <span>
+          <h3>Additional Categories</h3>
+          <span class="no-padding">
+            Select up to 3 categories that will help others <br />
+            find your project.
+          </span>
+        </span>
+        <Multiselect
+          id="additional_categories"
+          v-model="newProject.additional_categories"
+          :options="selectableAdditionalCategories"
+          :custom-label="
+            (value) => value.charAt(0).toUpperCase() + value.slice(1)
+          "
+          :loading="$tag.categories.length === 0"
+          :multiple="true"
+          :searchable="true"
+          :show-no-results="false"
+          :close-on-select="false"
+          :clear-on-select="false"
+          :show-labels="false"
+          :max="255"
+          :limit="6"
+          :hide-selected="true"
+          placeholder="Choose additional categories"
+          :disabled="
+            (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
+          "
+          @input="setCategories"
         />
       </label>
       <label class="vertical-input">
         <span>
           <h3>Vanity URL (slug)<span class="required">*</span></h3>
           <span class="slug-description"
-            >https://modrinth.com/{{ newProject.project_type.toLowerCase() }}/{{
+            >https://modrinth.com/{{ project.project_type.toLowerCase() }}/{{
               newProject.slug ? newProject.slug : 'your-slug'
             }}
           </span>
@@ -189,7 +218,10 @@
         Reset
       </button>
     </section>
-    <section class="card game-sides">
+    <section
+      v-if="project.project_type !== 'resourcepack'"
+      class="card game-sides"
+    >
       <div class="columns">
         <div>
           <h3>Supported environments</h3>
@@ -241,7 +273,7 @@
           for="body"
           title="You can type an extended description of your project here."
         >
-          Body<span class="required">*</span>
+          Description<span class="required">*</span>
         </label>
       </h3>
       <span>
@@ -500,6 +532,9 @@ export default {
       donationPlatforms: [],
       donationLinks: [],
 
+      selectableCategories: [],
+      selectableAdditionalCategories: [],
+
       isProcessing: false,
       previewImage: null,
       compiledBody: '',
@@ -544,6 +579,8 @@ export default {
     this.serverSideType =
       this.newProject.server_side.charAt(0) +
       this.newProject.server_side.slice(1)
+
+    this.setCategories()
   },
   watch: {
     license(newValue, oldValue) {
@@ -584,6 +621,23 @@ export default {
     this.DELETE_PROJECT = 1 << 7
   },
   methods: {
+    setCategories() {
+      this.selectableCategories = this.$tag.categories
+        .filter(
+          (x) =>
+            x.project_type === this.project.project_type &&
+            !this.newProject.additional_categories.includes(x.name)
+        )
+        .map((it) => it.name)
+
+      this.selectableAdditionalCategories = this.$tag.categories
+        .filter(
+          (x) =>
+            x.project_type === this.project.project_type &&
+            !this.newProject.categories.includes(x.name)
+        )
+        .map((it) => it.name)
+    },
     checkFields() {
       const reviewConditions =
         this.newProject.body !== '' && this.newProject.versions.length > 0
@@ -626,6 +680,7 @@ export default {
           description: this.newProject.description,
           body: this.newProject.body,
           categories: this.newProject.categories,
+          additional_categories: this.newProject.additional_categories,
           issues_url: this.newProject.issues_url
             ? this.newProject.issues_url
             : null,
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index 31aa4c03..1a3f917c 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -26,7 +26,7 @@
         Back to list
       </nuxt-link>
     </div>
-    <div>
+    <div v-if="version">
       <div v-if="mode === 'version'" class="version-header">
         <h2>{{ version.name }}</h2>
 
@@ -47,7 +47,7 @@
           v-if="$auth.user"
           :to="`/${project.project_type}/${
             project.slug ? project.slug : project.id
-          }/version/${encodeURIComponent(version.version_number)}`"
+          }/version/${encodeURI(version.displayUrlEnding)}`"
           class="iconified-button"
         >
           <CrossIcon aria-hidden="true" />
@@ -113,7 +113,7 @@
           class="action iconified-button"
           :to="`/${project.project_type}/${
             project.slug ? project.slug : project.id
-          }/version/${encodeURIComponent(version.version_number)}/edit`"
+          }/version/${encodeURI(version.displayUrlEnding)}/edit`"
           @click.prevent="mode = 'edit'"
         >
           <EditIcon aria-hidden="true" />
@@ -209,8 +209,8 @@
               color="red"
             />
           </div>
-          <div class="data">
-            <p class="title">Mod loaders</p>
+          <div v-if="project.project_type !== 'resourcepack'" class="data">
+            <p class="title">Loaders</p>
             <multiselect
               v-if="mode === 'edit' || mode === 'create'"
               v-model="version.loaders"
@@ -223,12 +223,7 @@
                   )
                   .map((it) => it.name)
               "
-              :custom-label="
-                (value) =>
-                  value === 'modloader'
-                    ? 'Risugami\'s ModLoader'
-                    : value.charAt(0).toUpperCase() + value.slice(1)
-              "
+              :custom-label="(value) => $formatCategory(value)"
               :loading="$tag.loaders.length === 0"
               :multiple="true"
               :searchable="false"
@@ -238,18 +233,10 @@
               :show-labels="false"
               :limit="6"
               :hide-selected="true"
-              placeholder="Choose mod loaders..."
+              placeholder="Choose loaders..."
             />
             <p v-else class="value">
-              {{
-                version.loaders
-                  .map((x) =>
-                    x.toLowerCase() === 'modloader'
-                      ? "Risugami's ModLoader"
-                      : x.charAt(0).toUpperCase() + x.slice(1)
-                  )
-                  .join(', ')
-              }}
+              {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
             </p>
           </div>
           <div v-if="mode === 'version'" class="data">
@@ -365,7 +352,7 @@
                           dependency.project.slug
                             ? dependency.project.slug
                             : dependency.project.id
-                        }/version/${encodeURIComponent(
+                        }/version/${encodeURI(
                           dependency.version.version_number
                         )}`
                       : `/${dependency.project.project_type}/${
@@ -754,9 +741,18 @@ export default {
 
       if (!this.version)
         this.version = this.versions.find(
-          (x) => x.version_number === this.$route.params.version
+          (x) => x.displayUrlEnding === this.$route.params.version
         )
 
+      if (!this.version) {
+        this.$nuxt.context.error({
+          statusCode: 404,
+          message: 'The page could not be found',
+        })
+
+        return
+      }
+
       this.version = JSON.parse(JSON.stringify(this.version))
       this.primaryFile =
         this.version.files.find((file) => file.primary) ?? this.version.files[0]
@@ -891,8 +887,9 @@ export default {
         const index = this.versions.findIndex((x) => x.id === this.version.id)
         editedVersions.splice(index, 1, version)
 
-        this.$emit('update:versions', editedVersions)
+        const newEditedVersions = this.$computeVersions(editedVersions)
 
+        this.$emit('update:versions', newEditedVersions)
         this.$emit('update:featuredVersions', featuredVersions)
 
         this.newFiles = []
@@ -901,7 +898,7 @@ export default {
         await this.$router.replace(
           `/${this.project.project_type}/${
             this.project.slug ? this.project.slug : this.project.id
-          }/version/${encodeURIComponent(this.version.version_number)}`
+          }/version/${encodeURI(newEditedVersions[index].displayUrlEnding)}`
         )
       } catch (err) {
         this.$notify({
@@ -921,6 +918,10 @@ export default {
 
       const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`)
 
+      if (this.project.project_type === 'resourcepack') {
+        this.version.loaders = ['minecraft']
+      }
+
       const newVersion = {
         project_id: this.version.project_id,
         file_parts: fileParts,
@@ -958,15 +959,19 @@ export default {
         ).data
 
         const newProject = JSON.parse(JSON.stringify(this.project))
-        newProject.versions = newProject.versions.concat([data])
+        newProject.versions = newProject.versions.concat([data.id])
+
+        const newVersions = this.$computeVersions(this.versions.concat([data]))
 
         await this.$emit('update:project', newProject)
-        await this.$emit('update:versions', this.versions.concat([data]))
+        await this.$emit('update:versions', newVersions)
 
         await this.$router.push(
           `/${this.project.project_type}/${
             this.project.slug ? this.project.slug : this.project.project_id
-          }/version/${encodeURIComponent(this.version.version_number)}`
+          }/version/${encodeURI(
+            newVersions[newVersions.length - 1].displayUrlEnding
+          )}`
         )
       } catch (err) {
         this.$notify({
diff --git a/pages/_type/_id/versions.vue b/pages/_type/_id/versions.vue
index 2b9caaee..05427644 100644
--- a/pages/_type/_id/versions.vue
+++ b/pages/_type/_id/versions.vue
@@ -48,7 +48,7 @@
                   <nuxt-link
                     :to="`/${project.project_type}/${
                       project.slug ? project.slug : project.id
-                    }/version/${encodeURIComponent(version.version_number)}`"
+                    }/version/${encodeURI(version.displayUrlEnding)}`"
                   >
                     {{ version.name }}
                   </nuxt-link>
@@ -78,11 +78,7 @@
                   <p>
                     {{
                       version.loaders
-                        .map((x) =>
-                          x.toLowerCase() === 'modloader'
-                            ? 'ModLoader'
-                            : x.charAt(0).toUpperCase() + x.slice(1)
-                        )
+                        .map((x) => $formatCategory(x))
                         .join(', ') +
                       ' ' +
                       $formatVersion(version.game_versions)
@@ -104,15 +100,7 @@
             </td>
             <td>
               <p>
-                {{
-                  version.loaders
-                    .map((x) =>
-                      x.toLowerCase() === 'modloader'
-                        ? 'ModLoader'
-                        : x.charAt(0).toUpperCase() + x.slice(1)
-                    )
-                    .join(', ')
-                }}
+                {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
               </p>
               <p>{{ $formatVersion(version.game_versions) }}</p>
             </td>
diff --git a/pages/create/project.vue b/pages/create/project.vue
index 9950a6a2..c7278cc7 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -54,16 +54,18 @@
         <label>
           <span>
             <h3>Type<span class="required">*</span></h3>
-            <span class="no-padding">The type of project of your project.</span>
+            <span class="no-padding">The type of project your project is.</span>
           </span>
           <Multiselect
             v-model="projectType"
             placeholder="Select one"
+            label="display"
             :options="projectTypes"
             :searchable="false"
             :close-on-select="true"
             :show-labels="false"
             :allow-empty="false"
+            @input="setCategories(true)"
           />
         </label>
         <label>
@@ -106,32 +108,59 @@
           <multiselect
             id="categories"
             v-model="categories"
-            :options="
-              $tag.categories
-                .filter((x) => x.project_type === projectType.toLowerCase())
-                .map((it) => it.name)
-            "
+            :options="selectableCategories"
             :custom-label="
               (value) => value.charAt(0).toUpperCase() + value.slice(1)
             "
             :loading="$tag.categories.length === 0"
             :multiple="true"
-            :searchable="false"
+            :searchable="true"
             :show-no-results="false"
             :close-on-select="false"
-            :clear-on-select="false"
+            :clear-on-select="true"
             :show-labels="false"
             :max="3"
             :limit="6"
             :hide-selected="true"
             placeholder="Choose categories"
+            @input="setCategories(false)"
+          />
+        </label>
+        <label>
+          <span>
+            <h3>Additional Categories</h3>
+            <span class="no-padding">
+              Select more categories that will help others <br />
+              find your project. These are searchable, but not <br />
+              displayed in search.
+            </span>
+          </span>
+          <multiselect
+            id="additional_categories"
+            v-model="additional_categories"
+            :show-no-results="false"
+            :options="selectableAdditionalCategories"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
+            :loading="$tag.categories.length === 0"
+            :multiple="true"
+            :searchable="true"
+            :close-on-select="false"
+            :clear-on-select="true"
+            :show-labels="false"
+            :max="255"
+            :limit="6"
+            :hide-selected="true"
+            placeholder="Choose additional categories"
+            @input="setCategories(false)"
           />
         </label>
         <label>
           <span>
             <h3>Vanity URL (slug)<span class="required">*</span></h3>
             <span class="slug-description"
-              >https://modrinth.com/{{ projectType.toLowerCase() }}/{{
+              >https://modrinth.com/{{ projectType.id }}/{{
                 slug ? slug : 'your-slug'
               }}
             </span>
@@ -174,7 +203,13 @@
           Reset
         </button>
       </section>
-      <section class="card game-sides">
+      <section
+        v-if="
+          projectType.realId !== 'resourcepack' &&
+          projectType.realId !== 'plugin'
+        "
+        class="card game-sides"
+      >
         <div class="columns">
           <div class="column">
             <h3>Supported environments</h3>
@@ -214,7 +249,7 @@
             for="body"
             title="You can type an extended description of your project here."
           >
-            Body<span class="required">*</span>
+            Description<span class="required">*</span>
           </label>
         </h3>
         <span>
@@ -318,7 +353,7 @@
                 Your version must have a unique version number.
               </li>
               <li v-if="versions[currentVersionIndex].loaders.length < 1">
-                Your version must have the supported mod loaders selected.
+                Your version must have the supported loaders selected.
               </li>
               <li v-if="versions[currentVersionIndex].game_versions.length < 1">
                 Your version must have the supported Minecraft versions
@@ -387,10 +422,10 @@
                 :allow-empty="false"
               />
             </label>
-            <label>
+            <label v-if="projectType.realId !== 'resourcepack'">
               <span>
-                <h3>Mod loaders<span class="required">*</span></h3>
-                <span> Select all mod loaders this version supports. </span>
+                <h3>Loaders<span class="required">*</span></h3>
+                <span> Select all loaders this version supports. </span>
               </span>
               <multiselect
                 v-model="versions[currentVersionIndex].loaders"
@@ -401,19 +436,18 @@
                 }"
                 :options="
                   $tag.loaders
-                    .filter((x) =>
-                      x.supported_project_types.includes(
-                        projectType.toLowerCase()
-                      )
-                    )
+                    .filter((x) => {
+                      if (projectType.realId === 'plugin') {
+                        return $tag.loaderData.allPluginLoaders.includes(x.name)
+                      } else if (projectType.realId === 'mod') {
+                        return $tag.loaderData.modLoaders.includes(x.name)
+                      }
+
+                      return x.supported_project_types.includes(projectType.id)
+                    })
                     .map((it) => it.name)
                 "
-                :custom-label="
-                  (value) =>
-                    value === 'modloader'
-                      ? 'Risugami\'s ModLoader'
-                      : value.charAt(0).toUpperCase() + value.slice(1)
-                "
+                :custom-label="(value) => $formatCategory(value)"
                 :loading="$tag.loaders.length === 0"
                 :multiple="true"
                 :searchable="false"
@@ -423,7 +457,7 @@
                 :show-labels="false"
                 :limit="6"
                 :hide-selected="true"
-                placeholder="Choose mod loaders..."
+                placeholder="Choose loaders..."
               />
             </label>
             <label>
@@ -547,12 +581,9 @@
             <h3>Files<span class="required">*</span></h3>
             <span>
               You may upload multiple files, but this should only be used for
-              cases like sources or Javadocs.
+              cases like sources or Javadocs for mods/plugins.
             </span>
-            <p
-              v-if="projectType.toLowerCase() === 'modpack'"
-              aria-label="Warning"
-            >
+            <p v-if="projectType.id === 'modpack'" aria-label="Warning">
               Modpack support is currently in alpha, and you may encounter
               issues. Our documentation includes instructions on
               <a
@@ -578,9 +609,9 @@
               class="file-input"
               multiple
               :accept="
-                projectType.toLowerCase() === 'modpack'
+                projectType.id === 'modpack'
                   ? '.mrpack,application/x-modrinth-modpack+zip'
-                  : projectType.toLowerCase() === 'mod'
+                  : projectType.id === 'mod'
                   ? '.jar,application/java-archive'
                   : '*'
               "
@@ -661,7 +692,7 @@
             >
               <th>Name</th>
               <th>Version</th>
-              <th>Mod loaders</th>
+              <th>Project loaders</th>
               <th>Minecraft versions</th>
               <th>Release channel</th>
               <th>Actions</th>
@@ -1137,6 +1168,7 @@ export default {
       body: '',
       versions: [],
       categories: [],
+      additional_categories: [],
       issues_url: null,
       source_url: null,
       wiki_url: null,
@@ -1145,8 +1177,41 @@ export default {
       license: null,
       license_url: null,
 
-      projectTypes: ['Mod', 'Modpack'],
-      projectType: 'Mod',
+      selectableCategories: [],
+      selectableAdditionalCategories: [],
+
+      projectTypes: [
+        {
+          display: 'Mod',
+          id: 'mod',
+          realId: 'mod',
+        },
+        {
+          display: 'Plugin',
+          id: 'mod',
+          realId: 'plugin',
+        },
+        {
+          display: 'Mod and plugin',
+          id: 'mod',
+          realId: 'mod+plugin',
+        },
+        {
+          display: 'Modpack',
+          id: 'modpack',
+          realId: 'modpack',
+        },
+        {
+          display: 'Resource pack',
+          id: 'resourcepack',
+          realId: 'resourcepack',
+        },
+      ],
+      projectType: {
+        display: 'Mod',
+        id: 'mod',
+        realId: 'mod',
+      },
 
       sideTypes: ['Required', 'Optional', 'Unsupported'],
       clientSideType: 'Required',
@@ -1171,6 +1236,9 @@ export default {
       savingAsDraft: false,
     }
   },
+  fetch() {
+    this.setCategories()
+  },
   watch: {
     license(newValue, oldValue) {
       if (newValue == null) {
@@ -1199,6 +1267,28 @@ export default {
     })
   },
   methods: {
+    setCategories(reset) {
+      this.selectableCategories = this.$tag.categories
+        .filter(
+          (x) =>
+            x.project_type === this.projectType.id &&
+            !this.additional_categories.includes(x.name)
+        )
+        .map((it) => it.name)
+
+      this.selectableAdditionalCategories = this.$tag.categories
+        .filter(
+          (x) =>
+            x.project_type === this.projectType.id &&
+            !this.categories.includes(x.name)
+        )
+        .map((it) => it.name)
+
+      if (reset) {
+        this.categories = []
+        this.additional_categories = []
+      }
+    },
     checkFields() {
       const reviewConditions = this.body !== '' && this.versions.length > 0
       if (
@@ -1221,6 +1311,7 @@ export default {
       return false
     },
     async createDraft() {
+      this.setValues()
       this.savingAsDraft = true
       if (this.checkFields()) {
         this.draft = true
@@ -1228,11 +1319,21 @@ export default {
       }
     },
     async createProjectForReview() {
+      this.setValues()
       this.savingAsDraft = false
       if (this.checkFields()) {
         await this.createProject()
       }
     },
+    setValues() {
+      if (this.projectType.realId === 'resourcepack') {
+        this.clientSideType = 'required'
+        this.serverSideType = 'optional'
+      } else if (this.projectType.realId === 'plugin') {
+        this.clientSideType = 'unsupported'
+        this.serverSideType = 'required'
+      }
+    },
     async createProject() {
       this.$nuxt.$loading.start()
 
@@ -1256,7 +1357,7 @@ export default {
         'data',
         JSON.stringify({
           title: this.name,
-          project_type: this.projectType.toLowerCase(),
+          project_type: this.projectType.id,
           slug: this.slug,
           description: this.description,
           body: this.body,
@@ -1269,6 +1370,7 @@ export default {
             },
           ],
           categories: this.categories,
+          additional_categories: this.additional_categories,
           issues_url: this.issues_url ? this.issues_url : null,
           source_url: this.source_url ? this.source_url : null,
           wiki_url: this.wiki_url ? this.wiki_url : null,
@@ -1405,6 +1507,9 @@ export default {
 
     saveVersion() {
       const version = this.versions[this.currentVersionIndex]
+      if (this.projectType.realId === 'resourcepack') {
+        version.loaders = ['minecraft']
+      }
       if (
         version.version_number !== '' &&
         version.releaseChannels !== null &&
diff --git a/pages/moderation.vue b/pages/moderation.vue
index a60e3a00..ccb6d8a4 100644
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -89,6 +89,7 @@
             :client-side="project.client_side"
             :server-side="project.server_side"
             :type="project.project_type"
+            :moderation="true"
           >
             <button
               class="iconified-button"
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 75b35c02..615a6afa 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -76,8 +76,8 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 import ThisOrThat from '~/components/ui/ThisOrThat'
 
 const NOTIFICATION_TYPES = {
-  'Team Invites': 'team_invite',
-  'Project Updates': 'project_update',
+  'Team invites': 'team_invite',
+  'Project updates': 'project_update',
 }
 
 export default {
diff --git a/pages/search.vue b/pages/search.vue
index 0d94b19a..e197b0d0 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -34,28 +34,41 @@
             Clear filters
           </button>
           <section aria-label="Category filters">
-            <h3
-              v-if="
-                $tag.categories.filter((x) => x.project_type === projectType)
-                  .length > 0
-              "
-              class="sidebar-menu-heading"
-            >
-              Categories
-            </h3>
-            <SearchFilter
-              v-for="category in $tag.categories.filter(
-                (x) => x.project_type === projectType
-              )"
-              :key="category.name"
-              :active-filters="facets"
-              :display-name="category.name"
-              :facet-name="`categories:${category.name}`"
-              :icon="category.icon"
-              @toggle="toggleFacet"
-            />
+            <div v-for="(categories, header) in categoriesMap" :key="header">
+              <h3
+                v-if="
+                  categories.filter((x) => x.project_type === projectType)
+                    .length > 0
+                "
+                class="sidebar-menu-heading"
+              >
+                {{ $formatCategoryHeader(header) }}
+              </h3>
+
+              <SearchFilter
+                v-for="category in categories
+                  .filter((x) => x.project_type === projectType)
+                  .sort((a, b) => {
+                    if (header === 'resolutions') {
+                      return (
+                        a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
+                      )
+                    }
+                    return 0
+                  })"
+                :key="category.name"
+                :active-filters="facets"
+                :display-name="$formatCategory(category.name)"
+                :facet-name="`categories:${category.name}`"
+                :icon="header === 'resolutions' ? null : category.icon"
+                @toggle="toggleFacet"
+              />
+            </div>
           </section>
-          <section aria-label="Loader filters">
+          <section
+            v-if="projectType !== 'resourcepack'"
+            aria-label="Loader filters"
+          >
             <h3
               v-if="
                 $tag.loaders.filter((x) =>
@@ -69,6 +82,8 @@
             <SearchFilter
               v-for="loader in $tag.loaders.filter((x) => {
                 if (
+                  projectType === 'mod' &&
+                  !isPlugins &&
                   !showAllLoaders &&
                   x.name !== 'forge' &&
                   x.name !== 'fabric' &&
@@ -76,18 +91,25 @@
                 ) {
                   return false
                 }
-                return x.supported_project_types.includes(projectType)
+
+                if (projectType === 'mod' && showAllLoaders) {
+                  return $tag.loaderData.modLoaders.includes(x.name)
+                }
+
+                return isPlugins
+                  ? $tag.loaderData.pluginLoaders.includes(x.name)
+                  : x.supported_project_types.includes(projectType)
               })"
               :key="loader.name"
+              ref="loaderFilters"
               :active-filters="orFacets"
-              :display-name="
-                loader.name === 'modloader' ? 'ModLoader' : loader.name
-              "
+              :display-name="$formatCategory(loader.name)"
               :facet-name="`categories:${loader.name}`"
               :icon="loader.icon"
               @toggle="toggleOrFacet"
             />
             <Checkbox
+              v-if="projectType === 'mod' && !isPlugins"
               v-model="showAllLoaders"
               :label="showAllLoaders ? 'Less' : 'More'"
               description="Show all loaders"
@@ -96,7 +118,34 @@
               :collapsing-toggle-style="true"
             />
           </section>
-          <section aria-label="Environment filters">
+          <section v-if="isPlugins" aria-label="Platform loader filters">
+            <h3
+              v-if="
+                $tag.loaders.filter((x) =>
+                  x.supported_project_types.includes(projectType)
+                ).length > 0
+              "
+              class="sidebar-menu-heading"
+            >
+              Proxies
+            </h3>
+            <SearchFilter
+              v-for="loader in $tag.loaders.filter((x) =>
+                $tag.loaderData.pluginPlatformLoaders.includes(x.name)
+              )"
+              :key="loader.name"
+              ref="platformFilters"
+              :active-filters="orFacets"
+              :display-name="$formatCategory(loader.name)"
+              :facet-name="`categories:${loader.name}`"
+              :icon="loader.icon"
+              @toggle="toggleOrFacet"
+            />
+          </section>
+          <section
+            v-if="projectType !== 'resourcepack' && !isPlugins"
+            aria-label="Environment filters"
+          >
             <h3 class="sidebar-menu-heading">Environments</h3>
             <SearchFilter
               :active-filters="selectedEnvironments"
@@ -267,7 +316,7 @@
             :icon-url="result.icon_url"
             :client-side="result.client_side"
             :server-side="result.server_side"
-            :categories="result.categories"
+            :categories="result.display_categories"
           />
           <div v-if="results && results.length === 0" class="no-results">
             <p>No results found for your query!</p>
@@ -336,6 +385,7 @@ export default {
       currentPage: 1,
 
       projectType: 'mod',
+      isPlugins: false,
 
       sortTypes: [
         { display: 'Relevance', name: 'relevance' },
@@ -405,8 +455,39 @@ export default {
       this.$route.name.length - 1
     )
 
+    if (this.projectType === 'plugin') {
+      this.projectType = 'mod'
+      this.isPlugins = true
+    }
+
     await this.onSearchChange(this.currentPage)
   },
+  computed: {
+    categoriesMap() {
+      const categories = {}
+
+      for (const category of this.$tag.categories) {
+        if (categories[category.header]) {
+          categories[category.header].push(category)
+        } else {
+          categories[category.header] = [category]
+        }
+      }
+
+      const newVals = Object.keys(categories)
+        .sort()
+        .reduce((obj, key) => {
+          obj[key] = categories[key]
+          return obj
+        }, {})
+
+      for (const header of Object.keys(categories)) {
+        newVals[header].sort((a, b) => a.name.localeCompare(b.name))
+      }
+
+      return newVals
+    },
+  },
   watch: {
     '$route.path': {
       async handler() {
@@ -415,12 +496,21 @@ export default {
           this.$route.name.length - 1
         )
 
+        if (this.projectType === 'plugin') {
+          this.projectType = 'mod'
+          this.isPlugins = true
+        } else {
+          this.isPlugins = false
+        }
+
         this.results = null
         this.pages = []
         this.currentPage = 1
         this.query = ''
         this.maxResults = 20
         this.sortType = { display: 'Relevance', name: 'relevance' }
+        this.showAllLoaders = false
+        this.sidebarMenuOpen = false
 
         await this.clearFilters()
       },
@@ -463,6 +553,18 @@ export default {
       if (index !== -1) {
         this.orFacets.splice(index, 1)
       } else {
+        if (elementName === 'categories:purpur') {
+          this.orFacets.push('categories:paper')
+          this.orFacets.push('categories:spigot')
+          this.orFacets.push('categories:bukkit')
+        } else if (elementName === 'categories:paper') {
+          this.orFacets.push('categories:spigot')
+          this.orFacets.push('categories:bukkit')
+        } else if (elementName === 'categories:spigot') {
+          this.orFacets.push('categories:bukkit')
+        } else if (elementName === 'categories:waterfall') {
+          this.orFacets.push('categories:bungeecord')
+        }
         this.orFacets.push(elementName)
       }
 
@@ -498,6 +600,7 @@ export default {
 
         if (
           this.facets.length > 0 ||
+          this.orFacets.length > 0 ||
           this.selectedVersions.length > 0 ||
           this.selectedEnvironments.length > 0 ||
           this.projectType
@@ -507,8 +610,19 @@ export default {
             formattedFacets.push([facet])
           }
 
+          // loaders specifier
           if (this.orFacets.length > 0) {
             formattedFacets.push(this.orFacets)
+          } else if (this.isPlugins) {
+            formattedFacets.push(
+              this.$tag.loaderData.allPluginLoaders.map(
+                (x) => `categories:${x}`
+              )
+            )
+          } else if (this.projectType === 'mod') {
+            formattedFacets.push(
+              this.$tag.loaderData.modLoaders.map((x) => `categories:${x}`)
+            )
           }
 
           if (this.selectedVersions.length > 0) {
diff --git a/pages/search/modpacks.vue b/pages/search/modpacks.vue
index 64419020..40b151ad 100644
--- a/pages/search/modpacks.vue
+++ b/pages/search/modpacks.vue
@@ -5,9 +5,6 @@
 <script>
 export default {
   name: 'Modpacks',
-  asyncData(ctx) {
-    ctx.params.projectType = 'modpack'
-  },
   head: {
     title: 'Modpacks - Modrinth',
     meta: [
diff --git a/pages/search/mods.vue b/pages/search/mods.vue
index 72676d91..6c34f78f 100644
--- a/pages/search/mods.vue
+++ b/pages/search/mods.vue
@@ -5,9 +5,6 @@
 <script>
 export default {
   name: 'Mods',
-  asyncData(ctx) {
-    ctx.params.projectType = 'mod'
-  },
   head: {
     title: 'Mods - Modrinth',
     meta: [
diff --git a/pages/search/plugins.vue b/pages/search/plugins.vue
new file mode 100644
index 00000000..b9fe2787
--- /dev/null
+++ b/pages/search/plugins.vue
@@ -0,0 +1,31 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'Plugins',
+  head: {
+    title: 'Plugins - Modrinth',
+    meta: [
+      {
+        hid: 'apple-mobile-web-app-title',
+        name: 'apple-mobile-web-app-title',
+        content: 'Plugins - Modrinth',
+      },
+      {
+        hid: 'og:title',
+        name: 'og:title',
+        content: 'Plugins - Modrinth',
+      },
+      {
+        hid: 'og:url',
+        name: 'og:url',
+        content: `https://modrinth.com/plugins`,
+      },
+    ],
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/search/resourcepacks.vue b/pages/search/resourcepacks.vue
new file mode 100644
index 00000000..519d65b1
--- /dev/null
+++ b/pages/search/resourcepacks.vue
@@ -0,0 +1,31 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'ResourcePacks',
+  head: {
+    title: 'Resource packs - Modrinth',
+    meta: [
+      {
+        hid: 'apple-mobile-web-app-title',
+        name: 'apple-mobile-web-app-title',
+        content: 'Resource packs - Modrinth',
+      },
+      {
+        hid: 'og:title',
+        name: 'og:title',
+        content: 'Resource packs - Modrinth',
+      },
+      {
+        hid: 'og:url',
+        name: 'og:url',
+        content: `https://modrinth.com/resourcepacks`,
+      },
+    ],
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/settings/privacy.vue b/pages/settings/privacy.vue
index 717a525a..08076092 100644
--- a/pages/settings/privacy.vue
+++ b/pages/settings/privacy.vue
@@ -204,6 +204,9 @@ export default {
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
+
+    flex-wrap: wrap;
+    justify-content: flex-end;
   }
 }
 </style>
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index fa994a77..e712bff7 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -90,7 +90,8 @@
         <ProjectCard
           v-for="project in selectedProjectType !== 'all'
             ? projects.filter(
-                (x) => x.project_type === selectedProjectType.slice(0, -1)
+                (x) =>
+                  x.project_type === convertProjectType(selectedProjectType)
               )
             : projects"
           :id="project.slug || project.id"
@@ -246,13 +247,24 @@ export default {
       const obj = { all: true }
 
       for (const project of this.projects) {
-        obj[project.project_type + 's'] = true
+        if (project.project_type === 'resourcepack') {
+          obj['Resource Packs'] = true
+        } else {
+          obj[project.project_type + 's'] = true
+        }
       }
 
       return Object.keys(obj)
     },
   },
   methods: {
+    convertProjectType(name) {
+      if (name === 'Resource Packs') {
+        return 'resourcepack'
+      } else {
+        return name.slice(0, -1)
+      }
+    },
     sumDownloads() {
       let sum = 0
 
diff --git a/plugins/shorthands.js b/plugins/shorthands.js
index 9806bf45..cc58e2c1 100644
--- a/plugins/shorthands.js
+++ b/plugins/shorthands.js
@@ -1,7 +1,7 @@
-export default ({ store }, inject) => {
-  inject('user', store.state.user)
-  inject('tag', store.state.tag)
-  inject('auth', store.state.auth)
+export default (ctx, inject) => {
+  inject('user', ctx.store.state.user)
+  inject('tag', ctx.store.state.tag)
+  inject('auth', ctx.store.state.auth)
   inject('defaultHeaders', () => {
     const obj = { headers: {} }
 
@@ -9,100 +9,143 @@ export default ({ store }, inject) => {
       obj.headers['x-ratelimit-key'] = process.env.RATE_LIMIT_IGNORE_KEY || ''
     }
 
-    if (store.state.auth.user) {
-      obj.headers.Authorization = store.state.auth.token
+    if (ctx.store.state.auth.user) {
+      obj.headers.Authorization = ctx.store.state.auth.token
     }
 
     return obj
   })
   inject('formatNumber', formatNumber)
-  inject('formatVersion', (versionArray) => {
-    const allVersions = store.state.tag.gameVersions.slice().reverse()
-    const allReleases = allVersions.filter((x) => x.version_type === 'release')
+  inject('formatVersion', (versionsArray) =>
+    formatVersions(versionsArray, ctx.store)
+  )
+  inject('formatBytes', formatBytes)
+  inject('formatProjectType', formatProjectType)
+  inject('formatCategory', formatCategory)
+  inject('formatCategoryHeader', formatCategoryHeader)
+  inject('computeVersions', (versions) => {
+    const versionsMap = {}
 
-    const intervals = []
-    let currentInterval = 0
-
-    for (let i = 0; i < versionArray.length; i++) {
-      const index = allVersions.findIndex((x) => x.version === versionArray[i])
-      const releaseIndex = allReleases.findIndex(
-        (x) => x.version === versionArray[i]
-      )
-
-      if (i === 0) {
-        intervals.push([[versionArray[i], index, releaseIndex]])
+    for (const version of versions.reverse()) {
+      if (versionsMap[version.version_number]) {
+        versionsMap[version.version_number].push(version)
       } else {
-        const intervalBase = intervals[currentInterval]
-
-        if (
-          (index - intervalBase[intervalBase.length - 1][1] === 1 ||
-            releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
-          (allVersions[intervalBase[0][1]].version_type === 'release' ||
-            allVersions[index].version_type !== 'release')
-        ) {
-          intervalBase[1] = [versionArray[i], index, releaseIndex]
-        } else {
-          currentInterval += 1
-          intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
-        }
+        versionsMap[version.version_number] = [version]
       }
     }
 
-    const newIntervals = []
-    for (let i = 0; i < intervals.length; i++) {
-      const interval = intervals[i]
+    const returnVersions = []
 
-      if (
-        interval.length === 2 &&
-        interval[0][2] !== -1 &&
-        interval[1][2] === -1
-      ) {
-        let lastSnapshot = null
-        for (let j = interval[1][1]; j > interval[0][1]; j--) {
-          if (allVersions[j].version_type === 'release') {
-            newIntervals.push([
-              interval[0],
-              [
-                allVersions[j].version,
-                j,
-                allReleases.findIndex(
-                  (x) => x.version === allVersions[j].version
-                ),
-              ],
-            ])
+    for (const id in versionsMap) {
+      const versions = versionsMap[id]
 
-            if (lastSnapshot !== null && lastSnapshot !== j + 1) {
-              newIntervals.push([
-                [allVersions[lastSnapshot].version, lastSnapshot, -1],
-                interval[1],
-              ])
+      if (versions.length === 1) {
+        versions[0].displayUrlEnding = versions[0].version_number
+
+        returnVersions.push(versions[0])
+      } else {
+        const reservedNames = {}
+
+        const seenLoaders = {}
+        const duplicateLoaderIndexes = []
+
+        for (let i = 0; i < versions.length; i++) {
+          const version = versions[i]
+          const value = version.loaders.join('+')
+
+          if (seenLoaders[value]) {
+            duplicateLoaderIndexes.push(i)
+          } else {
+            if (i !== 0) {
+              version.displayUrlEnding = `${version.version_number}-${value}`
             } else {
-              newIntervals.push([interval[1]])
+              version.displayUrlEnding = version.version_number
             }
 
-            break
-          } else {
-            lastSnapshot = j
+            reservedNames[version.displayUrlEnding] = true
+
+            version.displayName = version.loaders
+              .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+              .join(', ')
+
+            returnVersions.push(version)
+
+            seenLoaders[value] = true
           }
         }
-      } else {
-        newIntervals.push(interval)
+
+        const seenGameVersions = {}
+        const duplicateGameVersionIndexes = []
+
+        for (const i of duplicateLoaderIndexes) {
+          const version = versions[i]
+          const value = version.game_versions.join('+')
+
+          if (seenGameVersions[value]) {
+            duplicateGameVersionIndexes.push(i)
+          } else {
+            if (i !== 0) {
+              let setDisplayUrl = false
+
+              for (const gameVersion in version.game_versions) {
+                const displayUrlEnding = `${version.version_number}-${gameVersion}`
+
+                if (!reservedNames[version.version_number]) {
+                  version.displayUrlEnding = displayUrlEnding
+                  reservedNames[displayUrlEnding] = true
+                  setDisplayUrl = true
+
+                  break
+                }
+              }
+
+              if (!setDisplayUrl) {
+                version.displayUrlEnding = `${version.version_number}-${value}`
+              }
+            } else if (!reservedNames[version.version_number]) {
+              version.displayUrlEnding = version.version_number
+              reservedNames[version.version_number] = true
+            }
+
+            version.displayName = formatVersions(
+              version.game_versions,
+              ctx.store
+            )
+
+            returnVersions.push(version)
+
+            seenGameVersions[value] = true
+          }
+        }
+
+        for (const i in duplicateGameVersionIndexes) {
+          const version = versions[i]
+
+          version.displayUrlEnding = version.id
+          version.displayName = version.id
+
+          returnVersions.push(version)
+        }
       }
     }
 
-    const output = []
-
-    for (const interval of newIntervals) {
-      if (interval.length === 2) {
-        output.push(`${interval[0][0]}—${interval[1][0]}`)
-      } else {
-        output.push(interval[0][0])
-      }
-    }
-
-    return output.join(', ')
+    return returnVersions.reverse()
+  })
+  inject('getProjectTypeForDisplay', (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 and plugin' : isPlugin ? 'plugin' : 'mod'
+    } else {
+      return formatProjectType(type)
+    }
   })
-  inject('formatBytes', formatBytes)
 }
 
 export const formatNumber = (number) => {
@@ -127,3 +170,126 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
+
+export const formatProjectType = (name) => {
+  if (name === 'resourcepack') {
+    return 'resource pack'
+  }
+  return name.charAt(0).toUpperCase() + name.slice(1)
+}
+
+export const formatCategory = (name) => {
+  if (name === 'modloader') {
+    return "Risugami's ModLoader"
+  } else if (name === 'bungeecord') {
+    return 'BungeeCord'
+  } else if (name === 'liteloader') {
+    return 'LiteLoader'
+  } else if (name === 'game-mechanics') {
+    return 'Game Mechanics'
+  } else if (name === 'worldgen') {
+    return 'World Generation'
+  } else if (name === 'core-shaders') {
+    return 'Core Shaders'
+  } else if (name === 'gui') {
+    return 'GUI'
+  } else if (name === '8x-') {
+    return '8x or lower'
+  } else if (name === '512x+') {
+    return '512x or higher'
+  } else if (name === 'kitchen-sink') {
+    return 'Kitchen Sink'
+  }
+  return name.charAt(0).toUpperCase() + name.slice(1)
+}
+
+export const formatCategoryHeader = (name) => {
+  return name.charAt(0).toUpperCase() + name.slice(1)
+}
+
+export const formatVersions = (versionArray, store) => {
+  const allVersions = store.state.tag.gameVersions.slice().reverse()
+  const allReleases = allVersions.filter((x) => x.version_type === 'release')
+
+  const intervals = []
+  let currentInterval = 0
+
+  for (let i = 0; i < versionArray.length; i++) {
+    const index = allVersions.findIndex((x) => x.version === versionArray[i])
+    const releaseIndex = allReleases.findIndex(
+      (x) => x.version === versionArray[i]
+    )
+
+    if (i === 0) {
+      intervals.push([[versionArray[i], index, releaseIndex]])
+    } else {
+      const intervalBase = intervals[currentInterval]
+
+      if (
+        (index - intervalBase[intervalBase.length - 1][1] === 1 ||
+          releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
+        (allVersions[intervalBase[0][1]].version_type === 'release' ||
+          allVersions[index].version_type !== 'release')
+      ) {
+        intervalBase[1] = [versionArray[i], index, releaseIndex]
+      } else {
+        currentInterval += 1
+        intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
+      }
+    }
+  }
+
+  const newIntervals = []
+  for (let i = 0; i < intervals.length; i++) {
+    const interval = intervals[i]
+
+    if (
+      interval.length === 2 &&
+      interval[0][2] !== -1 &&
+      interval[1][2] === -1
+    ) {
+      let lastSnapshot = null
+      for (let j = interval[1][1]; j > interval[0][1]; j--) {
+        if (allVersions[j].version_type === 'release') {
+          newIntervals.push([
+            interval[0],
+            [
+              allVersions[j].version,
+              j,
+              allReleases.findIndex(
+                (x) => x.version === allVersions[j].version
+              ),
+            ],
+          ])
+
+          if (lastSnapshot !== null && lastSnapshot !== j + 1) {
+            newIntervals.push([
+              [allVersions[lastSnapshot].version, lastSnapshot, -1],
+              interval[1],
+            ])
+          } else {
+            newIntervals.push([interval[1]])
+          }
+
+          break
+        } else {
+          lastSnapshot = j
+        }
+      }
+    } else {
+      newIntervals.push(interval)
+    }
+  }
+
+  const output = []
+
+  for (const interval of newIntervals) {
+    if (interval.length === 2) {
+      output.push(`${interval[0][0]}—${interval[1][0]}`)
+    } else {
+      output.push(interval[0][0])
+    }
+  }
+
+  return output.join(', ')
+}
diff --git a/plugins/xss.js b/plugins/xss.js
index 014e14dd..cdc801ea 100644
--- a/plugins/xss.js
+++ b/plugins/xss.js
@@ -1,5 +1,8 @@
 import xss from 'xss'
 
+/**
+ * @type {import('xss').IFilterXSSOptions}
+ */
 const options = {
   whiteList: {
     ...xss.whiteList,
@@ -12,6 +15,12 @@ const options = {
     h6: ['id'],
     input: ['checked', 'disabled', 'type'],
     iframe: ['width', 'height', 'allowfullscreen', 'frameborder'],
+    img: [...xss.whiteList.img, 'style'],
+  },
+  css: {
+    whiteList: {
+      'image-rendering': /^pixelated$/,
+    },
   },
   onIgnoreTagAttr: (tag, name, value) => {
     // Allow iframes from acceptable sources
diff --git a/static/favicon-dark.ico b/static/favicon-dark.ico
deleted file mode 100644
index 9d2e1b697795f104d663bfaa90124db1cfa31e82..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15086
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
Ms9r|0>Z88@1_z@Ga{vGU

diff --git a/static/favicon.ico b/static/favicon.ico
index f511f512a7eea2130e6533ca065207322f9ffdca..319117b87694cb6ddbe2a3d5e9d59d1b89dc87c3 100644
GIT binary patch
literal 15086
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
O!ff3Nocn+q2=QM`>Y@e!

literal 15086
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
Mw_ZlF>Z88@25|HT82|tP

diff --git a/store/tag.js b/store/tag.js
index 7fb3220e..9ae5d100 100644
--- a/store/tag.js
+++ b/store/tag.js
@@ -4,6 +4,21 @@ export const state = () => ({
   gameVersions: [],
   licenses: [],
   donationPlatforms: [],
+  loaderData: {
+    pluginLoaders: ['bukkit', 'spigot', 'paper', 'purpur', 'sponge'],
+    pluginPlatformLoaders: ['bungeecord', 'waterfall', 'velocity'],
+    allPluginLoaders: [
+      'bukkit',
+      'spigot',
+      'paper',
+      'purpur',
+      'sponge',
+      'bungeecord',
+      'waterfall',
+      'velocity',
+    ],
+    modLoaders: ['forge', 'fabric', 'quilt', 'liteloader', 'modloader', 'rift'],
+  },
 })
 
 export const mutations = {