Skip to content

Instantly share code, notes, and snippets.

@andymantell

andymantell/default.hbs

Last active August 29, 2015 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andymantell/1bd1e0fb5f8d659bf11f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andymantell/1bd1e0fb5f8d659bf11f to your computer and use it in GitHub Desktop.
Download ZIP
Assemble 0.6 custom grunt task
Raw
default.hbs
{{> html }}
{{> head }}
<body class="{{#if notification}} has-notification{{/if}}">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="main-wrapper">
<a class="skiplink visuallyhidden focusable" href="#main" tabindex="0">
<span>Skip to main content</span>
</a>
{{> main-nav }}
<main id="main" role="main">
{{#if heroBanner}}
{{> hero-banner }}
{{/if}}
<div class="content-wrapper content-wrapper--main">
{% body %}
</div>
</main>
{{> footer }}
</div>
</div>
</div>
{{> scripts }}
</body>
</html>
Raw
gistfile1.js
var assemble = require('assemble');
var ext = require('gulp-extname');
module.exports = function(grunt) {
grunt.registerTask('assemble', 'Assemble', function() {
var done = this.async();
var site = assemble.init();
site.partials('src/core/templates/partials/**/*.hbs');
site.layouts('src/core/templates/layouts/*.hbs');
site.option('layout', 'default');
// Dummy helpers to stop errors being thrown for the moment
site.helper('author', function() {return 'here'});
site.helper('button', function() {return 'here'});
site.helper('byline', function() {return 'here'});
site.helper('compile', function() {return 'here'});
site.helper('debug', function() {return 'here'});
site.helper('icon', function() {return 'here'});
site.helper('ifCond', function() {return true});
site.helper('image', function() {return 'here'});
site.helper('loadArticle', function() {return []});
site.helper('loadAuthorArticles', function() {return []});
site.helper('navigation', function() {return 'here'});
site.helper('panel', function() {return 'here'});
site.helper('parseJSON', function() {return []});
site.helper('render', function() {return 'here'});
site.helper('renderJSON', function() {return 'here'});
site.helper('teamFiller', function() {return ''});
// Build the pattern library
site.task('demo', function() {
site
.src('src/sites/demo/pages/**/*.hbs')
.pipe(ext())
.pipe(site.dest('converted-html/demo'));
});
// Build the main site
site.task('main', function() {
site
.src('src/sites/main/pages/**/*.hbs')
.pipe(ext())
.pipe(site.dest('converted-html/main'));
});
site.run(['demo', 'main'], done);
});
};
@doowb
Copy link

doowb commented Jan 20, 2015

Helpers will probably be the biggest migration piece. You can register a helper just by doing... site.helper('my-helper', function () { ... });

Or you can register a folder with glob patterns site.helpers('src/helpers/*.js') and it'll load them by their filename. We don't use the .register signature any more.

Another change inside helpers is that this is specially bound so you can get access to better information than before:

function () {
  this.app; // the current instance of assemble
  this.context; // the current context built up for that template based on `mergeContext` rules.
  this.options; // the current options from `assemble.options`
}

Check out template for more information on these. We're still working on the documentation for a lot of this.

@andymantell
Copy link
Author

andymantell commented Jan 20, 2015

Ok so there's a bit of migrating to do here... Are they still handlebars helpers though? So they're the same as before, I just need to refactor them to follow the new patterns?

Thanks for your help anyway, appreciate that this is all still slightly bleeding edge. My hand is forced slightly by the need to be using Handlebars 2.0 due to a bug in 1.3 that assemble 0.4 uses.

@doowb
Copy link

doowb commented Jan 20, 2015

Yes, if you're using Handlebars (default) then write the helpers for Handlebars. If you take a look at template and how template types are created, some of your helpers might be able to be replaced. If you want to post some of your helpers, I could probably point out if they could be replaced or need to be migrated.

@andymantell
Copy link
Author

andymantell commented Jan 20, 2015

Ok, I've temporarily boshed in a bunch of dummy helpers just to suppress the errors like this:

site.helper('author', function() {return 'here'});

So now, handlebars does indeed seem to be kicking in and doing it's thing, but the outputted html is not being wrapped in the default layout. I updated the main insertion point to {% body %} and I've got these two lines in there:

site.layouts('src/core/templates/layouts/*.hbs');
site.option('layout', 'default');

Am I missing something else? I've posted my default.hbs here: https://gist.github.com/andymantell/1bd1e0fb5f8d659bf11f#file-default-hbs

@jonschlinkert
Copy link

jonschlinkert commented Jan 20, 2015

Are they still handlebars helpers though?

like @doowb mentioned, yes. but... we used to make you jump through hoops to register them, now you can just register a regular javascript function as a helper. e.g:

site.helper('lower', function(str) {
  return str.toLowerCase();
});

but the outputted html is not being wrapped in the default layout.

I think this is the issue I discussed with @doowb a day or two ago. It's not you! I think it's a bug

@andymantell
Copy link
Author

andymantell commented Jan 21, 2015

Thanks Jon, that's good to know. What's the prognosis? It's obviously a fairly critical one that would block me from upgrading to 0.6.

Should I bail out, and return to 0.4? I'm totally expecting there to be various issues with 0.6 which I'm happy to ride out and help you diagnose etc but at the same time I have to deliver to my client so if 0.6 is not quite ready yet it would be great to get an idea of roughly how it's currently looking. Thanks!

@doowb
Copy link

doowb commented Jan 21, 2015

@anymantell will you put console.log('layouts', site.views.layouts) on line 13?

It's really hard to debug this when all we have are small pieces. I haven't been having problems with layouts so I need to find out if somehow I have a different version of something that's working only for me.

@andymantell
Copy link
Author

andymantell commented Jan 22, 2015

Yeah, sorry, I realise it's really hard to debug this kind of stuff remotely. Here's the output of site.views.layouts from line 13 anyway:

http://pastebin.com/veijA5y8

@doowb
Copy link

doowb commented Jan 22, 2015

One thing I noticed is that in all of your sub-layouts, you're using layout: default.hbs... it should just be layout: default. If you're doing this inside your pages, then it won't be pointing to the correct layout since page frontmatter overrides the global options e.g. site.option('layout', 'default');

Another thing that I had to do was return the streams inside the assemble tasks so the run waited for them to finish before telling grunt that it was done.

I created this repo with some samples based on what you described and everything seems to be working for me with those changes.

@andymantell
Copy link
Author

andymantell commented Jan 23, 2015

Hooray! That's pretty much sort of working now :-) It's all kinds of broken still, but that's to be expected - I still need to migrate all my helpers and I daresay fix a few other things but this is a darn good start - it gets about halfway through rendering now and the output all looks correctish and well formed. So, now I just need to finish the migration...

Thankyou so much for your help, is massively appreciated. I'll keep you posted on my progress... :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment