init remix app

2023-02-06 15:17:49 +08:00
parent 015977aa82
commit c03cf47bc3
16 changed files with 216 additions and 1 deletions
--- a/client/app/components/Footer.tsx
+++ b/client/app/components/Footer.tsx
@@ -0,0 +1,4 @@
+const Footer = () => {
+  return <div>Footer</div>;
+};
+export default Footer;
--- a/client/app/components/Header.tsx
+++ b/client/app/components/Header.tsx
@@ -0,0 +1,44 @@
+import { Link } from "@remix-run/react";
+
+const Header = () => {
+  return (
+    <header className="relative flex flex-col items-start justify-between bg-slate-700 sm:flex-row sm:items-center">
+      <h1 className="z-10 m-2.5 text-2xl">chessu</h1>
+      <input className="peer" type="checkbox" id="menu" hidden />
+      <label
+        htmlFor="menu"
+        className="absolute right-0 p-5 sm:hidden peer-checked:[&_div:first-child]:translate-y-1.5 peer-checked:[&_div:first-child]:rotate-45 peer-checked:[&_div:last-child]:-translate-y-1 peer-checked:[&_div:last-child]:-rotate-45"
+      >
+        <div
+          aria-hidden="true"
+          className="m-auto h-0.5 w-6 rounded bg-blue-500 transition duration-300"
+        ></div>
+        <div
+          aria-hidden="true"
+          className="m-auto mt-2 h-0.5 w-6 rounded bg-blue-500 transition duration-300"
+        ></div>
+      </label>
+      <div className="fixed flex h-full w-[calc(100%-4rem)] translate-x-[-100%] flex-col items-center bg-inherit pt-16 shadow-lg transition duration-300 peer-checked:translate-x-0 sm:static sm:flex sm:w-auto sm:translate-x-0 sm:flex-row sm:bg-inherit sm:pt-0 [&_a]:block [&_a]:text-center hover:[&_a]:bg-blue-500">
+        <nav className="w-full sm:w-auto">
+          <ul className="flex flex-col sm:flex-row">
+            <li>
+              <Link className="p-5" to="/">
+                Play
+              </Link>
+            </li>
+            <li>
+              <Link className="p-5" to="/games">
+                Watch
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <div className="flex w-full items-center sm:w-auto">
+          <button className="w-full p-5 sm:w-auto">themebtn</button>
+          <button className="w-full p-5 sm:w-auto">Sign in</button>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;
--- a/client/app/components/game/Board.tsx
+++ b/client/app/components/game/Board.tsx
@@ -0,0 +1,10 @@
+import { Chessboard } from "react-chessboard";
+
+const Board = () => {
+  return (
+    <div>
+      <Chessboard />
+    </div>
+  );
+};
+export default Board;
--- a/client/app/entry.client.tsx
+++ b/client/app/entry.client.tsx
@@ -0,0 +1,22 @@
+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);
+}
--- a/client/app/entry.server.tsx
+++ b/client/app/entry.server.tsx
@@ -0,0 +1,21 @@
+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(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}
--- a/client/app/root.tsx
+++ b/client/app/root.tsx
@@ -0,0 +1,34 @@
+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 (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Header />
+        <Outlet />
+        <Footer />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
--- a/client/app/routes/index.tsx
+++ b/client/app/routes/index.tsx
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <div>Index</div>;
+}