From c46bfcf8aa455788b708ac288d1b2cb3686f0398 Mon Sep 17 00:00:00 2001 From: Javi Aguilar <122741+itsjavi@users.noreply.github.com> Date: Sun, 11 May 2025 21:54:30 +0200 Subject: [PATCH 1/5] chore: add playground project --- packages/playground/.gitignore | 10 +++ packages/playground/README.md | 3 + packages/playground/app/app.css | 16 +++++ packages/playground/app/context.server.tsx | 28 ++++++++ packages/playground/app/entry.server.tsx | 3 + packages/playground/app/root.tsx | 67 ++++++++++++++++++ packages/playground/app/routes.ts | 7 ++ .../playground/app/routes/demos/[slug].tsx | 22 ++++++ .../playground/app/routes/demos/index.tsx | 41 +++++++++++ .../playground/app/routes/demos/layout.tsx | 9 +++ packages/playground/app/routes/page.tsx | 10 +++ packages/playground/app/server.node.ts | 6 ++ packages/playground/app/server.vercel.ts | 6 ++ packages/playground/app/welcome/welcome.tsx | 57 +++++++++++++++ packages/playground/package.json | 37 ++++++++++ packages/playground/public/favicon.ico | Bin 0 -> 15086 bytes packages/playground/react-router.config.ts | 12 ++++ packages/playground/tsconfig.json | 32 +++++++++ packages/playground/vite.config.ts | 16 +++++ 19 files changed, 382 insertions(+) create mode 100644 packages/playground/.gitignore create mode 100644 packages/playground/README.md create mode 100644 packages/playground/app/app.css create mode 100644 packages/playground/app/context.server.tsx create mode 100644 packages/playground/app/entry.server.tsx create mode 100644 packages/playground/app/root.tsx create mode 100644 packages/playground/app/routes.ts create mode 100644 packages/playground/app/routes/demos/[slug].tsx create mode 100644 packages/playground/app/routes/demos/index.tsx create mode 100644 packages/playground/app/routes/demos/layout.tsx create mode 100644 packages/playground/app/routes/page.tsx create mode 100644 packages/playground/app/server.node.ts create mode 100644 packages/playground/app/server.vercel.ts create mode 100644 packages/playground/app/welcome/welcome.tsx create mode 100644 packages/playground/package.json create mode 100644 packages/playground/public/favicon.ico create mode 100644 packages/playground/react-router.config.ts create mode 100644 packages/playground/tsconfig.json create mode 100644 packages/playground/vite.config.ts diff --git a/packages/playground/.gitignore b/packages/playground/.gitignore new file mode 100644 index 0000000..7cc7e7b --- /dev/null +++ b/packages/playground/.gitignore @@ -0,0 +1,10 @@ +.DS_Store +*.local + +node_modules/ +.local/ +dist/ + +# React Router +.react-router/ +build/ diff --git a/packages/playground/README.md b/packages/playground/README.md new file mode 100644 index 0000000..50621e1 --- /dev/null +++ b/packages/playground/README.md @@ -0,0 +1,3 @@ +# PizzaJS Playground + +A playground to integrate all PizzaJS libraries. diff --git a/packages/playground/app/app.css b/packages/playground/app/app.css new file mode 100644 index 0000000..78af9b4 --- /dev/null +++ b/packages/playground/app/app.css @@ -0,0 +1,16 @@ +@import 'tailwindcss'; + +@theme { + --font-sans: + 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; +} + +html, +body { + @apply bg-white dark:bg-gray-950; + + @media (prefers-color-scheme: dark) { + color-scheme: dark; + } +} diff --git a/packages/playground/app/context.server.tsx b/packages/playground/app/context.server.tsx new file mode 100644 index 0000000..abdcbe7 --- /dev/null +++ b/packages/playground/app/context.server.tsx @@ -0,0 +1,28 @@ +import type { HttpBindings } from '@hono/node-server' +import type { Context } from 'hono' +import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router' + +export const getLoadContext = async (ctx: Context<{ Bindings: HttpBindings }>) => { + const req = ctx.req.raw + const url = new URL(req.url) + const cookie = req.headers.get('Cookie') ?? '' + const userAgent = req.headers.get('User-Agent') + + return { + url, + userAgent, + cookie, + // other data, e.g.: + // lang, + // session + } +} + +export interface LoadContext extends Awaited> {} +export type LoaderFunctionArgsWithContext = LoaderFunctionArgs +export type ActionFunctionArgsWithContext = ActionFunctionArgs +export type ServerFunctionArgsWithContext = LoaderFunctionArgsWithContext | ActionFunctionArgsWithContext + +declare module 'react-router' { + interface AppLoadContext extends LoadContext {} +} diff --git a/packages/playground/app/entry.server.tsx b/packages/playground/app/entry.server.tsx new file mode 100644 index 0000000..a680181 --- /dev/null +++ b/packages/playground/app/entry.server.tsx @@ -0,0 +1,3 @@ +import { handleRequest } from '@pizzajsdev/react-router-hono/server-entry' + +export default handleRequest diff --git a/packages/playground/app/root.tsx b/packages/playground/app/root.tsx new file mode 100644 index 0000000..1e507b3 --- /dev/null +++ b/packages/playground/app/root.tsx @@ -0,0 +1,67 @@ +import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router' + +import type { Route } from './+types/root' +import appInlineCss from './app.css?inline' + +export const links: Route.LinksFunction = () => [ + { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, + { + rel: 'preconnect', + href: 'https://fonts.gstatic.com', + crossOrigin: 'anonymous', + }, + { + as: 'style', + rel: 'preload', + href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + }, +] + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + + + + + + +