Modpack alpha release (#469)

assets/styles/global.scss

@@ -71,6 +71,9 @@ html {
   --color-badge-yellow-text: #755920;
   --color-badge-yellow-bg: #f7bb43;
 
+  --color-warning-text: hsl(358, 57%, 20%);
+  --color-warning-bg: hsl(358, 57%, 80%);
+
   --color-block-quote: var(--color-tooltip-bg);
   --color-header-underline: var(--color-tooltip-text);
   --color-hr: var(--color-text);
@@ -149,6 +152,9 @@ html {
   --color-badge-yellow-text: #dba22d;
   --color-badge-yellow-bg: #f7bb43;
 
+  --color-warning-text: hsl(358, 57%, 85%);
+  --color-warning-bg: hsl(358, 57%, 25%);
+
   --color-block-quote: var(--color-code-bg);
   --color-header-underline: var(--color-tooltip-text);
   --color-hr: var(--color-text);

components/ui/ProjectCard.vue

@@ -56,7 +56,11 @@
           <p class="description">
             {{ description }}
           </p>
-          <Categories :categories="categories" class="right-categories" />
+          <Categories
+            :categories="categories"
+            :type="type"
+            class="right-categories"
+          />
           <div class="dates">
             <div class="date">
               <CalendarIcon aria-hidden="true" />

components/ui/search/Categories.vue

@@ -18,12 +18,20 @@ export default {
         return []
       },
     },
+    type: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     categoriesFiltered() {
       return this.$tag.categories
         .concat(this.$tag.loaders)
-        .filter((x) => this.categories.includes(x.name))
+        .filter(
+          (x) =>
+            this.categories.includes(x.name) &&
+            (!x.project_type || x.project_type === this.type)
+        )
     },
   },
 }

layouts/default.vue

@@ -13,9 +13,9 @@
               <NuxtLink to="/mods" class="tab">
                 <span>Mods</span>
               </NuxtLink>
-              <!--              <NuxtLink to="/modpacks" class="tab">
+              <NuxtLink to="/modpacks" class="tab tab--alpha">
                 <span>Modpacks</span>
-              </NuxtLink>-->
+              </NuxtLink>
             </div>
           </section>
           <section class="column-grow user-outer" aria-label="Account links">
@@ -505,6 +505,18 @@ export default {
             a.tab {
               padding: 0;
               margin-right: 1rem;
+              display: flex;
+              align-items: flex-start;
+
+              &--alpha::after {
+                content: 'Alpha';
+                background-color: var(--color-warning-bg);
+                color: var(--color-warning-text);
+                border-radius: 1rem;
+                padding: 0.25rem 0.5rem;
+                margin-left: 0.4rem;
+                font-size: 0.7rem;
+              }
             }
           }
         }

middleware/analytics.js

@@ -1,4 +1,6 @@
 export default function (context) {
+  // Temporary disable analytics
+  /*
   if (process.client && context.from.path === context.route.path) {
     return
   }
@@ -19,4 +21,5 @@ export default function (context) {
         console.error('An error occurred while registering the visit: ', e)
       })
   })
+  */
 }

nuxt.config.js

@@ -228,7 +228,7 @@ export default {
    ** See https://axios.nuxtjs.org/options
    */
   axios: {
-    baseURL: 'https://staging-api.modrinth.com/v2/',
+    baseURL: 'https://api.modrinth.com/v2/',
     headers: {
       common: {
         Accept: 'application/json',

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "knossos",
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.1",

pages/_type/_id.vue

@@ -71,7 +71,11 @@
         <p class="description">
           {{ project.description }}
         </p>
-        <Categories :categories="project.categories" class="categories" />
+        <Categories
+          :categories="project.categories"
+          :type="project.project_type"
+          class="categories"
+        />
         <hr class="card-divider" />
         <div class="stats">
           <span class="stat">{{ $formatNumber(project.downloads) }}</span>

pages/search.vue

@@ -141,6 +141,28 @@
       </section>
     </aside>
     <section class="normal-page__content">
+      <div v-if="projectType === 'modpack'" class="card warning">
+        Modpack support is currently in alpha, and you may encounter issues. Our
+        documentation includes instructions on
+        <a
+          href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/"
+          target="_blank"
+          >playing modpacks</a
+        >
+        with
+        <a href="https://atlauncher.com/about" target="_blank">ATLauncher</a>
+        and <a href="https://multimc.org/" target="_blank">MultiMC</a>. Pack
+        creators can reference our documentation on
+        <a
+          href="https://docs.modrinth.com/docs/modpacks/creating_modpacks/"
+          target="_blank"
+          >creating modpacks</a
+        >. Join us on
+        <a href="https://rewrite.modrinth.com/discord" target="_blank"
+          >Discord</a
+        >
+        for support.
+      </div>
       <div class="card search-controls">
         <div class="iconified-input">
           <label class="hidden" for="search">Search</label>
@@ -602,6 +624,19 @@ export default {
   margin: 1.5rem 0 0.5rem 0;
 }
 
+.warning {
+  padding: 1.5rem;
+  line-height: 1.5;
+  background-color: var(--color-warning-bg);
+  color: var(--color-warning-text);
+
+  a {
+    /* Uses active color to increase contrast */
+    color: var(--color-link-active);
+    text-decoration: underline;
+  }
+}
+
 .search-controls {
   display: flex;
   flex-direction: row;