Back when Adam Cameron and I launched the ColdFusion UI - The Right Way project, I mentioned that initially we would accept submissions from the community to build out the content before releasing an actual readable version. Turns out I kind of forgot to get around to doing that. The content in the GitHub repo is in Markdown, which is pretty readable, but it isn't exactly in a nice form to hand out to a junior developer.
Earlier this week I got off my rear and actually built a process to make this happen. I decided to give Grunt a try for the process and it worked out rather well. I did run into a few stumbling blocks but I was able to get past them all and I'm very happy with the result. My Grunt script now does all the following with one simple command:
- Clean out an output directory (to remove earlier versions)
- Convert the Markdown files to HTML using a template
- Find the demo folders and zip them
- Attach a bit of HTML to the files so that folks have a link for the download
I decided to put the output up on a S3 bucket. You can now read the docs here: https://static.raymondcamden.com/cfuitherightway/. I'll update the GitHub readme in a few moments to add this link as well. I'm tempted to extend my Grunt script to also push updates to S3. Heck, I could also have it do the git pull action as well. Anyway, for folks who may be curious, here is the script I'm using.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ['./output/'],
copy: {
main: {
files: [
{expand:true, src:['./chapters/**','!./chapters/**/*.md'], dest: 'output/'}
]
}
},
markdown:{
all: {
files: [
{
expand: true,
src:'./chapters/**/*.md',
dest:'output/',
ext:'.html'
}
],
options: {
template:'template.html',
preCompile:function(src, context) {
},
postCompile:function(src, context) {
/*
Unfortunately we don't have access to the current path,
so no easy way to skip index.html and introduction.html
*/
//set title back to blank
context.title = "";
if(src.indexOf('<h1 id="introduction">Introduction</h1>') >= 0) {
context.title = "Introduction";
return src;
}
if(src.indexOf('<h1 id="coldfusion-ui-the-right-way">ColdFusion UI - The Right Way</h1>') >= 0) {
context.title = "ColdFusion UI - The Right Way";
return src;
}
var dl = '<p style="text-align:right"><a class="btn btn-info" href="demos.zip">Download Demo</a></p>';
src = dl + src;
var titleArr = src.match(/<h1.*?>(.*?)<\/h1>/);
if(titleArr && titleArr.length >= 2) context.title=titleArr[1];
return src;
},
markdownOptions: {
highlight:'auto'
}
}
}
}
});
grunt.registerTask('zipDemos', "Zips demos appropriately.", function() {
var sourceDirs = grunt.file.expand(['./chapters/**/demos','./chapters/**/demo']);
var zipConfig = {};
sourceDirs.forEach(function(dir) {
var outputZip = dir.replace("chapters", "output/chapters");
//use a uniform demos.zip, not demo
if(outputZip.charAt(outputZip.length-1) === "o") outputZip += "s";
outputZip += ".zip";
dir += "/*";
zipConfig[dir] = {
cwd:dir,
src:dir,
dest:outputZip
};
grunt.config.set('zip', zipConfig);
});
});
grunt.registerTask('zipCode', ['zipDemos','zip']);
grunt.loadNpmTasks('grunt-markdown');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-zip');
// Default task(s).
grunt.registerTask('default', ['clean','markdown', 'copy', 'zipCode']);
};
As always, any comments are welcome.
Archived Comments
Hey that's cool Ray.
I thought the demo's would be runnable though.
I presume your "S3 Bucket" doesn't have a CF server.
I think runnable demo's would be good for people to see what the code actually does.
Or maybe your working on it and I have jumped the gun here.
Anyway the site is great and the cod much more readable.
Thanks Dude. :-)
Nope, S3 is *just* file storage - no code.
Well Done!!!
You can use s3 for hosting straight html, css and js....google it
Mark, I am using it.
If you want any Sencha (ExtJS/touch) samples for it let me know.
Basically, whoever writes a section gets to do the sample. I didn't push one framework over another as I wanted folks to see a variety.
@Ray ...
Cool Stuff ... nitpick ... be careful with the greedy quantifiers... they can come back and bite ya in some cases... pluses are better alternatives than asterisks ...
/<h1.+?>?(.+?)<\/h1>/
Oops... stray '?'
/<h1.+?>(.+?)<\/h1>/
My concern was that there wouldn't always be something after the 1. I think Markdown is applying a class, but, wouldn't mine be safer if it didn't and the tag was *just* h1?