assemble
Static site generator for Node.js, Grunt.js, and Yeoman and Gulp. Render templates with Handlebars, Lo-Dash or any template engine. Used by Zurb Foundation, Zurb Ink, Less.js / lesscss.org, Topcoat, Web Experience Toolkit, and hundreds of other projects to build sites, themes, components, documentation, blogs and gh-pages.
Home | Assemble
static site generator for grunt.js and yeoman. assemble makes it dead simple to build modular sites, blogs, gh-pages, components and documentation from reusable templates and data. | static site generator for grunt.js and yeoman. assemble makes it dead simple to build modular sites, blogs, gh-pages, components and documentation from reusable templates and data.
Is is possible to define regions in the template, that would pull content from the page?
Let's say I have in my template the following structure:
<div class=sidebar></div>
<div class=content></div>
And from the page content, I would like to pull some html content to the sidebar, and other content to content div.
Is this possible?
Source: (StackOverflow)
I'm trying to take source files from pages/*.hbs and get them into the root of the build directory. Currently, they're ending up in build/pages/*.html.
Here's my task config. I tried looking into Grunt's task configuration options but wasn't getting any luck.
assemble: {
options: {
layout: 'layouts/default.hbs'
},
pages: {
src: ['pages/*.hbs'],
dest: 'build/'
}
Source: (StackOverflow)
I am struggling with the assemble grunt task configuration which looks like this:
assemble: {
options: {
flatten: false,
expand: true,
assets: '',
layout: 'default.hbs',
layoutdir: 'templates/layouts',
partials: ['templates/includes/*.hbs'],
helpers: ['templates/helpers/*.js'],
data: ['templates/data/*.{json,yml}']
},
dev: {
src: 'templates/pages/**/*.hbs',
dest: 'build/'
}
The scaffolding of the project templates for assemble.io looks like:
templates
├── helpers
├── includes
│ ├── page-footer.hbs
│ ├── page-header.hbs
│ └── scripts.hbs
├── layouts
│ └── default.hbs
└── pages
├── en
│ └── index.hbs
├── fr
│ └── index.hbs
└── index.hbs
My wish is go get something like:
build
├── en
│ └── index.html
├── fr
│ └── index.html
└── index.html
But instead I get something like:
build
└── templates
└── pages
├── en
│ └── index.html
├── fr
│ └── index.html
└── index.html
I did try a few (a lot actually) of combinations (with the flatten and expand as well as the cwd options) but I am stuck.
Using flatten has for consequence to make the index.html files to overwrite each others.
So I actually do the rendering into a .tmp directory and then move the files to the build directory.
I do not like that solution because then, the page.assets is still broken (its value would be ../../.., for the root index.html).
Source: (StackOverflow)
I am checking this plugin for localisation, but how should I use it after I have included it in my gruntfile.js?
it seemed there are some example usage here
Source: (StackOverflow)
I have a grunt project backed by a yeoman-generator that I've built based on the generator-webapp, if it's of any help, you can find it on GitHub
The grunt project makes us of the grunt-usemin task.
My project involve building a multilingual website, and to keep things clean, I've decided to put all the pages written in a language in a folder name after the 2-letter shortcode of the said language.
| project/
|--dist/
|----en/
|------index.html
|------404.html
|------...
|----fr/
|------index.html
|------404.html
|------...
The files are made from handlebars templates and processed with assemble. In the layout I have building blocks for usemin such as
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" rel='nofollow' href="../styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
Which, in a perfect world would translate to
<link rel="stylesheet" rel='nofollow' href="../styles/main.css">
<script src="../scripts/vendor/modernizr.js"></script>
but instead shows
<link rel="stylesheet" rel='nofollow' href="styles/main.css">
<script src="scripts/vendor/modernizr.js"></script>
which is less than ideal in my case.
The relevant part of the Gruntfile.js looks like this
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: [
'<%= yeoman.app %>/fr/{,*/}*.html',
'<%= yeoman.app %>/en/{,*/}*.html'
]
},
usemin: {
options: {
dirs: ['<%= yeoman.dist %>']
},
html: [
'<%= yeoman.dist %>/fr/{,*/}*.html',
'<%= yeoman.dist %>/en/{,*/}*.html'
],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
}
I have tried to use the basedir option
by setting it to <%= yeoman.dist %> as well as changing the build blocks to
<!-- build:css(.tmp) ../styles/main.css -->
<link rel="stylesheet" rel='nofollow' href="../styles/main.css">
<!-- endbuild -->
<!-- build:js ../scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
But unfortunately wasn't able to get a proper output.
More specifically, the first one didn't change anything, the second one had the folders scripts and styles outputted one level too high in the hierarchy
| project/
|--app/
|--dist/
|--styles/
|--scripts/
instead of
| project/
|--app/
|--dist/
|----styles/
|----scripts/
Would anyone happen to know what to do ? It seems a rather simple usecase but I couldn't find the help I need via Google, GitHub or SO...
Source: (StackOverflow)
I am using assemble.io for a simple static web site but am having issues with the {{title}} tag. Here is a rough overview of the issue.
Here is my layout.hbs:
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<!-- the body tag is used to "pull in" content from pages -->
{{> body }}
</body>
</html>
I have 2 json files for data:
foo1.json
{
"title": "Hello world I am title 1"
}
foo2.json
{
"title": "I am a different title"
}
And I have 2 pages:
foo1.hbs
{{#foo1 }}
{{> module1 }}
{{> module2 }}
{{> module3 }}
{{/foo1 }}
foo2.hbs
{{#foo2 }}
{{> module1 }}
{{> module2 }}
{{> module3 }}
{{/foo2 }}
My gruntfile.js snippet:
options: {
layout: "src/responsive/layouts/layout.hbs",
partials: 'src/responsive/modules/**/*.hbs',
data: 'src/responsive/data/**/*.json',
flatten: false
},
pages: {
expand: true,
cwd: 'src/responsive/pages',
src: '**/*.hbs',
dest: 'src/'
}
When I run 'grunt assemble' I get no page title. I think this has something to do with context as if I change {{title}} in layout.hbs to be {{foo1.title}} or {{foo2.title}} it works but then both pages get the same title as they share this template.
How can I make the context of {{title}} in layout.hbs work for all json files being passed in?
A.
Source: (StackOverflow)
In a blog project that I'm playing with I have 'posts'. Here's the assemble block from my Gruntfile:
assemble: {
options: {
layout: ['src/layouts/default.hbs'],
data: ['src/data/*.{json,yml}']
},
pages: {
src: ['src/posts/**/*.md'],
dest: 'tmp/posts/'
}
}
Each post is represented in markdown, with a dash of YFM, like so:
---
date: '20131129'
latitude: 7.113309999999999
longitude: -73.120468
city: Bucaramanga
country: Colombia
---
# A familiar face...
And then more blog content here...
Now, in my default.hbs, I have the standard things. I did a quick {{inspect page}} to see what variables I have handy. I can see in there, I have a few pieces of information that could be useful in this matter:
"index": 46,
"next": 47,
"prev":45
I can think of a way to handle this by writing a custom handlebars helper, but it seems that given the presence of those variables, this functionality already exists somewhere... I'm just not finding it. The solution I have in mind seems disproportionately complex.
Thanks a bunch!
Source: (StackOverflow)
I'm trying to figure out how to render all the pages in a page collection on a single page. I want all my posts after each other in the generated index.html, like on a blog's front page.
The file structure is
src/
index.hbs
posts/
post-1.hbs
post-2.hbs
post-3.hbs
The below does almost what I'm looking for.
<section>
{{#each pages}}
<article>
<header>
<h2>{{data.title}}</h2>
</header>
{{page}}
</article>
{{/each}}
</section>
What am I missing?
Source: (StackOverflow)
I'm using Grunt and Assemble to create precompiled templates on my site but I need to dynamically create some sections based on information stored in client-side storage. Is there a way to exempt sections of a template from precompilation?
Source: (StackOverflow)
I have a partial with some dynamic fields "{{byUser}}" and such, which updates automatic. Inside this partial, I also have a template for Handlebars.js that uses same syntax for front-end templating...
How do I force Assemble.io to ignore the dynamic fields - in other words the double curly-brackets??
Thank you in advance...
Source: (StackOverflow)
using Grunt.js 0.4 and Assemble 0.3.78
how can I access 'page.filename' global variable from inside a loop?
(debug)
<ul>
{{#mysite.menu}}
<li>{{page.filename}}</li>
{{/mysite.menu}}
</ul>
(actually)
building a menu, trying this:
{{#mysite.menu}}
<li {{#is page.filename url}} class="on" {{/is}}>{{name}}</li>
{{/mysite.menu}}
where url and name are attributes of each mysite.menu
Source: (StackOverflow)
I'm using Assemble, which currently uses Handlebars 1.3. In my templates I am using the picture element with Picturefill, which uses the current spec <picture> syntax:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/img/responsive/example-xl.jpg" media="(min-width: 1000px)">
<source srcset="assets/img/responsive/example-l.jpg" media="(min-width: 800px)">
<source srcset="assets/img/responsive/example-m.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="assets/img/responsive/example-m.jpg" alt="An example responsive image">
</picture>
Since parts of this will probably change (I might add media queries for example), I would like to be able to update this snippet across my entire site easily. I think a partial would be best for this. So for example, something like:
{{> picture name="example" ext=".jpg" alt="Example image" }}
with this partial
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
<source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
<source srcset="assets/img/responsive/{{name}}-m{{ext}}">
<!--[if IE 9]></video><![endif]-->
<img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>
Is there a way to do that with my version of Handlebars? I know that this is native in Handlebars 2.0, but unfortunately I'm not able to update it to that version because it's integrated in Assemble. Or is there another recommended way of doing this?
p.s.: I've read about using {{> picture this}} here, but I'm not sure if and how that would work with multiple pictures in one page (and multiple variables in one partial). Also, I've tried using a parseJSON block helper, but that syntax is a little awkward, and a little more verbose than what I described above, so I'm wondering if there is a more efficient way to do something like this.
Source: (StackOverflow)
Is there a way to access YFM properties defined in a child layout in its parent layout?
For example, given a child layout page.hbs:
---
layout: wrapper.hbs
no_header: true
----
<div class="wrapper">{{> body }}</div>
I'd like to access the no_header YFM property defined in page.hbs in the parent layout wrapper.hbs:
<html>
<body>
{{#unless layout.no_header}}<header></header>{{/if}}
{{> body }}
</body>
</html>
Source: (StackOverflow)
Is there a way to generate pages from json/yaml if you provide a layout? I thought this was possible, but can't find in docs.
This is currently being tracked here in GitHub: http://webb.li/QjTX
Source: (StackOverflow)
Despite not using the filter helper in a template a TypeError is preventing assemble completing. It looks like the options parameter isn't being passed or is being passed as undefined.
Here's the stack trace:
Warning: Cannot read property 'data' of undefined Use --force to continue.
TypeError: Cannot read property 'data' of undefined
at Object.helpers.filter (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars-helpers/lib/helpers/helpers-collections.js:357:15)
at Object.eval (eval at <anonymous> (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:564:23), <anonymous>:41:50)
at Object.<anonymous> (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:30:33)
at Object.search (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:1274:21)
at Object.Handlebars.VM.invokePartial (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:81:28)
at Object.eval (eval at <anonymous> (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:564:23), <anonymous>:86:17)
at /home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:30:33
at /home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:1274:21
at Object.render (/home/tim/workspace/ae_projects/severine/node_modules/assemble/node_modules/assemble-handlebars/index.js:38:17)
at Object.render (/home/tim/workspace/projects/severine/node_modules/assemble/lib/engine.js:87:17)
Aborted due to warnings.
If I comment out the body of the filter function, assemble runs normally.
Source: (StackOverflow)