72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
const config = useAppConfig()
|
|
const meta = {
|
|
title: 'Page not found',
|
|
description:
|
|
'The page you are looking for does not exist. It might have been removed, had its name changed, or is temporarily unavailable.',
|
|
image: `${config.url}/images/logo.png`,
|
|
url: config.url,
|
|
}
|
|
|
|
let slug = useRoute().params.slug
|
|
|
|
if (Array.isArray(slug)) slug = slug.join('/')
|
|
|
|
const error = {
|
|
http_code: 200,
|
|
title: config.title,
|
|
url: config.url + '/' + slug,
|
|
locale: config.locale || 'en',
|
|
data: {
|
|
path: '/error.vue',
|
|
content: {
|
|
title: 'Page not found!',
|
|
description:
|
|
"The page you are looking for does not exist. However, no 404 error has occurred, as you're browsing through a web application loaded into memory and HTTP error codes make no sense here.",
|
|
},
|
|
},
|
|
slug: useRoute().params.slug,
|
|
build: config.build,
|
|
hint: 'Use the navigation bar to get back to the main page.',
|
|
}
|
|
const errorString = JSON.stringify(error, null, 2)
|
|
const buffer = ref('')
|
|
|
|
const startTime = Date.now()
|
|
const dt = 20
|
|
|
|
let i = 0
|
|
|
|
function type() {
|
|
if (Date.now() > startTime + dt * i) buffer.value += errorString[i++]
|
|
if (i < errorString.length) requestAnimationFrame(type)
|
|
}
|
|
|
|
onMounted(() => setTimeout(type, 1500))
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<h3>Page not found!</h3>
|
|
<pre class="whitespace-pre-wrap break-keep font-small">{{
|
|
buffer
|
|
}}<span class="blinker">▊</span></pre>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.blinker {
|
|
animation: blinker 1s steps(2, start) infinite;
|
|
}
|
|
|
|
@keyframes blinker {
|
|
from {
|
|
visibility: visible;
|
|
}
|
|
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
</style>
|