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

@@ -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',
+  },
+}

.eslintrc.json

@@ -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"
-  }
-}

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>

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'

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'
 

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 {

jsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"],
-      "@/*": ["./*"],
-      "~~/*": ["./*"],
-      "@@/*": ["./*"]
-    }
-  },
-  "exclude": ["node_modules", ".nuxt", "dist"]
-}

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: [
+      meta: Object.entries(meta).map(([name, content]): object => {
-        {
+        return { name, content }
-          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',
-        },
-      ],
       link: [
-        {
+        // The type is necessary because the linter can't always compare this very nested/complex type on itself
-          rel: 'preload',
+        ...preloadedFonts.map((font): object => {
-          href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19',
+          return {
-          as: 'font',
+            rel: 'preload',
-          type: 'font/woff2',
+            href: `https://cdn-raw.modrinth.com/fonts/${font}?v=3.19`,
-          crossorigin: true,
+            as: 'font',
-        },
+            type: 'font/woff2',
-        {
+            crossorigin: 'anonymous',
-          rel: 'preload',
+          }
-          href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19',
+        }),
-          as: 'font',
+        ...Object.entries(favicons).map(([media, href]): object => {
-          type: 'font/woff2',
+          return { rel: 'icon', type: 'image/x-icon', href, media }
-          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)',
-        },
         {
           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({
+      const types = ['mods', 'modpacks', 'plugins', 'resourcepacks', 'shaders', 'datapacks']
-        name: 'search-mods',
+
-        path: '/mods',
+      types.forEach((type) =>
-        file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
+        routes.push({
-        children: [],
+          name: `search-${type}`,
-      })
+          path: `/${type}`,
-      routes.push({
+          file: resolve(__dirname, 'pages/search/[searchProjectType].vue'),
-        name: 'search-modpacks',
+          children: [],
-        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: [],
-      })
     },
   },
   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() {

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",

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'

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({

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'

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'

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'

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'

pages/settings/index.vue

@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import { Multiselect } from 'vue-multiselect'
 
 export default defineNuxtComponent({
   components: {

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'