Improve landing page

Author: tireymorris

README.md

@@ -1,101 +1,34 @@
-# hyperwave 🌊
+# hyperwave
 
-hyperwave is a server-side framework for building web applications.
+hyperwave combines the benefits of traditional server-rendered applications with the flexibility of modern client-side frameworks.
 
-- fast: tiny payloads with no bloated client side rendering
-- productive: build _really_ fast with htmx, tailwind, tsx, hyperscript
-- ergonomic: best tooling of modern tooling combined with rock solid app architecture
-- portable: compile a binary to deploy anywhere
+- **Performance:** Server-side rendering ensures fast, responsive applications, tailored to produce the smallest possible bundles.
+- **Developer experience:** HTMX and Tailwind provide a minimalistic and declarative approach to building user interfaces
+- **Deployment:** bun applications can be easily deployed on any platform as portable binaries
 
-### Motivation
+## Getting started
 
-- Drastically reduce time from idea to rendered UI
-- Very little cognitive friction to creating something new, after initial learning curve
+Follow these steps to start developing with hyperwave:
 
-### Comparison
+1. Clone the repository:
 
-![image](https://github.com/tireymorris/hyperwave/assets/3528600/561b5536-5660-469d-b80a-9883f45ab676)
+   ```sh
+   git clone https://github.com/tireymorris/hyperwave.git
+   cd hyperwave
+   ```
 
-### Setup
+2. Install dependencies:
 
-`bun dev`
+   ```sh
+   bun install
+   ```
 
-Visit port 1234 and edit `server.tsx`
+3. Start the development server:
 
----
+   ```sh
+   bun dev
+   ```
 
-### Example
+4. Visit `http://localhost:1234` in your browser.
 
-This is the endpoint serving an example landing page:
-
-```typescript
-app.get("/", ({ html }) =>
-  html(
-    <Layout title="hyperwave 🌊">
-      <section class="flex flex-col gap-8">
-        <div>
-          <button
-            class="bg-blue-100 p-4 text-sm font-bold rounded-md shadow-sm"
-            hx-get="/instructions"
-            hx-target="closest div"
-            _="on click toggle .loading"
-          >
-            fetch instructions from <code>/instructions</code>
-          </button>
-        </div>
-      </section>
-    </Layout>,
-  ),
-);
-```
-
-- The API serves a full HTML document to the client, which includes Tailwind classes and HTMX attributes
-- The response is wrapped in a `<Layout />` tag, a server-rendered functional component, which takes a `title` prop
-- The button, when clicked, will issue a `GET` request to `/instructions` and replace the content of its parent div with the response.
-- Includes a tiny hyperscript to toggle a class when the button is clicked
-
----
-
-### Deployment
-
-Build an executable for your current architecture with `bun run build`
-
-`PORT` environment variable is available if needed (default is 1234)
-
-Note: deploy `public/` with the executable, it contains the generated UnoCSS build.
-
----
-
-### Components
-
-- [bun](https://bun.sh/) provides the bundler, runtime, test runner, and package manager.
-- [SQLite](https://bun.sh/docs/api/sqlite) is production-ready and built into Bun.
-- [hono](https://hono.dev) is a robust web framework with great DX and performance
-- [unoCSS](https://unocss.dev/integrations/cli) is Tailwind-compatible and generates only the styles used in application code.
-- [htmx](https://htmx.org/reference/) gives 99% of the client-side interactivity most apps need.
-- [hyperscript](http://hyperscript.org) is a scripting library for rapid application development.
-- [zod](https://zod.dev/) is a powerful runtime validation library.
-
----
-
-### Why switch?
-
-**Speed and performance**
-
-- hyperwave is designed to generate the smallest possible payloads
-- hono generally benchmarks better than any comparable server
-
-**Simplicity**
-
-- Bun saves us a ton of time and effort fighting tooling issues
-- SPAs are over-prescribed and inherently introduce serious costs
-
-**Developer experience**
-
-- Better primitives for quickly building UX
-- Uniform interface simplifies writing and reading code
-
-**Architectural benefit**
-
-- Can scale backend and product independently, loosely coupled
-- Deployment is as simple as compiling and running a binary 😎
+5. Start editing `server.tsx` to see your changes live.

public/styles/uno.css

@@ -19,43 +19,80 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+/* layer: shortcuts */
+.container{width:100%;}
+@media (min-width: 640px){
+.container{max-width:640px;}
+}
+@media (min-width: 768px){
+.container{max-width:768px;}
+}
+@media (min-width: 1024px){
+.container{max-width:1024px;}
+}
+@media (min-width: 1280px){
+.container{max-width:1280px;}
+}
+@media (min-width: 1536px){
+.container{max-width:1536px;}
+}
 /* layer: default */
 .m-0{margin:0;}
-.m-auto{margin:auto;}
+.mx-auto{margin-left:auto;margin-right:auto;}
+.mb-4{margin-bottom:1rem;}
+.mb-6{margin-bottom:1.5rem;}
+.mt-4{margin-top:1rem;}
+.mt-6{margin-top:1.5rem;}
 .h-8{height:2rem;}
-.h-full{height:100%;}
+.h-auto{height:auto;}
+.max-w-4xl{max-width:56rem;}
+.min-h-screen{min-height:100vh;}
+.w-full{width:100%;}
 .flex{display:flex;}
-.flex-col{flex-direction:column;}
 .cursor-pointer{cursor:pointer;}
+.list-disc{list-style-type:disc;}
+.list-inside{list-style-position:inside;}
 .items-center{align-items:center;}
 .justify-center{justify-content:center;}
 .gap-3{gap:0.75rem;}
-.gap-8{gap:2rem;}
 .border{border-width:1px;}
 .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{border-radius:0.25rem;}
+.rounded-lg{border-radius:0.5rem;}
 .rounded-md{border-radius:0.375rem;}
 .border-none{border-style:none;}
 .border-solid{border-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-slate-200{--un-bg-opacity:1;background-color:rgb(226 232 240 / var(--un-bg-opacity));}
+.bg-purple-600{--un-bg-opacity:1;background-color:rgb(147 51 234 / 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));}
-.p-0{padding:0;}
-.px-10{padding-left:2.5rem;padding-right:2.5rem;}
+.hover\:bg-purple-700:hover{--un-bg-opacity:1;background-color:rgb(126 34 206 / var(--un-bg-opacity));}
+.active\:bg-purple-800:active{--un-bg-opacity:1;background-color:rgb(107 33 168 / var(--un-bg-opacity));}
+.from-blue-300{--un-gradient-from-position:0%;--un-gradient-from:rgb(147 197 253 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(147 197 253 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.via-purple-300{--un-gradient-via-position:50%;--un-gradient-to:rgb(216 180 254 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(216 180 254 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);}
+.to-pink-300{--un-gradient-to-position:100%;--un-gradient-to:rgb(249 168 212 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
+.bg-gradient-to-br{--un-gradient-shape:to bottom right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
+.p-8{padding:2rem;}
 .px-4{padding-left:1rem;padding-right:1rem;}
 .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
+.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
 .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
-.py-8{padding-top:2rem;padding-bottom:2rem;}
 .pl-3{padding-left:0.75rem;}
 .pr-10{padding-right:2.5rem;}
+.text-2xl{font-size:1.5rem;line-height:2rem;}
 .text-base{font-size:1rem;line-height:1.5rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
+.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity));}
+.text-gray-900{--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity));}
 .text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity));}
+.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity));}
 .text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity));}
+.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}
 .font-bold{font-weight:700;}
-.font-lato{font-family:"Lato";}
+.font-semibold{font-weight:600;}
+.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
+.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px 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-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);}
 .outline{outline-style:solid;}

src/components/Layout.tsx

@@ -1,10 +1,10 @@
-type Props = {
+export type LayoutProps = {
   title: string;
   currentPath?: string;
   children: any;
 };
 
-export default function Layout({ title, children }: Props) {
+export default function Layout({ title, children }: LayoutProps) {
   return (
     <html lang="en" hx-boost="true" hx-swap="outerHTML transition:true">
       <head>
@@ -21,9 +21,10 @@ export default function Layout({ title, children }: Props) {
         <script>htmx.config.globalViewTransitions = true</script>
         <script src="https://unpkg.com/[email protected]"></script>
       </head>
-
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
-      <body class="font-lato m-0 bg-blue-100 p-0 text-base">{children}</body>
+      <body class="font-sans m-0 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 text-gray-900 min-h-screen">
+        {children}
+      </body>
     </html>
   );
 }

src/server.tsx

@@ -1,32 +1,89 @@
 import { Hono } from "hono";
 import { serveStatic } from "hono/bun";
 import { logger } from "hono/logger";
+import Button from "./components/Button.tsx";
 import Layout from "./components/Layout.tsx";
 
 const app = new Hono();
 
 app.use("/styles/*", serveStatic({ root: "./public/" }));
 app.use("*", logger());
 
-app.get("/", (c) =>
-  c.html(
+app.get("/", async (c) => {
+  return c.html(
     <Layout title="hyperwave">
-      <main class="m-auto flex h-full flex-col items-center gap-8 px-10 py-8">
-        <h1>🌊 welcome to hyperwave</h1>
-        <pre class="rounded-md bg-blue-200 px-4 py-2">
-          ⌨️ edit <code class="bg-slate-200">src/server.tsx</code>
-        </pre>
-        <pre class="rounded-md bg-blue-200 px-4 py-2">
-          📚 read the{" "}
-          <a href="https://github.com/tireymorris/hyperwave?tab=readme-ov-file#hyperwave-">
-            friendy manual
-          </a>
-          !
-        </pre>
+      <main class="container mx-auto py-10 px-4">
+        <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-8">
+          <section class="mb-6">
+            <h2 class="text-2xl font-semibold text-blue-600 mb-4">
+              What is hyperwave?
+            </h2>
+            <p class="mb-4">
+              hyperwave combines the benefits of traditional server-rendered
+              applications with the flexibility of modern client-side
+              frameworks. This blend results in fast load times, efficient
+              development workflows, and easy deployment.
+            </p>
+            <ul class="list-disc list-inside">
+              <li>Minimal payloads for quick load times</li>
+              <li>
+                Built with HTMX, Tailwind, and TSX for streamlined development
+              </li>
+              <li>Deployable as a binary for flexibility</li>
+            </ul>
+          </section>
+          <section class="mb-6">
+            <h2 class="text-2xl font-semibold text-purple-600 mb-4">
+              Benefits of hyperwave
+            </h2>
+            <p class="mb-4">
+              hyperwave offers several advantages that cater to modern web
+              development needs:
+            </p>
+            <ul class="list-disc list-inside">
+              <li>
+                <strong>Performance:</strong> Server-side rendering ensures
+                fast, responsive applications by reducing client-side
+                processing.
+              </li>
+              <li>
+                <strong>Developer Experience:</strong> HTMX and Tailwind CSS
+                provide a minimalistic and declarative approach to building user
+                interfaces.
+              </li>
+              <li>
+                <strong>Deployment:</strong> hyperwave applications can be
+                compiled into binaries, making them easy to deploy across
+                different environments.
+              </li>
+            </ul>
+          </section>
+          <Button
+            class="bg-purple-600 hover:bg-purple-700 active:bg-purple-800 text-white font-bold py-2 px-4 rounded mt-4"
+            hx-get="/comparison"
+            hx-target="#content"
+            hx-swap="innerHTML"
+          >
+            See comparison
+          </Button>
+          <div id="content" class="mt-6"></div>
+        </div>
       </main>
     </Layout>,
-  ),
-);
+  );
+});
+
+app.get("/comparison", async (c) => {
+  return c.html(
+    <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-8">
+      <img
+        src="https://github.com/tireymorris/hyperwave/assets/3528600/561b5536-5660-469d-b80a-9883f45ab676"
+        alt="Comparison"
+        class="mb-4 rounded w-full h-auto"
+      />
+    </div>,
+  );
+});
 
 export default {
   port: process.env.PORT || 1234,