@@ -32,45 +32,114 @@ const waveKitAppCode = dedent`
3232 }
3333` ;
3434
35+ const waveKitWaveCode = dedent `
36+ // src/components/form.ts
37+ import { wave } from "@wavekit/wave";
38+
39+ export const SignUpForm = wave.form({
40+ method: "POST",
41+ action: "/api/sign-up",
42+ class: "flex flex-col gap-2",
43+ }, (signUpForm) => {
44+ signUpForm
45+ .h1("Sign Up")
46+ .label({ for: "usernameField", class: "label" }, "Username")
47+ .input({ id: "usernameField", name: "username", required: true, class: "input" })
48+ .label({ for: "emailField", class: "label" }, "Email")
49+ .input({ id: "emailField", name: "email", type: "email", required: true, class: "input" })
50+ .label({ for: "passwordField", class: "label" }, "Password")
51+ .input({ id: "passwordField", name: "password", type: "password", required: true, class: "input" })
52+ .label({ for: "termsField", class: "label" }, "I agree to the terms")
53+ .input({ type: "checkbox", name: "terms", required: true, class: "checkbox" })
54+ .button({ type: "submit", class: "btn btn-primary" }, "Sign Up");
55+ })
56+ ` ;
57+
58+ const waveKitKitCode = dedent `
59+ // src/index.ts
60+ import { createWaveKit, ssgRender } from "@wavekit/kit"
61+
62+ // Option 1: For serving
63+ createWaveKit().then((routes) => {
64+ console.log("Serving on http://localhost:3000")
65+ Bun.serve({ port: 3000, routes })
66+ })
67+
68+ // Option 2: For static generation
69+ ssgRender()
70+ ` ;
71+
3572export async function GET ( req : BunRequest ) {
3673 const highlighter = await createHighlighter ( {
3774 themes : [ "github-dark" ] ,
3875 langs : [ "typescript" ] ,
3976 } ) ;
4077 return WaveKitResponse . html (
4178 Layout (
42- wave . div ( { style : "margin-top: 6rem;" } , ( div ) => {
43- div
44- . h1 ( "The minimalist Bun web framework." )
45- . p ( "WaveKit is a tiny framework built on top of Bun HTTP." )
46- . h2 ( "Features" )
47- . ul ( ( ul ) => {
48- ul . li ( "Next.js style routing" )
49- . li ( "Zero extra dependencies" )
50- . li ( "Lightweight templating engine" )
51- . li ( "Works flawlessly with HTMX and Alpine.js" ) ;
52- } )
53- . div ( { style : "margin-top: 6rem;" } , ( div ) => {
54- div
55- . h2 ( "Getting started" )
56- . p ( "The kit is a web server library. Use it like:" )
57- . h3 ( "Install" )
58- . code ( "bun add @wavekit/wave @wavekit/kit" )
59- . h3 ( "Usage" )
60- . div (
61- highlighter . codeToHtml ( waveKitServerCode , {
62- lang : "typescript" ,
63- theme : "github-dark" ,
64- } ) ,
65- )
66- . div (
67- highlighter . codeToHtml ( waveKitAppCode , {
68- lang : "typescript" ,
69- theme : "github-dark" ,
70- } ) ,
71- ) ;
72- } ) ;
73- } ) ,
79+ wave
80+ . div ( { style : "margin-top: 6rem;" } , ( heroDiv ) => {
81+ heroDiv
82+ . h1 ( "The minimalist Bun web framework." )
83+ . p ( "WaveKit is a tiny framework built on top of Bun HTTP." )
84+ . h2 ( "Features" )
85+ . ul ( ( ul ) => {
86+ ul . li ( "Next.js style routing" )
87+ . li ( "Zero extra dependencies" )
88+ . li ( "Lightweight templating engine" )
89+ . li ( "Works flawlessly with HTMX and Alpine.js" ) ;
90+ } ) ;
91+ } )
92+ . div ( { style : "margin-top: 6rem;" } , ( gettingStartedDiv ) => {
93+ gettingStartedDiv
94+ . h2 (
95+ wave
96+ . a (
97+ { href : "/#gettingStarted" , id : "gettingStarted" } ,
98+ "Getting started" ,
99+ )
100+ . toString ( ) ,
101+ )
102+ . p ( "The kit is a web server library. Use it like:" )
103+ . h3 ( "Install" )
104+ . code ( "bun add @wavekit/wave @wavekit/kit" )
105+ . h3 ( "Usage" )
106+ . div (
107+ highlighter . codeToHtml ( waveKitServerCode , {
108+ lang : "typescript" ,
109+ theme : "github-dark" ,
110+ } ) ,
111+ )
112+ . div (
113+ highlighter . codeToHtml ( waveKitAppCode , {
114+ lang : "typescript" ,
115+ theme : "github-dark" ,
116+ } ) ,
117+ ) ;
118+ } )
119+ . div ( { style : "margin-top: 6rem;" } , ( waveDiv ) => {
120+ waveDiv
121+ . h2 ( wave . a ( { href : "/#wave" , id : "wave" } , "🌊 Wave" ) . toString ( ) )
122+ . p (
123+ "Wave is a lightweight templating engine built on top of Bun. You can just do things." ,
124+ )
125+ . div (
126+ highlighter . codeToHtml ( waveKitWaveCode , {
127+ lang : "typescript" ,
128+ theme : "github-dark" ,
129+ } ) ,
130+ ) ;
131+ } )
132+ . div ( { style : "margin-top: 6rem;" } , ( kitDiv ) => {
133+ kitDiv
134+ . h2 ( wave . a ( { href : "/#kit" , id : "kit" } , "🧰 Kit" ) . toString ( ) )
135+ . p ( "Kit is a web server library. Use it like:" )
136+ . div (
137+ highlighter . codeToHtml ( waveKitKitCode , {
138+ lang : "typescript" ,
139+ theme : "github-dark" ,
140+ } ) ,
141+ ) ;
142+ } ) ,
74143 ) ,
75144 ) ;
76145}
0 commit comments