https://github.com/dux/html-tag

HTML tag builder "on steroids" - platform agnostic but has adapters for Rails, Sinatra and Lux
https://github.com/dux/html-tag

Last synced: about 2 months ago
JSON representation

HTML tag builder "on steroids" - platform agnostic but has adapters for Rails, Sinatra and Lux

• Host: GitHub
• URL: https://github.com/dux/html-tag
• Owner: dux
• License: mit
• Created: 2019-09-23T17:22:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-05T13:07:01.000Z (about 1 year ago)
• Last Synced: 2024-11-14T03:10:37.573Z (about 2 months ago)
• Language: Ruby
• Size: 49.8 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML Tag builder

HTML tag builder "on steroids"

https://github.com/dux/html-tag

## Install

### Gemfile

`gem 'html-tag'`

### Manual require

`require 'html-tag'`

## Usage

Example

```ruby

import HtmlTag

tag.ul do

  # html tags are accessible as mmethods

  li do

    a href: '#', class: method_in_caller_scope

  end

  # instance variables are accesible

  @list.each_with_index do |el, i|

    li el, num: i

  end

  # custom tags

  tag 'svelte-clock', city: 'London'

  # order of data is not immportant

  a({href: '#'}, name)

  a(name, {href: '#'})

  # class name shrocuts

  _foo__bar_baz # 


  # push any data

  push ' ⋅ '

end

```

## Advanced

Useable without importing `HtmlTag`.

```ruby

# if you pass node name as a argument, block will be executed in HtmlTag instance scope

HtmlTag :ul do

  li do

    a link_to, href: '#'

  end

end

# if you want code to be executed in host scope, use pointer and this syntax (preferred)

HtmlTag.ul do |n|

  n.li do

    n.a link_to, href: '#'

  end

end

```

You do not have to import `HtmlTag`, you can inject `tag` method in `Class` or `Module`

without polluting ancestors namespace.

```ruby

class Foo

  # instead

  include HtmlTag

  # or

  prepend HtmlTag

  # you can use

  HtmlTag self

end

```

### More examples

#### Tag without data

```ruby

= HtmlTag.div

```

```html



```


#### Empty tags

```ruby

= hr

= meta name: :foo, description: :bar

```

```html



```

#### Tag with block data

If block does not have child nodes and returns string, string will be used as data.

```ruby

= div { 'foo' }

```

```html

foo

```


#### Tag with inline data and no params

```ruby

= div('baz')

```

```html

baz

```


#### Tag with inline data and params

```ruby

= div('baz', {foo: :bar})

```

```html

baz

```


#### Tag with class shortcut

```ruby

= _foo

= _foo__bar_baz 123, class: 'dux'

```

```html



123

```


#### Tag with nested opts and shortcut

```ruby

= _miki(id: :foo, data: { bar: :baz })

```

```html



```


#### Tag with nested data and manual push

```ruby

HtmlTag class: :foo do

  ul do

    li do

      a 'baz 1', href: '#'

      a 'baz 2', href: '#'

    end

    push 123

    node :foo, :bar

  end

end

```

```html



  


    


      baz 1

      baz 2

    

    123

    bar

  



```


#### Renders tag from String base

```ruby

'foo'.tag(:bold, class: :baz)

```

```html

foo

```

#### Renders tag from Hash base

```ruby

{ class: :baz }.tag(:bold, 'foo')

```

```html

foo

```

## Speed test

Compares `Nokogiri::XML::Builder` with two modes for `html-tag`.

`rake speed`

## Dependency

none

## Development

After checking out the repo, run `bundle install` to install dependencies. Then, run `rspec` to run the tests.

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/dux/html-tag.

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the

[Contributor Covenant](http://contributor-covenant.org) code of conduct.

## License

The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).