error pages

docker-compose.yml

@@ -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:

docker/nginx/conf.d/include/location-skylink

@@ -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")

packages/website/gatsby-browser.js

@@ -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>;

packages/website/src/components/ErrorPage.js

@@ -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>
+    </>
+  );
+}

packages/website/src/pages/errors/400.js

@@ -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}
+    />
+  );
+}

packages/website/src/pages/errors/401.js

@@ -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}
+    />
+  );
+}

packages/website/src/pages/errors/403.js

@@ -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}
+    />
+  );
+}

packages/website/src/pages/errors/404.js

@@ -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}
+    />
+  );
+}

packages/website/src/pages/errors/451.js

@@ -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}
+    />
+  );
+}

packages/website/src/pages/errors/500.js

@@ -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}
+    />
+  );
+}

packages/website/src/styles/global.css

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

packages/website/tailwind.config.js

@@ -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")],
 };