Raw blog finished

components/animations/NotFound.vue

@@ -0,0 +1,69 @@
+<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 class="alex">Page not found!</h3>
+    <pre class="pre-wrap">{{ buffer }}<span class="blinker">&#9610;</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>