Add --css and --js options to include URLs of CSS/JS files. #152

kss-node · Jan 17, 2015 · bef4da5 · bef4da5
1 parent ea00b4a
commit bef4da5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,10 @@ Options:
                          [default: "*.css|*.less|*.sass|*.scss|*.styl|*.stylus"]
   --custom        Process a custom property name when parsing KSS comments
 
+  --css           Specify the URL of a CSS file to include in the style guide
+  --js            Specify the URL of a JavaScript file to include in the style
+                  guide
+
   --source        Source directory to parse for KSS comments
   --destination   Destination directory of generated style guide
                                                          [default: "styleguide"]

diff --git a/bin/kss-node b/bin/kss-node
@@ -53,6 +53,15 @@ argv = yargs
 		default   : '*.css|*.less|*.sass|*.scss|*.styl|*.stylus'
 	})
 
+	.options('css', {
+		string    : true,
+		describe  : 'Specify the URL of a CSS file to include in the style guide'
+	})
+	.options('js', {
+		string    : true,
+		describe  : 'Specify the URL of a JavaScript file to include in the style guide'
+	})
+
 	.options('custom', {
 		string    : true,
 		describe  : 'Process a custom property name when parsing KSS comments'
@@ -180,10 +189,16 @@ else if (!("helpers" in yargs.argv) && !config.helpers) {
 	argv.helpers = argv.template + '/helpers';
 }
 argv.helpers = path.resolve(argv.helpers);
-// Make custom an array.
+// Make these options an array.
 if (typeof argv.custom == "string") {
 	argv.custom = [argv.custom];
 }
+if (typeof argv.css == "string") {
+	argv.css = [argv.css];
+}
+if (typeof argv.js == "string") {
+	argv.js = [argv.js];
+}
 
 console.log('');
 console.log('Generating your KSS style guide!');
@@ -327,7 +342,9 @@ process.nextTick(function() {
 // Renders the handlebars template for a section and saves it to a file.
 generatePage = function(styleguide, sections, root, sectionRoots) {
 	var filename = '', files,
-		homepageText = false;
+		homepageText = false,
+		styles = '',
+		scripts = '';
 
 	if (root == 'styleguide.homepage') {
 		filename = 'index.html';
@@ -356,14 +373,23 @@ generatePage = function(styleguide, sections, root, sectionRoots) {
 			']'
 		);
 	}
+	// Create the HTML to load the optional CSS and JS.
+	for (var key in argv.css) {
+		styles = styles + '<link rel="stylesheet" href="' + argv.css[key] + '">\n';
+	}
+	for (var key in argv.js) {
+		scripts = scripts + '<script src="' + argv.js[key] + '"></script>\n';
+	}
 	fs.writeFileSync(argv.destination + '/' + filename,
 		template({
 			styleguide: styleguide,
 			sectionRoots: sectionRoots,
 			sections: jsonSections(sections),
 			rootName: root,
 			argv: argv || {},
-			homepage: homepageText
+			homepage: homepageText,
+			styles: styles,
+			scripts: scripts
 		})
 	);
 };

diff --git a/lib/template/index.html b/lib/template/index.html
@@ -13,7 +13,7 @@
 
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
   <link rel="stylesheet" href="public/kss.css">
-  <link rel="stylesheet" href="public/style.css">
+  {{{styles}}}
 </head>
 <body id="kss-node">
 
@@ -174,5 +174,7 @@
   </script>
 {{/if}}
 
+{{{scripts}}}
+
 </body>
 </html>