Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliacomputing/cobweb.jl
🕸️ Cobble together web content in Julia
https://github.com/juliacomputing/cobweb.jl
julia web
Last synced: 5 days ago
JSON representation
🕸️ Cobble together web content in Julia
- Host: GitHub
- URL: https://github.com/juliacomputing/cobweb.jl
- Owner: JuliaComputing
- License: other
- Created: 2022-01-25T16:15:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-05T13:05:38.000Z (8 months ago)
- Last Synced: 2024-07-10T02:02:32.065Z (4 months ago)
- Topics: julia, web
- Language: Julia
- Homepage: https://JuliaComputing.github.io/Cobweb.jl/
- Size: 101 KB
- Stars: 46
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/JuliaComputing/Cobweb.jl/actions/workflows/CI.yml)
[](https://codecov.io/gh/JuliaComputing/Cobweb.jl)
🕸️ 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.(children...; attrs...)`
- **Read HTML**: `Cobweb.read`.
## 🚀 Quickstart
```julia
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
```julia
h(tag::Symbol, children...; attrs...)
# The dot syntax (getproperty) lets you autocomplete HTML5 tags
h.tag # == h(:tag)
```
### `h` Creates a `Cobweb.Node`
- `Cobweb.Node`s are callable (creates a copy with new children/attributes):
```julia
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)`".
```julia
# e.g. Strings have no text/html representation, so the added child is `HTML("hi")`
h.div("hi")
#
hi
# 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
- `Node`s act like a mutable NamedTuple when it comes to attributes:
```julia
node = Cobweb.h.div
node.id = "my_id"
node
#
```
### Children
- `Node`s act like a `Vector` when it comes to children:
```julia
node = Cobweb.h.div #
push!(node, Cobweb.h.h1("Hello!"))
node #
Hello!
node[1] = "changed"
node #
changed
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:
```julia
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"..."`.
```julia
Javascript("alert('hello')")
# text/javascript --> `alert('hello')`
# text/html --> `alert('hello')`
CSS("""html { border: none; }""")
# text/css --> `html { border: none; }`
# text/html --> `html { border: none; }`
```
## 🌐 Parsing HTML to `Cobweb.Node`
```julia
using Downloads, Cobweb
Cobweb.read(Downloads.download("https://juliacomputing.github.io/Cobweb.jl/"))
```
## 🙏 Attribution
- Cobweb.jl is influenced by [Hyperscript.jl](https://github.com/JuliaWeb/Hyperscript.jl)