paku/hsx
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Update README

Browse source
This commit is contained in:
paku 2024-12-13 01:35:31 +09:00
parent dfc074ec71
commit 4490c74197
1 changed files with 19 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
README.md
View file

@ -6,19 +6,15 @@ This project is a fork of [ailisp/flute](https://github.com/ailisp/flute/).
## Warning ## Warning
This software is still ALPHA quality. The APIs likely change. This software is still in ALPHA quality. The APIs are likely to change.
Please check the [release notes](https://github.com/skyizwhite/hsx/releases). Please check the [release notes](https://github.com/skyizwhite/hsx/releases) for updates.
## Introduction
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.
## Getting Started ## Getting Started
### Basic Usage ### Basic Usage
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. Use the `hsx` macro to create HTML elements. Attributes are specified using a property list after the element name, and child elements are nested directly inside.
```lisp ```lisp
(hsx (hsx
@ -36,11 +32,18 @@ This generates:
</div> </div>
``` ```
## Examples To convert an HSX object into an HTML string, use the `render-to-string` function:
### Dynamic Content ```lisp
(render-to-string
(hsx ...))
```
HSX allows embedding Common Lisp code directly within your HTML structure, making it easy to generate dynamic content. ### Embedding Content
HSX allows you to embed Common Lisp forms directly within your HTML structure.
When working with HSX elements inside embedded Lisp forms, you should use the `hsx` macro again.
```lisp ```lisp
(hsx (hsx
@ -91,22 +94,22 @@ This generates:
<p>Second paragraph.</p> <p>Second paragraph.</p>
``` ```
## Creating Components ### Creating Components
You can define reusable components with the `defcomp` macro. Components are functions that can take keyword arguments and properties. You can define reusable components using the `defcomp` macro. Component names must begin with a tilde (`~`). Properties should be declared using `&key`, `&rest`, or both. The body must return an HSX element.
```lisp ```lisp
(defcomp card (&key title children) (defcomp ~card (&key title children)
(hsx (hsx
(div :class "card" (div :class "card"
(h1 title) (h1 title)
children))) children)))
``` ```
Or using a property list: Alternatively, you can use a property list:
```lisp ```lisp
(defcomp card (&rest props) (defcomp ~card (&rest props)
(hsx (hsx
(div :class "card" (div :class "card"
(h1 (getf props :title)) (h1 (getf props :title))
@ -117,7 +120,7 @@ Usage example:
```lisp ```lisp
(hsx (hsx
(card :title "Card Title" (~card :title "Card Title"
(p "This is a card component."))) (p "This is a card component.")))
``` ```
@ -130,18 +133,6 @@ Generates:
</div> </div>
``` ```
## Rendering HTML
To render HSX to an HTML string, use the `render-to-string` function.
```lisp
(render-to-string
(hsx
(div :class "content"
(h1 "Rendered to String")
(p "This HTML is generated as a string."))))
```
## License ## License
This project is licensed under the MIT License. This project is licensed under the MIT License.