Skip to content

Commit

Permalink
Improve landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@tireymorris
tireymorris committed Jun 21, 2024
1 parent ece91a2 commit 1c5eb8c
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 33 deletions.
70 changes: 58 additions & 12 deletions public/styles/uno.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,43 +19,89 @@
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-2{margin-top:0.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-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));}
.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / 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-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / 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-4{padding:1rem;}
.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-center{text-align:center;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.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-pink-600{--un-text-opacity:1;color:rgb(219 39 119 / 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-teal-600{--un-text-opacity:1;color:rgb(13 148 136 / 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;}
.hover\:shadow-xl:hover{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px 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;}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
9 changes: 5 additions & 4 deletions src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
);
}
94 changes: 77 additions & 17 deletions src/server.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,92 @@
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(
<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>
app.get("/", async (c) => {
return c.html(
<Layout title="Hyperwave">
<main class="container mx-auto py-10 px-4">
<div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-8 transition-all hover:shadow-xl">
<h1 class="text-3xl font-bold text-center mb-6">
🌊 Welcome to Hyperwave
</h1>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-blue-600 mb-4">
What is Hyperwave?
</h2>
<p class="mb-4">
Hyperwave is a server-side framework for building web
applications.
</p>
<ul class="list-disc list-inside">
<li>
Fast: Tiny payloads with no bloated client-side rendering.
</li>
<li>
Productive: Build <em>really</em> fast with HTMX, Tailwind, TSX,
Hyperscript.
</li>
<li>
Ergonomic: Best tooling of modern tooling combined with
rock-solid app architecture.
</li>
<li>Portable: Compile a binary to deploy anywhere.</li>
</ul>
</section>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-purple-600 mb-4">
Motivation
</h2>
<p>
Drastically reduce time from idea to rendered UI with very little
cognitive friction after the initial learning curve.
</p>
</section>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-pink-600 mb-4">Setup</h2>
<pre class="bg-gray-200 rounded p-4">bun dev</pre>
<p class="mt-2">
Visit port 1234 and edit <code>server.tsx</code>
</p>
</section>
<Button
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 transition-colors"
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 transition-all hover:shadow-xl">
<h2 class="text-2xl font-semibold text-teal-600 mb-4">Comparison</h2>
<img
src="https://github.com/tireymorris/hyperwave/assets/3528600/561b5536-5660-469d-b80a-9883f45ab676"
alt="Comparison"
class="mb-4 rounded w-full h-auto"
/>
<p>
Hyperwave stands out in terms of speed, simplicity, developer
experience, and architectural benefits.
</p>
</div>,
);
});

export default {
port: process.env.PORT || 1234,
Expand Down

0 comments on commit 1c5eb8c

Please sign in to comment.