Windfall by Hedia

Build your next Hedia application even faster.

Beautifully designed, expertly crafted components, built by Hedia using Tailwind CSS. The perfect starting point for Hedia applications.

Get started

Install

$ npm install @hedia/windfall -E

Usage

import { createServer, IncomingMessage, ServerResponse } from "node:http";

import { document, stringify } from "@hedia/html";
import { body, head, html, main } from "@hedia/html/elements";
import { createRoute, createRouter } from "@hedia/http/routing";
import { ButtonKind } from "@hedia/windfall/css/buttons";
import { StackSize } from "@hedia/windfall/css/stacks";
import { createWindfallCssLink, createWindfallJsScript } from "@hedia/windfall/html";
import { button } from "@hedia/windfall/html/buttons";
import { container } from "@hedia/windfall/html/containers";
import { heading1 } from "@hedia/windfall/html/headings";
import { stack } from "@hedia/windfall/html/stacks";
import { createWindfallCssRoute, createWindfallJsRoute } from "@hedia/windfall/http";

const router = createRouter(createWindfallCssRoute(), createWindfallJsRoute(), createHtmlRoute());

const server = createServer(router);
server.listen(8080);

function createHtmlRoute() {
	return createRoute("GET", "/", async (req: IncomingMessage, res: ServerResponse) => {
		const content = stringify(
			document(
				html(
					{ class: "scroll-smooth" },
					head(createWindfallCssLink()),
					body(
						{ class: "bg-gray-900 p-8" },
						main(
							container(
								stack(
									{ size: StackSize.Large },
									heading1("Demo page"),
									stack(
										{ size: StackSize.Small, inline: true },
										button({ kind: ButtonKind.Primary }, "Primary Button"),
										button({ kind: ButtonKind.Secondary }, "Secondary Button"),
									),
								),
							),
						),
						createWindfallJsScript(),
					),
				),
			),
		);

		res.setHeader("Content-Type", "text/html; charset=utf8");
		res.writeHead(200);
		res.write(content);
		res.end();
	});
}