diff options
| author |   简律纯 <hsiangnianian@outlook.com> | 2023-04-28 01:47:57 +0800 |
|---|---|---|
| committer | 简律纯 <hsiangnianian@outlook.com> | 2023-04-28 01:47:57 +0800 |
| commit | 8b2c4a38a461ff5ecc95972291bc711e2c5dec9a (patch) | |
| tree | 29f552e3df949073e21bf5c76d7abc3044830ec6 /examples/kitchen-sink/apps/blog/app | |
| parent | fc8c5fdce62fb229202659408798a7b6c98f6e8b (diff) | |
| download | HydroRoll-8b2c4a38a461ff5ecc95972291bc711e2c5dec9a.tar.gz HydroRoll-8b2c4a38a461ff5ecc95972291bc711e2c5dec9a.zip | |
Diffstat (limited to 'examples/kitchen-sink/apps/blog/app')
| -rw-r--r-- | examples/kitchen-sink/apps/blog/app/entry.client.tsx | 22 | ||||
| -rw-r--r-- | examples/kitchen-sink/apps/blog/app/entry.server.tsx | 18 | ||||
| -rw-r--r-- | examples/kitchen-sink/apps/blog/app/root.tsx | 37 | ||||
| -rw-r--r-- | examples/kitchen-sink/apps/blog/app/routes/index.tsx | 18 | ||||
| -rw-r--r-- | examples/kitchen-sink/apps/blog/app/styles.css | 55 |
5 files changed, 150 insertions, 0 deletions
diff --git a/examples/kitchen-sink/apps/blog/app/entry.client.tsx b/examples/kitchen-sink/apps/blog/app/entry.client.tsx new file mode 100644 index 0000000..8338545 --- /dev/null +++ b/examples/kitchen-sink/apps/blog/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); +} diff --git a/examples/kitchen-sink/apps/blog/app/entry.server.tsx b/examples/kitchen-sink/apps/blog/app/entry.server.tsx new file mode 100644 index 0000000..5112e09 --- /dev/null +++ b/examples/kitchen-sink/apps/blog/app/entry.server.tsx @@ -0,0 +1,18 @@ +import handleRequest from "@vercel/remix-entry-server"; +import { RemixServer } from "@remix-run/react"; +import type { EntryContext } from "@remix-run/server-runtime"; + +export default function ( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext +) { + const remixServer = <RemixServer context={remixContext} url={request.url} />; + return handleRequest( + request, + responseStatusCode, + responseHeaders, + remixServer + ); +} diff --git a/examples/kitchen-sink/apps/blog/app/root.tsx b/examples/kitchen-sink/apps/blog/app/root.tsx new file mode 100644 index 0000000..23a08a8 --- /dev/null +++ b/examples/kitchen-sink/apps/blog/app/root.tsx @@ -0,0 +1,37 @@ +import type { MetaFunction, LinksFunction } from "@remix-run/node"; +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "@remix-run/react"; +import styles from "~/styles.css"; +import { Analytics } from "@vercel/analytics/react"; + +export const meta: MetaFunction = () => ({ + charset: "utf-8", + title: "Blog | Kitchen Sink", + viewport: "width=device-width,initial-scale=1", +}); + +export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }]; + +export default function App() { + return ( + <html lang="en"> + <head> + <Meta /> + <Links /> + </head> + <body> + <Outlet /> + <ScrollRestoration /> + <Scripts /> + <LiveReload /> + <Analytics /> + </body> + </html> + ); +} diff --git a/examples/kitchen-sink/apps/blog/app/routes/index.tsx b/examples/kitchen-sink/apps/blog/app/routes/index.tsx new file mode 100644 index 0000000..92dc0cd --- /dev/null +++ b/examples/kitchen-sink/apps/blog/app/routes/index.tsx @@ -0,0 +1,18 @@ +import { CounterButton, NewTabLink } from "ui"; + +export default function Index() { + return ( + <div className="container"> + <h1 className="title"> + Blog <br /> + <span>Kitchen Sink</span> + </h1> + <CounterButton /> + <p className="description"> + Built With{" "} + <NewTabLink href="https://turbo.build/repo">Turborepo</NewTabLink> +{" "} + <NewTabLink href="https://remix.run/">Remix</NewTabLink> + </p> + </div> + ); +} diff --git a/examples/kitchen-sink/apps/blog/app/styles.css b/examples/kitchen-sink/apps/blog/app/styles.css new file mode 100644 index 0000000..d4b766e --- /dev/null +++ b/examples/kitchen-sink/apps/blog/app/styles.css @@ -0,0 +1,55 @@ +html { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; + line-height: 1.5; + tab-size: 4; +} + +body { + margin: 0; +} + +.container { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1.5rem; + max-width: 100%; + margin: 0 auto; + padding: 0 16px; + text-align: center; +} + +.title { + font-size: 3rem; + font-weight: 700; + margin: 0; +} + +.title span { + display: inline-block; + background-image: linear-gradient(to right, #3b82f6, #ef4444); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.description { + color: #9ca3af; + font-weight: 500; +} + +.description a { + color: #3b82f6; + text-decoration: none; +} + +.description a:hover { + text-decoration: underline; +} |