nullndr/website
1
1
Fork 0
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 4594610B9C8F91C5
15 changed files with 2367 additions and 5821 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Dockerfile
View File

@ -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"]

8
app/components/BlogWrapper.tsx
View File

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

2
app/components/Body.tsx
View File

@ -1,5 +1,3 @@
import React from "react";
export function Body({ children }: React.PropsWithChildren) { export function Body({ children }: React.PropsWithChildren) {
return ( return (
<body className="bg-[#202020] text-[#d6d6d6] font-['monospace']"> <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) { export function LinkWrapper({ children }: React.PropsWithChildren) {
return ( return (
<div className="flex flex-col items-center"> <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} {children}
</div> </div>
</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 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 { import {
Link, Link,
Links, Links,
@ -21,7 +21,7 @@ export const links: LinksFunction = () => [
{ rel: "stylesheet", href: codeHikeStyle }, { rel: "stylesheet", href: codeHikeStyle },
]; ];
export const meta: V2_MetaFunction = () => [ export const meta: MetaFunction = () => [
{ {
charSet: "utf-8", 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 { useLoaderData } from "@remix-run/react";
import { getMDXComponent } from "mdx-bundler/client"; import { getMDXComponent } from "mdx-bundler/client";
import React from "react"; import React from "react";
@ -11,7 +11,7 @@ export const handle = {
text: "Go Back", text: "Go Back",
}; };
export const loader = async ({ params }: LoaderArgs) => { export const loader = async ({ params }: LoaderFunctionArgs) => {
const name = params.name; const name = params.name;
if (name == null) { if (name == null) {
throw new Response(null, { status: 400 }); 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"; import { useMatch } from "./useMatch";
export default function () { export default function () {
const { handle } = useMatch(); const { handle } = useMatch() as unknown as {
handle: { to: string; text: string };
};
return ( return (
<div> <div>
<LinkWrapper> <LinkWrapper>

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

@ -33,7 +33,7 @@ export const getMdxFile = async (file: string) => {
}; };
export const findPosts = async () => { export const findPosts = async () => {
const files = await readdir("posts"); const files = await readdir("./posts");
const posts: (FrontMatter & { const posts: (FrontMatter & {
filename: string; filename: string;
})[] = []; })[] = [];
@ -66,6 +66,6 @@ export const findPosts = async () => {
} }
return posts.sort((a, b) => 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,
); );
}; };

7950
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

30
package.json
View File

@ -5,29 +5,29 @@
"build": "remix build", "build": "remix build",
"dev": "remix dev", "dev": "remix dev",
"start": "remix-serve build", "start": "remix-serve build",
"typecheck": "tsc" "typecheck": "tsc --noEmit --pretty --skipLibCheck"
}, },
"dependencies": { "dependencies": {
"@code-hike/mdx": "^0.8.3", "@code-hike/mdx": "^0.8.3",
"@remix-run/node": "^1.16.0", "@remix-run/node": "^2.1.0",
"@remix-run/react": "^1.16.0", "@remix-run/react": "^2.1.0",
"@remix-run/serve": "^1.16.0", "@remix-run/serve": "^2.1.0",
"esbuild": "^0.17.11", "esbuild": "^0.18.18",
"isbot": "^3.6.5", "isbot": "^3.6.13",
"mdx-bundler": "^9.2.1", "mdx-bundler": "^9.2.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"shiki": "^0.14.2" "shiki": "^0.14.3"
}, },
"devDependencies": { "devDependencies": {
"@remix-run/dev": "^1.16.0", "@remix-run/dev": "^2.1.0",
"@remix-run/eslint-config": "^1.16.0", "@remix-run/eslint-config": "^2.1.0",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"@types/react": "^18.0.25", "@types/react": "^18.2.18",
"@types/react-dom": "^18.0.8", "@types/react-dom": "^18.2.7",
"eslint": "^8.27.0", "eslint": "^8.46.0",
"react-icons": "^4.7.1", "react-icons": "^4.10.1",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.3",
"typescript": "^5.0.4" "typescript": "^5.1.6"
} }
} }

6
remix.config.js
View File

@ -4,10 +4,4 @@ module.exports = {
serverDependenciesToBundle: ["mdx-bundler"], serverDependenciesToBundle: ["mdx-bundler"],
tailwind: true, tailwind: true,
serverModuleFormat: "cjs", serverModuleFormat: "cjs",
future: {
v2_routeConvention: true,
v2_errorBoundary: true,
v2_normalizeFormMethod: true,
v2_meta: true,
},
}; };

12
tailwind.config.js → tailwind.config.ts
View File

@ -1,5 +1,7 @@
/** @type {import('tailwindcss').Config} */
module.exports = { import type { Config} from "tailwindcss"
export default {
content: ["./app/**/*.{ts,tsx}"], content: ["./app/**/*.{ts,tsx}"],
theme: { theme: {
extend: { extend: {
@ -9,11 +11,11 @@ module.exports = {
keyframes: { keyframes: {
blink: { blink: {
"from, 49.9%": { opacity: 0 }, "from, 49.9%": { opacity: "0" },
"to, 50%": { opacity: 1 }, "to, 50%": { opacity: "1" },
}, },
}, },
}, },
}, },
plugins: [require("@tailwindcss/typography")], plugins: [require("@tailwindcss/typography")],
}; } satisfies Config;

14
tsconfig.json
View File

@ -1,18 +1,13 @@
{ {
"include": [ "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"remix.env.d.ts",
"**/*.ts",
"**/*.tsx",
"app/routes/blog.$name.tsx"
],
"compilerOptions": { "compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2019"], "lib": ["DOM", "DOM.Iterable", "ES2022"],
"isolatedModules": true, "isolatedModules": true,
"esModuleInterop": true, "esModuleInterop": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "Bundler",
"resolveJsonModule": true, "resolveJsonModule": true,
"target": "ES2019", "target": "ES2022",
"strict": true, "strict": true,
"allowJs": true, "allowJs": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
@ -20,7 +15,6 @@
"paths": { "paths": {
"~/*": ["./app/*"] "~/*": ["./app/*"]
}, },
"module": "ES2022",
// Remix takes care of building everything in `remix build`. // Remix takes care of building everything in `remix build`.
"noEmit": true "noEmit": true