danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
1.4 kB
53 lines
1<template>
2 <TideBaseLayout
3 :pageTitle="`${props.error?.statusCode} - ${props.error?.statusMessage}`"
4 :site="site"
5 :page="{}"
6 :siteSection="{}"
7 class="tide-error"
8 >
9 <template #breadcrumbs><span></span></template>
10 <template #aboveBody>
11 <RplHeaderGraphic :image="true" placement="top" />
12 </template>
13 <template #body>
14 <RplErrorMessage
15 :title="title"
16 :intro="props.error?.statusMessage"
17 :link="{ url: '/', text: 'Go back home' }"
18 :data-cy="`error-${props.error.statusCode}`"
19 >
20 <div v-if="props.error?.message">
21 <RplContent :html="props.error.message" />
22 </div>
23 </RplErrorMessage>
24 </template>
25 </TideBaseLayout>
26</template>
27
28<script setup lang="ts">
29import { RplHeaderGraphic, RplErrorMessage } from '#components'
30import { useTideSite } from '#imports'
31import { computed } from 'vue'
32
33interface Props {
34 error: any
35}
36
37const props = defineProps<Props>()
38
39const is404 = computed(() => props.error?.statusCode === '404')
40const title = computed(() => (is404.value ? 'Oops!' : 'Sorry!'))
41const site = is404.value ? await useTideSite() : undefined
42</script>
43
44<style>
45.tide-error .rpl-layout__main {
46 margin-top: var(--rpl-sp-6);
47
48 @media (--rpl-bp-l) {
49 margin-top: var(--rpl-sp-12);
50 margin-bottom: var(--rpl-sp-1);
51 }
52}
53</style>