Migrate to Nuxt 3 (#933)

* Migrate to Nuxt 3

* Update vercel config

* remove tsconfig comment

* Changelog experiment + working proj pages

* Fix package json

* Prevent vercel complaining

* fix deploy (hopefully)

* Tag generator

* Switch to yarn

* Vercel pls 🙏

* Fix tag generation bug

* Make (most) non-logged in pages work

* fix base build

* Linting + state

* Eradicate axios, make most user pages work

* Fix checkbox state being set incorrectly

* Make most things work

* Final stretch

* Finish (most) things

* Move to update model value

* Fix modal text getting blurred from transforms (#964)

* Adjust nav-link border radius when focused (#961)

* Transition between animation states on TextLogo (#955)

* Transition between animation states on TextLogo

* Remove unused refs

* Fixes from review

* Disable tabbing to pagination arrows when disabled (#972)

* Make position of the "no results" text on grid/gallery views consistent (fixes #963) (#965)

* Fix position of the "no results" text on grid view

* fix padding

* Remove extra margin on main page, fixes #957 (#959)

* Fix layout shift and placeholder line height (#973)

* Fix a lot of issues

* Fix more nuxt 3 issues

* fix not all versions showing up (temp)

* inline inter css file

* More nuxt 3 fixes

* [skip ci] broken- backup changes

* Change modpack warnings to blue instead of red (#991)

* Fix some hydration issues

* Update nuxt

* Fix some images not showing

* Add pagination to versions page + fix lag

* Make changelog page consistent with versions page

* sync before merge

* Delete old file

* Fix actions failing

* update branch

* Fixes navbar transition animation. (#1012)

* Fixes navbar transition animation.

* Fixes Y-axis animation. Fixes mobile menu. Removes highlightjs prop.

* Changes xss call to renderString.

* Fixes renderString call.

* Removes unnecessary styling.

* Reverts mobile nav change.

* Nuxt 3 Lazy Loading Search (#1022)

* Uses lazyFetch for results. onSearchChange refreshes. Adds loading circle.

* Removes console.log

* Preserves old page when paging.

* Diagnosing filtering bugs.

* Fix single facet filtering

* Implements useAuth in settings/account.

* tiny ssr fix

* Updating nuxt.config checklist.

* Implements useAuth in revenue, moneitzation, and dashboard index pages.

* Fixes setups.

* Eliminates results when path changes. Adds animated logo.

* Ensures loading animation renders on search page.

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

* Fix navigation issues

* Square button fix (#1023)

* Removes checklist from nuxt.config.

* Modifies Nuxt CI to build after linting.

* Fixes prettierignore file.

* bug fixes

* Update whitelist domains

* Page improvements, fix CLS

* Fix a lot of things

* Fix project type redirect

* Fix 404 errors

* Fix user settings + hydration error

* Final fixes

* fix(creator-section): border radius on icons not aligning with bg (#1027)

Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>

* Improvements to the mobile navbar (#984)

* Transition between animation states on TextLogo

* Remove unused refs

* Fixes from review

* Improvements to the mobile nav menu

* fix avatar alt text

* Nevermind, got confused for a moment

* Tab bar, menu layout improvements

* Highlight search icon when menu is open

* Update layouts/default.vue

Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com>

* Fix some issues

* Use caret instead

* Run prettier

* Add create a project

---------

Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

* Fix mobile menu issues

* More issues

* Fix lint

---------

Co-authored-by: Kaeden Murphy <kmurphy@kaedenmurphy.dev>
Co-authored-by: triphora <emmaffle@modrinth.com>
Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>
Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com>
Co-authored-by: Zachary Baird <zdb1994@yahoo.com>
Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com>
Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>

pages/dashboard/index.vue

@@ -6,11 +6,7 @@
         <div class="grid-display__item">
           <div class="label">Total downloads</div>
           <div class="value">
-            {{
-              $formatNumber(
-                $user.projects.reduce((agg, x) => agg + x.downloads, 0)
-              )
-            }}
+            {{ $formatNumber(user.projects.reduce((agg, x) => agg + x.downloads, 0)) }}
           </div>
           <span
             >from
@@ -27,11 +23,7 @@
         <div class="grid-display__item">
           <div class="label">Total followers</div>
           <div class="value">
-            {{
-              $formatNumber(
-                $user.projects.reduce((agg, x) => agg + x.followers, 0)
-              )
-            }}
+            {{ $formatNumber(user.projects.reduce((agg, x) => agg + x.followers, 0)) }}
           </div>
           <span>
             <span
@@ -49,7 +41,9 @@
         </div>
         <div class="grid-display__item">
           <div class="label">Total revenue</div>
-          <div class="value">{{ $formatMoney(payouts.all_time) }}</div>
+          <div class="value">
+            {{ $formatMoney(payouts.all_time) }}
+          </div>
           <span>{{ $formatMoney(payouts.last_month) }} this month</span>
           <!--          <NuxtLink class="goto-link" to="/dashboard/analytics"-->
           <!--            >View breakdown-->
@@ -61,17 +55,16 @@
         <div class="grid-display__item">
           <div class="label">Current balance</div>
           <div class="value">
-            {{ $formatMoney($auth.user.payout_data.balance) }}
+            {{ $formatMoney(auth.user.payout_data.balance) }}
           </div>
           <NuxtLink
-            v-if="$auth.user.payout_data.balance >= minWithdraw"
+            v-if="auth.user.payout_data.balance >= minWithdraw"
             class="goto-link"
             to="/dashboard/revenue"
-            >Withdraw earnings
-            <ChevronRightIcon
-              class="featured-header-chevron"
-              aria-hidden="true"
-          /></NuxtLink>
+          >
+            Withdraw earnings
+            <ChevronRightIcon class="featured-header-chevron" aria-hidden="true" />
+          </NuxtLink>
           <span v-else>${{ minWithdraw }} is the withdraw minimum</span>
         </div>
       </div>
@@ -79,55 +72,37 @@
     <section class="universal-card more-soon">
       <h2>More coming soon!</h2>
       <p>
-        Stay tuned for more metrics and analytics (pretty graphs, anyone? 👀)
-        coming to the creators dashboard soon!
+        Stay tuned for more metrics and analytics (pretty graphs, anyone? 👀) coming to the creators
+        dashboard soon!
       </p>
     </section>
   </div>
 </template>
+<script setup>
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
 
-<script>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?inline'
+useHead({
+  title: 'Creator dashboard - Modrinth',
+})
 
-export default {
-  components: { ChevronRightIcon },
-  async asyncData(data) {
-    const [payouts] = (
-      await Promise.all([
-        data.$axios.get(
-          `user/${data.$auth.user.id}/payouts`,
-          data.$defaultHeaders()
-        ),
-      ])
-    ).map((it) => it.data)
+const auth = await useAuth()
+const app = useNuxtApp()
 
-    payouts.all_time = Math.floor(payouts.all_time * 100) / 100
-    payouts.last_month = Math.floor(payouts.last_month * 100) / 100
+const [raw] = await Promise.all([
+  useBaseFetch(`user/${auth.value.user.id}/payouts`, app.$defaultHeaders()),
+])
+const user = await useUser()
 
-    return {
-      payouts,
-    }
-  },
-  data() {
-    return {
-      minWithdraw: 0.26,
-    }
-  },
-  fetch() {},
-  head: {
-    title: 'Creator dashboard - Modrinth',
-  },
-  computed: {
-    downloadsProjectCount() {
-      return this.$user.projects.filter((project) => project.downloads > 0)
-        .length
-    },
-    followersProjectCount() {
-      return this.$user.projects.filter((project) => project.followers > 0)
-        .length
-    },
-  },
-  methods: {},
-}
+raw.all_time = Math.floor(raw.all_time * 100) / 100
+raw.last_month = Math.floor(raw.last_month * 100) / 100
+
+const payouts = ref(raw)
+const minWithdraw = ref(0.26)
+
+const downloadsProjectCount = computed(
+  () => user.value.projects.filter((project) => project.downloads > 0).length
+)
+const followersProjectCount = computed(
+  () => user.value.projects.filter((project) => project.followers > 0).length
+)
 </script>
-<style lang="scss" scoped></style>