example error pages

This commit is contained in:
Rich Harris
2018-02-17 18:39:46 -05:00
parent 1f9b212794
commit ad0da849fb
6 changed files with 98 additions and 20 deletions

View File

@@ -1,8 +1,8 @@
// This file is generated by Sapper — do not edit it!
export const routes = [
{ pattern: /^\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_" */ '../../routes/index.html') },
{ pattern: /^\/4xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') },
{ pattern: /^\/5xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_5xx" */ '../../routes/5xx.html') },
{ error: '4xx', load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') },
{ error: '5xx', load: () => import(/* webpackChunkName: "_5xx" */ '../../routes/5xx.html') },
{ pattern: /^\/about\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "about" */ '../../routes/about.html') },
{ pattern: /^\/blog\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "blog" */ '../../routes/blog/index.html') },
{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), load: () => import(/* webpackChunkName: "blog_$slug$" */ '../../routes/blog/[slug].html') }

View File

@@ -10,8 +10,8 @@ import blog_$slug$ from '../../routes/blog/[slug].html';
export const routes = [
{ id: '_', type: 'page', pattern: /^\/?$/, params: () => ({}), module: _ },
{ id: '_4xx', type: 'page', pattern: /^\/4xx\/?$/, params: () => ({}), module: _4xx },
{ id: '_5xx', type: 'page', pattern: /^\/5xx\/?$/, params: () => ({}), module: _5xx },
{ error: '4xx', module: _4xx },
{ error: '5xx', module: _5xx },
{ id: 'about', type: 'page', pattern: /^\/about\/?$/, params: () => ({}), module: about },
{ id: 'blog', type: 'page', pattern: /^\/blog\/?$/, params: () => ({}), module: blog },
{ id: 'api_blog_posts', type: 'route', pattern: /^\/api\/blog-posts\/?$/, params: () => ({}), module: api_blog_posts },

View File

@@ -1,5 +1,5 @@
// This file is generated by Sapper — do not edit it!
export const timestamp = 1518906946124;
export const timestamp = 1518910653621;
export const assets = [
"favicon.png",
@@ -11,22 +11,18 @@ export const assets = [
];
export const shell = [
"/client/_.0.15d69aa40f5cf2c235b5.js",
"/client/blog.1.15d69aa40f5cf2c235b5.js",
"/client/blog_$slug$.2.15d69aa40f5cf2c235b5.js",
"/client/about.3.15d69aa40f5cf2c235b5.js",
"/client/_5xx.4.15d69aa40f5cf2c235b5.js",
"/client/_4xx.5.15d69aa40f5cf2c235b5.js",
"/client/6.6.15d69aa40f5cf2c235b5.js",
"/client/main.15d69aa40f5cf2c235b5.js",
"/client/0.b91f3b4b0888fc3dc282.hot-update.js",
"/client/b91f3b4b0888fc3dc282.hot-update.json"
"/client/_.0.6b48eb953c3d3763d72b.js",
"/client/blog.1.6b48eb953c3d3763d72b.js",
"/client/blog_$slug$.2.6b48eb953c3d3763d72b.js",
"/client/about.3.6b48eb953c3d3763d72b.js",
"/client/_5xx.4.6b48eb953c3d3763d72b.js",
"/client/_4xx.5.6b48eb953c3d3763d72b.js",
"/client/6.6.6b48eb953c3d3763d72b.js",
"/client/main.6b48eb953c3d3763d72b.js"
];
export const routes = [
{ pattern: /^\/?$/ },
{ pattern: /^\/4xx\/?$/ },
{ pattern: /^\/5xx\/?$/ },
{ pattern: /^\/about\/?$/ },
{ pattern: /^\/blog\/?$/ },
{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/ }

View File

@@ -3,6 +3,7 @@ import express from 'express';
import compression from 'compression';
import sapper from 'sapper';
import serve from 'serve-static';
import fetch from 'node-fetch';
import { routes } from './manifest/server.js';
const app = express();
@@ -10,7 +11,6 @@ const app = express();
const { PORT = 3000 } = process.env;
// this allows us to do e.g. `fetch('/api/blog-posts')` on the server
const fetch = require('node-fetch');
global.fetch = (url, opts) => {
if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
return fetch(url, opts);

View File

@@ -1 +1,43 @@
TODO 4xx
<:Head>
<title>Not found</title>
</:Head>
<Layout page='home'>
<h1>Not found</h1>
<p>Please check the URL</p>
</Layout>
<style>
h1, p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

View File

@@ -1 +1,41 @@
TODO 5xx
<:Head>
<title>Internal server error</title>
</:Head>
<Layout page='home'>
<h1>Internal server error</h1>
</Layout>
<style>
h1, p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>