Improve linux dev story and update landing page / docs

README.md

@@ -12,15 +12,15 @@ where ease of use, performance, and developer experience go hand in hand.
 
 ### Setup
 
-`bun install && bun run src/db.ts && bun dev`
+`bun dev`
 
 Visit port 1234 and edit `server.tsx`
 
 ---
 
 ### Example
 
-This is the endpoint serving our initial landing page:
+This is the endpoint serving an example landing page:
 
 ```typescript
 app.get("/", ({ html }) =>

package.json

@@ -2,24 +2,25 @@
   "name": "hyperwave",
   "version": "0.1.0",
   "scripts": {
-    "build": "bun css && bun build --compile ./src/server.tsx",
-    "css": "unocss \"src/**/*.tsx\" -o public/styles/uno.css",
-    "css:watch": "unocss \"src/**/*.tsx\" -o public/styles/uno.css --watch",
+    "build": "bun build:css && bun build --compile ./src/server.tsx",
+    "build:css": "unocss \"src/**/*.tsx\" -o public/styles/uno.css",
+    "css": "unocss --watch \"src/**/*.tsx\" -o public/styles/uno.css",
     "db": "bun run src/db.ts",
-    "dev": "concurrently \"bun css:watch\" \"bun server:watch\"",
+    "dev": "bun install && concurrently --restart-tries=3 \"bun css\" \"nodemon --watch src --ext ts,tsx --exec 'bun run --hot src/server.tsx'\"",
     "prettier": "bunx prettier --write src/ test/ --plugin prettier-plugin-tailwindcss",
-    "server:watch": "bun --watch run src/server.tsx",
+    "server": "bun run --hot src/server.tsx",
     "test": "bun run test"
   },
   "dependencies": {
     "@unocss/preset-web-fonts": "^0.58.0",
     "hono": "^3.6.3",
+    "nodemon": "^3.1.0",
     "unocss": "^0.58.0",
     "zod": "^3.23.5"
   },
   "devDependencies": {
     "@unocss/cli": "^0.56.5",
-    "bun-types": "latest",
+    "bun-types": "^1.1.8",
     "concurrently": "^8.2.1",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.9"

public/styles/uno.css

@@ -20,103 +20,41 @@
 }
 
 /* layer: default */
-.fixed{position:fixed;}
-.relative{position:relative;}
-.sticky{position:sticky;}
-.left-10{left:2.5rem;}
-.right-8{right:2rem;}
-.top-0\.5{top:0.125rem;}
-.top-11{top:2.75rem;}
 .m-0{margin:0;}
 .m-auto{margin:auto;}
-.me{margin-inline-end:1rem;}
-.block{display:block;}
-.hidden{display:none;}
 .h-8{height:2rem;}
 .h-full{height:100%;}
-.max-h-14{max-height:3.5rem;}
-.min-h-14{min-height:3.5rem;}
-.w-16{width:4rem;}
-.w-40{width:10rem;}
-.w-80{width:20rem;}
-.w-full{width:100%;}
-.hover\:w-56:hover{width:14rem;}
 .flex{display:flex;}
 .flex-col{flex-direction:column;}
 .cursor-pointer{cursor:pointer;}
-.list-none{list-style-type:none;}
 .items-center{align-items:center;}
-.self-start{align-self:flex-start;}
 .justify-center{justify-content:center;}
-.justify-between{justify-content:space-between;}
 .gap-3{gap:0.75rem;}
-.gap-4{gap:1rem;}
 .gap-8{gap:2rem;}
 .border{border-width:1px;}
-.border-b-1{border-bottom-width:1px;}
-.border-blue-300{--un-border-opacity:1;border-color:rgb(147 197 253 / var(--un-border-opacity));}
 .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
 .focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
 .rounded-md{border-radius:0.375rem;}
 .border-none{border-style:none;}
 .border-solid{border-style:solid;}
-.border-b-solid{border-bottom-style:solid;}
-.bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
-.bg-blue-200{--un-bg-opacity:1;background-color:rgb(191 219 254 / var(--un-bg-opacity));}
 .bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}
-.bg-blue-50{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}
-.bg-blue-700{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
-.bg-blue-900{--un-bg-opacity:1;background-color:rgb(30 58 138 / var(--un-bg-opacity));}
+.bg-slate-100{--un-bg-opacity:1;background-color:rgb(241 245 249 / var(--un-bg-opacity));}
+.bg-slate-200{--un-bg-opacity:1;background-color:rgb(226 232 240 / var(--un-bg-opacity));}
+.bg-slate-50{--un-bg-opacity:1;background-color:rgb(248 250 252 / var(--un-bg-opacity));}
 .bg-transparent{background-color:transparent;}
-.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}
 .hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));}
-.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
-.fill-neutral-500{--un-fill-opacity:1;fill:rgb(115 115 115 / var(--un-fill-opacity));}
-.fill-white{--un-fill-opacity:1;fill:rgb(255 255 255 / var(--un-fill-opacity));}
 .p-0{padding:0;}
-.p-4{padding:1rem;}
 .px-10{padding-left:2.5rem;padding-right:2.5rem;}
 .px-4{padding-left:1rem;padding-right:1rem;}
 .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
 .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
-.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
-.py-4{padding-top:1rem;padding-bottom:1rem;}
-.pl-20{padding-left:5rem;}
+.py-8{padding-top:2rem;padding-bottom:2rem;}
 .pl-3{padding-left:0.75rem;}
-.pl-6{padding-left:1.5rem;}
 .pr-10{padding-right:2.5rem;}
-.text-left{text-align:left;}
 .text-base{font-size:1rem;line-height:1.5rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
 .text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity));}
-.text-slate-400{--un-text-opacity:1;color:rgb(148 163 184 / var(--un-text-opacity));}
-.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}
-.hover\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}
 .font-bold{font-weight:700;}
-.leading-5{line-height:1.25rem;}
 .font-lato{font-family:"Lato";}
-.uppercase{text-transform:uppercase;}
-.no-underline{text-decoration:none;}
-.opacity-0{opacity:0;}
-.group:hover .group-hover\:opacity-100{opacity:1;}
 .shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
-.shadow-sm{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
-.outline{outline-style:solid;}
-.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.transition-width{transition-property:width;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.duration-200{transition-duration:200ms;}
-.duration-300{transition-duration:300ms;}
-.duration-50{transition-duration:50ms;}
-@media (min-width: 640px){
-.sm\:ml-4{margin-left:1rem;}
-}
-@media (min-width: 768px){
-.md\:top-14{top:3.5rem;}
-.md\:block{display:block;}
-.md\:w-56{width:14rem;}
-.md\:w-96{width:24rem;}
-.md\:flex-row{flex-direction:row;}
-.md\:pl-60{padding-left:15rem;}
-.md\:pr-10{padding-right:2.5rem;}
-.md\:opacity-100{opacity:1;}
-}
+.outline{outline-style:solid;}

src/components/Layout.tsx

@@ -1,14 +1,10 @@
-import Magnify from "../../assets/icons/magnify";
-import Input from "./Input";
-import Nav from "./Nav";
-
 type Props = {
   title: string;
   currentPath?: string;
   children: any;
 };
 
-export default function Layout({ title, children, currentPath }: Props) {
+export default function Layout({ title, children }: Props) {
   return (
     <html lang="en" hx-boost="true" hx-swap="outerHTML transition:true">
       <head>
@@ -27,26 +23,7 @@ export default function Layout({ title, children, currentPath }: Props) {
       </head>
 
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
-
-      <body class="font-lato m-0 bg-blue-50 text-base">
-        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-4 border-blue-300 bg-blue-200 px-4 py-3 leading-5">
-          <a href="/" class="text-brown-800 text-sm no-underline">
-            <h1>🌊 hyperwave</h1>
-          </a>
-          <div class="relative hidden md:block">
-            <Input class="w-80 bg-white" placeholder="Search ..." />
-            <span class="relative right-8 top-0.5 fill-neutral-500">
-              <Magnify />
-            </span>
-          </div>
-        </header>
-
-        <Nav currentPath={currentPath} />
-
-        <main class="m-auto flex flex-col justify-center gap-8 py-4 pl-20 md:pl-60 md:pr-10">
-          {children}
-        </main>
-      </body>
+      <body class="font-lato m-0 p-0 text-base bg-slate-50">{children}</body>
     </html>
   );
 }