diff --git a/bun.lockb b/bun.lockb index 557d79c..5044326 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/lib/middleware/with-db.ts b/lib/middleware/with-db.ts index 5ae5826..5c22ae3 100644 --- a/lib/middleware/with-db.ts +++ b/lib/middleware/with-db.ts @@ -1,6 +1,6 @@ import type { DbClient } from "lib/db/db-client" import { createDatabase } from "lib/db/db-client" -import type { Middleware } from "winterspec" +import type { Middleware } from "winterspec/middleware" export const withDb: Middleware< {}, diff --git a/lib/middleware/with-react.tsx b/lib/middleware/with-react.tsx new file mode 100644 index 0000000..bbac2ce --- /dev/null +++ b/lib/middleware/with-react.tsx @@ -0,0 +1,96 @@ +import React from "react" +import { renderToString } from "react-dom/server" +import type { Middleware } from "winterspec/middleware" +import type { ReactNode } from "react" +import { Fragment } from "react" + +const tailwindStyle = ` +.btn { + @apply text-white visited:text-white m-1 bg-blue-500 hover:bg-blue-700 font-bold py-2 px-4 rounded; +} +a { + @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-800 m-1; +} +h2 { + @apply text-xl font-bold my-2; +} +input, select { + @apply border border-gray-300 rounded p-1 ml-0.5; +} +form { + @apply inline-flex flex-col gap-2 border border-gray-300 rounded p-2 m-2 text-xs; +} +button { + @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded; +} +` + +const renderBreadcrumbs = (pathComponents: string[]) => + pathComponents.map((component, index) => ( + + / + + {component} + + + )) + +const renderTimezoneDropdown = (timezone: string) => ( + +) + +export const withReact: Middleware< + {}, + { react: (component: ReactNode) => Response } +> = async (req, ctx, next) => { + ctx.react = (component: ReactNode) => { + const pathComponents = new URL(req.url).pathname.split("/").filter(Boolean) + const timezone = req.headers.get("X-Timezone") || "UTC" + + const html = renderToString( + + +