Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/astynax/hemmet

Emmet-like text expansion tool capable to produce HTML, CSS, file trees, that stuff
https://github.com/astynax/hemmet

bem cli emmet hacktoberfest hacktoberfest2022 haskell snippets templating

Last synced: about 11 hours ago
JSON representation

Emmet-like text expansion tool capable to produce HTML, CSS, file trees, that stuff

Host: GitHub
URL: https://github.com/astynax/hemmet
Owner: astynax
License: bsd-3-clause
Created: 2017-03-07T07:01:29.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2024-09-08T05:10:31.000Z (4 months ago)
Last Synced: 2024-09-08T06:24:44.729Z (4 months ago)
Topics: bem, cli, emmet, hacktoberfest, hacktoberfest2022, haskell, snippets, templating
Language: Haskell
Homepage:
Size: 119 KB
Stars: 20
Watchers: 3
Forks: 6
Open Issues: 9
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # hemmet

**hemmet** is a CLI-tool, that expands text snippets to markup blocks in

Haskell/Elm/HTML/CSS/Bash. The template language is similar to [Emmet](http://emmet.io/)/[ZenCoding](http://www.456bereastreet.com/archive/200909/write_html_and_css_quicker_with_with_zen_coding/) (has a subset of their features)

and has an optional [BEM](https://bem.info/) flavour :) Also hemmet can generate **file trees** (useful for project scaffolding).

```shell

$ echo "#root>h1.red+p.article" | hemmet dom html



  

  



```

# TUI

In addition to the CLI-tool there is a TUI-app **hemmeti** which one can use to write templates having a live preview.

That's how the HTML generation looks like:

[![asciicast](https://asciinema.org/a/386500.svg)](https://asciinema.org/a/386500)

And this is a file tree scaffolding:

[![asciicast](https://asciinema.org/a/365732.svg)](https://asciinema.org/a/365732)

## Usage

`$ hemmet INPUT OUTPUT -e EXPRESSION`

or

`$ echo "EXPRESSION" | hemmet INPUT OUTPUT`

See `hemmet --help` for full options list.

`hemmeti` uses the same options but runs interactively.

## Inputs (syntaxes)

- `dom` works with [DOM-templates](#dom-templates),

- `bem` works with [BEM-templates](#bem-templates),

- `ftree` works with [file tree templates](#file-trees).

# DOM-templates

Hemmet expands Emmet-like templates and produces these formats (outputs)

- `html`, just HTML

`echo "#root>h1.red+p.article" | hemmet dom html`

```html



  

  



```

- `css`, styles for all classes in the template

`echo "#root>h1.red+p.article" | hemmet dom css`

```css

.article {

}

.red {

}

```

- `elm`, an [Elm.Html](https://package.elm-lang.org/packages/elm/html/latest/) markup

`echo "#root>h1.red+p.article" | hemmet dom css`

```elm

div [ id "root" ]

    [ h1 [ class "red" ] []

    , p [ class "article" ] []

    ]

```

- `lucid`, the [Lucid](https://hackage.haskell.org/package/lucid) HTML eDSL

`echo "#root>h1.red+p.article" | hemmet dom css`

```haskell

div_ [id_ "root"] $ do

  h1_ [class_ "red"]

  p_ [class_ "article"]

```

## Template syntax

### Nesting

`p+ul>(li+li+ul>li+li)+p`

```html





  

  


  

    

    


  





```

###  Tags

Tag name prepends the id or classes if any. If no tag was defined the `div` will be used.

### Id

Just `#id`, one at time.

### Classes

Just `.class.another`, simple that.

# BEM-templates

Hemmet expands BEM-templates with structure checking and produce outputs:

- `react-flux` — eDSL for [react-flux](https://bitbucket.org/s9gf4ult/react-flux) Haskell library

`$ echo ":foo>.bar" | hemmet bem react-flux`

```haskell

divc_ "foo" $ do

  divc_ "foo__bar" $ pure ()

```

- `html`

`$ echo ":foo>.bar" | hemmet bem html`

```html



  



```

- `css`

`$ echo ":foo>.bar" | hemmet bem css`

```css

.foo {

}

.foo__bar {

}

```

## Template syntax

Tags are the same.

### Nesting

`form:form>.submit:button>img.icon:icon+.label:label`

```html

  


    

    

  


```

### Modifiers

`form:login-form>button.submit-button:button~small~disabled`

```html

  

```

### Variables

`:foo$bar~baz`

```haskell

divc_ ("foo foo_baz" <> bar) $ pure ()

```

**Note:** at the moment variables are available only for the `react-flux` output!

### Root node stripping

`<:foo>.bar+.baz` (note leading `<`)

```html





```

# File trees

The `ftree` templates can be transformed to:

- `tree`, the pseudographical file tree representation.

`$ echo "docs/{todo.txt to_read.txt}" | hemmet ftree tree`

```

.

└── docs/

    ├── to_read.txt

    └── todo.txt

```

- `bash` script, that constructs a real tree!

`$ echo "docs/{todo.txt to_read.txt}" | hemmet ftree bash`

```bash

#!/bin/bash

cat <