93 lines
1.9 KiB
Vue
93 lines
1.9 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,
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: meta.title,
|
|
description: meta.description,
|
|
ogTitle: meta.title,
|
|
ogDescription: meta.description,
|
|
ogImage: meta.image,
|
|
ogUrl: meta.url,
|
|
ogType: 'website',
|
|
twitterTitle: meta.title,
|
|
twitterDescription: meta.description,
|
|
twitterImage: meta.image,
|
|
twitterCard: 'summary',
|
|
})
|
|
|
|
useHead({
|
|
title: 'Page not found',
|
|
htmlAttrs: {
|
|
lang: config.locale || 'en',
|
|
},
|
|
link: [
|
|
{
|
|
rel: 'icon',
|
|
type: 'image/x-icon',
|
|
href: '/favicon.ico',
|
|
},
|
|
],
|
|
})
|
|
|
|
const error = {
|
|
http_code: 200,
|
|
title: config.title,
|
|
url: config.url,
|
|
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,
|
|
}
|
|
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>
|
|
<div>
|
|
<h3 class="alex">Page not found!</h3>
|
|
<pre class="pre-wrap">{{ buffer }}<span class="blinker">▊</span></pre>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.blinker {
|
|
animation: blinker 1s steps(2, start) infinite;
|
|
}
|
|
|
|
@keyframes blinker {
|
|
from {
|
|
visibility: visible;
|
|
}
|
|
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
</style>
|