Bump nuxt version (#1093)

* Bump nuxt version * tests * bump again * fix modals
2023-04-13 15:27:41 -07:00
parent 5fd3a45c64
commit 4398563b85
8 changed files with 507 additions and 393 deletions
--- a/components/ui/Modal.vue
+++ b/components/ui/Modal.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div v-if="shown">
    <div
      :class="{
-        shown: shown,
+        shown: actuallyShown,
        noblur: !$orElse($cosmetics.advancedRendering, true),
      }"
      class="modal-overlay"
      @click="hide"
    />
-    <div class="modal-container" :class="{ shown }">
+    <div class="modal-container" :class="{ shown: actuallyShown }">
      <div class="modal-body">
        <div v-if="header" class="header">
          <h1>{{ header }}</h1>
@@ -22,6 +22,7 @@
      </div>
    </div>
  </div>
+  <div v-else />
 </template>

 <script>
@@ -40,14 +41,21 @@ export default {
  data() {
    return {
      shown: false,
+      actuallyShown: false,
    }
  },
  methods: {
    show() {
      this.shown = true
+      setTimeout(() => {
+        this.actuallyShown = true
+      }, 50)
    },
    hide() {
-      this.shown = false
+      this.actuallyShown = false
+      setTimeout(() => {
+        this.shown = false
+      }, 300)
    },
  },
 }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -135,6 +135,7 @@ export default defineNuxtConfig({
  },
  vite: {
    plugins: [
+      eslintPlugin(),
      svgLoader({
        svgoConfig: {
          plugins: [
@@ -149,7 +150,6 @@ export default defineNuxtConfig({
          ],
        },
      }),
-      eslintPlugin(),
    ],
  },
  dayjs: {
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
    "eslint": "^8.33.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-vue": "^9.9.0",
-    "nuxt": "^3.3.3",
+    "nuxt": "^3.4.1",
    "prettier": "^2.8.3",
    "sass": "^1.58.0",
    "typescript": "^4.9.5",
--- a/pages/[type]/[id].vue
+++ b/pages/[type]/[id].vue
@@ -132,6 +132,7 @@
      />
    </Head>
    <ModalModeration
+      v-if="$auth.user"
      ref="modalModeration"
      :project="project"
      :status="moderationStatus"
--- a/pages/[type]/[id]/gallery.vue
+++ b/pages/[type]/[id]/gallery.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <Head>
-      <Title> {{ project.title }} - Gallery </Title>
+      <Title>{{ project.title }} - Gallery</Title>
      <Meta name="og:title" :content="`${project.title} - Gallery`" />
      <Meta name="description" :content="metaDescription" />
      <Meta name="apple-mobile-web-app-title" :content="`${project.title} - Gallery`" />
--- a/pages/search/[searchProjectType].vue
+++ b/pages/search/[searchProjectType].vue
@@ -6,6 +6,16 @@
      'alt-layout': $cosmetics.searchLayout,
    }"
  >
+    <Head>
+      <Title>Search {{ $formatProjectType(projectType.display) }}s - Modrinth</Title>
+      <Meta name="og:title" :content="`Search ${$formatProjectType(projectType.display)}s`" />
+      <Meta name="description" :content="metaDescription" />
+      <Meta
+        name="apple-mobile-web-app-title"
+        :content="`Search ${$formatProjectType(projectType.display)}s`"
+      />
+      <Meta name="og:description" :content="metaDescription" />
+    </Head>
    <aside
      :class="{
        'normal-page__sidebar': true,
@@ -406,6 +416,14 @@ export default defineNuxtComponent({
    const currentPage = ref(1)
    const projectType = ref({ id: 'mod', display: 'mod', actual: 'mod' })

+    const metaDescription = computed(
+      () =>
+        `Search and browse thousands of Minecraft ${data.$formatProjectType(
+          projectType.value.display
+        )}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${data.$formatProjectType(
+          projectType.value.display
+        )}s.`
+    )
    if (route.query.q) {
      query.value = route.query.q
    }
@@ -676,6 +694,7 @@ export default defineNuxtComponent({
      getSearchUrl,
      searchLoading,
      noLoad,
+      metaDescription,
    }
  },
  computed: {
--- a/plugins/1.theme.js
+++ b/plugins/1.theme.js
@@ -1,24 +1,24 @@
 export default defineNuxtPlugin((nuxtApp) => {
  const themeStore = useTheme()

-  // 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)
 })
--- a/yarn.lock
+++ b/yarn.lock