Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add EsErrorPage v3 #1516

Merged
merged 4 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions es-ds-components/components/es-error-page.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<script setup lang="ts">
import IconContactUs from './icon/contact-us.vue';
import IconCommunitySolar from './icon/community-solar.vue';
import IconInfoBlogPost from './icon/info-blog-post.vue';
import IconMarketplace from './icon/marketplace.vue';

const ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com';
const linkItems = [
{
icon: IconContactUs,
link: 'mailto:[email protected]',
label: 'Contact us',
},
{
icon: IconCommunitySolar,
link: `${ES_DOMAIN}/solar/`,
label: 'Learn about solar',
},
{
icon: IconInfoBlogPost,
link: `${ES_DOMAIN}/blog/`,
label: 'EnergySage blog',
},
{
icon: IconMarketplace,
link: `${ES_DOMAIN}/shop/home-solar/`,
label: 'EnergySage marketplace',
},
];

const props = defineProps({
errorType: {
type: String,
required: true,
},
});

interface ErrorCode {
shortMessage?: string;
longMessage: string;
}

interface ErrorCodeMap {
[key: string]: ErrorCode;
}

const errorCodeToMessages: ErrorCodeMap = {
403: {
shortMessage: 'Access denied',
longMessage:
"Oops! If you're seeing this message, there's a good chance you have cookies or " +
'referrers turned off in your browser.',
},
404: {
shortMessage: 'Page not found',
longMessage: 'Oops! We are terribly sorry, but there is nothing bright to see here.',
},
500: {
shortMessage: 'Internal server error',
longMessage: 'Oops! We are terribly sorry, but our server is not so bright today. Please try again.',
},
503: {
shortMessage: 'Service unavailable',
longMessage: 'The page you are requesting is temporarily unavailable.',
},
default: {
longMessage: 'Oops! Something went wrong!',
},
};

const messages: ErrorCode = errorCodeToMessages[props.errorType];

const errorShortMessage = messages?.shortMessage || props.errorType;

const errorLongMessage = messages?.longMessage || errorCodeToMessages.default.longMessage;
</script>

<template>
<div class="bg-gray-50">
<b-container class="py-500 py-lg-800">
<b-row>
<b-col
md="7"
class="my-500 mx-auto text-center">
<h1 class="post1 text-gray-600">
{{ errorShortMessage }}
</h1>
<p
id="msgError"
class="font-size-lg text-gray-600">
{{ errorLongMessage }}
</p>
</b-col>
</b-row>
<b-row>
<b-col
v-for="(item, index) in linkItems"
:key="index"
cols="6"
md="3">
<a
class="align-items-center d-flex flex-column justify-content-center text-center"
:href="item.link">
<div
class="bg-white d-flex justify-content-center mb-50 rounded-circle"
align-v="center">
<div class="m-100 text-orange">
<component
:is="item.icon"
height="53px"
width="53px" />
</div>
</div>
<p class="mb-200 mb-md-0">{{ item.label }}</p>
</a>
</b-col>
</b-row>
</b-container>
</div>
</template>
6 changes: 6 additions & 0 deletions es-ds-docs/components/ds-link-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
</div>
<ds-molecules-list class="mb-100" />
</li>
<li>
<div class="h4">
<ds-link to="/organisms"> Organisms </ds-link>
</div>
<ds-organisms-list class="mb-100" />
</li>
<li>
<div class="h4">
<ds-link to="/examples"> Examples </ds-link>
Expand Down
7 changes: 7 additions & 0 deletions es-ds-docs/components/ds-organisms-list.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<ul class="list-unstyled pl-100">
<li>
<ds-link to="/organisms/error-page"> Error page </ds-link>
</li>
</ul>
</template>
3 changes: 3 additions & 0 deletions es-ds-docs/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
<li>
<nuxt-link to="/molecules"> Molecules </nuxt-link>
</li>
<li>
<nuxt-link to="/organisms"> Organisms </nuxt-link>
</li>
</ul>
</div>
</template>
61 changes: 61 additions & 0 deletions es-ds-docs/pages/organisms/error-page.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script setup>
definePageMeta({
layout: 'full-width-component',
});

const propTableRows = [['errorType', 'String', 'n/a', 'The type of error to display.']];
const { $prism } = useNuxtApp();
const compCode = ref('');
const docCode = ref('');

if ($prism) {
/* eslint-disable import/no-self-import */
const compSource = await import('@energysage/es-ds-components/components/es-error-page.vue?raw');
const docSource = await import('./error-page.vue?raw');
/* eslint-enable import/no-self-import */

compCode.value = $prism.normalizeCode(compSource.default);
docCode.value = $prism.normalizeCode(docSource.default);
$prism.highlight();
}
</script>

<template>
<div>
<h1>Error page</h1>
<p>
The Error Page component is intended to be used in error pages across nuxt apps. The four types of error
codes explicitly handled include 403, 404, 500 and 503. This component is intended to take over the entire
page between the header and footer.
</p>
<div class="my-500">
<h2>Error 403</h2>
<es-error-page error-type="403" />
</div>
<div class="my-500">
<h2>Error 404</h2>
<es-error-page error-type="404" />
</div>
<div class="my-500">
<h2>Error 500</h2>
<es-error-page error-type="500" />
</div>
<div class="my-500">
<h2>Error 503</h2>
<es-error-page error-type="503" />
</div>
<div class="my-500">
<h2>Error 418 (and how other errors look)</h2>
<es-error-page error-type="418" />
</div>
<div class="mb-500">
<h2>EsErrorPage props</h2>
<ds-prop-table :rows="propTableRows" />
</div>
<ds-doc-source
:comp-code="compCode"
comp-source="es-ds-components/src/lib-components/es-error-page.vue"
:doc-code="docCode"
doc-source="es-ds-docs/pages/organisms/error-page.vue" />
</div>
</template>
6 changes: 6 additions & 0 deletions es-ds-docs/pages/organisms/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<template>
<div>
<h1>Organisms</h1>
<ds-organisms-list />
</div>
</template>
Loading