sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 03:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 404 always logs error (#7341)

Browse Source 
* fix: error page

* fix: nuxt always logs console error on 404

* Revert "fix: error page"

This reverts commit ec15bf3b40.
This commit is contained in:
Truman Gao
2026-08-28 13:27:54 +02:00
committed by GitHub
parent a9b774005b
commit 98f8bbcad9
1 changed files with 102 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/[...path].vue
+102
View File
@@ -0,0 +1,102 @@
<template>
<div class="main">
<div class="error-graphic">
<Logo404 />
</div>
<div class="error-box">
<div class="error-box__body">
<h1 class="error-box__title">
{{ formatMessage(messages.title) }}
</h1>
<p class="error-box__subtitle">
{{ formatMessage(messages.subtitle) }}
</p>
</div>
</div>
</div>
</template>
<script setup>
import { defineMessages, useVIntl } from '@modrinth/ui'
import Logo404 from '~/assets/images/404.svg'
setResponseStatus(404)
const { formatMessage } = useVIntl()
const messages = defineMessages({
title: {
id: 'error.generic.404.title',
defaultMessage: 'Page not found',
},
subtitle: {
id: 'error.generic.404.subtitle',
defaultMessage: "The page you were looking for doesn't seem to exist.",
},
})
</script>
<style lang="scss" scoped>
.main {
margin: var(--spacing-card-lg) auto;
width: calc(100% - 4rem);
min-height: min(90vh, 30rem);
display: flex;
flex-direction: column;
justify-content: center;
@media screen and (min-width: 800px) {
width: 600px;
}
}
.error-graphic {
margin-bottom: 2rem;
display: flex;
justify-content: center;
svg {
fill: var(--color-text);
color: var(--color-text);
width: min(15rem, 100%);
height: auto;
}
}
.error-box {
background-color: var(--color-raised-bg);
border-radius: 1.25rem;
padding: 1.75rem 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-shadow: var(--shadow-card);
position: relative;
p {
margin: 0;
}
&__title {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
&__subtitle {
font-size: 1rem;
font-weight: 400;
}
&__body {
display: flex;
flex-direction: column;
gap: 0.75rem;
&:empty {
display: none;
}
}
}
</style>