Skip to content

Commit

Permalink
feat: implement not found panel for all details pages (#444)
Browse files Browse the repository at this point in the history 
Co-authored-by: Jan Michek <15363559+janmichek@users.noreply.github.com>
  • Loading branch information
@lukeromanowicz @janmichek
lukeromanowicz and janmichek committed Aug 24, 2023
1 parent 556c342 commit 0fad7d6
Show file tree
Hide file tree
Showing 26 changed files with 478 additions and 353 deletions.
17 changes: 12 additions & 5 deletions src/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,24 @@
</Head>
</Html>

<the-header/>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
<the-footer class="app__footer"/>
<NuxtErrorBoundary>
<the-header/>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
<the-footer class="app__footer"/>

<template #error="{ error }">
<error :error="error"/>
</template>
</NuxtErrorBoundary>
</template>

<script setup>
import { useHead } from '@vueuse/head'
import TheHeader from '@/components/TheHeader'
import TheFooter from '@/components/TheFooter'
import Error from '@/error'
import { initializeStores } from '@/stores'
import { useWebSocket } from '@/stores/webSocket'
import { APP_CREATOR, APP_DESCRIPTION, APP_KEYWORDS, APP_TITLE, APP_URL } from '@/utils/constants'
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,17 @@ defineProps({
font-size: 16px;
line-height: 24px;
font-weight: 500;
padding: var(--space-3) var(--space-7);
text-decoration: none;
letter-spacing: 0.015em;
background: var(--color-fire);
color: var(--color-white);
border-radius: 48px;
border: none;
padding: var(--space-3) var(--space-5);
&__icon {
margin-right: var(--space-1);
}
Expand Down
56 changes: 56 additions & 0 deletions src/components/NotFoundPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template>
<app-panel class="not-found-panel">
<p class="not-found-panel__paragraph">
<slot/>
</p>

<p class="not-found-panel__paragraph">
Ask for help in the
<app-link to="https://forum.aeternity.com/">
Forum
</app-link>
if the error persists.
</p>

<div class="not-found-panel__container">
<app-button
to="/"
class="not-found-panel__button">
Back to Dashboard
</app-button>
</div>
</app-panel>
</template>

<script setup>
import AppButton from '@/components/AppButton'
import AppLink from '@/components/AppLink'
import AppPanel from '@/components/AppPanel'
</script>

<style scoped>
.not-found-panel {
&__paragraph {
margin-bottom: var(--space-3);
@media (--desktop) {
&:last-of-type {
margin-bottom: var(--space-6);
}
}
}
&__button {
width: 215px;
color: #fff !important;
}
&__container {
display: flex;
justify-content: center;
@media (--desktop) {
justify-content: flex-start;
}
}
}
</style>
8 changes: 7 additions & 1 deletion src/components/TheSearchBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,13 @@ async function search() {
} else if (await isKeyblockId(query.value)) {
push(`/keyblocks/${query.value}`)
} else {
push(`/error/${userQuery.value}`)
clearError()
throw showError({
data: {
searchQuery: query.value,
},
statusMessage: 'SearchNotFound',
})
}
userQuery.value = ''
}
Expand Down
245 changes: 103 additions & 142 deletions src/error.vue
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,98 @@
<template>
<Head>
<Title> {{ APP_TITLE_SHORT }} | Unexpected Error </Title>

<Meta
name="description"
:content="APP_DESCRIPTION"/>
<Meta
name="keywords"
:content="APP_KEYWORDS"/>
<Link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon-apple-180.png"/>
<Link
rel="icon"
type="image/png"
sizes="512x512"
href="/favicon-512.png"/>
<Link
rel="icon"
type="image/png"
sizes="96x96"
href="/favicon-96.png"/>
<Link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32.png"/>
<Meta
property="og:type"
content="website"/>
<Meta
property="og:title"
:content="APP_TITLE"/>
<Meta
property="og:description"
:content="APP_DESCRIPTION"/>
<Meta
property="og:image"
:content="`${APP_URL}/social-cover.png`"/>
<Meta
property="og:image:width"
content="1200"/>
<Meta
property="og:image:height"
content="600"/>
<Meta
property="og:image:alt"
:content="APP_TITLE"/>
<Meta
property="og:url"
:content="APP_URL"/>
<Meta
name="twitter:card"
content="summary_large_image"/>
<Meta
name="twitter:site"
:content="APP_CREATOR"/>
<Meta
name="twitter:creator"
:content="APP_CREATOR"/>
</Head>

<the-header/>
<div class="error">
<div class="error__parallax">
<page-header>
Unexpected Error
</page-header>

<app-panel class="error__panel">
<h2 class="error__heading">
Sorry! We encountered an unexpected error
</h2>
<p class="error__paragraph">
ERROR CODE: 500 - Internal Server error
</p>
<p class="error__paragraph">
We’re not quite sure what went wrong. You can go back, ask for help
in the
<app-link to="https://forum.aeternity.com/">
Forum
</app-link>
or tell us your story in the Feedback Survey.
</p>

<div class="error__container">
<app-button
to="/"
class="error__button">
Back to Dashboard
</app-button>
<div>
<Head>
<Title> {{ APP_TITLE_SHORT }}</Title>

<Meta
name="description"
:content="APP_DESCRIPTION"/>
<Meta
name="keywords"
:content="APP_KEYWORDS"/>
<Link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon-apple-180.png"/>
<Link
rel="icon"
type="image/png"
sizes="512x512"
href="/favicon-512.png"/>
<Link
rel="icon"
type="image/png"
sizes="96x96"
href="/favicon-96.png"/>
<Link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32.png"/>
<Meta
property="og:type"
content="website"/>
<Meta
property="og:title"
:content="APP_TITLE"/>
<Meta
property="og:description"
:content="APP_DESCRIPTION"/>
<Meta
property="og:image"
:content="`${APP_URL}/social-cover.png`"/>
<Meta
property="og:image:width"
content="1200"/>
<Meta
property="og:image:height"
content="600"/>
<Meta
property="og:image:alt"
:content="APP_TITLE"/>
<Meta
property="og:url"
:content="APP_URL"/>
<Meta
name="twitter:card"
content="summary_large_image"/>
<Meta
name="twitter:site"
:content="APP_CREATOR"/>
<Meta
name="twitter:creator"
:content="APP_CREATOR"/>
</Head>

<NuxtErrorBoundary>
<the-header/>
<div class="error">
<div class="error__parallax">
<component
:is="errorComponent(error)"
v-if="error"
:error="error"/>
</div>
</app-panel>
</div>
</div>
<the-footer/>

<template #error="{ error: innerError }">
<the-header/>
<div class="error">
<div class="error__parallax">
<component
:is="errorComponent(innerError)"
v-if="error && innerError"
:error="innerError"/>
</div>
</div>
<the-footer/>
</template>
</NuxtErrorBoundary>
</div>
<the-footer/>
</template>

<script setup>
import { useHead } from '@vueuse/head'
import AppLink from '@/components/AppLink'
import PageHeader from '@/components/PageHeader'
import AppButton from '@/components/AppButton'
import AppPanel from '@/components/AppPanel'
import TheHeader from '@/components/TheHeader'
import TheFooter from '@/components/TheFooter'
import { APP_CREATOR, APP_DESCRIPTION, APP_KEYWORDS, APP_TITLE, APP_URL } from '@/utils/constants'
Expand All @@ -113,7 +102,21 @@ useHead({
{ name: 'robots', content: 'noindex' },
],
})
setResponseStatus(500, 'Unexpected Error')
const error = useError()
const errorComponent = error => {
switch (unref(error)?.statusMessage) {
case 'EntityDetailsNotFound':
return defineAsyncComponent(() => import('@/errors/EntityDetailsNotFoundError.vue'))
case 'SearchNotFound':
return defineAsyncComponent(() => import('@/errors/SearchNotFoundError.vue'))
case 'PageNotFound':
return defineAsyncComponent(() => import('@/errors/PageNotFoundError.vue'))
default:
return defineAsyncComponent(() => import('@/errors/UnexpectedError.vue'))
}
}
</script>
<style scoped>
Expand All @@ -133,47 +136,5 @@ setResponseStatus(500, 'Unexpected Error')
padding: 120px 0;
}
}
&__panel {
margin-top: var(--space-4);
padding: var(--space-4) var(--space-1);
@media (--desktop) {
padding: var(--space-4);
}
}
&__heading {
margin-bottom: var(--space-4);
}
&__paragraph {
margin-bottom: var(--space-5);
@media (--desktop) {
&:last-of-type {
margin-bottom: var(--space-6);
}
}
}
&__button {
width: 215px;
padding: var(--space-3) var(--space-5);
color: #fff !important;
}
&__query {
font-weight: 700;
word-wrap: break-word;
}
&__container {
display: flex;
justify-content: center;
@media (--desktop) {
justify-content: flex-start;
}
}
}
</style>

0 comments on commit 0fad7d6

Please sign in to comment.