Add maintenance screen

app/root.tsx

@@ -2,8 +2,10 @@ import {
   ChakraProvider,
   Container,
   cookieStorageManagerSSR,
+  Flex,
   Heading,
   Link,
+  Spacer,
   Text,
 } from "@chakra-ui/react";
 import { ClientStyleContext, ServerStyleContext } from "./context.js";
@@ -59,6 +61,42 @@ export function ErrorBoundary() {
   const { status } = error;
   const loaderData = useRouteLoaderData<typeof loader>("root") || {};
 
+  if (loaderData.mx)
+    return (
+      <DocumentWrapper loaderData={{ ...loaderData, hide: true }}>
+        <Container
+          left="50%"
+          maxW="container.md"
+          pos="absolute"
+          top="50%"
+          transform="translate(-50%, -50%)"
+        >
+          <Flex>
+            <Spacer />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="128"
+              height="128"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M12.496 8a4.5 4.5 0 0 1-1.703 3.526L9.497 8.5l2.959-1.11q.04.3.04.61" />
+              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-1 0a7 7 0 1 0-13.202 3.249l1.988-1.657a4.5 4.5 0 0 1 7.537-4.623L7.497 6.5l1 2.5 1.333 3.11c-.56.251-1.18.39-1.833.39a4.5 4.5 0 0 1-1.592-.29L4.747 14.2A7 7 0 0 0 15 8m-8.295.139a.25.25 0 0 0-.288-.376l-1.5.5.159.474.808-.27-.595.894a.25.25 0 0 0 .287.376l.808-.27-.595.894a.25.25 0 0 0 .287.376l1.5-.5-.159-.474-.808.27.596-.894a.25.25 0 0 0-.288-.376l-.808.27z" />
+            </svg>
+            <Spacer />
+          </Flex>
+          <br />
+          <Heading textAlign="center">
+            The engineers are breaking stuff again
+          </Heading>
+          <br />
+          <Text textAlign="center">
+            Someday they will finish, come back later.
+          </Text>
+        </Container>
+      </DocumentWrapper>
+    );
+
   switch (status) {
     case 303:
       return "";
@@ -136,6 +174,10 @@ export async function loader({
   if (context.data.nonce) data.nonce = context.data.nonce;
   if (context.data.theme) data.theme = context.data.theme;
 
+  try {
+    if (await context.env.DATA.get("mx")) data.mx = "1";
+  } catch {}
+
   return data;
 }