Skip to content

Commit ea117d3

Browse files
committed
feat(docs): update index
1 parent 2222d98 commit ea117d3

10 files changed

Lines changed: 124 additions & 44 deletions

File tree

apps/docs/app/index.ts

Lines changed: 101 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
3572
export 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
}

apps/docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"main": "dist/index.js",
66
"files": ["dist"],
77
"scripts": {
8-
"dev": "bun run --hot src/index.ts",
9-
"build": "bun src/index.ts"
8+
"dev": "NODE_ENV=development bun run --hot src/index.ts",
9+
"build": "NODE_ENV=production bun src/index.ts"
1010
},
1111
"dependencies": {
1212
"@wavekit/kit": "workspace:*",

apps/docs/src/components/footer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ export function Footer() {
44
const year = new Date().getFullYear();
55
return wave.footer(
66
{ style: "margin-top:6rem;" },
7-
`Copyright © ${year} WaveKit. All rights reserved.`,
7+
`Copyright © ${year} WaveKit by <a href="https://getgrinta.com" target="_blank" rel="noopener noreferrer">Grinta</a>. All rights reserved.`,
88
);
99
}

apps/docs/src/components/navbar.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { wave } from "@wavekit/wave";
22

3-
const Logo = wave.li((li) => li.a({ href: "/" }, "WaveKit"));
3+
const Logo = wave.li((li) =>
4+
li.a({ href: "/", style: "font-weight: semibold;" }, "WaveKit"),
5+
);
46

57
const NavItem = ({ href, label }: { href: string; label: string }) => {
68
return wave.li((li) =>

apps/docs/src/index.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
import { ssgRender } from "@wavekit/kit";
1+
import { createWaveKit, ssgRender } from "@wavekit/kit";
22

3-
ssgRender();
3+
if (process.env.NODE_ENV === "development") {
4+
createWaveKit().then((routes) => {
5+
console.log("Serving on http://localhost:3000");
6+
Bun.serve({ port: 3000, routes });
7+
});
8+
} else {
9+
ssgRender();
10+
}

apps/docs/tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"allowJs": true,
1111
"declaration": true,
1212
"moduleResolution": "bundler",
13-
"allowImportingTsExtensions": true,
1413
"verbatimModuleSyntax": true,
1514
"skipLibCheck": true,
1615
"strict": true,

biome.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
},
88
"files": {
99
"ignoreUnknown": false,
10-
"ignore": []
10+
"ignore": ["**/node_modules/**", "**/dist/**", "**/build/**"]
1111
},
1212
"formatter": {
1313
"enabled": true,

packages/wave/src/wave.test.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ it("renders a template with boolean property", () => {
3131
});
3232

3333
it("renders multiple parents", () => {
34-
const component = wave.div("foo").div("bar").toString();
34+
const component = wave.div("foo").div("bar").div("baz").toString();
3535
expect(component).toEqual(
3636
sanitize`
3737
<div>foo</div>
38-
<div>bar</div>
38+
<div>bar</div>
39+
<div>baz</div>
3940
`,
4041
);
4142
});

packages/wave/src/wave.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,10 @@ const createElement = <T extends Attributes = Attributes>(
112112
}
113113
// In chaining context
114114
const current = `<${tag}${attrs ? ` ${attrs}` : ""}>${content}</${tag}>`;
115-
const newState = { current: current, siblings: [] };
115+
const newState = {
116+
current: elementState.current + current,
117+
siblings: [],
118+
};
116119
const element = createElement<T>(
117120
prop,
118121
attrsOrChild,

packages/wave/tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"allowJs": true,
1111
"declaration": true,
1212
"moduleResolution": "bundler",
13-
"allowImportingTsExtensions": true,
1413
"verbatimModuleSyntax": true,
1514
"skipLibCheck": true,
1615
"strict": true,

0 commit comments

Comments
 (0)