From 2264281e4d9c7ba397e8444dfd3e4719032dffdd Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Tue, 7 Mar 2023 16:59:21 -0500
Subject: [PATCH] Project card (#15)

* initial impl

* merge from main

* No more crashy

* Almost there

* fix import

* fix more imports

* Code cleanup, Fixed components, Added Tooltip

* Added Env ind and Category pages

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
---
 .idea/inspectionProfiles/Project_Default.xml |  16 +
 docs/.postcssrc.cjs                          |  12 +
 docs/.vitepress/config.js                    |   3 +
 docs/.vitepress/theme/compat.scss            |   9 +-
 docs/components/categories.md                |  24 +
 docs/components/environment-indicator.md     |  51 ++
 docs/components/project-card.md              | 455 ++++++++++++++
 lib/assets/styles/defaults.scss              |  71 +++
 lib/components/base/Avatar.vue               |   8 +-
 lib/components/base/EnvironmentIndicator.vue | 104 ++++
 lib/components/base/ProjectCard.vue          | 608 +++++++++++++++++++
 lib/components/index.js                      |   5 +
 lib/components/search/Categories.vue         |  54 ++
 lib/components/utils.js                      | 202 ++++++
 lib/index.js                                 |   2 +
 package.json                                 |   6 +-
 16 files changed, 1621 insertions(+), 9 deletions(-)
 create mode 100644 docs/.postcssrc.cjs
 create mode 100644 docs/components/categories.md
 create mode 100644 docs/components/environment-indicator.md
 create mode 100644 docs/components/project-card.md
 create mode 100644 lib/components/base/EnvironmentIndicator.vue
 create mode 100644 lib/components/base/ProjectCard.vue
 create mode 100644 lib/components/search/Categories.vue
 create mode 100644 lib/components/utils.js

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 584448f9d..7a7ff94b1 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -23,5 +23,21 @@
       </option>
       <option name="myCustomValuesEnabled" value="true" />
     </inspection_tool>
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="environmentindicator" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/docs/.postcssrc.cjs b/docs/.postcssrc.cjs
new file mode 100644
index 000000000..186d3c3a3
--- /dev/null
+++ b/docs/.postcssrc.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: {
+    'postcss-prefix-selector': {
+      prefix: ':not(:where(.vp-raw *))',
+      includeFiles: [/vp-doc\.css/],
+      transform(prefix, _selector) {
+        const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
+        return selector + prefix + pseudo
+      }
+    }
+  }
+}
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 738519769..05eff9bb7 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -26,6 +26,9 @@ export default {
           { text: 'Chips', link: '/components/chips' },
           { text: 'Icons', link: '/components/icons' },
           { text: 'Pagination', link: '/components/pagination' },
+          { text: 'Project Card', link: '/components/project-card' },
+          { text: 'Environment Indicator', link: '/components/environment-indicator' },
+          { text: 'Categories', link: '/components/categories' },
           { text: 'Animated Logo', link: '/components/animated-logo' },
           { text: 'Text Logo', link: '/components/text-logo' },
           { text: 'Slider', link: '/components/slider' },
diff --git a/docs/.vitepress/theme/compat.scss b/docs/.vitepress/theme/compat.scss
index 47a36426b..be1230560 100644
--- a/docs/.vitepress/theme/compat.scss
+++ b/docs/.vitepress/theme/compat.scss
@@ -1,8 +1,3 @@
-body {
-  color: var(--vp-c-text-1);
-  background-color: var(--vp-c-bg);
-}
-
 .VPLink,
 .title,
 .pager-link,
@@ -19,3 +14,7 @@ body {
     scale: 1;
   }
 }
+
+.content-container {
+  max-width: 100% !important;
+}
diff --git a/docs/components/categories.md b/docs/components/categories.md
new file mode 100644
index 000000000..96333c1c0
--- /dev/null
+++ b/docs/components/categories.md
@@ -0,0 +1,24 @@
+# Categories
+
+<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'
+      }]"
+    type="mod"
+    class="tags"
+  />
+</DemoContainer>
diff --git a/docs/components/environment-indicator.md b/docs/components/environment-indicator.md
new file mode 100644
index 000000000..31cdf51af
--- /dev/null
+++ b/docs/components/environment-indicator.md
@@ -0,0 +1,51 @@
+# Environment Indicator
+
+:::raw
+<DemoContainer>
+  <EnvironmentIndicator
+    :typeOnly="false"
+    client-side="unsupported"
+    server-side="required"
+    type="mod"
+    :search="true"
+  />
+  <EnvironmentIndicator
+    :type-only="false"
+    client-side="required"
+    server-side="unsupported"
+    type="mod"
+    :search="true"
+  />
+  <EnvironmentIndicator
+    :type-only="false"
+    client-side="required"
+    server-side="required"
+    type="mod"
+    :search="true"
+  />
+</DemoContainer>
+:::
+
+```vue
+<EnvironmentIndicator
+  :type-only="false"
+  :client-side="true"
+  :server-side="true"
+  type="mod"
+  :search="true"
+/>
+<EnvironmentIndicator
+  :type-only="false"
+  :client-side="false"
+  :server-side="true"
+  type="mod"
+  :search="true"
+/>
+<EnvironmentIndicator
+  :type-only="false"
+  :client-side="true"
+  :server-side="false"
+  type="mod"
+  :search="true"
+/>
+```
diff --git a/docs/components/project-card.md b/docs/components/project-card.md
new file mode 100644
index 000000000..f3ce61e7e
--- /dev/null
+++ b/docs/components/project-card.md
@@ -0,0 +1,455 @@
+# Project Card
+::: raw
+<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
+  <div class="project-list display-mode--list">
+    <ProjectCard
+      id="spirit"
+      type="mod"
+      name="Spirit"
+      author="CodexAdrian"
+      description="Create your own configurable mob spawner!"
+      iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
+      downloads="2784"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="required"
+      clientSide="required"
+      :showUpdatedDate="false"
+      color="1716041"
+    />
+    <ProjectCard
+      id="craftify"
+      type="mod"
+      name="Craftify"
+      author="ThatGravyBoat"
+      description="Allows for you to control and display your music in-game!"
+      iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
+      featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
+      downloads="309117"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="unsupported"
+      clientSide="required"
+      :showUpdatedDate="true"
+      color="3460212"
+    />
+    <ProjectCard
+      id="ad-astra"
+      type="mod"
+      name="Ad Astra"
+      author="AlexNijjar"
+      description="Live long and prosper, Ad Astra!"
+      iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
+      featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
+      downloads="14780"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="required"
+      clientSide="required"
+      :showUpdatedDate="false"
+      color="#FFFFFF"
+    />
+  </div>
+</DemoContainer>
+
+<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
+  <div class="project-list display-mode--grid">
+    <ProjectCard
+      id="spirit"
+      type="mod"
+      name="Spirit"
+      author="CodexAdrian"
+      description="Create your own configurable mob spawner!"
+      iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
+      downloads="2784"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="required"
+      clientSide="required"
+      :showUpdatedDate="false"
+      color="1716041"
+    />
+    <ProjectCard
+      id="craftify"
+      type="mod"
+      name="Craftify"
+      author="ThatGravyBoat"
+      description="Allows for you to control and display your music in-game!"
+      iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
+      featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
+      downloads="309117"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="unsupported"
+      clientSide="required"
+      :showUpdatedDate="true"
+      color="3460212"
+    />
+    <ProjectCard
+      id="ad-astra"
+      type="mod"
+      name="Ad Astra"
+      author="AlexNijjar"
+      description="Live long and prosper, Ad Astra!"
+      iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
+      featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
+      downloads="14780"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="required"
+      clientSide="required"
+      :showUpdatedDate="false"
+      color="#FFFFFF"
+    />
+  </div>
+</DemoContainer>
+
+<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
+  <div class="project-list display-mode--gallery">
+        <ProjectCard
+      id="spirit"
+      type="mod"
+      name="Spirit"
+      author="CodexAdrian"
+      description="Create your own configurable mob spawner!"
+      iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
+      downloads="2784"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="required"
+      clientSide="required"
+      :showUpdatedDate="false"
+      color="1716041"
+    />
+    <ProjectCard
+      id="craftify"
+      type="mod"
+      name="Craftify"
+      author="ThatGravyBoat"
+      description="Allows for you to control and display your music in-game!"
+      iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
+      featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
+      downloads="309117"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="unsupported"
+      clientSide="required"
+      :showUpdatedDate="true"
+      color="3460212"
+    />
+    <ProjectCard
+      id="ad-astra"
+      type="mod"
+      name="Ad Astra"
+      author="AlexNijjar"
+      description="Live long and prosper, Ad Astra!"
+      iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
+      featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
+      downloads="14780"
+      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'
+      }]"
+      projectTypeDisplay="mod"
+      projectTypeUrl="/mod"
+      serverSide="required"
+      clientSide="required"
+      :showUpdatedDate="false"
+      color="#FFFFFF"
+    />
+  </div>
+</DemoContainer>
+:::
+
+```vue
+<ProjectCard
+  id="spirit"
+  type="mod"
+  name="Spirit"
+  author="CodexAdrian"
+  description="Create your own configurable mob spawner!"
+  iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
+  downloads="2784"
+  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'
+      }]"
+  projectTypeDisplay="mod"
+  projectTypeUrl="/mod"
+  serverSide="required"
+  clientSide="required"
+  :showUpdatedDate="false"
+  color="1716041"
+>
+</ProjectCard>
+<ProjectCard
+  id="craftify"
+  type="mod"
+  name="Craftify"
+  author="ThatGravyBoat"
+  description="Allows for you to control and display your music in-game!"
+  iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
+  featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
+  downloads="309117"
+  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'
+      }]"
+  projectTypeDisplay="mod"
+  projectTypeUrl="/mod"
+  serverSide="unsupported"
+  clientSide="required"
+  :showUpdatedDate="true"
+  color="3460212"
+>
+</ProjectCard>
+<ProjectCard
+  id="ad-astra"
+  type="mod"
+  name="Ad Astra"
+  author="AlexNijjar"
+  description="Live long and prosper, Ad Astra!"
+  iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
+  featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
+  downloads="14780"
+  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'
+      }]"
+  projectTypeDisplay="mod"
+  projectTypeUrl="/mod"
+  serverSide="required"
+  clientSide="required"
+  :showUpdatedDate="false"
+  color="#FFFFFF"
+>
+</ProjectCard>
+```
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
index d550e040e..168cc719f 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -118,3 +118,74 @@ svg {
   height: 1em;
   width: 1em;
 }
+
+.project-list {
+  width: 100%;
+  gap: var(--gap-md);
+  overflow: hidden;
+
+  &:not(:first-child) {
+    margin-top: var(--gap-md);
+  }
+}
+
+.project-list.display-mode--list {
+  display: flex;
+  flex-direction: column;
+}
+
+.project-list.display-mode--gallery {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @media screen and (max-width: 750px) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+
+.project-list.display-mode--grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @media screen and (max-width: 80rem) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media screen and (max-width: 1024px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media screen and (max-width: 860px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media screen and (max-width: 550px) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.v-popper--theme-tooltip {
+  .v-popper__inner {
+    background: var(--color-tooltip-bg) !important;
+    color: var(--color-tooltip-text) !important;
+    padding: 5px 10px 4px !important;
+    border-radius: var(--size-rounded-tooltip) !important;
+    box-shadow: var(--shadow-floating) !important;
+    font-size: 0.9rem !important;
+  }
+
+  .v-popper__arrow-outer,
+  .v-popper__arrow-inner {
+    border-color: var(--color-tooltip-bg) !important;
+  }
+}
+
+.button-animation {
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+  outline 0.2s ease-in-out;
+
+  &:active:not(&:disabled) {
+    transform: scale(0.95);
+  }
+}
diff --git a/lib/components/base/Avatar.vue b/lib/components/base/Avatar.vue
index a8e73023a..8f2047108 100644
--- a/lib/components/base/Avatar.vue
+++ b/lib/components/base/Avatar.vue
@@ -82,10 +82,12 @@ export default {
 .avatar {
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-inset-lg), var(--shadow-card);
-  height: var(--size);
-  width: var(--size);
+  height: var(--size) !important;
+  width: var(--size) !important;
   background-color: var(--color-button-bg);
-  object-fit: contain;
+  object-fit: cover;
+  max-width: var(--size) !important;
+  max-height: var(--size) !important;
 
   &.size-xs {
     --size: 2.5rem;
diff --git a/lib/components/base/EnvironmentIndicator.vue b/lib/components/base/EnvironmentIndicator.vue
new file mode 100644
index 000000000..ccfb19b51
--- /dev/null
+++ b/lib/components/base/EnvironmentIndicator.vue
@@ -0,0 +1,104 @@
+<template>
+  <span v-if="typeOnly" class="environment">
+    <InfoIcon aria-hidden="true" />
+    A {{ type }}
+  </span>
+  <span
+    v-else-if="
+      !['resourcepack', 'shader'].includes(type) &&
+      !(type === 'plugin' && search)
+    "
+    class="environment"
+  >
+    <template v-if="clientSide === 'optional' && serverSide === 'optional'">
+      <GlobeIcon aria-hidden="true" />
+      Client or server
+    </template>
+    <template
+      v-else-if="clientSide === 'required' && serverSide === 'required'"
+    >
+      <GlobeIcon aria-hidden="true" />
+      Client and server
+    </template>
+    <template
+      v-else-if="
+        (clientSide === 'optional' || clientSide === 'required') &&
+        (serverSide === 'optional' || serverSide === 'unsupported')
+      "
+    >
+      <ClientIcon aria-hidden="true" />
+      Client
+    </template>
+    <template
+      v-else-if="
+        (serverSide === 'optional' || serverSide === 'required') &&
+        (clientSide === 'optional' || clientSide === 'unsupported')
+      "
+    >
+      <ServerIcon aria-hidden="true" />
+      Server
+    </template>
+    <template
+      v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'"
+    >
+      <GlobeIcon aria-hidden="true" />
+      Unsupported
+    </template>
+    <template v-else-if="alwaysShow">
+      <InfoIcon aria-hidden="true" />
+      A {{ type }}
+    </template>
+  </span>
+</template>
+<script setup>
+import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon} from "@/components";
+</script>
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String,
+      default: 'mod',
+    },
+    serverSide: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    clientSide: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    typeOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    alwaysShow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    search: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
+  },
+});
+</script>
+<style lang="scss" scoped>
+.environment {
+  display: flex;
+  color: var(--color-text) !important;
+  font-weight: bold;
+  font-size: 1rem;
+  align-items: center;
+  svg {
+    margin-right: 0.2rem;
+  }
+}
+</style>
diff --git a/lib/components/base/ProjectCard.vue b/lib/components/base/ProjectCard.vue
new file mode 100644
index 000000000..bddb22fc4
--- /dev/null
+++ b/lib/components/base/ProjectCard.vue
@@ -0,0 +1,608 @@
+<template>
+  <article
+    class="project-card base-card padding-bg"
+    :aria-label="name"
+    role="listitem"
+  >
+    <router-link
+      class="icon"
+      tabindex="-1"
+      :to="`/${projectTypeUrl}/${id}`"
+    >
+      <Avatar :src="iconUrl" :alt="name" size="md" no-shadow loading="lazy" />
+    </router-link>
+    <router-link
+      class="gallery"
+      :class="{ 'no-image': !featuredImage }"
+      tabindex="-1"
+      :to="`/${projectTypeUrl}/${id}`"
+      :style="color ? `background-color: ${toColor};` : ''"
+    >
+      <img v-if="featuredImage" :src="featuredImage" alt="gallery image" />
+    </router-link>
+    <div class="title">
+      <router-link :to="`/${projectTypeUrl}/${id}`">
+        <h2 class="name">
+          {{ name }}
+        </h2>
+      </router-link>
+      <p v-if="author" class="author">
+        by
+        <router-link class="title-link" :to="'/user/' + author"
+          >{{ author }}
+        </router-link>
+      </p>
+      <Badge
+        v-if="status && status !== 'approved'"
+        :type="status"
+        class="status"
+      />
+    </div>
+    <p class="description">
+      {{ description }}
+    </p>
+    <Categories
+      :categories="categories"
+      :type="type"
+      class="tags"
+    >
+      <EnvironmentIndicator
+        :type-only="moderation"
+        :client-side="clientSide"
+        :server-side="serverSide"
+        :type="projectTypeDisplay"
+        :search="search"
+      />
+    </Categories>
+    <div class="stats">
+      <div v-if="downloads" class="stat">
+        <DownloadIcon aria-hidden="true" />
+        <p>
+          <strong>{{ formatNumber(downloads) }}</strong
+          ><span class="stat-label">
+            download<span v-if="downloads !== '1'">s</span></span
+          >
+        </p>
+      </div>
+      <div v-if="follows" class="stat">
+        <HeartIcon aria-hidden="true" />
+        <p>
+          <strong>{{ formatNumber(follows) }}</strong
+          ><span class="stat-label">
+            follower<span v-if="follows !== '1'">s</span></span
+          >
+        </p>
+      </div>
+      <div class="buttons">
+        <slot />
+      </div>
+      <div
+        v-if="showUpdatedDate"
+        v-tooltip="updatedDate"
+        class="stat date"
+      >
+        <EditIcon aria-hidden="true" />
+        <span class="date-label">Updated </span
+        > {{ sinceUpdated }}
+      </div>
+      <div
+        v-else
+        v-tooltip="createdDate"
+        class="stat date"
+      >
+        <CalendarIcon aria-hidden="true" />
+        <span class="date-label">Published </span
+        >{{ sinceCreation }}
+      </div>
+    </div>
+  </article>
+</template>
+<script setup>
+import { Badge, HeartIcon, DownloadIcon, EditIcon, CalendarIcon, Avatar, Categories, EnvironmentIndicator } from '@/components'
+import { formatNumber } from '@/components/utils'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)
+</script>
+<script>
+import {defineComponent} from "vue";
+export default defineComponent({
+  props: {
+    id: {
+      type: String,
+      default: 'modrinth-0',
+    },
+    type: {
+      type: String,
+      default: 'mod',
+    },
+    name: {
+      type: String,
+      default: 'Project Name',
+    },
+    author: {
+      type: String,
+      default: null,
+    },
+    description: {
+      type: String,
+      default: 'A _type description',
+    },
+    iconUrl: {
+      type: String,
+      default: '#',
+      required: false,
+    },
+    downloads: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    follows: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    createdAt: {
+      type: String,
+      default: '0000-00-00',
+    },
+    updatedAt: {
+      type: String,
+      default: null,
+    },
+    categories: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    filteredCategories: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    projectTypeDisplay: {
+      type: String,
+      default: null,
+    },
+    projectTypeUrl: {
+      type: String,
+      default: null,
+    },
+    status: {
+      type: String,
+      default: null,
+    },
+    hasModMessage: {
+      type: Boolean,
+      default: false,
+    },
+    serverSide: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    clientSide: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    moderation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    search: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    featuredImage: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    showUpdatedDate: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hideLoaders: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    color: {
+      type: Number,
+      required: false,
+      default: null,
+    }
+  },
+  computed: {
+    toColor() {
+      let color = this.color
+
+      color >>>= 0
+      const b = color & 0xff
+      const g = (color & 0xff00) >>> 8
+      const r = (color & 0xff0000) >>> 16
+      return 'rgba(' + [r, g, b, 1].join(',') + ')'
+    },
+    createdDate() {
+      return dayjs(this.createdAt).format('MMMM D, YYYY [at] h:mm:ss A')
+    },
+    sinceCreation() {
+      return dayjs(this.createdAt).fromNow()
+    },
+    updatedDate() {
+      return dayjs(this.updatedAt).format('MMMM D, YYYY [at] h:mm:ss A')
+    },
+    sinceUpdated() {
+      return dayjs(this.updatedAt).fromNow()
+    }
+  },
+  methods: {
+    formatNumber
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.project-card {
+  display: inline-grid;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: 0;
+  line-height: 1;
+}
+
+.display-mode--list .project-card {
+  grid-template:
+    'icon title stats'
+    'icon description stats'
+    'icon tags stats';
+  grid-template-columns: min-content 1fr auto;
+  grid-template-rows: min-content 1fr min-content;
+  column-gap: var(--gap-md);
+  row-gap: var(--gap-sm);
+  width: 100%;
+
+  @media screen and (max-width: 750px) {
+    grid-template:
+      'icon title'
+      'icon description'
+      'icon tags'
+      'stats stats';
+    grid-template-columns: min-content auto;
+    grid-template-rows: min-content 1fr min-content min-content;
+  }
+
+  @media screen and (max-width: 550px) {
+    grid-template:
+      'icon title'
+      'icon description'
+      'tags tags'
+      'stats stats';
+    grid-template-columns: min-content auto;
+    grid-template-rows: min-content 1fr min-content min-content;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+}
+
+.display-mode--gallery .project-card,
+.display-mode--grid .project-card {
+  padding: 0 0 1rem 0;
+  grid-template: 'gallery gallery' 'icon title' 'description  description' 'tags tags' 'stats stats';
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: min-content min-content 1fr min-content min-content;
+  row-gap: var(--gap-sm);
+
+  .gallery {
+    display: inline-block;
+    width: 100%;
+    height: 10rem;
+    background-color: var(--color-button-bg-active);
+
+    &.no-image {
+      filter: brightness(0.7);
+    }
+
+    img {
+      box-shadow: none;
+      width: 100%;
+      height: 10rem;
+      object-fit: cover;
+    }
+  }
+
+  .icon {
+    margin-left: var(--gap-lg);
+    margin-top: -3rem;
+    z-index: 1;
+
+    img, svg {
+      border-radius: var(--radius-lg);
+      border: 4px solid var(--color-raised-bg);
+      border-bottom: none;
+    }
+  }
+
+  .title {
+    margin-left: var(--gap-md);
+    margin-right: var(--gap-md);
+    flex-direction: column;
+
+    .name {
+      font-size: 1.25rem;
+    }
+
+    .status {
+      margin-top: var(--gap-xs);
+    }
+  }
+
+  .description {
+    margin-inline: var(--gap-lg);
+  }
+
+  .tags {
+    margin-inline: var(--gap-lg);
+  }
+
+  .stats {
+    margin-inline: var(--gap-lg);
+    flex-direction: row;
+    align-items: center;
+
+    .stat-label {
+      display: none;
+    }
+
+    .buttons {
+      flex-direction: row;
+      gap: var(--gap-sm);
+      align-items: center;
+
+      > :first-child {
+        margin-left: auto;
+      }
+
+      &:first-child > :last-child {
+        margin-right: auto;
+      }
+    }
+
+    .buttons:not(:empty) + .date {
+      flex-basis: 100%;
+    }
+  }
+}
+
+.display-mode--grid .project-card {
+  .gallery {
+    display: none;
+  }
+
+  .icon {
+    margin-top: calc(var(--gap-lg) - var(--gap-sm));
+
+    img,
+    svg {
+      border: none;
+    }
+  }
+
+  .title {
+    margin-top: calc(var(--gap-lg) - var(--gap-sm));
+  }
+}
+
+.icon {
+  grid-area: icon;
+  display: flex;
+  align-items: center;
+}
+
+.gallery {
+  display: none;
+  height: 10rem;
+  grid-area: gallery;
+}
+
+.title {
+  grid-area: title;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--gap-sm);
+  row-gap: 0;
+  word-wrap: anywhere;
+
+  h2 {
+    font-weight: bolder;
+    color: white;
+  }
+
+  h2,
+  p {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  svg {
+    width: auto;
+    color: var(--color-special-orange);
+    height: 1.5rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .title-link {
+    text-decoration: underline;
+
+    &:focus-visible,
+    &:hover {
+      color: var(--color-heading);
+    }
+
+    &:active {
+      color: var(--color-text-dark);
+    }
+  }
+}
+
+.stats {
+  grid-area: stats;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--gap-md);
+
+  .stat {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: fit-content;
+    gap: var(--gap-xs);
+    --stat-strong-size: 1.25rem;
+
+    strong {
+      font-size: var(--stat-strong-size);
+    }
+
+    p {
+      margin: 0;
+    }
+
+    svg {
+      height: var(--stat-strong-size);
+      width: var(--stat-strong-size);
+    }
+  }
+
+  .date {
+    margin-top: auto;
+  }
+
+  @media screen and (max-width: 750px) {
+    flex-direction: row;
+    column-gap: var(--gap-md);
+    margin-top: var(--gap-xs);
+  }
+
+  @media screen and (max-width: 600px) {
+    margin-top: 0;
+
+    .stat-label {
+      display: none;
+    }
+  }
+}
+
+.environment {
+  color: var(--color-text) !important;
+  font-weight: bold;
+}
+
+.description {
+  grid-area: description;
+  margin-block: 0;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.tags {
+  grid-area: tags;
+  display: flex;
+  flex-direction: row;
+
+  @media screen and (max-width: 550px) {
+    margin-top: var(--gap-xs);
+  }
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  align-items: flex-end;
+  flex-grow: 1;
+}
+
+.small-mode {
+  @media screen and (min-width: 750px) {
+    grid-template:
+      'icon title'
+      'icon description'
+      'icon tags'
+      'stats stats' !important;
+    grid-template-columns: min-content auto !important;
+    grid-template-rows: min-content 1fr min-content min-content !important;
+
+    .tags {
+      margin-top: var(--gap-xs) !important;
+    }
+
+    .stats {
+      flex-direction: row;
+      column-gap: var(--gap-md) !important;
+      margin-top: var(--gap-xs) !important;
+
+      .stat-label {
+        display: none !important;
+      }
+    }
+  }
+}
+
+.base-card {
+  padding: var(--gap-lg);
+
+  position: relative;
+  min-height: 2rem;
+
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-lg);
+
+  outline: 2px solid transparent;
+
+  box-shadow: var(--shadow-card);
+
+  .card__overlay {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    grid-gap: 0.5rem;
+    z-index: 2;
+  }
+
+  &.warning {
+    border-left: 0.5rem solid var(--color-banner-side);
+    padding: 1.5rem;
+    line-height: 1.5;
+    background-color: var(--color-banner-bg);
+    color: var(--color-banner-text);
+    min-height: 0;
+
+    a {
+      /* Uses active color to increase contrast */
+      color: var(--color-link-active);
+      text-decoration: underline;
+    }
+  }
+
+  &.moderation-card {
+    background-color: var(--color-banner-bg);
+  }
+}
+</style>
diff --git a/lib/components/index.js b/lib/components/index.js
index d446ceb62..53d75e4ed 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -9,6 +9,10 @@ export { default as Slider } from './base/Slider.vue'
 export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
 export { default as TextLogo } from './brand/TextLogo.vue'
 export { default as Pagination } from './base/Pagination.vue'
+export { default as ProjectCard } from './base/ProjectCard.vue'
+export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
+
+export { default as Categories } from './search/Categories.vue'
 
 export { default as NavItem } from './nav/NavItem.vue'
 export { default as NavRow } from './nav/NavRow.vue'
@@ -52,6 +56,7 @@ export { default as GlobeIcon } from '@/assets/icons/globe.svg'
 export { default as GridIcon } from '@/assets/icons/grid.svg'
 export { default as HamburgerIcon } from '@/assets/icons/hamburger.svg'
 export { default as HashIcon } from '@/assets/icons/hash.svg'
+export { default as HeartIcon } from '@/assets/icons/heart.svg'
 export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.svg'
 export { default as ImageIcon } from '@/assets/icons/image.svg'
 export { default as InfoIcon } from '@/assets/icons/info.svg'
diff --git a/lib/components/search/Categories.vue b/lib/components/search/Categories.vue
new file mode 100644
index 000000000..676b92494
--- /dev/null
+++ b/lib/components/search/Categories.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="categories">
+    <slot />
+    <span
+      v-for="category in categories"
+      :key="category.name"
+      v-html="category.icon + formatCategory(category.name)"
+    />
+  </div>
+</template>
+<script setup>
+import { formatCategory } from '@/components/utils'
+</script>
+<script>
+export default {
+  name: 'Categories',
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    formatCategory,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.categories {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+
+  span ::v-deep {
+    display: flex;
+    flex-direction: row;
+    color: var(--color-icon);
+    align-items: center;
+
+    svg {
+      width: 1rem;
+      margin-right: 0.2rem;
+    }
+  }
+}
+</style>
diff --git a/lib/components/utils.js b/lib/components/utils.js
new file mode 100644
index 000000000..9f733103b
--- /dev/null
+++ b/lib/components/utils.js
@@ -0,0 +1,202 @@
+export const formatNumber = (number) => {
+  const x = +number
+  if (x >= 1000000) {
+    return (x / 1000000).toFixed(2).toString() + 'M'
+  } else if (x >= 10000) {
+    return (x / 1000).toFixed(1).toString() + 'K'
+  } else {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  }
+}
+
+export function formatMoney(number) {
+  const x = +number
+  if (x >= 1000000) {
+    return '$' + (x / 1000000).toFixed(2).toString() + 'M'
+  } else if (x >= 10000) {
+    return '$' + (x / 1000).toFixed(1).toString() + 'K'
+  } else {
+    return (
+      '$' +
+      x
+        .toFixed(2)
+        .toString()
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    )
+  }
+}
+
+export const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+export const capitalizeString = (name) => {
+  return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
+}
+
+export const formatWallet = (name) => {
+  if (name === 'paypal') {
+    return 'PayPal'
+  }
+  return capitalizeString(name)
+}
+
+export const formatProjectType = (name) => {
+  if (name === 'resourcepack') {
+    return 'Resource Pack'
+  } else if (name === 'datapack') {
+    return 'Data Pack'
+  }
+
+  return capitalizeString(name)
+}
+
+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'
+  } else if (name === 'path-tracing') {
+    return 'Path Tracing'
+  } else if (name === 'pbr') {
+    return 'PBR'
+  } else if (name === 'datapack') {
+    return 'Data Pack'
+  } else if (name === 'colored-lighting') {
+    return 'Colored Lighting'
+  } else if (name === 'optifine') {
+    return 'OptiFine'
+  }
+
+  return capitalizeString(name)
+}
+
+export const formatCategoryHeader = (name) => {
+  return capitalizeString(name)
+}
+
+export const formatProjectStatus = (name) => {
+  if (name === 'approved') {
+    return 'Listed'
+  } else if (name === 'processing') {
+    return 'Under review'
+  }
+
+  return capitalizeString(name)
+}
+
+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(', ')
+}
+
+export function cycleValue(value, values) {
+  const index = values.indexOf(value) + 1
+  return values[index % values.length]
+}
diff --git a/lib/index.js b/lib/index.js
index 1aab3243f..76bc50b04 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,8 +1,10 @@
 import * as components from './components'
+import FloatingVue from 'floating-vue'
 
 function install(app) {
   for (const key in components) {
     app.component(key, components[key])
+    app.use(FloatingVue)
   }
 }
 
diff --git a/package.json b/package.json
index b931efc6b..29a7108e7 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "dayjs": "^1.11.7",
+    "floating-vue": "^2.0.0-beta.20",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
@@ -31,12 +33,14 @@
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
+    "postcss": "^8.4.21",
+    "postcss-prefix-selector": "^1.16.0",
     "prettier": "^2.7.1",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "vite": "^4.0.0",
-    "vite-svg-loader": "^4.0.0",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-svg-loader": "^4.0.0",
     "vitepress": "^1.0.0-alpha.46"
   }
 }