From 862cada547dd585608a13d4a41ed8ed95a7affdd Mon Sep 17 00:00:00 2001 From: Nathaniel Tampus Date: Mon, 13 Feb 2023 23:12:16 +0800 Subject: [PATCH] switch to next.js - init next app - add daisyUI --- .eslintrc | 2 +- README.md | 4 +- client/.gitignore | 43 +++++++++++++---- client/README.md | 34 -------------- client/app/components/Footer.tsx | 4 -- client/app/components/Header.tsx | 44 ------------------ client/app/components/game/Board.tsx | 10 ---- client/app/entry.client.tsx | 22 --------- client/app/entry.server.tsx | 21 --------- client/app/root.tsx | 34 -------------- client/app/routes/index.tsx | 3 -- client/next.config.js | 6 +++ client/package.json | 38 +++++++-------- client/postcss.config.js | 6 +++ client/public/favicon.ico | Bin 16958 -> 0 bytes client/remix.config.js | 13 ------ client/remix.env.d.ts | 2 - client/server.js | 4 -- client/src/pages/_app.tsx | 6 +++ client/src/pages/_document.tsx | 13 ++++++ client/src/pages/api/hello.ts | 10 ++++ client/src/pages/index.tsx | 5 ++ .../app.css => src/styles/globals.css} | 0 client/tailwind.config.js | 8 +++- client/tsconfig.json | 40 ++++++++-------- package.json | 6 +-- 26 files changed, 132 insertions(+), 246 deletions(-) delete mode 100644 client/README.md delete mode 100644 client/app/components/Footer.tsx delete mode 100644 client/app/components/Header.tsx delete mode 100644 client/app/components/game/Board.tsx delete mode 100644 client/app/entry.client.tsx delete mode 100644 client/app/entry.server.tsx delete mode 100644 client/app/root.tsx delete mode 100644 client/app/routes/index.tsx create mode 100644 client/next.config.js create mode 100644 client/postcss.config.js delete mode 100644 client/public/favicon.ico delete mode 100644 client/remix.config.js delete mode 100644 client/remix.env.d.ts delete mode 100644 client/server.js create mode 100644 client/src/pages/_app.tsx create mode 100644 client/src/pages/_document.tsx create mode 100644 client/src/pages/api/hello.ts create mode 100644 client/src/pages/index.tsx rename client/{styles/app.css => src/styles/globals.css} (100%) diff --git a/.eslintrc b/.eslintrc index 4c444ea..c5d43a6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,3 @@ { - "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "prettier"] + "extends": ["next", "prettier"] } diff --git a/README.md b/README.md index e40da7c..8b9619c 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ Online 2-player chess. Live demo at [ches.su](https://ches.su) -- React (Remix) -- Tailwind CSS +- React (Next.js) +- Tailwind CSS + daisyUI - [react-chessboard](https://github.com/Clariity/react-chessboard) - [chess.js](https://github.com/jhlywa/chess.js) - Express.js diff --git a/client/.gitignore b/client/.gitignore index b32d337..c87c9b3 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -1,9 +1,36 @@ -.cache -.vercel -.output +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -/build/ -/public/build -/api/index.js -/api/index.js.map -/app/styles/app.css \ No newline at end of file +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/client/README.md b/client/README.md deleted file mode 100644 index 944936b..0000000 --- a/client/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# Welcome to Remix! - -- [Remix Docs](https://remix.run/docs) - -## Deployment - -After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed. - -If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli): - -```sh -npm i -g vercel -vercel -``` - -It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git). - -## Development - -To run your Remix app locally, make sure your project's local dependencies are installed: - -```sh -npm install -``` - -Afterwards, start the Remix development server like so: - -```sh -npm run dev -``` - -Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go! - -If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed. diff --git a/client/app/components/Footer.tsx b/client/app/components/Footer.tsx deleted file mode 100644 index 117cf79..0000000 --- a/client/app/components/Footer.tsx +++ /dev/null @@ -1,4 +0,0 @@ -const Footer = () => { - return
Footer
; -}; -export default Footer; diff --git a/client/app/components/Header.tsx b/client/app/components/Header.tsx deleted file mode 100644 index 342e4c2..0000000 --- a/client/app/components/Header.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Link } from "@remix-run/react"; - -const Header = () => { - return ( -
-

chessu

- - -
- -
- - -
-
-
- ); -}; -export default Header; diff --git a/client/app/components/game/Board.tsx b/client/app/components/game/Board.tsx deleted file mode 100644 index ed50e21..0000000 --- a/client/app/components/game/Board.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Chessboard } from "react-chessboard"; - -const Board = () => { - return ( -
- -
- ); -}; -export default Board; diff --git a/client/app/entry.client.tsx b/client/app/entry.client.tsx deleted file mode 100644 index 8338545..0000000 --- a/client/app/entry.client.tsx +++ /dev/null @@ -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, - - - - ); - }); -} - -if (typeof requestIdleCallback === "function") { - requestIdleCallback(hydrate); -} else { - // Safari doesn't support requestIdleCallback - // https://caniuse.com/requestidlecallback - setTimeout(hydrate, 1); -} diff --git a/client/app/entry.server.tsx b/client/app/entry.server.tsx deleted file mode 100644 index fb8ea87..0000000 --- a/client/app/entry.server.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { EntryContext } from "@remix-run/node"; -import { RemixServer } from "@remix-run/react"; -import { renderToString } from "react-dom/server"; - -export default function handleRequest( - request: Request, - responseStatusCode: number, - responseHeaders: Headers, - remixContext: EntryContext -) { - const markup = renderToString( - - ); - - responseHeaders.set("Content-Type", "text/html"); - - return new Response("" + markup, { - headers: responseHeaders, - status: responseStatusCode, - }); -} diff --git a/client/app/root.tsx b/client/app/root.tsx deleted file mode 100644 index 725bb2a..0000000 --- a/client/app/root.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { MetaFunction } from "@remix-run/node"; -import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"; - -import Header from "./components/Header"; -import Footer from "./components/Footer"; - -// Tailwind CSS -import styles from "./styles/app.css"; -export const links = () => [{ rel: "stylesheet", href: styles }]; - -export const meta: MetaFunction = () => ({ - charset: "utf-8", - title: "Chessu", - viewport: "width=device-width,initial-scale=1" -}); - -export default function App() { - return ( - - - - - - -
- -