From 8faddb5017c18bd8584805907c1551840b94fcb9 Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Wed, 29 Nov 2023 17:34:56 -0700
Subject: [PATCH] More knossos fixes (#163)

* More knossos fixes

* rev navrow changes

* actually fix build

* Fix image border radius

* Remove non-shared utilities

* remove another func
---
 docs/components/categories.md         |  34 +---
 docs/components/checkbox.md           |   1 +
 docs/components/modal.md              |  23 ++-
 docs/components/project-card.md       | 231 ++------------------------
 lib/assets/styles/classes.scss        |  28 ++--
 lib/assets/styles/defaults.scss       |  12 ++
 lib/assets/styles/variables.scss      |  10 +-
 lib/components/base/Chips.vue         |  88 +++++-----
 lib/components/base/DropArea.vue      |   2 +-
 lib/components/base/FileInput.vue     | 119 +++++++------
 lib/components/base/PageBar.vue       |   2 -
 lib/components/base/ProjectCard.vue   |   3 +-
 lib/components/base/Toggle.vue        |  37 ++---
 lib/components/brand/AnimatedLogo.vue |   4 +
 lib/components/index.js               |   1 -
 lib/components/modal/ReportModal.vue  | 123 --------------
 lib/components/nav/NavRow.vue         | 140 +++++++---------
 lib/components/search/Categories.vue  |   4 +-
 lib/helpers/projects.js               |  30 ----
 lib/helpers/utils.js                  |  95 -----------
 package.json                          |   2 +-
 21 files changed, 255 insertions(+), 734 deletions(-)
 delete mode 100644 lib/components/modal/ReportModal.vue

diff --git a/docs/components/categories.md b/docs/components/categories.md
index 34e793066..d9e054e8e 100644
--- a/docs/components/categories.md
+++ b/docs/components/categories.md
@@ -2,22 +2,7 @@
 
 <DemoContainer>
  <Categories
-    :categories="[{
-        name: 'magic',
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+    :categories="['magic', 'utlity', 'fabric', 'forge']"
     type="mod"
     class="tags"
   />
@@ -25,22 +10,7 @@
 
 ```vue
 <Categories
-  :categories="[{
-      name: 'magic',
-      icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
-    },
-    {
-      icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-      name: 'utility',
-    },
-    {
-      icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-      name: 'fabric',
-    },
-    {
-      icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-      name: 'forge'
-    }]"
+  :categories="['magic', 'utlity', 'fabric', 'forge']"
   type="mod"
   class="tags"
 />
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index e81f1e265..ec3784bdc 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -8,6 +8,7 @@ const value = ref(false)
 
 <DemoContainer>
 <Checkbox v-model="value">Test</Checkbox>
+Value: {{ value }}
 </DemoContainer>
 
 ```vue
diff --git a/docs/components/modal.md b/docs/components/modal.md
index bd215fb9a..06369d291 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -2,14 +2,7 @@
 :::raw
 
 <DemoContainer>
-  <Button :action="() => this.$refs.reportModal.show()">Show Report Modal</Button>
   <Button :action="() => this.$refs.confirmModal.show()">Show Confirm Modal</Button>
-  <ReportModal
-  ref="reportModal"
-  itemType="project"
-  :reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
-  >
-  </ReportModal>
   <ConfirmModal
     ref="confirmModal"
     title="Are you sure you want to delete this version?"
@@ -23,10 +16,14 @@
 :::
 
 ```vue
-  <Button :action="() => this.$refs.reportModal.modal.show()">Show Modal</Button>
-  <ReportModal
-  ref="reportModal"
-  itemType="project"
-  :reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
-  />
+<Button :action="() => this.$refs.confirmModal.show()">Show Confirm Modal</Button>
+<ConfirmModal
+  ref="confirmModal"
+  title="Are you sure you want to delete this version?"
+  description="This will remove this version forever (like really forever)."
+  :has-to-type="true"
+  proceed-label="Delete"
+  confirmationText="Hello"
+>
+</ConfirmModal>
 ```
diff --git a/docs/components/project-card.md b/docs/components/project-card.md
index f3ce61e7e..b0bc49dfd 100644
--- a/docs/components/project-card.md
+++ b/docs/components/project-card.md
@@ -13,22 +13,7 @@
       follows="20"
       createdAt="2020-12-27T19:00:00.000Z"
       updatedAt="2021-01-01T19:00:00.000Z"
-      :categories="[{
-        name: 'magic',
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['magic', 'utility', 'fabric', 'forge']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="required"
@@ -48,22 +33,7 @@
       follows="177"
       createdAt="2022-09-02T19:00:00.000Z"
       updatedAt="2023-02-18T19:00:00.000Z"
-      :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
-        name: 'management'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['management', 'utility', 'fabric', 'forge']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="unsupported"
@@ -83,26 +53,7 @@
       follows="153"
       createdAt="2022-06-19T19:00:00.000Z"
       updatedAt="2023-03-03T19:00:00.000Z"
-      :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
-        name: 'adventure'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
-        name: 'technology'
-      },
-      {
-        icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
-        name: 'worldgen'
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="required"
@@ -126,22 +77,7 @@
       follows="20"
       createdAt="2020-12-27T19:00:00.000Z"
       updatedAt="2021-01-01T19:00:00.000Z"
-      :categories="[{
-        name: 'magic',
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="required"
@@ -161,22 +97,7 @@
       follows="177"
       createdAt="2022-09-02T19:00:00.000Z"
       updatedAt="2023-02-18T19:00:00.000Z"
-      :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
-        name: 'management'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="unsupported"
@@ -196,26 +117,7 @@
       follows="153"
       createdAt="2022-06-19T19:00:00.000Z"
       updatedAt="2023-03-03T19:00:00.000Z"
-      :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
-        name: 'adventure'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
-        name: 'technology'
-      },
-      {
-        icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
-        name: 'worldgen'
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="required"
@@ -228,7 +130,7 @@
 
 <DemoContainer class="standard-body" style="background-color: var(--color-bg)">
   <div class="project-list display-mode--gallery">
-        <ProjectCard
+    <ProjectCard
       id="spirit"
       type="mod"
       name="Spirit"
@@ -239,22 +141,7 @@
       follows="20"
       createdAt="2020-12-27T19:00:00.000Z"
       updatedAt="2021-01-01T19:00:00.000Z"
-      :categories="[{
-        name: 'magic',
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="required"
@@ -274,22 +161,7 @@
       follows="177"
       createdAt="2022-09-02T19:00:00.000Z"
       updatedAt="2023-02-18T19:00:00.000Z"
-      :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
-        name: 'management'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="unsupported"
@@ -309,26 +181,7 @@
       follows="153"
       createdAt="2022-06-19T19:00:00.000Z"
       updatedAt="2023-03-03T19:00:00.000Z"
-      :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
-        name: 'adventure'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
-        name: 'technology'
-      },
-      {
-        icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
-        name: 'worldgen'
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+      :categories="['adventure']"
       projectTypeDisplay="mod"
       projectTypeUrl="/mod"
       serverSide="required"
@@ -352,30 +205,14 @@
   follows="20"
   createdAt="2020-12-27T19:00:00.000Z"
   updatedAt="2021-01-01T19:00:00.000Z"
-  :categories="[{
-        name: 'magic',
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+  :categories="['magic', 'utility', 'fabric', 'forge']"
   projectTypeDisplay="mod"
   projectTypeUrl="/mod"
   serverSide="required"
   clientSide="required"
   :showUpdatedDate="false"
   color="1716041"
->
-</ProjectCard>
+/>
 <ProjectCard
   id="craftify"
   type="mod"
@@ -388,30 +225,14 @@
   follows="177"
   createdAt="2022-09-02T19:00:00.000Z"
   updatedAt="2023-02-18T19:00:00.000Z"
-  :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
-        name: 'management'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
-        name: 'utility',
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+  :categories="['management', 'utility', 'fabric', 'forge']"
   projectTypeDisplay="mod"
   projectTypeUrl="/mod"
   serverSide="unsupported"
   clientSide="required"
   :showUpdatedDate="true"
   color="3460212"
->
-</ProjectCard>
+/>
 <ProjectCard
   id="ad-astra"
   type="mod"
@@ -424,32 +245,12 @@
   follows="153"
   createdAt="2022-06-19T19:00:00.000Z"
   updatedAt="2023-03-03T19:00:00.000Z"
-  :categories="[{
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
-        name: 'adventure'
-      },
-      {
-        icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
-        name: 'technology'
-      },
-      {
-        icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
-        name: 'worldgen'
-      },
-      {
-        icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
-        name: 'fabric',
-      },
-      {
-        icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n  <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n  <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
-        name: 'forge'
-      }]"
+  :categories="['adventure']"
   projectTypeDisplay="mod"
   projectTypeUrl="/mod"
   serverSide="required"
   clientSide="required"
   :showUpdatedDate="false"
   color="#FFFFFF"
->
-</ProjectCard>
+/>
 ```
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index c9c335db8..44f792fee 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -625,18 +625,22 @@ a,
     }
   }
 
-  // TODO: Add back later
-  //&.warning {
-  //  border-left: 0.5rem solid var(--color-warning-banner-side);
-  //  background-color: var(--color-warning-banner-bg);
-  //  color: var(--color-warning-banner-text);
-  //}
-  //
-  //&.information {
-  //  border-left: 0.5rem solid var(--color-info-banner-side);
-  //  background-color: var(--color-info-banner-bg);
-  //  color: var(--color-info-banner-text);
-  //}
+  &.recessed {
+    background-color: var(--color-bg);
+    box-shadow: none;
+  }
+
+  &.warning {
+    border-left: 0.5rem solid var(--color-red);
+    background-color: var(--color-red-bg);
+    color: var(--color-base);
+  }
+
+  &.information {
+    border-left: 0.5rem solid var(--color-blue);
+    background-color: var(--color-blue-bg);
+    color: var(--color-base);
+  }
 }
 
 .card {
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
index 609f6c906..397891457 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -43,6 +43,18 @@ a {
   text-decoration: none;
 }
 
+button,
+input[type='button'] {
+  cursor: pointer;
+  border: none;
+  outline: 2px solid transparent;
+
+  &:disabled,
+  &[disabled] {
+    cursor: not-allowed;
+  }
+}
+
 input[type='text'],
 input[type='url'],
 input[type='number'],
diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss
index 805e3c832..ef052684e 100644
--- a/lib/assets/styles/variables.scss
+++ b/lib/assets/styles/variables.scss
@@ -21,7 +21,7 @@ html {
   --gap-lg: 1rem;
   --gap-xl: 1.25rem;
 
-  --radius-xs: var(--round-univ);
+  --radius-xs: var(--round-little);
   --radius-sm: var(--round-univ);
   --radius-md: var(--round-univ);
   --radius-lg: var(--round-univ);
@@ -34,6 +34,7 @@ html {
   --color-bg: #fafafa;
   --color-raised-bg: #ffffff;
   --color-super-raised-bg: #e9e9e9;
+  --color-alt-bg: #f2f4f7;
   --color-button-bg: #f0f1f2;
 
   --color-divider: rgba(78, 67, 121, 0.2);
@@ -57,6 +58,9 @@ html {
   --color-purple: #8e32f3;
   --color-gray: #595b61;
 
+  --color-red-bg: rgba(203, 34, 69, 0.3);
+  --color-blue-bg: rgba(31, 104, 192, 0.3);
+
   --color-brand: var(--color-green);
   --color-brand-highlight: rgba(0, 175, 92, 0.25);
   --color-brand-shadow: rgba(0, 175, 92, 0.7);
@@ -82,6 +86,7 @@ html {
   --color-bg: #16181c;
   --color-raised-bg: #24262b;
   --color-super-raised-bg: #40434a;
+  --color-alt-bg: #202228;
   --color-button-bg: rgb(51, 54, 61);
 
   --color-divider: rgba(176, 169, 207, 0.2);
@@ -105,6 +110,9 @@ html {
   --color-purple: #c78aff;
   --color-gray: #9fa4b3;
 
+  --color-red-bg: rgba(255, 73, 110, 0.3);
+  --color-blue-bg: rgba(79, 156, 255, 0.3);
+
   --color-brand: var(--color-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
   --color-brand-shadow: rgba(27, 217, 106, 0.7);
diff --git a/lib/components/base/Chips.vue b/lib/components/base/Chips.vue
index d3759ea52..0bc16da5c 100644
--- a/lib/components/base/Chips.vue
+++ b/lib/components/base/Chips.vue
@@ -14,59 +14,53 @@
 </template>
 <script setup>
 import { CheckIcon, Button } from '@'
-</script>
-<script>
-import { defineComponent } from 'vue'
+import { computed } from 'vue'
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      required: true,
-      type: String,
-    },
-    items: {
-      required: true,
-      type: Array,
-    },
-    neverEmpty: {
-      default: true,
-      type: Boolean,
-    },
-    formatLabel: {
-      default: (x) => x,
-      type: Function,
-    },
-    capitalize: {
-      type: Boolean,
-      default: true,
-    },
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: String,
   },
-  emits: ['update:modelValue'],
-  computed: {
-    selected: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
+  items: {
+    required: true,
+    type: Array,
   },
-  created() {
-    if (this.items.length > 0 && this.neverEmpty) {
-      this.selected = this.items[0]
-    }
+  neverEmpty: {
+    default: true,
+    type: Boolean,
   },
-  methods: {
-    toggleItem(item) {
-      if (this.selected === item && !this.neverEmpty) {
-        this.selected = null
-      } else {
-        this.selected = item
-      }
-    },
+  formatLabel: {
+    default: (x) => x,
+    type: Function,
+  },
+  capitalize: {
+    type: Boolean,
+    default: true,
   },
 })
+
+const emit = defineEmits(['update:modelValue'])
+
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+function toggleItem(item) {
+  if (selected.value === item && !props.neverEmpty) {
+    selected.value = null
+  } else {
+    selected.value = item
+  }
+}
+
+if (props.items.length > 0 && props.neverEmpty) {
+  selected.value = props.items[0]
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/lib/components/base/DropArea.vue b/lib/components/base/DropArea.vue
index 58f672f63..fa5d28ee3 100644
--- a/lib/components/base/DropArea.vue
+++ b/lib/components/base/DropArea.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const props = withDefaults(
   defineProps<{
diff --git a/lib/components/base/FileInput.vue b/lib/components/base/FileInput.vue
index 21c8c3a6c..85a14bc92 100644
--- a/lib/components/base/FileInput.vue
+++ b/lib/components/base/FileInput.vue
@@ -12,72 +12,69 @@
   </label>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { fileIsValid } from '@'
-import { defineComponent } from 'vue'
-export default defineComponent({
-  props: {
-    prompt: {
-      type: String,
-      default: 'Select file',
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    accept: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The max file size in bytes
-     */
-    maxSize: {
-      type: Number,
-      default: null,
-    },
-    showIcon: {
-      type: Boolean,
-      default: true,
-    },
-    shouldAlwaysReset: {
-      type: Boolean,
-      default: false,
-    },
-    longStyle: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+
+const props = defineProps({
+  prompt: {
+    type: String,
+    default: 'Select file',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  accept: {
+    type: String,
+    default: null,
+  },
+  /**
+   * The max file size in bytes
+   */
+  maxSize: {
+    type: Number,
+    default: null,
   },
-  emits: ['change'],
-  data() {
-    return {
-      files: [],
-    }
+  showIcon: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    addFiles(files, shouldNotReset) {
-      if (!shouldNotReset || this.shouldAlwaysReset) {
-        this.files = files
-      }
-      const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
-      this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions))
-      if (this.files.length > 0) {
-        this.$emit('change', this.files)
-      }
-    },
-    handleDrop(e) {
-      this.addFiles(e.dataTransfer.files)
-    },
-    handleChange(e) {
-      this.addFiles(e.target.files)
-    },
+  shouldAlwaysReset: {
+    type: Boolean,
+    default: false,
+  },
+  longStyle: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
 })
+
+const emit = defineEmits(['change'])
+
+const files = ref([])
+function addFiles(newFiles, shouldNotReset) {
+  if (!shouldNotReset || props.shouldAlwaysReset) {
+    files.value = newFiles
+  }
+  const validationOptions = { maxSize: props.maxSize, alertOnInvalid: true }
+  files.value = [...files.value].filter((file) => fileIsValid(file, validationOptions))
+  if (files.value.length > 0) {
+    emit('change', files.value)
+  }
+}
+
+function handleDrop(e) {
+  addFiles(e.dataTransfer.files)
+}
+
+function handleChange(e) {
+  addFiles(e.target.files)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/lib/components/base/PageBar.vue b/lib/components/base/PageBar.vue
index cad2f2cfd..cfc436e08 100644
--- a/lib/components/base/PageBar.vue
+++ b/lib/components/base/PageBar.vue
@@ -9,8 +9,6 @@
   </div>
 </template>
 
-<script setup></script>
-
 <style lang="scss" scoped>
 .page-bar {
   display: flex;
diff --git a/lib/components/base/ProjectCard.vue b/lib/components/base/ProjectCard.vue
index a77f6273d..2d9a0ebb4 100644
--- a/lib/components/base/ProjectCard.vue
+++ b/lib/components/base/ProjectCard.vue
@@ -203,7 +203,7 @@ defineProps({
   fromNow: {
     type: Function,
     required: false,
-    default: (x) => x,
+    default: (x) => x.toString(),
   },
 })
 </script>
@@ -441,6 +441,7 @@ defineProps({
     width: auto;
     aspect-ratio: 2 / 1;
     border: 4px solid var(--color-button-bg);
+    border-radius: var(--radius-md);
   }
 }
 
diff --git a/lib/components/base/Toggle.vue b/lib/components/base/Toggle.vue
index aeb01433f..b9e0a2d13 100644
--- a/lib/components/base/Toggle.vue
+++ b/lib/components/base/Toggle.vue
@@ -8,28 +8,23 @@
   />
 </template>
 
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    modelValue: {
-      type: Boolean,
-    },
-    checked: {
-      type: Boolean,
-      required: true,
-    },
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-  emits: ['update:modelValue'],
-  methods: {
-    toggle() {
-      if (!this.disabled) {
-        this.$emit('update:modelValue', !this.modelValue)
-      }
-    },
+  modelValue: {
+    type: Boolean,
   },
+  checked: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+function toggle() {
+  emit('update:modelValue', !props.modelValue)
 }
 </script>
diff --git a/lib/components/brand/AnimatedLogo.vue b/lib/components/brand/AnimatedLogo.vue
index e6cea1b79..5b379088c 100644
--- a/lib/components/brand/AnimatedLogo.vue
+++ b/lib/components/brand/AnimatedLogo.vue
@@ -73,7 +73,11 @@
 
 <style lang="scss" scoped>
 div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 5rem;
+  margin-top: 1rem;
 
   svg {
     width: 5rem;
diff --git a/lib/components/index.js b/lib/components/index.js
index a6f163f37..e89a69676 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -37,7 +37,6 @@ export { default as CompactChart } from './chart/CompactChart.vue'
 // Modals
 export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
-export { default as ReportModal } from './modal/ReportModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
 
 // Navigation
diff --git a/lib/components/modal/ReportModal.vue b/lib/components/modal/ReportModal.vue
deleted file mode 100644
index 17c1c666a..000000000
--- a/lib/components/modal/ReportModal.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <Modal ref="modal" :header="`Report ${itemType}`" :noblur="noblur">
-    <div class="modal-report universal-labels">
-      <div class="markdown-body">
-        <p>
-          Modding should be safe for everyone, so we take abuse and malicious intent seriously at
-          Modrinth. We want to hear about harmful content on the site that violates our
-          <router-link to="/legal/terms">ToS</router-link> and
-          <router-link to="/legal/rules">Rules</router-link>. Rest assured, we'll keep your
-          identifying information private.
-        </p>
-        <p v-if="itemType === 'project' || itemType === 'version'">
-          Please <strong>do not</strong> use this to report bugs with the project itself. This form
-          is only for submitting a report to Modrinth staff. If the project has an Issues link or a
-          Discord invite, consider reporting it there.
-        </p>
-      </div>
-      <label for="report-type">
-        <span class="label__title">Reason</span>
-      </label>
-      <DropdownSelect
-        id="report-type"
-        v-model="reportType"
-        name="report-type"
-        :options="reportTypes"
-        :display-name="capitalizeString"
-        default-value="Choose report type"
-        class="multiselect"
-      />
-      <label for="report-body">
-        <span class="label__title">Additional information</span>
-        <span class="label__description markdown-body">
-          Please provide additional context about your report. Include links and images if possible.
-          <strong>Empty reports will be closed.</strong> This editor supports
-          <a href="https://docs.modrinth.com/markdown" target="_blank">Markdown formatting</a>.
-        </span>
-      </label>
-      <Chips v-model="bodyViewType" class="separator" :items="['source', 'preview']" />
-      <div class="text-input textarea-wrapper">
-        <textarea v-if="bodyViewType === 'source'" id="body" v-model="body" spellcheck="true" />
-        <div v-else class="preview" v-html="renderString(body)" />
-      </div>
-      <div class="input-group push-right">
-        <Button @click="cancel">
-          <XIcon />
-          Cancel
-        </Button>
-        <Button color="primary" @click="submitReport">
-          <CheckIcon />
-          Report
-        </Button>
-      </div>
-    </div>
-  </Modal>
-</template>
-<script setup>
-import { Chips, DropdownSelect, Modal, CheckIcon, XIcon, capitalizeString, renderString } from '@'
-import { ref } from 'vue'
-
-defineProps({
-  itemType: {
-    type: String,
-    default: '',
-  },
-  itemId: {
-    type: String,
-    default: '',
-  },
-  reportTypes: {
-    type: Array,
-    default: () => [],
-  },
-  submitReport: {
-    type: Function,
-    default: () => {},
-  },
-  noblur: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const reportType = ref('')
-const body = ref('')
-const bodyViewType = ref('source')
-
-const modal = ref(null)
-
-function cancel() {
-  reportType.value = ''
-  body.value = ''
-  bodyViewType.value = 'source'
-
-  modal.value.hide()
-}
-
-function show() {
-  modal.value.show()
-}
-
-defineExpose({
-  show,
-})
-</script>
-
-<style scoped lang="scss">
-.modal-report {
-  padding: var(--gap-lg);
-
-  .textarea-wrapper {
-    height: 10rem;
-
-    :first-child {
-      max-height: 8rem;
-      transform: translateY(1rem);
-    }
-  }
-
-  .preview {
-    overflow-y: auto;
-  }
-}
-</style>
diff --git a/lib/components/nav/NavRow.vue b/lib/components/nav/NavRow.vue
index f002a2702..9d799a710 100644
--- a/lib/components/nav/NavRow.vue
+++ b/lib/components/nav/NavRow.vue
@@ -23,85 +23,73 @@
   </nav>
 </template>
 
-<script>
-export default {
-  props: {
-    links: {
-      default: () => [],
-      type: Array,
-    },
-    query: {
-      default: null,
-      type: String,
-    },
-  },
-  data() {
-    return {
-      sliderPositionX: 0,
-      sliderPositionY: 18,
-      selectedElementWidth: 0,
-      activeIndex: -1,
-      oldIndex: -1,
-    }
-  },
-  computed: {
-    filteredLinks() {
-      return this.links.filter((x) => (x.shown === undefined ? true : x.shown))
-    },
-    positionToMoveX() {
-      return `${this.sliderPositionX}px`
-    },
-    positionToMoveY() {
-      return `${this.sliderPositionY}px`
-    },
-    sliderWidth() {
-      return `${this.selectedElementWidth}px`
-    },
-  },
-  watch: {
-    '$route.path': {
-      handler() {
-        this.pickLink()
-      },
-    },
-    '$route.query': {
-      handler() {
-        if (this.query) this.pickLink()
-      },
-    },
-  },
-  mounted() {
-    window.addEventListener('resize', this.pickLink)
-    this.pickLink()
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.pickLink)
+<script setup>
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps({
+  links: {
+    default: () => [],
+    type: Array,
   },
-  methods: {
-    pickLink() {
-      this.activeIndex = this.query
-        ? this.filteredLinks.findIndex(
-            (x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query]
-          )
-        : this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
-
-      if (this.activeIndex !== -1) {
-        this.startAnimation()
-      } else {
-        this.oldIndex = -1
-        this.sliderPositionX = 0
-        this.selectedElementWidth = 0
-      }
-    },
-    startAnimation() {
-      const el = this.$refs.linkElements[this.activeIndex].$el
-
-      this.sliderPositionX = el.offsetLeft
-      this.sliderPositionY = el.offsetTop + el.offsetHeight
-      this.selectedElementWidth = el.offsetWidth
-    },
+  query: {
+    default: null,
+    type: String,
   },
+})
+
+const route = useRoute()
+
+const sliderPositionX = ref(0)
+const sliderPositionY = ref(18)
+const selectedElementWidth = ref(0)
+const activeIndex = ref(-1)
+const oldIndex = ref(-1)
+
+const filteredLinks = computed(() =>
+  props.links.filter((x) => (x.shown === undefined ? true : x.shown))
+)
+
+const positionToMoveX = computed(() => `${sliderPositionX.value}px`)
+const positionToMoveY = computed(() => `${sliderPositionY.value}px`)
+const sliderWidth = computed(() => `${selectedElementWidth.value}px`)
+
+onMounted(() => {
+  window.addEventListener('resize', pickLink)
+  pickLink()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', pickLink)
+})
+
+function pickLink() {
+  activeIndex.value = props.query
+    ? filteredLinks.value.findIndex(
+        (x) => (x.href === '' ? undefined : x.href) === route.path[props.query]
+      )
+    : filteredLinks.value.findIndex((x) => x.href === decodeURIComponent(route.path))
+
+  if (activeIndex.value !== -1) {
+    startAnimation()
+  } else {
+    oldIndex.value = -1
+    sliderPositionX.value = 0
+    selectedElementWidth.value = 0
+  }
 }
+
+const linkElements = ref()
+function startAnimation() {
+  const el = linkElements.value[activeIndex.value].$el
+
+  sliderPositionX.value = el.offsetLeft
+  sliderPositionY.value = el.offsetTop + el.offsetHeight
+  selectedElementWidth.value = el.offsetWidth
+}
+
+watch(() => route.path, pickLink)
+watch(() => route.query, pickLink)
 </script>
 
 <style lang="scss" scoped>
diff --git a/lib/components/search/Categories.vue b/lib/components/search/Categories.vue
index ea5d991fe..95f6e759e 100644
--- a/lib/components/search/Categories.vue
+++ b/lib/components/search/Categories.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="categories">
     <slot />
-    <span v-for="category in categories" :key="category.name">
-      {{ formatCategory(category.name) }}
+    <span v-for="category in categories" :key="category">
+      {{ formatCategory(category) }}
     </span>
   </div>
 </template>
diff --git a/lib/helpers/projects.js b/lib/helpers/projects.js
index 7c97024c6..f533298e0 100644
--- a/lib/helpers/projects.js
+++ b/lib/helpers/projects.js
@@ -1,35 +1,5 @@
 // noinspection JSUnusedGlobalSymbols
 
-export const getProjectTypeForDisplay = (type, categories, tags) => {
-  if (type === 'mod') {
-    const isPlugin = categories.some((category) => {
-      return tags.loaderData.allPluginLoaders.includes(category)
-    })
-    const isMod = categories.some((category) => {
-      return tags.loaderData.modLoaders.includes(category)
-    })
-    const isDataPack = categories.some((category) => {
-      return tags.loaderData.dataPackLoaders.includes(category)
-    })
-
-    if (isMod && isPlugin && isDataPack) {
-      return 'mod, plugin, and data pack'
-    } else if (isMod && isPlugin) {
-      return 'mod and plugin'
-    } else if (isMod && isDataPack) {
-      return 'mod and data pack'
-    } else if (isPlugin && isDataPack) {
-      return 'plugin and data pack'
-    } else if (isDataPack) {
-      return 'data pack'
-    } else if (isPlugin) {
-      return 'plugin'
-    }
-  }
-
-  return type
-}
-
 export const getProjectLink = (project) => {
   return `/${project.project_type}/${project.slug ? project.slug : project.id}`
 }
diff --git a/lib/helpers/utils.js b/lib/helpers/utils.js
index cf8a0a633..682c32a2a 100644
--- a/lib/helpers/utils.js
+++ b/lib/helpers/utils.js
@@ -1,81 +1,5 @@
 // noinspection JSUnusedGlobalSymbols
 
-import dayjs from 'dayjs'
-
-export const external = (cosmetics) => (cosmetics.externalLinksNewTab ? '_blank' : '')
-
-// Only use on the complete list of versions for a project,
-// partial lists will generate the wrong version slugs
-export const computeVersions = (versions, members) => {
-  const visitedVersions = []
-  const returnVersions = []
-  const authorMembers = {}
-
-  for (const version of versions.sort(
-    (a, b) => dayjs(a.date_published) - dayjs(b.date_published)
-  )) {
-    if (visitedVersions.includes(version.version_number)) {
-      visitedVersions.push(version.version_number)
-      version.displayUrlEnding = version.id
-    } else {
-      visitedVersions.push(version.version_number)
-      version.displayUrlEnding = version.version_number
-    }
-    version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
-
-    if (!version.primaryFile) {
-      version.primaryFile = {
-        hashes: {
-          sha1: '',
-          sha512: '',
-        },
-        url: '#',
-        filename: 'unknown',
-        primary: false,
-        size: 0,
-        file_type: null,
-      }
-    }
-
-    version.author = authorMembers[version.author_id]
-    if (!version.author) {
-      version.author = members.find((x) => x.user.id === version.author_id)
-      authorMembers[version.author_id] = version.author
-    }
-
-    returnVersions.push(version)
-  }
-
-  return returnVersions
-    .reverse()
-    .map((version, index) => {
-      const nextVersion = returnVersions[index + 1]
-      if (nextVersion && version.changelog && nextVersion.changelog === version.changelog) {
-        return { duplicate: true, ...version }
-      } else {
-        return { duplicate: false, ...version }
-      }
-    })
-    .sort((a, b) => dayjs(b.date_published) - dayjs(a.date_published))
-}
-
-export const sortedCategories = (tags) => {
-  return tags.categories.slice().sort((a, b) => {
-    const headerCompare = a.header.localeCompare(b.header)
-    if (headerCompare !== 0) {
-      return headerCompare
-    }
-    if (a.header === 'resolutions' && b.header === 'resolutions') {
-      return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
-    } else if (a.header === 'performance impact' && b.header === 'performance impact') {
-      const x = ['potato', 'low', 'medium', 'high', 'screenshot']
-
-      return x.indexOf(a.name) - x.indexOf(b.name)
-    }
-    return 0
-  })
-}
-
 export const formatNumber = (number, abbreviate = true) => {
   const x = +number
   if (x >= 1000000 && abbreviate) {
@@ -281,22 +205,3 @@ export const fileIsValid = (file, validationOptions) => {
 
   return true
 }
-
-export const acceptFileFromProjectType = (projectType) => {
-  switch (projectType) {
-    case 'mod':
-      return '.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip'
-    case 'plugin':
-      return '.jar,.zip,application/java-archive,application/x-java-archive,application/zip'
-    case 'resourcepack':
-      return '.zip,application/zip'
-    case 'shader':
-      return '.zip,application/zip'
-    case 'datapack':
-      return '.zip,application/zip'
-    case 'modpack':
-      return '.mrpack,application/x-modrinth-modpack+zip,application/zip'
-    default:
-      return '*'
-  }
-}
diff --git a/package.json b/package.json
index d8b2b5c84..decbbeaab 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "files": [
     "dist",
     "locales"