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>

plugins/1.state.js

@@ -0,0 +1,12 @@
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const authStore = await useAuth()
+  const userStore = await useUser(true)
+  const cosmeticsStore = useCosmetics()
+  const tagsStore = useTags()
+
+  nuxtApp.provide('auth', authStore.value)
+  nuxtApp.provide('user', userStore)
+  nuxtApp.provide('cosmetics', cosmeticsStore.value)
+  nuxtApp.provide('tag', tagsStore.value)
+  nuxtApp.provide('notify', (notif) => addNotification(notif))
+})

plugins/2.theme.js

@@ -0,0 +1,24 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const themeStore = useTheme()
+
+  if (process.client && themeStore.value.preference === 'system') {
+    setTimeout(() => {
+      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)
+    }, 100)
+  }
+
+  nuxtApp.provide('colorMode', themeStore.value)
+})

plugins/dayjs.js

@@ -0,0 +1,13 @@
+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 {
+    provide: {
+      dayjs,
+    },
+  }
+})

plugins/fileUtils.js

@@ -1,573 +0,0 @@
-import JSZip from 'jszip'
-import TOML from '@iarna/toml'
-import yaml from 'js-yaml'
-import { formatBytes } from '~/plugins/shorthands'
-
-/**
- * @param {File | Blob} file the file to validate
- * @param {{ maxSize: number, alertOnInvalid: boolean }} validationOptions the
- * constraints to validate the file against
- * @param validationOptions.maxSize the max file size in bytes
- * @param validationOptions.alertOnInvalid if an alert should pop up describing
- * each validation error
- * @returns `true` if the file is valid; `false` otherwise
- */
-export const fileIsValid = (file, validationOptions) => {
-  const { maxSize, alertOnInvalid } = validationOptions
-  if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
-    if (alertOnInvalid) {
-      alert(
-        `File ${file.name} is too big! Must be less than ${formatBytes(
-          maxSize
-        )}`
-      )
-    }
-    return false
-  }
-
-  return true
-}
-
-export const acceptFileFromProjectType = (projectType) => {
-  switch (projectType) {
-    case 'mod':
-      return '.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip'
-    case 'plugin':
-      return '.jar,.zip,application/java-archive,application/x-java-archive,application/zip'
-    case 'resourcepack':
-      return '.zip,application/zip'
-    case 'shader':
-      return '.zip,application/zip'
-    case 'datapack':
-      return '.zip,application/zip'
-    case 'modpack':
-      return '.mrpack,application/x-modrinth-modpack+zip,application/zip'
-    default:
-      return '*'
-  }
-}
-
-export const inferVersionInfo = async function (
-  rawFile,
-  project,
-  gameVersions
-) {
-  function versionType(number) {
-    if (number.includes('alpha')) {
-      return 'alpha'
-    } else if (
-      number.includes('beta') ||
-      number.match(/[^A-z](rc)[^A-z]/) || // includes `rc`
-      number.match(/[^A-z](pre)[^A-z]/) // includes `pre`
-    ) {
-      return 'beta'
-    } else {
-      return 'release'
-    }
-  }
-
-  // TODO: This func does not handle accurate semver parsing. We should eventually
-  function gameVersionRange(gameVersionString, gameVersions) {
-    if (!gameVersionString) {
-      return []
-    }
-
-    // Truncate characters after `-` & `+`
-    const gameString = gameVersionString.replace(/-|\+.*$/g, '')
-
-    let prefix = ''
-    if (gameString.includes('~')) {
-      // Include minor versions
-      // ~1.2.3 -> 1.2
-      prefix = gameString.replace('~', '').split('.').slice(0, 2).join('.')
-    } else if (gameString.includes('>=')) {
-      // Include minor versions
-      // >=1.2.3 -> 1.2
-      prefix = gameString.replace('>=', '').split('.').slice(0, 2).join('.')
-    } else if (gameString.includes('^')) {
-      // Include major versions
-      // ^1.2.3 -> 1
-      prefix = gameString.replace('^', '').split('.')[0]
-    } else if (gameString.includes('x')) {
-      // Include versions that match `x.x.x`
-      // 1.2.x -> 1.2
-      prefix = gameString.replace(/\.x$/, '')
-    } else {
-      // Include exact version
-      // 1.2.3 -> 1.2.3
-      prefix = gameString
-    }
-
-    const simplified = gameVersions
-      .filter((it) => it.version_type === 'release')
-      .map((it) => it.version)
-    return simplified.filter((version) => version.startsWith(prefix))
-  }
-
-  const inferFunctions = {
-    // Forge 1.13+
-    'META-INF/mods.toml': async (file, zip) => {
-      const metadata = TOML.parse(file)
-
-      // TODO: Parse minecraft version ranges, handle if version is set to value from manifest
-      if (metadata.mods && metadata.mods.length > 0) {
-        let versionNum = metadata.mods[0].version
-
-        // ${file.jarVersion} -> Implementation-Version from manifest
-        const manifestFile = zip.file('META-INF/MANIFEST.MF')
-        if (
-          // eslint-disable-next-line no-template-curly-in-string
-          metadata.mods[0].version.includes('${file.jarVersion}') &&
-          manifestFile !== null
-        ) {
-          const manifestText = await manifestFile.async('text')
-          const regex = /Implementation-Version: (.*)$/m
-          const match = manifestText.match(regex)
-          if (match) {
-            // eslint-disable-next-line no-template-curly-in-string
-            versionNum = versionNum.replace('${file.jarVersion}', match[1])
-          }
-        }
-
-        return {
-          name: `${project.title} ${versionNum}`,
-          version_number: versionNum,
-          version_type: versionType(versionNum),
-          loaders: ['forge'],
-        }
-      } else {
-        return {}
-      }
-    },
-    // Old Forge
-    'mcmod.info': (file) => {
-      const metadata = JSON.parse(file)
-
-      return {
-        name: metadata.version ? `${project.title} ${metadata.version}` : '',
-        version_number: metadata.version,
-        version_type: versionType(metadata.version),
-        loaders: ['forge'],
-        game_versions: gameVersions
-          .filter(
-            (x) =>
-              x.version.startsWith(metadata.mcversion) &&
-              x.version_type === 'release'
-          )
-          .map((x) => x.version),
-      }
-    },
-    // Fabric
-    'fabric.mod.json': (file) => {
-      const metadata = JSON.parse(file)
-
-      return {
-        name: `${project.title} ${metadata.version}`,
-        version_number: metadata.version,
-        loaders: ['fabric'],
-        version_type: versionType(metadata.version),
-        game_versions: metadata.depends
-          ? gameVersionRange(metadata.depends.minecraft, gameVersions)
-          : [],
-      }
-    },
-    // Quilt
-    'quilt.mod.json': (file) => {
-      const metadata = JSON.parse(file)
-
-      return {
-        name: `${project.title} ${metadata.quilt_loader.version}`,
-        version_number: metadata.quilt_loader.version,
-        loaders: ['quilt'],
-        version_type: versionType(metadata.quilt_loader.version),
-        game_versions: metadata.quilt_loader.depends
-          ? gameVersionRange(
-              metadata.quilt_loader.depends.find((x) => x.id === 'minecraft')
-                ? metadata.quilt_loader.depends.find(
-                    (x) => x.id === 'minecraft'
-                  ).versions
-                : [],
-              gameVersions
-            )
-          : [],
-      }
-    },
-    // Bukkit + Other Forks
-    'plugin.yml': (file) => {
-      const metadata = yaml.load(file)
-
-      return {
-        name: `${project.title} ${metadata.version}`,
-        version_number: metadata.version,
-        version_type: versionType(metadata.version),
-        // We don't know which fork of Bukkit users are using
-        loaders: [],
-        game_versions: gameVersions
-          .filter(
-            (x) =>
-              x.version.startsWith(metadata['api-version']) &&
-              x.version_type === 'release'
-          )
-          .map((x) => x.version),
-      }
-    },
-    // Bungeecord + Waterfall
-    'bungee.yml': (file) => {
-      const metadata = yaml.load(file)
-
-      return {
-        name: `${project.title} ${metadata.version}`,
-        version_number: metadata.version,
-        version_type: versionType(metadata.version),
-        loaders: ['bungeecord'],
-      }
-    },
-    // Modpacks
-    'modrinth.index.json': (file) => {
-      const metadata = JSON.parse(file)
-
-      const loaders = []
-      if ('forge' in metadata.dependencies) loaders.push('forge')
-      if ('fabric-loader' in metadata.dependencies) loaders.push('fabric')
-      if ('quilt-loader' in metadata.dependencies) loaders.push('quilt')
-
-      return {
-        name: `${project.title} ${metadata.versionId}`,
-        version_number: metadata.versionId,
-        version_type: versionType(metadata.versionId),
-        loaders,
-        game_versions: gameVersions
-          .filter((x) => x.version === metadata.dependencies.minecraft)
-          .map((x) => x.version),
-      }
-    },
-    // Resource Packs + Data Packs
-    'pack.mcmeta': (file) => {
-      const metadata = JSON.parse(file)
-
-      function getRange(versionA, versionB) {
-        const startingIndex = gameVersions.findIndex(
-          (x) => x.version === versionA
-        )
-        const endingIndex = gameVersions.findIndex(
-          (x) => x.version === versionB
-        )
-
-        const final = []
-        const filterOnlyRelease =
-          gameVersions[startingIndex].version_type === 'release'
-
-        for (let i = startingIndex; i >= endingIndex; i--) {
-          if (
-            gameVersions[i].version_type === 'release' ||
-            !filterOnlyRelease
-          ) {
-            final.push(gameVersions[i].version)
-          }
-        }
-
-        return final
-      }
-
-      const loaders = []
-      let newGameVersions = []
-
-      if (project.actualProjectType === 'mod') {
-        loaders.push('datapack')
-
-        switch (metadata.pack.pack_format) {
-          case 4:
-            newGameVersions = getRange('1.13', '1.14.4')
-            break
-          case 5:
-            newGameVersions = getRange('1.15', '1.16.1')
-            break
-          case 6:
-            newGameVersions = getRange('1.16.2', '1.16.5')
-            break
-          case 7:
-            newGameVersions = getRange('1.17', '1.17.1')
-            break
-          case 8:
-            newGameVersions = getRange('1.18', '1.18.1')
-            break
-          case 9:
-            newGameVersions.push('1.18.2')
-            break
-          case 10:
-            newGameVersions = getRange('1.19', '1.19.3')
-            break
-          default:
-        }
-      }
-
-      if (project.actualProjectType === 'resourcepack') {
-        loaders.push('minecraft')
-
-        switch (metadata.pack.pack_format) {
-          case 1:
-            newGameVersions = getRange('1.6.1', '1.8.9')
-            break
-          case 2:
-            newGameVersions = getRange('1.9', '1.10.2')
-            break
-          case 3:
-            newGameVersions = getRange('1.11', '1.12.2')
-            break
-          case 4:
-            newGameVersions = getRange('1.13', '1.14.4')
-            break
-          case 5:
-            newGameVersions = getRange('1.15', '1.16.1')
-            break
-          case 6:
-            newGameVersions = getRange('1.16.2', '1.16.5')
-            break
-          case 7:
-            newGameVersions = getRange('1.17', '1.17.1')
-            break
-          case 8:
-            newGameVersions = getRange('1.18', '1.18.2')
-            break
-          case 9:
-            newGameVersions = getRange('1.19', '1.19.2')
-            break
-          case 11:
-            newGameVersions = getRange('22w42a', '22w44a')
-            break
-          case 12:
-            newGameVersions.push('1.19.3')
-            break
-          default:
-        }
-      }
-
-      return {
-        loaders,
-        game_versions: newGameVersions,
-      }
-    },
-  }
-
-  const zipReader = new JSZip()
-
-  const zip = await zipReader.loadAsync(rawFile)
-
-  for (const fileName in inferFunctions) {
-    const file = zip.file(fileName)
-
-    if (file !== null) {
-      const text = await file.async('text')
-      return inferFunctions[fileName](text, zip)
-    }
-  }
-}
-
-export const createDataPackVersion = async function (
-  project,
-  version,
-  primaryFile,
-  members,
-  allGameVersions,
-  loaders
-) {
-  // force version to start with number, as required by FML
-  const newVersionNumber = version.version_number.match(/^\d/)
-    ? version.version_number
-    : `1-${version.version_number}`
-
-  const targetStartingDigitsRegex = /^(\d+)(\D+)$/g
-  const newSlug = `${project.slug
-    .replace('-', '_')
-    .replace(/\W/g, '')
-    .replace(targetStartingDigitsRegex, '$2')
-    .replace(/^(\d+)$/g, project.id.replace(targetStartingDigitsRegex, '$2'))
-    .substring(0, 63)}_mr`
-
-  const iconPath = `${project.slug}_pack.png`
-
-  const fabricModJson = {
-    schemaVersion: 1,
-    id: newSlug,
-    version: newVersionNumber,
-    name: project.title,
-    description: project.description,
-    authors: members.map((x) => x.name),
-    contact: {
-      homepage: `${process.env.domain}/${project.project_type}/${
-        project.slug ?? project.id
-      }`,
-    },
-    license: project.license.id,
-    icon: iconPath,
-    environment: '*',
-    depends: {
-      'fabric-resource-loader-v0': '*',
-    },
-  }
-
-  const quiltModJson = {
-    schema_version: 1,
-    quilt_loader: {
-      group: 'com.modrinth',
-      id: newSlug,
-      version: newVersionNumber,
-      metadata: {
-        name: project.title,
-        description: project.description,
-        contributors: members.reduce(
-          (acc, x) => ({
-            ...acc,
-            [x.name]: x.role,
-          }),
-          {}
-        ),
-        contact: {
-          homepage: `${process.env.domain}/${project.project_type}/${
-            project.slug ?? project.id
-          }`,
-        },
-        icon: iconPath,
-      },
-      intermediate_mappings: 'net.fabricmc:intermediary',
-      depends: [
-        {
-          id: 'quilt_resource_loader',
-          versions: '*',
-          unless: 'fabric-resource-loader-v0',
-        },
-      ],
-    },
-  }
-
-  const cutoffIndex = allGameVersions.findIndex((x) => x.version === '1.18.2')
-
-  let maximumIndex = Number.MIN_VALUE
-  for (const val of version.game_versions) {
-    const index = allGameVersions.findIndex((x) => x.version === val)
-    if (index > maximumIndex) {
-      maximumIndex = index
-    }
-  }
-
-  const newForge = maximumIndex < cutoffIndex
-
-  const forgeModsToml = {
-    modLoader: newForge ? 'lowcodefml' : 'javafml',
-    loaderVersion: newForge ? '[40,)' : '[25,)',
-    license: project.license.id,
-    showAsResourcePack: false,
-    mods: [
-      {
-        modId: newSlug,
-        version: newVersionNumber,
-        displayName: project.title,
-        description: project.description,
-        logoFile: iconPath,
-        updateJSONURL: `${process.env.authURLBase.replace(
-          '/v2/',
-          ''
-        )}/updates/${project.id}/forge_updates.json`,
-        credits: 'Generated by Modrinth',
-        authors: members.map((x) => x.name).join(', '),
-        displayURL: `${process.env.domain}/${project.project_type}/${
-          project.slug ?? project.id
-        }`,
-      },
-    ],
-  }
-
-  if (project.source_url) {
-    quiltModJson.quilt_loader.metadata.contact.sources = project.source_url
-    fabricModJson.contact.sources = project.source_url
-  }
-
-  if (project.issues_url) {
-    quiltModJson.quilt_loader.metadata.contact.issues = project.issues_url
-    fabricModJson.contact.issues = project.issues_url
-    forgeModsToml.issueTrackerURL = project.issues_url
-  }
-
-  const primaryFileData = await (await fetch(primaryFile.url)).blob()
-
-  const primaryZipReader = new JSZip()
-  await primaryZipReader.loadAsync(primaryFileData)
-
-  if (loaders.includes('fabric'))
-    primaryZipReader.file('fabric.mod.json', JSON.stringify(fabricModJson))
-  if (loaders.includes('quilt'))
-    primaryZipReader.file('quilt.mod.json', JSON.stringify(quiltModJson))
-  if (loaders.includes('forge'))
-    primaryZipReader.file('META-INF/mods.toml', TOML.stringify(forgeModsToml))
-
-  if (!newForge && loaders.includes('forge')) {
-    const classFile = new Uint8Array(
-      await (
-        await fetch(
-          'https://cdn.modrinth.com/wrapper/ModrinthWrapperRestiched.class'
-        )
-      ).arrayBuffer()
-    )
-
-    let binary = ''
-    for (let i = 0; i < classFile.byteLength; i++) {
-      binary += String.fromCharCode(classFile[i])
-    }
-
-    let sanitizedId = project.id
-
-    if (project.id.match(/^(\d+)/g)) {
-      sanitizedId = '_' + sanitizedId
-    }
-
-    sanitizedId = sanitizedId.substring(0, 8)
-
-    binary = binary
-      .replace(
-        String.fromCharCode(32) + 'needs1to1be1changed1modrinth1mod',
-        String.fromCharCode(newSlug.length) + newSlug
-      )
-      .replace('/wrappera/', `/${sanitizedId}/`)
-
-    const newArr = []
-    for (let i = 0; i < binary.length; i++) {
-      newArr.push(binary.charCodeAt(i))
-    }
-
-    primaryZipReader.file(
-      `com/modrinth/${sanitizedId}/ModrinthWrapper.class`,
-      new Uint8Array(newArr)
-    )
-  }
-
-  const resourcePack = version.files.find(
-    (x) => x.file_type === 'required-resource-pack'
-  )
-
-  const resourcePackData = resourcePack
-    ? await (await fetch(resourcePack.url)).blob()
-    : null
-
-  if (resourcePackData) {
-    const resourcePackReader = new JSZip()
-    await resourcePackReader.loadAsync(resourcePackData)
-
-    for (const [path, file] of Object.entries(resourcePackReader.files)) {
-      if (!primaryZipReader.file(path) && !path.includes('.mcassetsroot')) {
-        primaryZipReader.file(path, await file.async('uint8array'))
-      }
-    }
-  }
-
-  if (primaryZipReader.file('pack.png')) {
-    primaryZipReader.file(
-      iconPath,
-      await primaryZipReader.file('pack.png').async('uint8array')
-    )
-  }
-
-  return await primaryZipReader.generateAsync({
-    type: 'blob',
-    mimeType: 'application/java-archive',
-  })
-}

plugins/markdown.js

@@ -1,23 +0,0 @@
-import MarkdownIt from 'markdown-it'
-
-export default (ctx, inject) => {
-  const md = new MarkdownIt('default', {
-    html: true,
-    linkify: true,
-    breaks: false,
-  })
-
-  const defaultRender =
-    md.renderer.rules.link_open ||
-    function (tokens, idx, options, env, self) {
-      return self.renderToken(tokens, idx, options)
-    }
-
-  md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
-    tokens[idx].attrJoin('rel', 'noopener noreferrer ugc')
-
-    return defaultRender(tokens, idx, options, env, self)
-  }
-
-  inject('md', md)
-}

plugins/scroll.client.js

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  const nuxtApp = useNuxtApp()
+
+  nuxtApp.hooks.hook('page:transition:finish', () => {
+    document.querySelector('[data-scroll]')?.scrollTo({ top: 9 })
+  })
+})

plugins/shorthands.js

@@ -1,57 +1,44 @@
-export default (ctx, inject) => {
-  inject('user', ctx.store.state.user)
-  inject('tag', ctx.store.state.tag)
-  inject('auth', ctx.store.state.auth)
-  inject('cosmetics', ctx.store.state.cosmetics)
-  inject('defaultHeaders', () => {
+export default defineNuxtPlugin((nuxtApp) => {
+  const tagStore = nuxtApp.$tag
+  const authStore = nuxtApp.$auth
+
+  nuxtApp.provide('defaultHeaders', () => {
     const obj = { headers: {} }
 
     if (process.server && process.env.RATE_LIMIT_IGNORE_KEY) {
       obj.headers['x-ratelimit-key'] = process.env.RATE_LIMIT_IGNORE_KEY || ''
     }
 
-    if (ctx.store.state.auth.user) {
-      obj.headers.Authorization = ctx.store.state.auth.token
+    if (authStore.user) {
+      obj.headers.Authorization = authStore.token
     }
 
     return obj
   })
-  inject('formatNumber', formatNumber)
-  inject('capitalizeString', capitalizeString)
-  inject('formatMoney', formatMoney)
-  inject('formatVersion', (versionsArray) =>
-    formatVersions(versionsArray, ctx.store)
-  )
-  inject('orElse', (first, otherwise) => first ?? otherwise)
-  inject('external', () =>
-    ctx.store.state.cosmetics.externalLinksNewTab ? '_blank' : ''
-  )
-  inject('formatBytes', formatBytes)
-  inject('formatWallet', formatWallet)
-  inject('formatProjectType', formatProjectType)
-  inject('formatCategory', formatCategory)
-  inject('formatCategoryHeader', formatCategoryHeader)
-  inject('formatProjectStatus', formatProjectStatus)
-  inject('calculateDuplicates', (versions) =>
-    versions.map((version, index) => {
-      const nextVersion = versions[index + 1]
-      if (
-        nextVersion &&
-        version.changelog &&
-        nextVersion.changelog === version.changelog
-      ) {
-        return { duplicate: true, ...version }
-      } else {
-        return { duplicate: false, ...version }
-      }
-    })
-  )
-  inject('computeVersions', (versions) => {
+  nuxtApp.provide('formatNumber', formatNumber)
+  nuxtApp.provide('capitalizeString', capitalizeString)
+  nuxtApp.provide('formatMoney', formatMoney)
+  nuxtApp.provide('formatVersion', (versionsArray) => formatVersions(versionsArray, tagStore))
+  nuxtApp.provide('orElse', (first, otherwise) => first ?? otherwise)
+  nuxtApp.provide('external', () => {
+    const cosmeticsStore = useCosmetics().value
+
+    return cosmeticsStore.externalLinksNewTab ? '_blank' : ''
+  })
+  nuxtApp.provide('formatBytes', formatBytes)
+  nuxtApp.provide('formatWallet', formatWallet)
+  nuxtApp.provide('formatProjectType', formatProjectType)
+  nuxtApp.provide('formatCategory', formatCategory)
+  nuxtApp.provide('formatCategoryHeader', formatCategoryHeader)
+  nuxtApp.provide('formatProjectStatus', formatProjectStatus)
+  nuxtApp.provide('computeVersions', (versions, members) => {
     const visitedVersions = []
     const returnVersions = []
 
+    const authorMembers = {}
+
     for (const version of versions.sort(
-      (a, b) => ctx.$dayjs(a.date_published) - ctx.$dayjs(b.date_published)
+      (a, b) => nuxtApp.$dayjs(a.date_published) - nuxtApp.$dayjs(b.date_published)
     )) {
       if (visitedVersions.includes(version.version_number)) {
         visitedVersions.push(version.version_number)
@@ -60,28 +47,39 @@ export default (ctx, inject) => {
         visitedVersions.push(version.version_number)
         version.displayUrlEnding = version.version_number
       }
+      version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
+
+      version.author = authorMembers[version.author_id]
+      if (!version.author) {
+        version.author = members.find((x) => x.user.id === version.author_id)
+        authorMembers[version.author_id] = version.author
+      }
 
       returnVersions.push(version)
     }
 
     return returnVersions
       .reverse()
-      .sort(
-        (a, b) => ctx.$dayjs(b.date_published) - ctx.$dayjs(a.date_published)
-      )
+      .map((version, index) => {
+        const nextVersion = returnVersions[index + 1]
+        if (nextVersion && version.changelog && nextVersion.changelog === version.changelog) {
+          return { duplicate: true, ...version }
+        } else {
+          return { duplicate: false, ...version }
+        }
+      })
+      .sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published))
   })
-  inject('getProjectTypeForDisplay', (type, categories) => {
+  nuxtApp.provide('getProjectTypeForDisplay', (type, categories) => {
     if (type === 'mod') {
       const isPlugin = categories.some((category) => {
-        return ctx.store.state.tag.loaderData.allPluginLoaders.includes(
-          category
-        )
+        return tagStore.loaderData.allPluginLoaders.includes(category)
       })
       const isMod = categories.some((category) => {
-        return ctx.store.state.tag.loaderData.modLoaders.includes(category)
+        return tagStore.loaderData.modLoaders.includes(category)
       })
       const isDataPack = categories.some((category) => {
-        return ctx.store.state.tag.loaderData.dataPackLoaders.includes(category)
+        return tagStore.loaderData.dataPackLoaders.includes(category)
       })
 
       if (isMod && isPlugin && isDataPack) {
@@ -95,20 +93,18 @@ export default (ctx, inject) => {
 
     return type
   })
-  inject('getProjectTypeForUrl', (type, categories) => {
+  nuxtApp.provide('getProjectTypeForUrl', (type, categories) => {
     if (type === 'mod') {
       const isMod = categories.some((category) => {
-        return ctx.store.state.tag.loaderData.modLoaders.includes(category)
+        return tagStore.loaderData.modLoaders.includes(category)
       })
 
       const isPlugin = categories.some((category) => {
-        return ctx.store.state.tag.loaderData.allPluginLoaders.includes(
-          category
-        )
+        return tagStore.loaderData.allPluginLoaders.includes(category)
       })
 
       const isDataPack = categories.some((category) => {
-        return ctx.store.state.tag.loaderData.dataPackLoaders.includes(category)
+        return tagStore.loaderData.dataPackLoaders.includes(category)
       })
 
       if (isDataPack) {
@@ -124,29 +120,23 @@ export default (ctx, inject) => {
       return type
     }
   })
-  inject('cycleValue', cycleValue)
-  const sortedCategories = ctx.store.state.tag.categories
-    .slice()
-    .sort((a, b) => {
-      const headerCompare = a.header.localeCompare(b.header)
-      if (headerCompare !== 0) {
-        return headerCompare
-      }
-      if (a.header === 'resolutions' && b.header === 'resolutions') {
-        return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
-      } else if (
-        a.header === 'performance impact' &&
-        b.header === 'performance impact'
-      ) {
-        const x = ['potato', 'low', 'medium', 'high', 'screenshot']
-
-        return x.indexOf(a.name) - x.indexOf(b.name)
-      }
-      return 0
-    })
-  inject('sortedCategories', sortedCategories)
-}
+  nuxtApp.provide('cycleValue', cycleValue)
+  const sortedCategories = tagStore.categories.slice().sort((a, b) => {
+    const headerCompare = a.header.localeCompare(b.header)
+    if (headerCompare !== 0) {
+      return headerCompare
+    }
+    if (a.header === 'resolutions' && b.header === 'resolutions') {
+      return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
+    } else if (a.header === 'performance impact' && b.header === 'performance impact') {
+      const x = ['potato', 'low', 'medium', 'high', 'screenshot']
 
+      return x.indexOf(a.name) - x.indexOf(b.name)
+    }
+    return 0
+  })
+  nuxtApp.provide('sortedCategories', sortedCategories)
+})
 export const formatNumber = (number) => {
   const x = +number
   if (x >= 1000000) {
@@ -176,7 +166,9 @@ export const formatMoney = (number) => {
 }
 
 export const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) return '0 Bytes'
+  if (bytes === 0) {
+    return '0 Bytes'
+  }
 
   const k = 1024
   const dm = decimals < 0 ? 0 : decimals
@@ -258,8 +250,8 @@ export const formatProjectStatus = (name) => {
   return capitalizeString(name)
 }
 
-export const formatVersions = (versionArray, store) => {
-  const allVersions = store.state.tag.gameVersions.slice().reverse()
+export const formatVersions = (versionArray, tag) => {
+  const allVersions = tag.gameVersions.slice().reverse()
   const allReleases = allVersions.filter((x) => x.version_type === 'release')
 
   const intervals = []
@@ -267,9 +259,7 @@ export const formatVersions = (versionArray, store) => {
 
   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]
-    )
+    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
 
     if (i === 0) {
       intervals.push([[versionArray[i], index, releaseIndex]])
@@ -294,11 +284,7 @@ export const formatVersions = (versionArray, store) => {
   for (let i = 0; i < intervals.length; i++) {
     const interval = intervals[i]
 
-    if (
-      interval.length === 2 &&
-      interval[0][2] !== -1 &&
-      interval[1][2] === -1
-    ) {
+    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') {
@@ -307,17 +293,12 @@ export const formatVersions = (versionArray, store) => {
             [
               allVersions[j].version,
               j,
-              allReleases.findIndex(
-                (x) => x.version === allVersions[j].version
-              ),
+              allReleases.findIndex((x) => x.version === allVersions[j].version),
             ],
           ])
 
           if (lastSnapshot !== null && lastSnapshot !== j + 1) {
-            newIntervals.push([
-              [allVersions[lastSnapshot].version, lastSnapshot, -1],
-              interval[1],
-            ])
+            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
           } else {
             newIntervals.push([interval[1]])
           }

plugins/tooltip.js

@@ -0,0 +1,6 @@
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(FloatingVue)
+})

plugins/vue-notification.js

@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import Notifications from 'vue-notification/dist/ssr.js'
-
-Vue.use(Notifications)

plugins/vue-syntax.js

@@ -1,74 +0,0 @@
-import Vue from 'vue'
-import hljs from 'highlight.js/lib/core'
-// Scripting
-import javascript from 'highlight.js/lib/languages/javascript'
-import python from 'highlight.js/lib/languages/python'
-import lua from 'highlight.js/lib/languages/lua'
-// Coding
-import java from 'highlight.js/lib/languages/java'
-import kotlin from 'highlight.js/lib/languages/kotlin'
-import scala from 'highlight.js/lib/languages/scala'
-import groovy from 'highlight.js/lib/languages/groovy'
-// Configs
-import gradle from 'highlight.js/lib/languages/gradle'
-import json from 'highlight.js/lib/languages/json'
-import ini from 'highlight.js/lib/languages/ini'
-import yaml from 'highlight.js/lib/languages/yaml'
-import xml from 'highlight.js/lib/languages/xml'
-import properties from 'highlight.js/lib/languages/properties'
-
-/* REGISTRATION */
-// Scripting
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('python', python)
-hljs.registerLanguage('lua', lua)
-// Coding
-hljs.registerLanguage('java', java)
-hljs.registerLanguage('kotlin', kotlin)
-hljs.registerLanguage('scala', scala)
-hljs.registerLanguage('groovy', groovy)
-// Configs
-hljs.registerLanguage('gradle', gradle)
-hljs.registerLanguage('json', json)
-hljs.registerLanguage('ini', ini)
-hljs.registerLanguage('yaml', yaml)
-hljs.registerLanguage('xml', xml)
-hljs.registerLanguage('properties', properties)
-
-/* ALIASES */
-// Scripting
-hljs.registerAliases(['js'], 'javascript')
-hljs.registerAliases(['py'], 'python')
-// Coding
-hljs.registerAliases(['kt'], 'kotlin')
-// Configs
-hljs.registerAliases(['json5'], 'json')
-hljs.registerAliases(['toml'], 'ini')
-hljs.registerAliases(['yml'], 'yaml')
-hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], 'xml')
-
-Vue.directive('highlightjs', {
-  deep: true,
-  bind(el, binding) {
-    // on first bind, highlight all targets
-    const targets = el.querySelectorAll('pre > code')
-    targets.forEach((target) => {
-      // if a value is directly assigned to the directive, use this
-      // instead of the element content.
-      if (binding.value) {
-        target.textContent = binding.value
-      }
-      hljs.highlightBlock(target)
-    })
-  },
-  componentUpdated(el, binding) {
-    // after an update, re-fill the content and then highlight
-    const targets = el.querySelectorAll('pre > code')
-    targets.forEach((target) => {
-      if (binding.value) {
-        target.textContent = binding.value
-        hljs.highlightBlock(target)
-      }
-    })
-  },
-})

plugins/vue-tooltip.js

@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import VTooltip from 'v-tooltip'
-
-Vue.use(VTooltip)

plugins/xss.js

@@ -1,54 +0,0 @@
-import xss from 'xss'
-
-/**
- * @type {import('xss').IFilterXSSOptions}
- */
-const options = {
-  whiteList: {
-    ...xss.whiteList,
-    summary: [],
-    h1: ['id'],
-    h2: ['id'],
-    h3: ['id'],
-    h4: ['id'],
-    h5: ['id'],
-    h6: ['id'],
-    kbd: ['id'],
-    input: ['checked', 'disabled', 'type'],
-    iframe: ['width', 'height', 'allowfullscreen', 'frameborder'],
-    img: [...xss.whiteList.img, 'style'],
-    a: [...xss.whiteList.a, 'rel'],
-  },
-  css: {
-    whiteList: {
-      'image-rendering': /^pixelated$/,
-    },
-  },
-  onIgnoreTagAttr: (tag, name, value) => {
-    // Allow iframes from acceptable sources
-    if (tag === 'iframe' && name === 'src') {
-      const allowedSources = [
-        {
-          regex:
-            /^https?:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/[a-zA-Z0-9_-]{11}(\?&autoplay=[0-1]{1})?$/,
-          remove: ['&autoplay=1'], // Prevents autoplay
-        },
-      ]
-
-      for (const source of allowedSources) {
-        if (source.regex.test(value)) {
-          for (const remove of source.remove) {
-            value = value.replace(remove, '')
-          }
-          return name + '="' + xss.escapeAttrValue(value) + '"'
-        }
-      }
-    }
-  },
-}
-
-const configuredXss = new xss.FilterXSS(options)
-
-export default (ctx, inject) => {
-  inject('xss', (string) => configuredXss.process(string))
-}