Fix todos!

packages/http/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

packages/http/src/routes/evals.tsx

@@ -1,9 +1,9 @@
 import kv from "@workshop/shared/kv"
 import { type Head, type LoaderProps } from "@workshop/nano-remix"
+import "../../index.css"
 
 export const head: Head = {
   title: "Evals",
-  scripts: [{ src: "https://cdn.tailwindcss.com" }],
 }
 
 export const loader = async (_req: Request) => {

packages/http/src/routes/reminders.tsx

@@ -5,7 +5,6 @@ import { CreateReminder } from "@/components/createReminder"
 
 export const head: Head = {
   title: "Reminders",
-  scripts: [{ src: "https://cdn.tailwindcss.com" }],
 }
 
 export const loader = async (req: Request) => {

packages/http/src/routes/todos/[id].tsx

@@ -3,10 +3,10 @@ import { submitAction, useAction, type Head, type LoaderProps } from "@workshop/
 import { useCallback } from "hono/jsx/dom"
 import { TodoEditor } from "@workshop/todo"
 import { debounce } from "@workshop/shared/utils"
+import "../../index.css"
 
 export const head: Head = {
   title: "Todos",
-  scripts: [{ src: "https://cdn.tailwindcss.com" }],
 }
 
 export const loader = async (_req: Request, params: { id: string }) => {

packages/http/src/routes/todos/index.tsx

@@ -1,9 +1,9 @@
 import KV from "@workshop/shared/kv"
 import { type Head, type LoaderProps } from "@workshop/nano-remix"
+import "../../index.css"
 
 export const head: Head = {
   title: "Todos",
-  scripts: [{ src: "https://cdn.tailwindcss.com" }],
 }
 
 export const loader = async () => {

packages/nano-remix/scripts/build.ts

@@ -1,5 +1,5 @@
 import { mkdirSync } from "node:fs"
-import { join, extname, dirname, basename } from "node:path"
+import { join, extname, dirname, basename, relative } from "node:path"
 
 if (!import.meta.main) throw new Error("This script is intended to be run as a cli tool.")
 
@@ -19,9 +19,14 @@ const buildDynamicRoute = async ({ distDir, routeName, filepath }: BuildRouteOpt
   const dynamicRouteFilepath = join(distDir, "routes", outDir, filename)
   await mkdirSync(dirname(dynamicRouteFilepath), { recursive: true })
 
+  // Create a relative import path from the generated file to the source file
+  const relativeImportPath = relative(dirname(dynamicRouteFilepath), filepath)
+  // Normalize the path for cross-platform compatibility and ensure forward slashes
+  const normalizedImportPath = relativeImportPath.replace(/\\/g, "/")
+
   // Only import the Component so that tree-shaking will get rid of the server-side code
   const code = `
-import Component from "${filepath}"
+import Component from "${normalizedImportPath}"
 import { wrapComponentWithLoader} from "@workshop/nano-remix"
 import { render } from 'hono/jsx/dom'
 
@@ -36,7 +41,7 @@ render(<WrappedComponent />, root)`
     outdir: join(distDir, outDir),
     sourcemap: "inline",
     target: "browser",
-    splitting: true,
+    format: "esm",
     plugins: [await import("bun-plugin-tailwind").then((m) => m.default)],
   })
 
@@ -58,7 +63,6 @@ const [distDir, routeName, filepath] = args as [string, string, string]
 
 try {
   await buildDynamicRoute({ distDir, routeName, filepath })
-  console.log(`✅ Successfully built route: ${routeName}`)
 } catch (error) {
   console.error(`❌ Build failed:`, error)
   process.exit(1)

packages/nano-remix/src/build.ts

@@ -1,29 +0,0 @@
-import { join } from "node:path"
-
-export type BuildRouteOptions = {
-  distDir: string
-  routeName: string
-  filepath: string
-}
-
-export const buildDynamicRoute = async ({ distDir, routeName, filepath }: BuildRouteOptions) => {
-  const scriptPath = join(import.meta.dirname, "../scripts/build.ts")
-
-  const proc = Bun.spawn({
-    cmd: ["bun", "run", scriptPath, distDir, routeName, filepath],
-    stdout: "pipe",
-    stderr: "pipe",
-  })
-
-  const exitCode = await proc.exited
-
-  if (exitCode !== 0) {
-    const stderr = await new Response(proc.stderr).text()
-    throw new Error(`Build process failed with exit code ${exitCode}: ${stderr}`)
-  }
-
-  const stdout = await new Response(proc.stdout).text()
-  console.log(stdout)
-
-  return { success: true }
-}

packages/todo/src/todoEditor.tsx

@@ -112,7 +112,7 @@ export const TodoEditor = ({ defaultValue, onChange }: TodoEditorProps) => {
 
 const KeyboardShortcuts = ({ onClose }: { onClose: () => void }) => {
   return (
-    <div class="fixed inset-0 bg-black bg-opacity-30 z-50" onClick={onClose}>
+    <div class="fixed inset-0 bg-[#00000088] z-50" onClick={onClose}>
       <div class="fixed inset-0 flex items-center justify-center">
         <div class="bg-white rounded-sm p-3 shadow-xl" onClick={(e) => e.stopPropagation()}>
           <ul class="grid grid-cols-1 gap-2 text-xs">

packages/todo/src/todoKeymap.ts

@@ -43,7 +43,7 @@ export const buildKeyBindings = (
   },
   {
     label: "Show keyboard shortcuts",
-    key: "alt-/",
+    key: "cmd-k",
     preventDefault: true,
     run: (_view: EditorView) => {
       setShowShortcuts?.(true)