https://github.com/jpdevries/twag
HTML tags in Twig
https://github.com/jpdevries/twag
Last synced: 2 months ago
JSON representation
HTML tags in Twig
- Host: GitHub
- URL: https://github.com/jpdevries/twag
- Owner: jpdevries
- License: mit
- Created: 2016-09-02T21:56:42.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-13T12:47:39.000Z (over 9 years ago)
- Last Synced: 2025-04-09T09:35:03.272Z (12 months ago)
- Language: HTML
- Size: 42 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Twag
HTML tags in Twig.
Twag is a collection of Twig imports each of which represent an HTML tag and its associated attributes.
## Usage
Twag templates work the same as any other Twig template. Include the Twag template for the tag you'd like to use and pass in any optional attributes.
```twig
{% include 'twag/img.twig' with {
'alt': 'A picture of a cat',
'src': 'cat.jpg'
} only %}
```
```html
```
Tags that represent non–void elements can be included with the [Twig embed syntax](http://twig.sensiolabs.org/doc/tags/embed.html) and accept an `innerHTML` block.
```twig
{% embed "twag/label.twig" with {
'for': 'cat'
} only %}
{% block innerHTML %}
A cool cat
{% endblock %}
{% endembed %}
```
```html
A cool cat
```
What about miscellaneous attributes like `ARIA` and `data-attributes`? Pass a [Key Value](https://mijingo.com/blog/key-value-arrays-in-twig) array as a `misc` property to append those attributes as well.
```twig
{% include 'twag/img.twig' with {
'alt': 'A picture of a cat',
'src': 'cat.jpg',
'misc': {
'aria-hidden': 'false',
'data-meow': 'true'
}
} only %}
```
```html
```
Miscellaneous attributes such as `hidden` that have no value are supported as well.
```twig
{% include 'twag/img.twig' with {
'alt': 'A picture of a hidden cat',
'src': 'cat.jpg',
'misc': {
'aria-hidden': 'true',
'hidden': ''
}
} only %}
```
```html
```
## To Do
- [Package with Composer?](https://github.com/jpdevries/Twag/issues/1)
- Port Build to PHP?
## Contributing
Contributions are welcome. In the `_build` folder you'll find a `build.js` script and an accompanying `attributes` directory. There is a JSON file representing each HTML tag in the `attributes` folder that contains the attributes available for that tag.
To add a new tag, add the corresponding JSON file to the attributes folder. To update the attributes for a tag update the existing JSON file. Lastly, run the `build` script.
```bash
cd twag
npm install # if you haven't already
npm run build
```