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-05-28 09:31:18 +09:00
parent 184b25466c
commit 8e5f597be6
1 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
README.md
View file

@ -1,12 +1,14 @@
# HSX (WIP) # HSX
HSX (hypertext s-expression) is an incredibly simple HTML5 generation library for Common Lisp. ⚠️ This project is a work in progress.
This is a fork project of [flute](https://github.com/ailisp/flute/), originally created by Bo Yao. HSX (Hypertext S-expression) is a straightforward HTML5 generation library for Common Lisp.
# Usage This project is a fork of [flute](https://github.com/ailisp/flute/), originally created by Bo Yao.
Using the `hsx` macro, you can implement HTML with S-expression. ## Usage
With the `hsx` macro, you can construct HTML using S-expressions.
```lisp ```lisp
(hsx (hsx
@ -14,20 +16,22 @@ Using the `hsx` macro, you can implement HTML with S-expression.
(h1 "Hello World") (h1 "Hello World")
(p (p
"This is" "This is"
(strong "example!")))) (strong "an example!"))))
```
↓ ↓ ↓ This code generates the following HTML:
```html
<div id="greeting" class="flex"> <div id="greeting" class="flex">
<h1>Hello World</h1> <h1>Hello World</h1>
<p> <p>
This is This is
<strong>example!</strong> <strong>an example!</strong>
</p> </p>
</div> </div>
``` ```
HSX elements are essentially functions, so you can freely compose them and embed CL code to them. HSX elements are essentially functions, allowing you to compose them freely and embed Common Lisp code within them.
```lisp ```lisp
(hsx (hsx
@ -40,9 +44,11 @@ HSX elements are essentially functions, so you can freely compose them and embed
(if t (if t
(p "true") (p "true")
(p "false")))) (p "false"))))
```
↓ ↓ ↓ This generates:
```html
<div> <div>
<p id="2"></p> <p id="2"></p>
<ul> <ul>
@ -54,9 +60,7 @@ HSX elements are essentially functions, so you can freely compose them and embed
</div> </div>
``` ```
To define a component, just define a function that accepts keyword arguments or property list or both, and define HSX element with `defhsx` macro. To define a component, simply create a function that accepts keyword arguments, property lists, or both, and define the HSX element using the `defhsx` macro. The `children` property accepts the children of a component.
`children` is a special property that accepts children of a component.
```lisp ```lisp
(defhsx card #'%card) (defhsx card #'%card)
@ -65,29 +69,37 @@ To define a component, just define a function that accepts keyword arguments or
(div (div
(h1 title) (h1 title)
children))) children)))
```
or or
```lisp
(defhsx card #'%card) (defhsx card #'%card)
(defun %card (&rest props) (defun %card (&rest props)
(hsx (hsx
(div (div
(h1 (getf props :title)) (h1 (getf props :title))
(getf props :children)))) (getf props :children))))
```
This can then be used as follows:
```lisp
(hsx (hsx
(card :title "card1" (card :title "card1"
(p "brah brah brah..."))) (p "Lorem ipsum...")))
```
↓ ↓ ↓ Which generates:
```html
<div> <div>
<h1>card1</h1> <h1>card1</h1>
<p>brah brah brah...</p> <p>Lorem ipsum...</p>
</div> </div>
``` ```
The previous definition can be simplified by using the `defcomp` macro. The previous definition can be simplified using the `defcomp` macro.
```lisp ```lisp
(defcomp card (&key title children) (defcomp card (&key title children)
@ -97,7 +109,7 @@ The previous definition can be simplified by using the `defcomp` macro.
children))) children)))
``` ```
# License ## License
This project is licensed under the terms of the MIT license. This project is licensed under the terms of the MIT license.