Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javipuche/maquetus
A simple flat file generator
https://github.com/javipuche/maquetus
Last synced: about 2 months ago
JSON representation
A simple flat file generator
- Host: GitHub
- URL: https://github.com/javipuche/maquetus
- Owner: javipuche
- License: mit
- Created: 2019-06-15T13:25:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-28T06:13:59.000Z (over 4 years ago)
- Last Synced: 2024-10-11T05:20:45.203Z (3 months ago)
- Language: JavaScript
- Size: 38.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Maquetus
Maquetus es un sencillo generador de archivos estáticos que se usa con Gulp. Compila una serie de páginas en [Handlebars](https://handlebarsjs.com/) a HTML pudiendo usar partials, helpers o datos procedentes de un archivo JSON o YAML.
## Instalación
```
npm install maquetus
```
## Uso
### Estructura de archivos
```
.
├── ...
├── src
│ ├── data
| ├── example.json
| ├── example2.yml
| └── ...
│ ├── helpers
| ├── bold.js
| └── ...
│ ├── layouts
| ├── default.hbs
| ├── post.hbs
| └── ...
│ ├── pages
| ├── index.hbs
| ├── post.hbs
| └── ...
│ └── partials
| ├── header.hbs
| ├── footer.hbs
| └── ...
└── ...
```
**Nota:** Las páginas, los partials y los layouts pueden usar las extensiones `.html`, `.hbs`, or `.handlebars`.
### Gulpfile
```js
const gulp = require('gulp');
const maquetus = require('maquetus');
gulp.task('default', function() {
gulp.src('./src/pages/**/*.hbs')
.pipe(maquetus({
layouts: './src/layouts',
partials: './src/partials',
helpers: './src/helpers',
data: './src/data',
hbsOptions: {
explicitPartialContext: true
},
customHelpers: {
test: (a, b, opts) => {
if (a === b) {
return opts.fn(this)
} else {
return opts.inverse(this)
}
}
},
customPartials: {
test: () => `
test`
},
globalVariables: {
var: 'foo'
}
}))
.pipe(gulp.dest('./dist'));
});
```
## Opciones
| Opción | Tipo | Descripción |
|-------------------|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `layouts` | `String` | Ruta que contiene los layouts. Es necesario tener uno llamado `default`. |
| `partials` | `String` o `Object` | Ruta que contiene los partials. Cada partial se registrará en Handelbars con la ruta del archivo. En caso de usar un objeto usará la key del objeto como alias. |
| `helpers` | `String` | Ruta que contiene los helpers. Cada helper se registrará en Handelbars con el nombre del archivo. |
| `data` | `String` | Ruta que contiene los data. Los datos del archivo serán accesibles mediante una variable llamada igual que el nombre del archivo. Los archivos pueden ser JSON (`.json`) o YAML (`.yml`) |
| `hbsOptions` | `Object` | Opciones para [Handelbars](https://handlebarsjs.com/reference.html) |
| `customHelpers` | `Object` | Regístrar helpers programáticamente. |
| `customPartials` | `Object` | Regístrar partials programáticamente. |
| `globalVariables` | `Object` | Variables globales. |
## Ejemplos
### Layouts
`layouts/post.hbs`
```html
{{ pageTitle }}
{{ postTitle }}
{{ body }}
```
`pages/post.hbs`
```html
---
layout: post
pageTitle: Best Blog
postTitle: Lorem ipsum
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
**Nota:** Si el layout no está definido llamará por defecto al `default`.
### Partials
`gulpfile.js`
```js
// Single path
maquetus({
partials: './src/partials'
})
// Multiple paths
maquetus({
partials: {
components: './src/components',
partials: './src/partials'
}
})
```
`post.hbs`
```html
---
layout: post
---
{{> header }}
{{> subDir/example }}
{{> components/example }}
{{> components/subDir/example }}
{{> partials/example }}
{{> partials/subDir/example }}
```
### Data
**Importante:** No usar las variables `body`, `root` y `page` ya que se usan por maquetus.
`example.json`
```json
{
"name": "Javier Puche",
"phone": "666 66 66 66"
}
```
`index.hbs`
```html
{{ example.name }}
{{ example.phone }}
```
### Helpers
Maquetus ya incluye algunos helpers:
#### ifpage
```html
{{#ifpage 'index'}}
Se mostrará si la página se llama index.html
{{/ifpage}}
```
#### unlesspage
```html
{{#ifpage 'index'}}
No se mostrará si la página se llama index.html
{{/ifpage}}
```
#### repeat
```html
- Lorem ipsum dolor sit amet.
{{#repeat 5}}
{{/repeat}}
```
#### markdown
```html
{{#markdown}}
# Heading 1
Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
{{/markdown}}
```
#### eq
```html
{{#eq var 'value'}}
Print this
{{/eq}}
```
#### concat
```html
{{> partialExample title=(concat foo bar) }}
```
#### Custom Helpers
`bold.js`
```js
module.exports = function(options) {
const bolder = '' + options.fn(this) + '';
return bolder;
}
```
`index.hbs`
```html
{{#bold}}Lorem ipsum dolor sit amet.{{/bold}}
```