From 732f88ff51a50a7a6fcaac473c525c2336f18ebe Mon Sep 17 00:00:00 2001
From: Mikhail Oleynikov <falseresync@gmail.com>
Date: Sat, 6 May 2023 22:17:43 +0300
Subject: [PATCH] Renovate config files (#1117)

* Renovate the config files

* Return Vue and TS ESLint plugins

* Revert Prettier config
Add typing to ESLint config
Re-revert package.json

* Re-add ESLint plugin for Prettier
(it went missing during merge, oops)

* Try to fix CI by explicit dependency

* Try to fix CI by explicit dependency x2

* Try to fix CI magically
Additionally, remove unneeded jsconfig.json

* Brawaru found the reason

Co-authored-by: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>

---------

Co-authored-by: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
---
 .eslintrc.js                                |  18 ++
 .eslintrc.json                              |  27 ---
 app.vue                                     |   2 +-
 components/ui/ModalReport.vue               |   4 +-
 components/ui/VersionFilterControl.vue      |   2 +-
 components/ui/modrinth-loading-indicator.ts |   2 +-
 jsconfig.json                               |  12 --
 nuxt.config.js => nuxt.config.ts            | 218 +++++++-------------
 package.json                                |   9 +-
 pages/[type]/[id]/settings/index.vue        |   2 +-
 pages/[type]/[id]/settings/links.vue        |   2 +-
 pages/[type]/[id]/version/[version].vue     |   2 +-
 pages/dashboard/projects.vue                |   2 +-
 pages/index.vue                             |   2 +-
 pages/search/[searchProjectType].vue        |   2 +-
 pages/settings/index.vue                    |   2 +-
 pages/settings/monetization.vue             |   2 +-
 17 files changed, 109 insertions(+), 201 deletions(-)
 create mode 100644 .eslintrc.js
 delete mode 100644 .eslintrc.json
 delete mode 100644 jsconfig.json
 rename nuxt.config.js => nuxt.config.ts (50%)

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..feb2388ad
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,18 @@
+// @ts-check
+/** @type {import("eslint").ESLint.ConfigData} */
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    '@nuxtjs/eslint-config-typescript',
+    'plugin:prettier/recommended', // Integrate Prettier into ESLint
+    'prettier', // Disable unnecessary ESLint rules in the presence of Prettier
+  ],
+  rules: {
+    'no-console': 'off',
+    'vue/no-v-html': 'off',
+    'vue/multi-word-component-names': 'off',
+  },
+}
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 39000e5c6..000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:vue/vue3-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "@nuxtjs/eslint-config-typescript",
-    "prettier"
-  ],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "parser": "@typescript-eslint/parser",
-    "sourceType": "module"
-  },
-  "plugins": ["vue", "@typescript-eslint"],
-  "rules": {
-    "no-console": "off",
-    "vue/no-v-html": "off",
-    "comma-dangle": ["error", "only-multiline"],
-    "vue/multi-word-component-names": "off",
-    "import/no-named-as-default": "off"
-  }
-}
diff --git a/app.vue b/app.vue
index c3c274ec2..78ee6e8ae 100644
--- a/app.vue
+++ b/app.vue
@@ -7,5 +7,5 @@
 </template>
 <script setup lang="ts">
 import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator'
-import Notifications from '~/components/ui/Notifications'
+import Notifications from '~/components/ui/Notifications.vue'
 </script>
diff --git a/components/ui/ModalReport.vue b/components/ui/ModalReport.vue
index 37132c044..3febfb054 100644
--- a/components/ui/ModalReport.vue
+++ b/components/ui/ModalReport.vue
@@ -20,7 +20,7 @@
           <strong>Reason</strong>
         </span>
       </label>
-      <multiselect
+      <Multiselect
         id="report-type"
         v-model="reportType"
         :options="$tag.reportTypes"
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import CrossIcon from '~/assets/images/utils/x.svg'
 import CheckIcon from '~/assets/images/utils/check.svg'
 import Modal from '~/components/ui/Modal'
diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue
index c470af9fd..b69abf08d 100644
--- a/components/ui/VersionFilterControl.vue
+++ b/components/ui/VersionFilterControl.vue
@@ -84,7 +84,7 @@
 </template>
 
 <script setup>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox'
 import ClearIcon from '~/assets/images/utils/clear.svg'
 
diff --git a/components/ui/modrinth-loading-indicator.ts b/components/ui/modrinth-loading-indicator.ts
index bf521ee37..ed6c67147 100644
--- a/components/ui/modrinth-loading-indicator.ts
+++ b/components/ui/modrinth-loading-indicator.ts
@@ -42,7 +42,7 @@ export default defineComponent({
 
     const loading = useLoading()
 
-    watch(loading, (newValue, _oldValue) => {
+    watch(loading, (newValue) => {
       if (newValue) {
         indicator.start()
       } else {
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index 29037a628..000000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"],
-      "@/*": ["./*"],
-      "~~/*": ["./*"],
-      "@@/*": ["./*"]
-    }
-  },
-  "exclude": ["node_modules", ".nuxt", "dist"]
-}
diff --git a/nuxt.config.js b/nuxt.config.ts
similarity index 50%
rename from nuxt.config.js
rename to nuxt.config.ts
index c9862bc64..5d7d6038d 100644
--- a/nuxt.config.js
+++ b/nuxt.config.ts
@@ -1,6 +1,5 @@
 import { promises as fs } from 'fs'
 import svgLoader from 'vite-svg-loader'
-import eslintPlugin from 'vite-plugin-eslint'
 import { resolve } from 'pathe'
 import { defineNuxtConfig } from 'nuxt/config'
 import { $fetch } from 'ofetch'
@@ -8,6 +7,38 @@ import { $fetch } from 'ofetch'
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
 const STAGING_ARIADNE_URL = 'https://staging-ariadne.modrinth.com/v1/'
 
+const preloadedFonts = [
+  'inter/Inter-Regular.woff2',
+  'inter/Inter-Medium.woff2',
+  'inter/Inter-SemiBold.woff2',
+  'inter/Inter-Bold.woff2',
+]
+
+const favicons = {
+  '(prefers-color-scheme:no-preference)': '/favicon-light.ico',
+  '(prefers-color-scheme:light)': '/favicon-light.ico',
+  '(prefers-color-scheme:dark)': '/favicon.ico',
+}
+
+const meta = {
+  description:
+    'Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. Discover and publish projects on Modrinth with a modern, easy to use interface and API.',
+  publisher: 'Rinth, Inc.',
+  'apple-mobile-web-app-title': 'Modrinth',
+  'theme-color': '#1bd96a',
+  'color-scheme': 'dark light',
+  // OpenGraph
+  'og:title': 'Modrinth',
+  'og:site_name': 'Modrinth',
+  'og:description': 'An open source modding platform',
+  'og:type': 'website',
+  'og:url': 'https://modrinth.com',
+  'og:image': 'https://cdn.modrinth.com/modrinth-new.png?',
+  // Twitter
+  'twitter:card': 'summary',
+  'twitter:site': '@modrinth',
+}
+
 export default defineNuxtConfig({
   app: {
     head: {
@@ -15,108 +46,23 @@ export default defineNuxtConfig({
         lang: 'en',
       },
       title: 'Modrinth',
-      meta: [
-        {
-          name: 'description',
-          content:
-            'Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. Discover and publish projects on Modrinth with a modern, easy to use interface and API.',
-        },
-        {
-          name: 'publisher',
-          content: 'Rinth, Inc.',
-        },
-        {
-          name: 'og:title',
-          content: 'Modrinth',
-        },
-        {
-          name: 'apple-mobile-web-app-title',
-          content: 'Modrinth',
-        },
-        {
-          name: 'theme-color',
-          content: '#1bd96a',
-        },
-        {
-          name: 'color-scheme',
-          content: 'dark light',
-        },
-        {
-          name: 'og:site_name',
-          content: 'Modrinth',
-        },
-        {
-          name: 'og:description',
-          content: 'An open source modding platform',
-        },
-        {
-          name: 'og:type',
-          content: 'website',
-        },
-        {
-          name: 'og:url',
-          content: 'https://modrinth.com',
-        },
-        {
-          name: 'og:image',
-          content: 'https://cdn.modrinth.com/modrinth-new.png?',
-        },
-        {
-          name: 'twitter:card',
-          content: 'summary',
-        },
-        {
-          name: 'twitter:site',
-          content: '@modrinth',
-        },
-      ],
+      meta: Object.entries(meta).map(([name, content]): object => {
+        return { name, content }
+      }),
       link: [
-        {
-          rel: 'preload',
-          href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: true,
-        },
-        {
-          rel: 'preload',
-          href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: true,
-        },
-        {
-          rel: 'preload',
-          href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: true,
-        },
-        {
-          rel: 'preload',
-          href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19',
-          as: 'font',
-          type: 'font/woff2',
-          crossorigin: true,
-        },
-        {
-          rel: 'icon',
-          type: 'image/x-icon',
-          href: '/favicon-light.ico',
-          media: '(prefers-color-scheme:no-preference)',
-        },
-        {
-          rel: 'icon',
-          type: 'image/x-icon',
-          href: '/favicon.ico',
-          media: '(prefers-color-scheme:dark)',
-        },
-        {
-          rel: 'icon',
-          type: 'image/x-icon',
-          href: '/favicon-light.ico',
-          media: '(prefers-color-scheme:light)',
-        },
+        // The type is necessary because the linter can't always compare this very nested/complex type on itself
+        ...preloadedFonts.map((font): object => {
+          return {
+            rel: 'preload',
+            href: `https://cdn-raw.modrinth.com/fonts/${font}?v=3.19`,
+            as: 'font',
+            type: 'font/woff2',
+            crossorigin: 'anonymous',
+          }
+        }),
+        ...Object.entries(favicons).map(([media, href]): object => {
+          return { rel: 'icon', type: 'image/x-icon', href, media }
+        }),
         {
           rel: 'search',
           type: 'application/opensearchdescription+xml',
@@ -128,7 +74,6 @@ export default defineNuxtConfig({
   },
   vite: {
     plugins: [
-      eslintPlugin(),
       svgLoader({
         svgoConfig: {
           plugins: [
@@ -145,17 +90,20 @@ export default defineNuxtConfig({
       }),
     ],
   },
-  dayjs: {
-    locales: ['en'],
-    defaultLocale: 'en',
-    plugins: ['relativeTime'],
-  },
   hooks: {
     async 'build:before'() {
       // 30 minutes
       const TTL = 30 * 60 * 1000
 
-      let state = {}
+      let state: {
+        lastGenerated?: string
+        apiUrl?: string
+        categories?: any[]
+        loaders?: any[]
+        gameVersions?: any[]
+        donationPlatforms?: any[]
+        reportTypes?: any[]
+      } = {}
       try {
         state = JSON.parse(await fs.readFile('./generated/state.json', 'utf8'))
       } catch {
@@ -170,7 +118,6 @@ export default defineNuxtConfig({
         state.lastGenerated &&
         new Date(state.lastGenerated).getTime() + TTL > new Date().getTime() &&
         // ...but only if the API URL is the same
-        state.apiUrl &&
         state.apiUrl === API_URL
       ) {
         return
@@ -212,42 +159,16 @@ export default defineNuxtConfig({
         1
       )
 
-      routes.push({
-        name: 'search-mods',
-        path: '/mods',
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        children: [],
-      })
-      routes.push({
-        name: 'search-modpacks',
-        path: '/modpacks',
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        children: [],
-      })
-      routes.push({
-        name: 'search-plugins',
-        path: '/plugins',
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        children: [],
-      })
-      routes.push({
-        name: 'search-resourcepacks',
-        path: '/resourcepacks',
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        children: [],
-      })
-      routes.push({
-        name: 'search-shaders',
-        path: '/shaders',
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        children: [],
-      })
-      routes.push({
-        name: 'search-datapacks',
-        path: '/datapacks',
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        children: [],
-      })
+      const types = ['mods', 'modpacks', 'plugins', 'resourcepacks', 'shaders', 'datapacks']
+
+      types.forEach((type) =>
+        routes.push({
+          name: `search-${type}`,
+          path: `/${type}`,
+          file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
+          children: [],
+        })
+      )
     },
   },
   runtimeConfig: {
@@ -266,6 +187,11 @@ export default defineNuxtConfig({
       hash: process.env.VERCEL_GIT_COMMIT_SHA || 'unknown',
     },
   },
+  typescript: {
+    shim: false,
+    strict: true,
+    typeCheck: true,
+  },
 })
 
 function getApiUrl() {
diff --git a/package.json b/package.json
index 3bea887e9..8066711b2 100644
--- a/package.json
+++ b/package.json
@@ -6,23 +6,26 @@
     "generate": "nuxi generate",
     "preview": "nuxi preview",
     "postinstall": "nuxi prepare",
-    "lint:js": "eslint --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .",
+    "lint:js": "eslint . --ext .js,.vue,.ts",
     "lint": "npm run lint:js && prettier --check .",
-    "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue . && prettier --write ."
+    "fix": "eslint . --fix --ext .js,.vue,.ts && prettier --write ."
   },
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@types/node": "^20.1.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.9.0",
     "nuxt": "^3.4.2",
     "prettier": "^2.8.3",
     "sass": "^1.58.0",
     "typescript": "^4.9.5",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-svg-loader": "^4.0.0"
+    "vite-svg-loader": "^4.0.0",
+    "vue-tsc": "^1.6.4"
   },
   "dependencies": {
     "@ltd/j-toml": "^1.38.0",
diff --git a/pages/[type]/[id]/settings/index.vue b/pages/[type]/[id]/settings/index.vue
index 0d741fa35..65b58a7c2 100644
--- a/pages/[type]/[id]/settings/index.vue
+++ b/pages/[type]/[id]/settings/index.vue
@@ -203,7 +203,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import Avatar from '~/components/ui/Avatar'
 import ModalConfirm from '~/components/ui/ModalConfirm'
 import FileInput from '~/components/ui/FileInput'
diff --git a/pages/[type]/[id]/settings/links.vue b/pages/[type]/[id]/settings/links.vue
index 851fdef24..2ced6b959 100644
--- a/pages/[type]/[id]/settings/links.vue
+++ b/pages/[type]/[id]/settings/links.vue
@@ -120,7 +120,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import SaveIcon from '~/assets/images/utils/save.svg'
 
 export default defineNuxtComponent({
diff --git a/pages/[type]/[id]/version/[version].vue b/pages/[type]/[id]/version/[version].vue
index 882237bb4..7b6f9c0b8 100644
--- a/pages/[type]/[id]/version/[version].vue
+++ b/pages/[type]/[id]/version/[version].vue
@@ -668,7 +668,7 @@
   </div>
 </template>
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils'
 import { inferVersionInfo } from '~/helpers/infer'
 import { createDataPackVersion } from '~/helpers/package'
diff --git a/pages/dashboard/projects.vue b/pages/dashboard/projects.vue
index eab073fe3..5a6b30446 100644
--- a/pages/dashboard/projects.vue
+++ b/pages/dashboard/projects.vue
@@ -295,7 +295,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 
 import Badge from '~/components/ui/Badge.vue'
 import Checkbox from '~/components/ui/Checkbox.vue'
diff --git a/pages/index.vue b/pages/index.vue
index 4cc73f18d..41820d5eb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -518,7 +518,7 @@
   </div>
 </template>
 <script setup>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import SearchIcon from '~/assets/images/utils/search.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import ModrinthIcon from '~/assets/images/logo.svg'
diff --git a/pages/search/[searchProjectType].vue b/pages/search/[searchProjectType].vue
index c807f0f39..b562bbeb9 100644
--- a/pages/search/[searchProjectType].vue
+++ b/pages/search/[searchProjectType].vue
@@ -342,7 +342,7 @@
   </div>
 </template>
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import ProjectCard from '~/components/ui/ProjectCard'
 import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 13dc05ed3..574b31cf1 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 
 export default defineNuxtComponent({
   components: {
diff --git a/pages/settings/monetization.vue b/pages/settings/monetization.vue
index 7df432d8c..7538944ea 100644
--- a/pages/settings/monetization.vue
+++ b/pages/settings/monetization.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 import Chips from '~/components/ui/Chips'
 import SaveIcon from '~/assets/images/utils/save.svg'
 import TrashIcon from '~/assets/images/utils/trash.svg'