https://github.com/ranfdev/proxiedhiccup
Create an HTML document with a Javascript DSL adapted from Clojure's Hiccup
https://github.com/ranfdev/proxiedhiccup
Last synced: 2 months ago
JSON representation
Create an HTML document with a Javascript DSL adapted from Clojure's Hiccup
- Host: GitHub
- URL: https://github.com/ranfdev/proxiedhiccup
- Owner: ranfdev
- License: gpl-3.0
- Created: 2023-10-04T16:27:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T16:46:31.000Z (about 2 years ago)
- Last Synced: 2025-02-12T05:14:52.204Z (9 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# proxiedhiccup
Create an HTML document with a Javascript DSL adapted from Clojure's Hiccup
# Example
## Basic
```js
import {h, hToHTML} from "./hiccup"
const doc = h.div(
h.h1("Hello world"),
h.p("Pretty nice")
)
console.log(hToHTML(doc))
```
output
```html
Hello world
Pretty nice
```
## Attributes
```js
h.form({action: "/email", method: "post"},
h.input({type: "text", name: "username", placeholder: "username..."}),
h.input({type: "text", name: "password", placeholder: "password..."}),
)
```
## Css classes shorthand
```js
// all of these are equivalent
let ex1 = h.h1.heading("Big text");
let ex2 = h.h1["heading"]("Big text");
let ex3 = h.h1({class: "heading"}, "Big text");
```
## Components
Use a function to organize the code and improve readability:
```js
function header({title, subtitle}) {
return h.header(
h.h1["big-title-class another-class red"](title),
h.h2(subtitle)
)
}
function home() {
return h.div(
header({title: "News", subtitle: "Hottest news refreshed hourly"}),
h.ul(
h.li("News 1"),
h.li("News 2"),
)
)
}
```
## Tailwind
```js
function button(label) {
return h.button[`rounded font-bold bg-blue-500 shadow-lg`](label);
}
function page() {
return h.div(
h.h1["text-lg font-bold"]("Do you want to subscribe?"),
button("Subscribe")
)
}
```
# Security
The text isn't escaped automatically, only provide trusted values. It can be automated easily if necessary.
This code was just a proof of concept.