grunt-fizzy-docs
Grunt tasks for Masonry, Isotope, and Packery docs.
View documentation sources to see this in action.
- github.com/desandro/masonry-docs
- github.com/metafizzy/isotope-docs
- github.com/metafizzy/packery-docs
int-bower
Integrates bower sources.
- Adds .js and .css (taken from
maininbower.json) files toconcattask - Adds main files to
copytask - Saves .js and .css files to JSON with
dataDiroption
grunt.initConfig({
// global settings
dataDir: '_tasks/data'
});template
Generates site HTML with Handlebars templating.
grunt.initConfig({
template: {
docs: {
files: {
// dest: src
'build/': '_content/**/*.*'
},
options: {
// load all templates from files
templates: '_templates/*.mustache',
// default template used
defaultTemplate: 'page',
// any other partials you want to hard code
partialFiles: {
'submitting-issues': 'bower_components/masonry/CONTRIBUTING.mdown'
}
}
}
}
});Source files can contain JSON front matter, sort of like Jekyll's YAML front matter.
---
{
"title": "FAQ",
"nav": [
"Overlapping",
"Browser support",
"Difference between Isotope and Masonry",
"First item breaks grid"
]
}
---
Templating variables
JSON front matter is then passed in with the page variable for templating.
<h1>{{page.title}}</h1>
<ul class="nav">
{{#each page.nav}}
<li><a href="#{{slug this}}">{{this}}</a></li>
{{/each}}
</ul>Other variables:
basename- the name of the file. i.e. "index" for "content/index.html"ref="{{root_path}}layout-modes/masonry---devcommand flag, forgrunt default --devsitesite.js- all .js filessite.css- all .css files
Here's how I use those variables. See desandro/masonry-docs/_templates/page.mustache
</head>
{{#if is_dev}}
<!-- DEV MODE - including each .css file -->
{{#each site.css}}
<link rel="stylesheet" href="{{this}}" />
{{/each}}
{{else}}
{{! in production, just include concat CSS }}
<link rel="stylesheet" href="css/masonry-docs.css" />
{{/if}}
</head>
{{! unique page name for CSS, data-page to trigger JS }}
<body class="{{basename}}-page" data-page="{{basename}}"> 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent