chore: update remix to v2
This commit is contained in:
Andrea
parent
8222a4dfb2
commit
8a9fd697b5
13
Dockerfile
13
Dockerfile
@ -1,13 +0,0 @@
|
||||
FROM node:alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY ./package*.json /app/
|
||||
|
||||
RUN npm install
|
||||
|
||||
COPY . /app
|
||||
|
||||
RUN npm run build
|
||||
|
||||
CMD ["npm", "run", "start"]
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export function Body({ children }: React.PropsWithChildren) {
|
||||
return (
|
||||
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
@ -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",
|
||||
},
|
||||
|
||||
@ -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 });
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
);
|
||||
};
|
||||
|
||||
7940
package-lock.json
generated
7940
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@ -5,29 +5,29 @@
|
||||
"build": "remix build",
|
||||
"dev": "remix dev",
|
||||
"start": "remix-serve build",
|
||||
"typecheck": "tsc"
|
||||
"typecheck": "tsc --noEmit --pretty --skipLibCheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@code-hike/mdx": "^0.8.3",
|
||||
"@remix-run/node": "^1.16.0",
|
||||
"@remix-run/react": "^1.16.0",
|
||||
"@remix-run/serve": "^1.16.0",
|
||||
"esbuild": "^0.17.11",
|
||||
"isbot": "^3.6.5",
|
||||
"@remix-run/node": "^2.1.0",
|
||||
"@remix-run/react": "^2.1.0",
|
||||
"@remix-run/serve": "^2.1.0",
|
||||
"esbuild": "^0.18.18",
|
||||
"isbot": "^3.6.13",
|
||||
"mdx-bundler": "^9.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"shiki": "^0.14.2"
|
||||
"shiki": "^0.14.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@remix-run/dev": "^1.16.0",
|
||||
"@remix-run/eslint-config": "^1.16.0",
|
||||
"@remix-run/dev": "^2.1.0",
|
||||
"@remix-run/eslint-config": "^2.1.0",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.8",
|
||||
"eslint": "^8.27.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^5.0.4"
|
||||
"@types/react": "^18.2.18",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"eslint": "^8.46.0",
|
||||
"react-icons": "^4.10.1",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,10 +4,4 @@ module.exports = {
|
||||
serverDependenciesToBundle: ["mdx-bundler"],
|
||||
tailwind: true,
|
||||
serverModuleFormat: "cjs",
|
||||
future: {
|
||||
v2_routeConvention: true,
|
||||
v2_errorBoundary: true,
|
||||
v2_normalizeFormMethod: true,
|
||||
v2_meta: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
|
||||
import type { Config} from "tailwindcss"
|
||||
|
||||
export default {
|
||||
content: ["./app/**/*.{ts,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
@ -9,11 +11,11 @@ module.exports = {
|
||||
|
||||
keyframes: {
|
||||
blink: {
|
||||
"from, 49.9%": { opacity: 0 },
|
||||
"to, 50%": { opacity: 1 },
|
||||
"from, 49.9%": { opacity: "0" },
|
||||
"to, 50%": { opacity: "1" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
} satisfies Config;
|
||||
@ -1,18 +1,13 @@
|
||||
{
|
||||
"include": [
|
||||
"remix.env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"app/routes/blog.$name.tsx"
|
||||
],
|
||||
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2019"],
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react-jsx",
|
||||
"moduleResolution": "node",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"target": "ES2019",
|
||||
"target": "ES2022",
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
@ -20,7 +15,6 @@
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
"module": "ES2022",
|
||||
|
||||
// Remix takes care of building everything in `remix build`.
|
||||
"noEmit": true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user