Skip to content

Instantly share code, notes, and snippets.

View jonschlinkert's full-sized avatar
🤔
Trying to stay in the right branch of the wave function.

Jon Schlinkert jonschlinkert

🤔
Trying to stay in the right branch of the wave function.
View GitHub Profile
@jonschlinkert
jonschlinkert / assemblefile.js
Last active August 29, 2015 13:57
Everything you need to build a complete project with Assemble v0.6.0
var assemble = require('assemble');
assemble.partials('templates/partials/*.hbs');
assemble.layouts('templates/layouts/*.hbs');
assemble.task('default', function() {
assemble.src('templates/*.hbs')
.pipe(assemble.dest('_gh_pages'))
});
@jonschlinkert
jonschlinkert / verbfile-with-logging.js
Last active August 29, 2015 13:57
This verbfile adds some basic logging and changes the dest directory to `book/`. (if you don't use a verbfile, verb-cli will just process templates in the `docs` directory by default.)
var file = require('fs-utils');
module.exports = function(verb) {
verb.log.subhead('building', 'My Book');
// Process templates
file.writeFileSync('book/', verb.read('src/*.tmpl.md', {
data: 'chapters/*.json' // custom metadata for templates
}));
@jonschlinkert
jonschlinkert / verbfile.js
Last active February 3, 2018 05:52
Example verbfile: process templates in the `src` directory and save the rendered files to `docs/`.
var file = require('fs-utils');
module.exports = function(verb) {
// Process templates
file.writeFileSync('docs/', verb.read('src/*.tmpl.md', {
data: 'src/*.json' // custom metadata for templates
}));
};
@jonschlinkert
jonschlinkert / 1. README.tmpl.md
Last active February 3, 2018 05:52
Verb examples. (1) is a readme template, (2) is the rendered readme.
# {%= name %}

> {%= description %}

Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam.

## Contribute
{%= docs("contributing") %}
@jonschlinkert
jonschlinkert / 1. handlebars-subexpression.html
Last active February 3, 2018 05:51
Very powerful combination! Four helpers are used here: `each`, `expand`, `markdown` and `inline`.
{{#each (expand 'content/*.md')}}
{{#markdown}}
{{inline .}}
{{/markdown}}
{{/each}}
@jonathan-beebe
jonathan-beebe / assemble-io-looping.html
Last active August 29, 2015 13:57
Looping through data using Assemble.io + Handlebars
---
headings: [1, 2, 3, 4, 5, 6]
---
<div data-section="headings">
{{#each headings}}
{{#withHash num=this text="Heading"}}
<h{{num}}>{{text}} {{num}}</h{{num}}>
{{/withHash}}
{{/each}}

written in response to this question on Twitter, but hopefully this is helpful to someone, somewhere, in some small way.

Rather than cover what a function is and how it works, this example dives right into examples to illustrate the basics. If you need to do some research first, just remember: StackOverflow and Google are your best friends. Just take your time, and whenever you're ready this example will be right here waiting for you!

Let's get started!

Calculate a basic value

Remember algrebra, as in 3 * x = 6? Let's create a function that is capable of calculating a known value, 3 against an unknown value, x:

@jonschlinkert
jonschlinkert / this.md
Last active February 3, 2018 05:52
How `this` works in JavaScript

this

In JavaScript, this is a reference to the calling object of the function. For example:

var letters = {  // <= `this` (letters) is the calling object
  letter: 'A',
  getLetter: function () {
    // here, `this.letter` = `letters.letter`
    console.log(this.letter);
@jonschlinkert
jonschlinkert / task-vs-target.md
Created May 23, 2014 12:49
What is a "task" and a "target" in Grunt configuration?

What's a target?

Demystifying tasks and targets

Here, we have the basics of any Gruntfile.

module.exports = function(grunt) {
  grunt.initConfig({
 // tasks will go here. A "task" is run by a grunt "plugin"
@jonschlinkert
jonschlinkert / .assemblerc.yml
Last active August 29, 2015 14:01
Create a theme with Assemble
# I'm only using a few fields here to demonstrate how this works
# Site theme
theme: slides
# Assets
# The assets path is based on the theme,
# the other paths can build on the assets path
assets: assets/<%= site.theme %>
images: <%= site.assets %>/images