Bump Nuxt + Minor Fixes (#1065)

* Bump Nuxt + Minor Fixes

* Run lint

assets/styles/global.scss

@@ -95,8 +95,8 @@ html {
 
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
 
-  --landing-maze-bg: url('https://cdn.modrinth.com/landing/landing-light.png');
-  --landing-maze-gradient-bg: url('https://cdn.modrinth.com/landing/landing-lower-light.png');
+  --landing-maze-bg: url('https://cdn.modrinth.com/landing-new/landing-light.webp');
+  --landing-maze-gradient-bg: url('https://cdn.modrinth.com/landing-new/landing-lower-light.webp');
   --landing-maze-outer-bg: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
 
   --landing-color-heading: #000;
@@ -221,9 +221,9 @@ html {
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
-  --landing-maze-bg: url('https://cdn.modrinth.com/landing/landing.png');
+  --landing-maze-bg: url('https://cdn.modrinth.com/landing-new/landing.webp');
   --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
-    url('https://cdn.modrinth.com/landing/landing-lower.png');
+    url('https://cdn.modrinth.com/landing-new/landing-lower.webp');
   --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
 
   --landing-color-heading: #fff;

helpers/infer.js

@@ -58,9 +58,9 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
   const inferFunctions = {
     // Forge 1.13+
     'META-INF/mods.toml': async (file, zip) => {
-      const metadata = TOML.parse(file)
+      const metadata = TOML.parse(file, { joiner: '\n' })
 
-      // TODO: Parse minecraft version ranges, handle if version is set to value from manifest
+      // TODO: Parse minecraft version ranges
       if (metadata.mods && metadata.mods.length > 0) {
         let versionNum = metadata.mods[0].version
 

layouts/default.vue

@@ -431,9 +431,7 @@ export default defineNuxtComponent({
           },
         })
           .then(() => {})
-          .catch((e) => {
-            console.error('An error occurred while registering the visit: ', e)
-          })
+          .catch(() => {})
       })
     },
     toggleMobileMenu() {

package.json

@@ -17,7 +17,7 @@
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
-    "nuxt": "^3.2.3",
+    "nuxt": "^3.3.2",
     "prettier": "^2.8.3",
     "sass": "^1.58.0",
     "typescript": "^4.9.5",

pages/[type]/[id].vue

@@ -196,7 +196,7 @@
               {{ project.description }}
             </p>
             <Categories
-              :categories="project.categories"
+              :categories="project.categories.concat(project.additional_categories)"
               :type="project.actualProjectType"
               class="categories"
             >

pages/index.vue

@@ -199,13 +199,13 @@
             <div class="launcher-view">
               <img
                 v-if="$colorMode.value === 'light'"
-                src="https://cdn.modrinth.com/landing/launcher-light.png"
+                src="https://cdn.modrinth.com/landing-new/launcher-light.webp"
                 alt="launcher graphic"
                 class="minecraft-screen"
               />
               <img
                 v-else
-                src="https://cdn.modrinth.com/landing/launcher.png"
+                src="https://cdn.modrinth.com/landing-new/launcher.webp"
                 alt="launcher graphic"
                 class="minecraft-screen"
               />
@@ -224,7 +224,12 @@
                   class="graphic gradient-border"
                   title="MultiMC"
                 >
-                  <img src="~/assets/images/external/multimc.png" alt="multimc launcher logo" />
+                  <img
+                    src="~/assets/images/external/multimc.webp"
+                    alt="multimc launcher logo"
+                    width="68"
+                    height="68"
+                  />
                 </a>
                 <a
                   rel="noopener"
@@ -530,7 +535,7 @@ const [
   { data: searchProjects, refresh: updateSearchProjects },
   { data: notifications },
 ] = await Promise.all([
-  useAsyncData('projects', () => useBaseFetch('projects_random?count=70'), {
+  useAsyncData('projects', () => useBaseFetch('projects_random?count=40'), {
     transform: (result) => {
       const val = Math.ceil(result.length / 3)
 
@@ -651,7 +656,7 @@ const [
         display: flex;
         min-width: 100%;
         gap: var(--gap);
-        animation: scroll 100s linear infinite;
+        animation: scroll 40s linear infinite;
 
         @media (prefers-reduced-motion) {
           animation-play-state: paused !important;
@@ -667,7 +672,7 @@ const [
         }
 
         &.offset {
-          animation: scroll-inverse 100s linear infinite;
+          animation: scroll-inverse 40s linear infinite;
           transform: translateX(-100%);
 
           @keyframes scroll-inverse {
@@ -932,6 +937,7 @@ const [
           .minecraft-screen {
             width: 100%;
             border-radius: 0.5rem;
+            aspect-ratio: 530 / 303;
           }
 
           .launcher-graphics {

pages/moderation.vue

@@ -193,7 +193,7 @@ export default defineNuxtComponent({
     )
 
     return {
-      projects: shallowRef(projects),
+      projects: shallowRef(projects.sort((a, b) => data.$dayjs(a.queued) - data.$dayjs(b.queued))),
       reports: ref(newReports),
     }
   },

plugins/1.theme.js

@@ -1,24 +1,23 @@
 export default defineNuxtPlugin((nuxtApp) => {
   const themeStore = useTheme()
 
-  // TODO: Temporarily removed as it was causing hydration issues
-  // nuxtApp.hook('app:mounted', () => {
-  //   if (process.client && themeStore.value.preference === 'system') {
-  //     const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
-  //
-  //     const setColorScheme = (e) => {
-  //       if (themeStore.value.preference === 'system') {
-  //         if (e.matches) {
-  //           updateTheme('light')
-  //         } else {
-  //           updateTheme('dark')
-  //         }
-  //       }
-  //     }
-  //
-  //     setColorScheme(colorSchemeQueryList)
-  //     colorSchemeQueryList.addEventListener('change', setColorScheme)
-  //   }
-  // })
+  nuxtApp.hook('app:mounted', () => {
+    if (process.client && themeStore.value.preference === 'system') {
+      const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
+
+      const setColorScheme = (e) => {
+        if (themeStore.value.preference === 'system') {
+          if (e.matches) {
+            updateTheme('light')
+          } else {
+            updateTheme('dark')
+          }
+        }
+      }
+
+      setColorScheme(colorSchemeQueryList)
+      colorSchemeQueryList.addEventListener('change', setColorScheme)
+    }
+  })
   nuxtApp.provide('colorMode', themeStore.value)
 })

plugins/dayjs.js

@@ -1,8 +1,4 @@
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-
-// eslint-disable-next-line import/no-named-as-default-member
-dayjs.extend(relativeTime)
 
 export default defineNuxtPlugin(() => {
   return {

plugins/shorthands.js

@@ -52,6 +52,20 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
       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)