h.div(class="myclass", style="color:red;")("content!")
# <div class="myclass" style="color:red;">content!</div>

using Cobweb: h, preview

body = h.body(
    h.h1("Here is a title!"),
    h.p("This is a paragraph."),
    h.button("Click Me for an alert!", onclick="buttonClicked()"),
    h.script("const buttonClicked = () => alert('This button was clicked!')"),
)


preview(body)

h(tag::Symbol, children...; attrs...)

# The dot syntax (getproperty) lets you autocomplete HTML5 tags
h.tag # == h(:tag)

h.div("hi")  # positional arguments add *children*

h.div(style="border:none;")  # keyword arguments add *attributes*

# These all produce the same result:
h.div("hi"; style="border:none;")
h.div(style="border:none;", "hi")
h.div(style="border:none;")("hi")
h.div("hi")(style="border:none;")

# e.g. Strings have no text/html representation, so the added child is `HTML("hi")`
h.div("hi")
# <div>hi</div>

# You can take advantage of Julia structs that already have text/html representations:
md_example = h.div(md"""
# Here is Some Markdown

- This is easier than writing html by hand.
- And it "just works".
""")

preview(md_example)

node = Cobweb.h.div

node.id = "my_id"

node
# <div id="my_id"></div>

node = Cobweb.h.div

push!(node, Cobweb.h.h1("Hello!"))

node  # <div><h1>Hello!</h1></div>

node[1] = "changed"

node  # <div>changed</div>

Cobweb.@h begin
    div(class="text-center text-xl",
        h4("This generates an h4 node!"),
        p("This is a paragraph"),
        div("Here is a div.")
    )
end

Javascript("alert('hello')")
# text/javascript   --> `alert('hello')`
# text/html         --> `<script>alert('hello')</script>`

CSS("""html { border: none; }""")
# text/css          --> `html { border: none; }`
# text/html         --> `<style>html { border: none; }</style>`

using Downloads, Cobweb

Cobweb.read(Downloads.download("https://juliacomputing.github.io/Cobweb.jl/"))