omit attr with None; remove prettify; add demo

hoishing · Oct 6, 2024 · c6030c1 · c6030c1
1 parent 006accc
commit c6030c1
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 169 deletions.
diff --git a/README.md b/README.md
@@ -8,9 +8,9 @@
 
 - all elements output are pure string, simple and easy to manipulate
 - only functions are exported, no classes or objects
-- all html and svg elements are exported as functions
-- custom element creation
-- prettify elements to human readable format
+- all standard html and svg elements are exported as functions
+- create nested child elements with list of strings or elements
+- able to create custom elements
 - create value-less(boolean) attributes with empty string or positional argument
     - handy for using with [UnoCSS] attributify mode
 
@@ -87,14 +87,7 @@ tag("MyElement", tag_content="foo", props="bar")
 # <MyElement props="bar">foo</MyElement>
 ```
 
-- prettify elements to human readable format
-
-```python
-html_str = prettify(div(img(src='url'), class_='bar'))
-# <div class="bar"><img src="url"/></div>
-```
-
-- more examples available at [demo notebook] and [tests] package
+- more examples available at [demo.py] file and the [tests] package
 
 ## Motivation
 
@@ -132,7 +125,7 @@ Open a [github issue] or ping me on [X ![x-icon]][X]
 [black-url]: https://github.com/psf/black
 [ci-badge]: https://github.com/hoishing/tagit/actions/workflows/ci.yml/badge.svg
 [ci-url]: https://github.com/hoishing/tagit/actions/workflows/ci.yml
-[demo notebook]: https://github.com/hoishing/tagit/blob/main/demo.ipynb
+[demo.py]: https://github.com/hoishing/tagit/blob/main/demo.py
 [github issue]: https://github.com/hoishing/tagit/issues
 [MIT-badge]: https://img.shields.io/github/license/hoishing/tagit
 [MIT-url]: https://opensource.org/licenses/MIT

diff --git a/demo.html b/demo.html
@@ -0,0 +1 @@
+<!DOCTYPE html><!--this is a demo showing how to use `tagit`--><html><head><title>testing html template</title><script defer src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script></head><body><img src="https://picsum.photos/200/300" /><div class="text-xl">pls select the direction:</div><select data-type="direction"><option>E</option><option selected>S</option><option>W</option><option>N</option></select><MyElement props="some-props" /></body></html>
diff --git a/demo.ipynb b/demo.ipynb
diff --git a/demo.py b/demo.py
@@ -0,0 +1,52 @@
+# standard elements
+from tagit import html, div, img, body, head, title, script, select, option
+
+# for creating custom element
+from tagit import tag
+
+# special elements
+from tagit import doctype, comment
+
+
+html_str = (
+    doctype()
+    + comment("this is a demo showing how to use `tagit`")
+    + html(
+        # use list to enclose multiple elements
+        [
+            head(
+                [
+                    title("testing html template"),
+                    script(
+                        "",  # empty string content ensures closing tag
+                        "defer",  # positional argument will be converted to value-less(boolean) attribute
+                        src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js",
+                    ),
+                ]
+            ),
+            body(
+                [
+                    # if you don't provide content, element without closing tag will be created
+                    img(src="https://picsum.photos/200/300"),
+                    # class_ attribute will convert to `class`
+                    div("pls select the direction:", class_="text-xl"),
+                    select(
+                        [
+                            # attr with None will be ommitted,
+                            # and empty string will be converted to boolean attribute
+                            option(d, selected=("" if d == "S" else None))
+                            for d in "ESWN"
+                        ],
+                        # underscore will convert to hyphen, eg. `data-type`
+                        data_type="direction",
+                    ),
+                    # create custom element
+                    tag("MyElement", props="some-props"),
+                ],
+            ),
+        ]
+    )
+)
+
+with open("demo.html", "w") as f:
+    f.write(html_str)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><!--this is a demo showing how to use `tagit`--><html><head><title>testing html template</title><script defer src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script></head><body><img src="https://picsum.photos/200/300" /><div class="text-xl">pls select the direction:</div><select data-type="direction"><option>E</option><option selected>S</option><option>W</option><option>N</option></select><MyElement props="some-props" /></body></html>