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: 4 days 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 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-04T16:46:31.000Z (about 1 year ago)
• Last Synced: 2024-10-31T14:06:11.350Z (about 2 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.