From 3b92b27cc861e5a5f81aa810f17d580275cb20f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Mon, 28 Nov 2022 10:01:14 +0100 Subject: [PATCH] feat: custom error page (#178) Co-authored-by: Daniel Roe --- app.vue | 31 +-------------------- composables/page-header.ts | 16 +++++++++++ error.vue | 57 ++++++++++++++++++++++++++++++++++++++ nuxt.config.ts | 6 ++++ plugins/masto.ts | 24 ++++++++-------- styles/global.css | 14 ++++++++++ 6 files changed, 106 insertions(+), 42 deletions(-) create mode 100644 composables/page-header.ts create mode 100644 error.vue diff --git a/app.vue b/app.vue index c6b132ea..f378be87 100644 --- a/app.vue +++ b/app.vue @@ -1,21 +1,8 @@ - - diff --git a/composables/page-header.ts b/composables/page-header.ts new file mode 100644 index 00000000..dce199d7 --- /dev/null +++ b/composables/page-header.ts @@ -0,0 +1,16 @@ +import { APP_NAME } from '~/constants' + +const isDev = process.dev +const isPreview = window.location.hostname.includes('deploy-preview') + +export function usePageHeader() { + useHead({ + titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`, + link: [ + { rel: 'icon', type: 'image/svg+png', href: isDev || isPreview ? '/favicon-dev.png' : '/favicon.png' }, + ], + }) + + // eslint-disable-next-line no-unused-expressions + isDark.value +} diff --git a/error.vue b/error.vue new file mode 100644 index 00000000..bc5bd593 --- /dev/null +++ b/error.vue @@ -0,0 +1,57 @@ + + + diff --git a/nuxt.config.ts b/nuxt.config.ts index af7efcf4..070c162a 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -55,6 +55,12 @@ export default defineNuxtConfig({ translateApi: '', }, }, + nitro: { + prerender: { + crawlLinks: false, + routes: ['/200.html'], + }, + }, app: { keepalive: true, }, diff --git a/plugins/masto.ts b/plugins/masto.ts index 875a2f3b..35dabe40 100644 --- a/plugins/masto.ts +++ b/plugins/masto.ts @@ -2,6 +2,7 @@ import type { MastoClient } from 'masto' import { currentUser } from '../composables/users' export default defineNuxtPlugin(async () => { + let masto!: MastoClient try { const { query } = useRoute() const user = typeof query.server === 'string' && typeof query.token === 'string' @@ -9,23 +10,22 @@ export default defineNuxtPlugin(async () => { : currentUser.value // TODO: improve upstream to make this synchronous (delayed auth) - const masto = await loginTo(user) as MastoClient - - return { - provide: { - masto: shallowReactive({ - replace(api: MastoClient) { this.api = api }, - api: masto, - }), - }, - } + masto = await loginTo(user) } catch { - // TODO: handle error // Show error page when Mastodon server is down - throw createError({ + showError({ fatal: true, statusMessage: 'Could not log into account.', }) } + + return { + provide: { + masto: shallowReactive({ + replace(api: MastoClient) { this.api = api }, + api: masto, + }), + }, + } }) diff --git a/styles/global.css b/styles/global.css index 81590eb9..ef78c278 100644 --- a/styles/global.css +++ b/styles/global.css @@ -103,3 +103,17 @@ html { background-position: 0 50% } } + +html, body , #__nuxt{ + height: 100vh; + margin: 0; + padding: 0; +} + +html.dark { + color-scheme: dark; +} + +html { + --at-apply: bg-base text-base; +}