error pages

This commit is contained in:
Karol Wypchlo 2022-05-16 12:59:11 +02:00
parent d675d7184d
commit 69c6f9e42a
No known key found for this signature in database
GPG Key ID: B515DE9EEBE241E1
12 changed files with 201 additions and 12 deletions

View File

@ -76,6 +76,7 @@ services:
- ./docker/nginx/conf.d:/etc/nginx/conf.d
- ./docker/nginx/conf.d.templates:/etc/nginx/templates
- ./docker/nginx/nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
- ./docker/data/website/public/errors:/etc/nginx/errors
networks:
shared:
ipv4_address: 10.10.10.30
@ -99,7 +100,7 @@ services:
logging: *default-logging
volumes:
- ./docker/data/website/.cache:/usr/app/.cache
- ./docker/data/website/.public:/usr/app/public
- ./docker/data/website/public:/usr/app/public
env_file:
- .env
networks:

View File

@ -37,6 +37,13 @@ proxy_set_header User-Agent: Sia-Agent;
proxy_pass http://sia:9980/skynet/skylink/$skylink$path$is_args$args;
error_page 400 /etc/nginx/errors/400/index.html;
error_page 401 /etc/nginx/errors/401/index.html;
error_page 403 /etc/nginx/errors/403/index.html;
error_page 404 /etc/nginx/errors/404/index.html;
error_page 451 /etc/nginx/errors/451/index.html;
error_page 500 /etc/nginx/errors/500/index.html;
log_by_lua_block {
local skynet_account = require("skynet.account")
local skynet_modules = require("skynet.modules")

View File

@ -17,6 +17,7 @@ import * as React from "react";
import Layout from "./src/components/Layout";
export const wrapPageElement = ({ element, props }) => {
if (props.uri.startsWith("/errors")) return element;
// props provide same data to Layout as Page element will get
// including location, data, etc - you don't need to pass it
return <Layout {...props}>{element}</Layout>;

View File

@ -0,0 +1,44 @@
import * as React from "react";
import { LogoBlackText } from "./Icons";
import Seo from "./seo";
export default function ErrorPage({ statusCode, statusReason, header, subheader, redirect, more }) {
React.useEffect(() => {
if (redirect && typeof window !== "undefined") {
setTimeout(() => {
window.location.href = redirect;
}, 3000); // 3s
}
}, [redirect]);
return (
<>
<Seo title={`${statusCode}: ${statusReason}`} />
<div className="bg-white min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
<div className="max-w-max mx-auto">
<main className="sm:flex-col sm:max-w-3xl space-y-4 sm:space-y-6">
<LogoBlackText className="h-10 ml-[-10px]" />
<div className="flex-col space-y-1 sm:space-y-2">
<h1 className="text-lg sm:text-2xl">{header}</h1>
<p className="text-sm sm:text-md text-palette-400">{subheader}</p>
</div>
{more && <p className="text-sm text-palette-300">{more}</p>}
{redirect && (
<p className="text-xs text-palette-300">
If you're not redirected automatically,{" "}
<a href={redirect} className="text-primary hover:text-primary-light transition-colors duration-200">
click here
</a>
</p>
)}
</main>
</div>
</div>
</>
);
}

View File

@ -0,0 +1,21 @@
import * as React from "react";
import ErrorPage from "../../components/ErrorPage";
const statusCode = 400;
const statusReason = "Bad Request";
const header = "Bad Request";
const subheader = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor";
const redirect = null;
export default function BadRequest() {
return (
<ErrorPage
statusCode={statusCode}
statusReason={statusReason}
header={header}
subheader={subheader}
redirect={redirect}
/>
);
}

View File

@ -0,0 +1,21 @@
import * as React from "react";
import ErrorPage from "../../components/ErrorPage";
const statusCode = 401;
const statusReason = "Unauthorized";
const header = "You must be authenticated to access this content";
const subheader = "You're being redirected to the Log In page of this Skynet Portal";
const redirect = `https://account.${process.env.PORTAL_DOMAIN}/auth/login`;
export default function Unauthorized() {
return (
<ErrorPage
statusCode={statusCode}
statusReason={statusReason}
header={header}
subheader={subheader}
redirect={redirect}
/>
);
}

View File

@ -0,0 +1,21 @@
import * as React from "react";
import ErrorPage from "../../components/ErrorPage";
const statusCode = 403;
const statusReason = "Forbidden";
const header = "You are not authorized to access this content";
const subheader = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor";
const redirect = null;
export default function Forbidden() {
return (
<ErrorPage
statusCode={statusCode}
statusReason={statusReason}
header={header}
subheader={subheader}
redirect={redirect}
/>
);
}

View File

@ -0,0 +1,21 @@
import * as React from "react";
import ErrorPage from "../../components/ErrorPage";
const statusCode = 404;
const statusReason = "Not Found";
const header = "We could not load this content";
const subheader = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor";
const redirect = null;
export default function NotFound() {
return (
<ErrorPage
statusCode={statusCode}
statusReason={statusReason}
header={header}
subheader={subheader}
redirect={redirect}
/>
);
}

View File

@ -0,0 +1,34 @@
import * as React from "react";
import Link from "../../components/Link";
import ErrorPage from "../../components/ErrorPage";
const statusCode = 451;
const statusReason = "Unavailable For Legal Reasons";
const header = "This file is unavailable for legal reasons";
const subheader = "This Skynet Portal has blocked access to this file, likely for legal reasons";
const redirect = null;
const more = (
<>
To learn more, see the{" "}
<Link
href="https://support.skynetlabs.com/key-concepts/faqs#is-skynet-censorship-free"
className="text-primary hover:text-primary-light transition-colors duration-200"
>
Skynet FAQ
</Link>
</>
);
export default function UnavailableForLegalReasons() {
return (
<ErrorPage
statusCode={statusCode}
statusReason={statusReason}
header={header}
subheader={subheader}
more={more}
redirect={redirect}
/>
);
}

View File

@ -0,0 +1,21 @@
import * as React from "react";
import ErrorPage from "../../components/ErrorPage";
const statusCode = 500;
const statusReason = "Internal Server Error";
const header = "Internal Server Error";
const subheader = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor";
const redirect = null;
export default function InternalServerError() {
return (
<ErrorPage
statusCode={statusCode}
statusReason={statusReason}
header={header}
subheader={subheader}
redirect={redirect}
/>
);
}

View File

@ -2,6 +2,13 @@
@tailwind components;
@tailwind utilities;
html,
body,
#___gatsby,
#gatsby-focus-wrapper {
@apply h-full;
}
.newsletter-message a {
@apply text-primary;
}

View File

@ -58,15 +58,5 @@ module.exports = {
},
},
},
plugins: [
require("@tailwindcss/typography"),
plugin(function ({ addBase, theme }) {
addBase({
body: {
color: theme("textColor.palette.600"),
backgroundColor: theme("backgroundColor.palette.500"),
},
});
}),
],
plugins: [require("@tailwindcss/typography")],
};