🕸️ Cobweb

A Julia package for cobbling together web pages.

⭐ Features

• Display HTML: Open "text/html"-representable objects in your browser with preview(x).
• Write HTML: Clean syntax for writing HTML: h.<tag>(children...; attrs...)
• Read HTML: Cobweb.read.

🚀 Quickstart

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)

✨ Writing HTML with Cobweb.h

h is a pretty special function

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

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

h Creates a Cobweb.Node

• Cobweb.Nodes are callable (creates a copy with new children/attributes):

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;")

Child Elements can be Anything

• If a child isn't MIME"text/html"-representable, it will be added as a HTML(child).
• Note: HTML(x) means "insert this into HTML as print(x)".

# 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:
using Markdown

md_example = h.div(md"""
# Here is Some Markdown

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

preview(md_example)

Attributes

• Nodes act like a mutable NamedTuple when it comes to attributes:

node = Cobweb.h.div

node.id = "my_id"

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

Children

• Nodes act like a Vector when it comes to children:

node = Cobweb.h.div  # <div></div>

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

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

node[1] = "changed"

node  # <div>changed</div>

collect(node)  # ["changed"]

The @h macro

This is a simple utility macro that replaces each HTML5 tag x with Cobweb.h.x for a cleaner syntax:

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

📝 Writing Javascript and CSS

• Cobweb exports Javascript and CSS string wrappers that show appropriately in different mime types:
• You can also construct these wrappers with js"..." and css"...".

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>`

🌐 Parsing HTML to Cobweb.Node

using Downloads, Cobweb

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

🙏 Attribution

• Cobweb.jl is influenced by Hyperscript.jl