Create initial index page

app/routes/_index.tsx

@@ -1,16 +1,85 @@
-import { Box, Container, Text } from "@chakra-ui/react";
+import { Box, Container, Flex, Heading } from "@chakra-ui/react";
+import { type LinksFunction } from "@remix-run/cloudflare";
+import { useLoaderData } from "@remix-run/react";
+import stylesheet from "../styles/_index.css";
+
+export const links: LinksFunction = () => {
+  return [{ href: stylesheet, rel: "stylesheet" }];
+};
+
+export async function loader({
+  context,
+}: {
+  context: RequestContext;
+}): Promise<string[]> {
+  if (context.request.headers.get("Save-Data") === "on") return [];
+
+  const signingKey = await crypto.subtle.importKey(
+    "raw",
+    // @ts-expect-error
+    Uint8Array.from(atob(context.env.URL_SIGNING_KEY), (m) => m.codePointAt(0)),
+    { hash: "SHA-1", name: "HMAC" },
+    false,
+    ["sign"],
+  );
+
+  const expiration = Math.floor(Date.now() / 1000) + 600;
+  const baseURLs = [
+    `https://mediaproxy.carcrushers.cc/trailer.webm?Expires=${expiration}&KeyName=portal-media-linkgen`,
+    `https://mediaproxy.carcrushers.cc/trailer.mp4?Expires=${expiration}&KeyName=portal-media-linkgen`,
+  ];
+
+  const signaturePromises = [];
+
+  for (const baseURL of baseURLs)
+    signaturePromises.push(
+      crypto.subtle.sign("HMAC", signingKey, new TextEncoder().encode(baseURL)),
+    );
+
+  const signatures = Array.from(
+    (await Promise.allSettled(signaturePromises)).values(),
+  );
+  const urls = [];
+
+  for (let i = 0; i < baseURLs.length; i++) {
+    const sig = signatures[i];
+
+    if (sig.status === "rejected")
+      throw new Response(`Failed to create signature for ${baseURLs[i]}`, {
+        status: 500,
+      });
+
+    const urlSig = btoa(String.fromCharCode(...new Uint8Array(sig.value)))
+      .replaceAll("+", "-")
+      .replaceAll("/", "_")
+      .replaceAll("=", "");
+
+    urls.push(`${baseURLs[i]}&Signature=${urlSig}`);
+  }
+
+  return urls;
+}
 
 export default function () {
+  const sourceURLs = useLoaderData<typeof loader>();
+
   return (
     <>
-      <Box alignContent="left">
+      <video autoPlay={true} id="home-video">
-        <Container maxW="container.lg" paddingTop="8vh" textAlign="left">
+        <source src={sourceURLs[0]} type="video/webm" />
-          <Text>
+        <source src={sourceURLs[1]} type="video/mp4" />
-            srfidukjghdiuftgrteutgrtsu,k jhsrte h hjgtsredbfdgns srthhfg h fgdyh
+      </video>
-            y
+      <Container
-          </Text>
+        maxW="container.lg"
-        </Container>
+        paddingTop="8vh"
-      </Box>
+        position="relative"
+        textAlign="left"
+        zIndex="1"
+      >
+        <Flex>
+          <Heading>Fueling Destruction since 2012</Heading>
+        </Flex>
+      </Container>
     </>
   );
 }