diff --git a/README.md b/README.md index 14b88b5..4bc4bff 100644 --- 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 deleted file mode 100644 index 0783e0d..0000000 --- a/app/context.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { createContext } from "react"; - -export interface ServerStyleContextData { - key: string; - ids: Array; - css: string; -} - -export const ServerStyleContext = createContext(null); - -export interface ClientStyleContextData { - reset: () => void; -} - -export const ClientStyleContext = createContext({ - reset: () => {}, -}); diff --git a/app/createEmotionCache.ts b/app/createEmotionCache.ts deleted file mode 100644 index cbe0fae..0000000 --- a/app/createEmotionCache.ts +++ /dev/null @@ -1,6 +0,0 @@ -// createEmotionCache.ts -import createCache from "@emotion/cache"; - -export default function createEmotionCache() { - return createCache({ key: "css" }); -} diff --git a/app/entry.client.tsx b/app/entry.client.tsx deleted file mode 100644 index 2c36647..0000000 --- a/app/entry.client.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { RemixBrowser } from "@remix-run/react"; -import { hydrateRoot } from "react-dom/client"; -import { ClientStyleContext } from "./context"; -import createEmotionCache from "./createEmotionCache"; -import { useState } from "react"; -import { CacheProvider } from "@emotion/react"; - -interface ClientCacheProviderProps { - children: React.ReactNode; -} - -function ClientCacheProvider({ children }: ClientCacheProviderProps) { - const [cache, setCache] = useState(createEmotionCache()); - - function reset() { - setCache(createEmotionCache()); - } - - return ( - - {children} - - ); -} - -hydrateRoot( - document, - - - -); diff --git a/app/entry.server.tsx b/app/entry.server.tsx deleted file mode 100644 index 7eed911..0000000 --- a/app/entry.server.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { renderToString } from "react-dom/server"; -import { CacheProvider } from "@emotion/react"; -import createEmotionServer from "@emotion/server/create-instance"; -import { RemixServer } from "@remix-run/react"; -import type { EntryContext } from "@remix-run/node"; - -import { ServerStyleContext } from "./context"; -import createEmotionCache from "./createEmotionCache"; - -export default function handleRequest( - request: Request, - responseStatusCode: number, - responseHeaders: Headers, - remixContext: EntryContext -) { - const cache = createEmotionCache(); - const { extractCriticalToChunks } = createEmotionServer(cache); - - const html = renderToString( - - - - - - ); - - const chunks = extractCriticalToChunks(html); - - const markup = renderToString( - - - - - - ); - - responseHeaders.set("Content-Type", "text/html"); - - return new Response(`${markup}`, { - status: responseStatusCode, - headers: responseHeaders, - }); -} diff --git a/app/root.tsx b/app/root.tsx index be1ac82..25b6025 100644 --- 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 ( - + - {title ? {title} : null} + {props.title ? {props.title} : null} - {serverStyleData?.map(({ key, ids, css }) => ( -