årets oppdateringer

idaons · Nov 28, 2024 · ca7e2de · ca7e2de
1 parent 16cff0c
commit ca7e2de
Show file tree

Hide file tree

Showing 54 changed files with 11,422 additions and 17,256 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,6 @@
 
 ## deploy
 
-Deploy skjer ved push til master eller ved å kjøre:  
+Deploy skjer ved push til main eller ved å kjøre:  
 `npm i -g vercel` (hvis første gang)  
 `vercel --prod`
diff --git a/app/context.tsx b/app/context.tsx
diff --git a/app/createEmotionCache.ts b/app/createEmotionCache.ts
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,23 +1,34 @@
-import { Box, Button, Center, ChakraProvider, Flex, Heading } from "@chakra-ui/react";
-import { withEmotionCache } from "@emotion/react";
+import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction, MetaFunction } from "@remix-run/node";
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch } from "@remix-run/react";
-import React, { useContext, useEffect, useRef } from "react";
-import styles from "~/src/global.css";
-import { theme } from "~/theme";
-import { ClientStyleContext, ServerStyleContext } from "./context";
-
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  viewport: "width=device-width,initial-scale=1",
-  themeColor: "#091B43",
-  description: "Julekalender for stillesittende kontor-nisser",
-  title: "Julekalder'n",
-});
+import {
+  isRouteErrorResponse,
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useRouteError,
+} from "@remix-run/react";
+import React, { ReactNode } from "react";
+import styles from "./src/global.css";
+import errorstyles from "./src/error.css";
 
+export const meta: MetaFunction = () => {
+  return [
+    {
+      charset: "utf-8",
+      viewport: "width=device-width,initial-scale=1",
+      themeColor: "#091B43",
+      description: "Julekalender for stillesittende kontor-nisser",
+      title: "Julekalder'n",
+    },
+  ];
+};
 export let links: LinksFunction = () => {
   return [
     { rel: "stylesheet", href: styles },
+    { rel: "stylesheet", href: errorstyles },
     { rel: "preconnect", href: "https://fonts.googleapis.com" },
     { rel: "preconnect", href: "https://fonts.gstatic.com" },
     {
@@ -30,85 +41,62 @@ export let links: LinksFunction = () => {
     { rel: "preconnect", href: "https://fonts.gstatic.com" },
     { href: "https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap", rel: "stylesheet" },
     { href: "https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap", rel: "stylesheet" },
+    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
   ];
 };
 
-interface DocumentProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCache) => {
-  const serverStyleData = useContext(ServerStyleContext);
-  const clientStyleData = useContext(ClientStyleContext);
-  const reinjectStylesRef = useRef(true);
-
-  // Only executed on client
-  // When a top level ErrorBoundary or CatchBoundary are rendered,
-  // the document head gets removed, so we have to create the style tags
-  useEffect(() => {
-    if (!reinjectStylesRef.current) {
-      return;
-    }
-    // re-link sheet container
-    emotionCache.sheet.container = document.head;
-
-    // re-inject tags
-    const tags = emotionCache.sheet.tags;
-    emotionCache.sheet.flush();
-    tags.forEach((tag) => {
-      (emotionCache.sheet as any)._insertTag(tag);
-    });
-
-    // reset cache to re-apply global styles
-    clientStyleData.reset();
-    // ensure we only do this once per mount
-    reinjectStylesRef.current = false;
-  }, [clientStyleData, emotionCache.sheet]);
-
+export default function Document(props: { children: ReactNode; title: string }) {
   return (
-    <html lang="en">
+    <html lang="nb">
       <head>
-        {title ? <title>{title}</title> : null}
+        {props.title ? <title>{props.title}</title> : null}
         <Meta />
         <Links />
-        {serverStyleData?.map(({ key, ids, css }) => (
-          <style
-            key={key}
-            data-emotion={`${key} ${ids.join(" ")}`}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: css }}
-          />
-        ))}
       </head>
       <body>
-        {children}
+        {props.children}
+        <Outlet />
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
       </body>
     </html>
   );
-});
-export default function Root() {
-  return (
-    <Document>
-      <ChakraProvider resetCSS={false} theme={theme}>
-        <Outlet />
-      </ChakraProvider>
-    </Document>
-  );
 }
 
-export type ErrorBoundaryProps = {
-  error: {
-    message: String;
-    stack: String;
-  };
-};
-export function ErrorBoundary({ error }: ErrorBoundaryProps) {
+export function ErrorBoundary() {
   const [visError, setVisError] = React.useState(false);
-  return (
+  const error = useRouteError();
+  if (isRouteErrorResponse(error)) {
+    return (
+      <Document title="Oh no!">
+        <div className={"flex"}>
+          <h1>
+            {error.status}: {error.status === 404 ? "Jul not found 🎃" : error.statusText}
+          </h1>
+        </div>
+      </Document>
+    );
+  } else if (error instanceof Error) {
+    return (
+      <Document title="Oh no!">
+        <div className={"flex"}>
+          <div className={"bomb"}>💣💥</div>
+          <h1>A very very critical error has occured</h1>
+          <button className={"confirm"} onClick={() => setVisError(true)}>
+            Ok, I guess?
+          </button>
+          {visError && <p>{error.message}</p>}
+        </div>
+      </Document>
+    );
+  } else {
+    return <h1>Unknown Error</h1>;
+  }
+}
+
+/*
+*   return (
     <Document title="Oh no!">
       <ChakraProvider theme={theme}>
         <Flex flexDirection={"column"} alignItems={"center"} marginTop="2rem">
@@ -144,4 +132,4 @@ export function CatchBoundary() {
       </ChakraProvider>
     </Document>
   );
-}
+*/
diff --git a/app/routes/index.tsx → app/routes/_index.tsx b/app/routes/index.tsx → app/routes/_index.tsx
@@ -1,7 +1,7 @@
 import Kalender from "~/src/Components/Kalender";
 import React from "react";
 
-export default function Index() {
+export default function _index() {
   return (
     <main>
       <Kalender />

diff --git a/app/routes/luke/$lukeNummer.tsx → app/routes/luke.$lukeNummer.tsx b/app/routes/luke/$lukeNummer.tsx → app/routes/luke.$lukeNummer.tsx
diff --git a/app/src/Components/Julekule.tsx b/app/src/Components/Julekule.tsx
@@ -1,72 +1,27 @@
 import * as React from "react";
-import styled from "@emotion/styled";
 import { isOdd } from "../utils";
+import styles from "./julekule.module.css";
 
 const farger = ["#F8B229", "#EA4630", "#146B3A", "#BB2528", "#165B33"];
 
-const JulekuleStyle = styled.div<{ nummer: number }>`
-  background-color: ${(props) => farger[Math.floor(props.nummer % farger.length)]};
-  background-image: radial-gradient(circle at right bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  border-radius: 50%;
-  box-shadow: inset 0.3em 0.3em 1em rgba(255, 255, 255, 0.5);
-  height: var(--luke-size);
-  width: var(--luke-size);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: ${(props: any) => (isOdd(props.nummer) ? "rotate( -5deg )" : "rotate( 5deg )")};
-`;
-
-const Base = styled.span`
-  position: absolute;
-  content: "";
-  display: block;
-  width: 1rem;
-  height: 0.5rem;
-  top: -0.46rem;
-  background-color: white;
-  left: 50%;
-  margin-left: -0.5rem;
-  border-radius: 2px 2px 0 0;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
-`;
-
-const Snor = styled.span`
-  position: absolute;
-  border-color: white;
-  height: 1.25rem;
-  width: 0.75rem;
-  border-width: 2px 2px 0 2px;
-  top: -1.75rem;
-  border-style: solid;
-  border-radius: 50% 50% 0 0;
-  left: calc(var(--luke-size) / 2);
-
-  &::before {
-    content: "";
-    display: block;
-    height: 50%;
-    background-color: var(--background-color);
-    position: absolute;
-    bottom: 0;
-    width: 0.1875rem;
-    right: -0.125rem;
-  }
-`;
-
 interface Props {
   children?: React.ReactNode;
   nummer: number;
 }
 
 const Julekule = (props: Props) => {
   return (
-    <JulekuleStyle nummer={props.nummer}>
-      <Snor />
-      <Base />
+    <div
+      className={styles.julekule}
+      style={{
+        backgroundColor: farger[Math.floor(props.nummer % farger.length)],
+        transform: isOdd(props.nummer) ? "rotate( -5deg )" : "rotate( 5deg )",
+      }}
+    >
+      <span className={styles.snor} />
+      <span className={styles.base} />
       {props.children}
-    </JulekuleStyle>
+    </div>
   );
 };
 export default Julekule;