From 3b26614d2b5c2dc3f5b817919978e31162aa495f Mon Sep 17 00:00:00 2001 From: paku Date: Mon, 27 May 2024 18:24:19 +0900 Subject: [PATCH] Update README --- README.md | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 23a0e93..19d66e6 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,9 @@ This is a fork project of [flute](https://github.com/ailisp/flute/), originally # Usage -Using the `hsx` macro, you can implement HTML in S-expressions. +Using the `hsx` macro, you can implement HTML with S-expression. -``` +```lisp (hsx (div :id "greeting" :class "flex" (h1 "Hello World") @@ -29,7 +29,7 @@ Using the `hsx` macro, you can implement HTML in S-expressions. Elements in HSX are essentially functions, so you can freely compose them and embed CL code to them. -``` +```lisp (hsx (div (p :id (+ 1 1)) @@ -54,9 +54,9 @@ Elements in HSX are essentially functions, so you can freely compose them and em ``` -To define a component, just define a function that takes keyword arguments or property list or both, and define hsx expression of it with `defhsx` macro. +To define a component, just define a function that accepts keyword arguments or property list or both, and define HSX element with `defhsx` macro. -``` +```lisp (defhsx card #'%card) (defun %card (&key title description) (hsx @@ -64,6 +64,15 @@ To define a component, just define a function that takes keyword arguments or pr (h1 title) (p description)))) +or + +(defhsx card #'%card) +(defun %card (&rest props) + (hsx + (div + (h1 (getf props :title)) + (p (getf props :description))))) + (hsx (card :title "card1" :description "brah brah brah...")) ↓ ↓ ↓ @@ -76,7 +85,7 @@ To define a component, just define a function that takes keyword arguments or pr The previous definition can be simplified by using the `defcomp` macro. -``` +```lisp (defcomp card (&key title description) (hsx (div