nullndr/website
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

chore: update remix to v2

Browse Source
This commit is contained in:
Andrea
2023-10-21 19:30:32 +02:00
parent 8222a4dfb2
commit 8a9fd697b5
15 changed files with 2367 additions and 5821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/BlogWrapper.tsx
View File

@@ -1,11 +1,7 @@
export function BlogWrapper({ children }: React.PropsWithChildren) {
return (
<div className="mx-3 mt-5">
<div className="w-full">
<div className="flex flex-col items-center">
<div className="w-5/6 xl:w-1/2 2xl:w-1/3">{children}</div>
</div>
</div>
<div className="flex flex-col items-center">
<div className="w-5/6 xl:w-1/2 2xl:w-1/3">{children}</div>
</div>
);
}

2
app/components/Body.tsx
View File

@@ -1,5 +1,3 @@
import React from "react";
export function Body({ children }: React.PropsWithChildren) {
return (
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">

4
app/components/LinkWrapper.tsx
View File

@@ -1,9 +1,7 @@
import type React from "react";
export function LinkWrapper({ children }: React.PropsWithChildren) {
return (
<div className="flex flex-col items-center">
<div className="mt-5 mx-3 hover:text-[#e6c2bf] font-bold text-2xl">
<div className="mt-5 hover:text-[#e6c2bf] font-bold text-2xl">
{children}
</div>
</div>

22
app/entry.client.tsx
View File

@@ -1,22 +0,0 @@
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
function hydrate() {
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
}
if (typeof requestIdleCallback === "function") {
requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
setTimeout(hydrate, 1);
}

111
app/entry.server.tsx
View File

@@ -1,111 +0,0 @@
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import { PassThrough } from "stream";
const ABORT_DELAY = 5000;
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
) {
return isbot(request.headers.get("user-agent"))
? handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
);
}
function handleBotRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
) {
return new Promise((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onAllReady() {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
}),
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
didError = true;
console.error(error);
},
},
);
setTimeout(abort, ABORT_DELAY);
});
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
) {
return new Promise((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onShellReady() {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
}),
);
pipe(body);
},
onShellError(err: unknown) {
reject(err);
},
onError(error: unknown) {
didError = true;
console.error(error);
},
},
);
setTimeout(abort, ABORT_DELAY);
});
}

4
app/root.tsx
View File

@@ -1,5 +1,5 @@
import codeHikeStyle from "@code-hike/mdx/dist/index.css";
import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
import type { LinksFunction, MetaFunction } from "@remix-run/node";
import {
Link,
Links,
@@ -21,7 +21,7 @@ export const links: LinksFunction = () => [
{ rel: "stylesheet", href: codeHikeStyle },
];
export const meta: V2_MetaFunction = () => [
export const meta: MetaFunction = () => [
{
charSet: "utf-8",
},

4
app/routes/blog.$name.tsx
View File

@@ -1,4 +1,4 @@
import type { LoaderArgs } from "@remix-run/node";
import type { LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { getMDXComponent } from "mdx-bundler/client";
import React from "react";
@@ -11,7 +11,7 @@ export const handle = {
text: "Go Back",
};
export const loader = async ({ params }: LoaderArgs) => {
export const loader = async ({ params }: LoaderFunctionArgs) => {
const name = params.name;
if (name == null) {
throw new Response(null, { status: 400 });

4
app/routes/blog/route.tsx
View File

@@ -3,7 +3,9 @@ import { LinkWrapper } from "~/components/LinkWrapper";
import { useMatch } from "./useMatch";
export default function () {
const { handle } = useMatch();
const { handle } = useMatch() as unknown as {
handle: { to: string; text: string };
};
return (
<div>
<LinkWrapper>

4
app/utils/posts.server.ts
View File

@@ -33,7 +33,7 @@ export const getMdxFile = async (file: string) => {
};
export const findPosts = async () => {
const files = await readdir("posts");
const files = await readdir("./posts");
const posts: (FrontMatter & {
filename: string;
})[] = [];
@@ -66,6 +66,6 @@ export const findPosts = async () => {
}
return posts.sort((a, b) =>
new Date(a.published) > new Date(b.published) ? -1 : 1
new Date(a.published) > new Date(b.published) ? -1 : 1,
);
};