arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-30 03:38:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update error page

Browse Source
This commit is contained in:
Arthur Danjou
2023-09-05 00:33:59 +02:00
parent 1f807632ee
commit 6cd432ed10
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/error.vue
View File

@@ -10,8 +10,17 @@ const getColor = computed(() => appConfig.ui.primary)
</script> </script>
<template> <template>
<NuxtLayout name="default"> <section>
<div class="flex flex-col items-center gap-4 mt-12"> <NuxtLoadingIndicator :color="getColor" />
<section class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
</div>
</section>
<div class="relative z-50 min-h-[100svh]">
<Header />
<UContainer>
<div class="flex flex-col items-center gap-4 mt-12">
<h1 class="font-medium text-[8rem] md:text-[16rem] leading-none bg-error bg-clip-text tracking-wider font-error" :class="`text-${getColor}-500`"> <h1 class="font-medium text-[8rem] md:text-[16rem] leading-none bg-error bg-clip-text tracking-wider font-error" :class="`text-${getColor}-500`">
{{ error?.statusCode }} {{ error?.statusCode }}
</h1> </h1>
@@ -29,7 +38,10 @@ const getColor = computed(() => appConfig.ui.primary)
Go back to the main page Go back to the main page
</UButton> </UButton>
</div> </div>
</NuxtLayout> </UContainer>
<Footer />
</div>
</section>
</template> </template>
<style scoped> <style scoped>

6
src/pages/writing/[slug].vue
View File

@@ -1,11 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Post } from '~~/types' import type { Post } from '~~/types';
const route = useRoute() const route = useRoute()
const { data: postContent } = await useAsyncData<Post>(`writing:${route.params.slug}`, async () => await queryContent<Post>(`/writing/${route.params.slug}`).findOne()) const { data: postContent } = await useAsyncData<Post>(`writing:${route.params.slug}`, async () => await queryContent<Post>(`/writing/${route.params.slug}`).findOne())
if (!postContent.value) { if (!postContent.value) {
throw createError({ throw showError({
statusMessage: 'The post you are looking for was not found.', statusMessage: 'The post you are looking for was not found.',
statusCode: 404, statusCode: 404,
}) })
@@ -92,7 +92,7 @@ async function handleLike() {
<div class="my-16 text-subtitle"> <div class="my-16 text-subtitle">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<UIcon name="i-eos-icons-loading" /> <UIcon name="i-eos-icons-loading" />
<p>The talents are loading...</p> <p>The content of the post is loading...</p>
</div> </div>
</div> </div>
</template> </template>