diff --git a/README.md b/README.md index f5c5ea1..2623fec 100644 --- a/README.md +++ b/README.md @@ -1,141 +1,143 @@ # HSX -⚠️ This project is a work in progress. [Roadmap](https://github.com/skyizwhite/hsx/issues/14) +HSX (Hypertext S-expression) is a simple and powerful HTML5 generation library for Common Lisp, forked from [flute](https://github.com/ailisp/flute/), originally created by Bo Yao. -HSX (Hypertext S-expression) is a straightforward HTML5 generation library for Common Lisp. +## Introduction -This project is a fork of [flute](https://github.com/ailisp/flute/), originally created by Bo Yao. +HSX allows you to generate HTML using S-expressions, providing a more Lisp-friendly way to create web content. By using the `hsx` macro, you can define HTML elements and their attributes in a concise and readable manner. -## Usage +## Getting Started -With the `hsx` macro, you can construct HTML using S-expressions. +### Basic Usage -The role of the `hsx` macro is to detect symbols of built-in elements and import the corresponding functions on demand. It is not needed when invoking user components defined with the `defcomp` macro. - -The property list (inline form is also available) following the element name is interpreted as attributes, while the remaining elements are interpreted as child elements. - -When a property is given a boolean value: -- `t` results in the key being displayed without a value. -- `nil` results in the property not being displayed at all. -- Any other type of value results in the key-value pair being displayed. +Use the `hsx` macro to create HTML elements. Attributes are specified using a property list following the element name, and child elements are nested directly within. ```lisp (hsx - (div :id "greeting" :class "flex" - (h1 "Hello World") - (p - "This is" - (strong '(:class "red") - "an example!")))) + (div :id "example" :class "container" + (h1 "Welcome to HSX") + (p "This is an example paragraph."))) ``` -This code generates the following HTML: +This generates: ```html -
- This is - an example! -
+This is an example paragraph.
true
+Condition not met!
This is a paragraph.
-This is another paragraph.
+First paragraph.
+Second paragraph.
``` -You can create HSX components using the `defcomp` macro. Components are essentially functions that accept keyword arguments, a property list, or both. +## Creating Components -The `children` property accepts the children of a component. +You can define reusable components with the `defcomp` macro. Components are functions that can take keyword arguments and properties. ```lisp (defcomp card (&key title children) (hsx - (div + (div :class "card" (h1 title) children))) ``` -or +Or using a property list: ```lisp (defcomp card (&rest props) (hsx - (div + (div :class "card" (h1 (getf props :title)) (getf props :children)))) ``` -This can then be used as follows: +Usage example: ```lisp (hsx - (card :title "card1" - (p "Lorem ipsum..."))) + (card :title "Card Title" + (p "This is a card component."))) ``` -Which generates: +Generates: ```html -Lorem ipsum...
+This is a card component.