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>
This commit is contained in:
Geometrically
2023-03-09 10:05:32 -07:00
committed by GitHub
parent 5638f0f24b
commit 740357d120
145 changed files with 12371 additions and 37478 deletions

View File

@@ -1,414 +1,288 @@
import { promises as fs } from 'fs'
import { sortRoutes } from '@nuxt/utils'
import axios from 'axios'
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'
const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
const STAGING_ARIADNE_URL = 'https://staging-ariadne.modrinth.com/v1/'
export default {
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
htmlAttrs: {
lang: 'en',
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: {
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',
},
],
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: 'preload',
href: 'https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.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',
href: '/opensearch.xml',
title: 'Modrinth mods',
},
],
},
title: 'Modrinth',
meta: [
{
charset: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
hid: 'description',
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.',
},
{
hid: 'publisher',
name: 'publisher',
content: 'Rinth, Inc.',
},
{
hid: 'og:title',
name: 'og:title',
content: 'Modrinth',
},
{
hid: 'apple-mobile-web-app-title',
name: 'apple-mobile-web-app-title',
content: 'Modrinth',
},
{
hid: 'theme-color',
name: 'theme-color',
content: '#1bd96a',
},
{
hid: 'color-scheme',
name: 'color-scheme',
content: 'light dark',
},
{
hid: 'og:site_name',
name: 'og:site_name',
content: 'Modrinth',
},
{
hid: 'og:description',
name: 'og:description',
content: 'An open source modding platform',
},
{
hid: 'og:type',
name: 'og:type',
content: 'website',
},
{
hid: 'og:url',
name: 'og:url',
content: 'https://modrinth.com',
},
{
hid: 'og:image',
name: 'og:image',
content: 'https://cdn.modrinth.com/modrinth-new.png?',
},
{
hid: 'twitter:card',
name: 'twitter:card',
content: 'summary',
},
{
hid: 'twitter:site',
name: 'twitter:site',
content: '@modrinth',
},
},
vite: {
plugins: [
svgLoader({
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
},
}),
eslintPlugin(),
],
link: [
{
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: 'stylesheet',
href: 'https://cdn-raw.modrinth.com/fonts/inter/inter.css',
},
{
rel: 'search',
type: 'application/opensearchdescription+xml',
href: '/opensearch.xml',
title: 'Modrinth mods',
},
],
},
vue: {
config: {
devtools: true,
},
},
router: {
extendRoutes(routes, resolve) {
routes.splice(
routes.findIndex((x) => x.name === 'search'),
1
)
routes.push({
path: '/search',
component: resolve(__dirname, 'pages/search.vue'),
name: 'search',
chunkName: 'pages/search',
children: [
{
path: '/mods',
component: resolve(__dirname, 'pages/search/mods.vue'),
name: 'mods',
},
{
path: '/modpacks',
component: resolve(__dirname, 'pages/search/modpacks.vue'),
name: 'modpacks',
},
{
path: '/plugins',
component: resolve(__dirname, 'pages/search/plugins.vue'),
name: 'plugins',
},
{
path: '/resourcepacks',
component: resolve(__dirname, 'pages/search/resourcepacks.vue'),
name: 'resourcepacks',
},
{
path: '/shaders',
component: resolve(__dirname, 'pages/search/shaders.vue'),
name: 'shaders',
},
{
path: '/datapacks',
component: resolve(__dirname, 'pages/search/datapacks.vue'),
name: 'datapacks',
},
],
})
sortRoutes(routes)
},
middleware: ['auth', 'analytics'],
},
/*
** Global CSS
*/
css: ['~assets/styles/global.scss'],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
'~/plugins/vue-tooltip.js',
'~/plugins/vue-notification.js',
'~/plugins/xss.js',
'~/plugins/vue-syntax.js',
'~/plugins/shorthands.js',
'~/plugins/markdown.js',
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
'@nuxtjs/svg',
'@nuxtjs/color-mode',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/dayjs',
'@nuxtjs/axios',
'@nuxtjs/style-resources',
'cookie-universal-nuxt',
],
ads: {
// Module options
ghostMode: true,
geoEdgeId: '',
},
robots: {
Sitemap: 'https://modrinth.com/sitemap.xml',
},
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: getApiUrl(),
headers: {
common: {
Accept: 'application/json',
},
},
},
dayjs: {
locales: ['en'],
defaultLocale: 'en',
plugins: ['relativeTime'],
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
transpile: ['vue-tooltip', 'vue-notification'],
html: {
minify: {
collapseWhitespace: true, // as @dario30186 mentioned
removeComments: true, // 👈 add this line
},
},
babel: {
plugins: [
[
'@babel/plugin-proposal-private-methods',
{
loose: true,
},
],
],
},
},
loading: {
color: '#1bd96a',
height: '2px',
},
env: {
owner: process.env.VERCEL_GIT_REPO_OWNER || 'modrinth',
slug: process.env.VERCEL_GIT_REPO_SLUG || 'knossos',
branch: process.env.VERCEL_GIT_COMMIT_REF || 'master',
hash: process.env.VERCEL_GIT_COMMIT_SHA || 'unknown',
domain: getDomain(),
authURLBase: getApiUrl(),
},
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL,
},
ads: {
ethicalAds: process.env.ETHICAL_ADS,
},
analytics: {
base_url: process.env.BROWSER_ARIADNE_URL || STAGING_ARIADNE_URL,
},
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL,
headers: {
common: {
'x-ratelimit-key': process.env.RATE_LIMIT_IGNORE_KEY || '',
},
},
},
},
hooks: {
build: {
async before(nuxt, buildOptions) {
// 30 minutes
const TTL = 30 * 60 * 1000
async 'build:before'() {
// 30 minutes
const TTL = 30 * 60 * 1000
let state = {}
try {
state = JSON.parse(
await fs.readFile('./generated/state.json', 'utf8')
)
} catch {
// File doesn't exist, create folder
await fs.mkdir('./generated', { recursive: true })
}
let state = {}
try {
state = JSON.parse(await fs.readFile('./generated/state.json', 'utf8'))
} catch {
// File doesn't exist, create folder
await fs.mkdir('./generated', { recursive: true })
}
const API_URL = getApiUrl()
const API_URL = getApiUrl()
if (
// Skip regeneration if within TTL...
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
}
if (
// Skip regeneration if within TTL...
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
}
console.log('Generating tags...')
state.lastGenerated = new Date().toISOString()
state.lastGenerated = new Date().toISOString()
state.apiUrl = API_URL
state.apiUrl = API_URL
const headers = {
headers: {
'user-agent': 'Knossos generator (support@modrinth.com)',
},
}
const headers = {
headers: {
'user-agent': `Knossos generator (admin@modrinth.com)`,
},
}
const [categories, loaders, gameVersions, donationPlatforms, reportTypes] = await Promise.all(
[
$fetch(`${API_URL}tag/category`, headers),
$fetch(`${API_URL}tag/loader`, headers),
$fetch(`${API_URL}tag/game_version`, headers),
$fetch(`${API_URL}tag/donation_platform`, headers),
$fetch(`${API_URL}tag/report_type`, headers),
]
)
const [
categories,
loaders,
gameVersions,
donationPlatforms,
reportTypes,
] = (
await Promise.all([
axios.get(`${API_URL}tag/category`, headers),
axios.get(`${API_URL}tag/loader`, headers),
axios.get(`${API_URL}tag/game_version`, headers),
axios.get(`${API_URL}tag/donation_platform`, headers),
axios.get(`${API_URL}tag/report_type`, headers),
])
).map((it) => it.data)
state.categories = categories
state.loaders = loaders
state.gameVersions = gameVersions
state.donationPlatforms = donationPlatforms
state.reportTypes = reportTypes
state.categories = categories
state.loaders = loaders
state.gameVersions = gameVersions
state.donationPlatforms = donationPlatforms
state.reportTypes = reportTypes
await fs.writeFile('./generated/state.json', JSON.stringify(state))
await fs.writeFile('./generated/state.json', JSON.stringify(state))
console.log('Tags generated!')
},
console.log('Tags generated!')
},
render: {
routeDone(url, result, context) {
setTimeout(() => {
axios
.post(
`${process.env.ARIADNE_URL || STAGING_ARIADNE_URL}view`,
{
url: getDomain() + url,
ip:
context.req.headers['cf-connecting-ip'] ??
context.req.headers['x-real-ip'] ??
context.req.connection.remoteAddress,
headers: context.req.headers,
},
{
headers: {
'Modrinth-Admin': process.env.ARIADNE_ADMIN_KEY || 'feedbeef',
},
}
)
.then(() => {})
.catch((e) => {
console.error(
'An error occurred while registering the visit: ',
e.response ? e.response.data : e
)
})
})
},
'pages:extend'(routes) {
routes.splice(
routes.findIndex((x) => x.name === 'search-searchProjectType'),
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: [],
})
},
},
}
runtimeConfig: {
apiBaseUrl: process.env.BASE_URL ?? getApiUrl(),
ariadneBaseUrl: process.env.ARIADNE_URL ?? getAriadneUrl(),
ariadneAdminKey: process.env.ARIADNE_ADMIN_KEY,
rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY,
public: {
apiBaseUrl: getApiUrl(),
ariadneBaseUrl: getAriadneUrl(),
siteUrl: getDomain(),
owner: process.env.VERCEL_GIT_REPO_OWNER || 'modrinth',
slug: process.env.VERCEL_GIT_REPO_SLUG || 'knossos',
branch: process.env.VERCEL_GIT_COMMIT_REF || 'master',
hash: process.env.VERCEL_GIT_COMMIT_SHA || 'unknown',
},
},
})
function getApiUrl() {
return process.env.BROWSER_BASE_URL ?? STAGING_API_URL
}
function getAriadneUrl() {
return process.env.BROWSER_ARIADNE_URL ?? STAGING_ARIADNE_URL
}
function getDomain() {
if (process.env.NODE_ENV === 'production') {
if (process.env.SITE_URL) {