🕸️ Cobweb

A Julia package for cobbling together web pages.

Features

• View any "text/html"-representable object in your browser with preview(x).
• Nice syntax for writing HTML: h.<tag>(children...; attrs...)

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

🚀 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)

✨ Creating Nodes 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:

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 !showable("text/html", child), child will be added as HTML(child).

# 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)

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

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

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

node[1] = "changed"

node  # <div>changed</div>

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