Migrate blog to vscode-docs

gulpfile.js

@@ -13,11 +13,12 @@ var common = require('./scripts/gulpfile.common.js');
 require('./scripts/gulpfile.docs.js');
 require('./scripts/gulpfile.releasenotes.js');
 require('./scripts/gulpfile.api.js');
+require('./scripts/gulpfile.blog.js');
 
 var BRANCH = process.env["branch"] ? process.env["branch"] : "master"; 
 var URL = process.env["token"] ? 'https://' + process.env["token"] + '@github.com/microsoft/vscode-website': 'https://github.com/microsoft/vscode-website';
 
-gulp.task('compile-all', ['compile-docs', 'compile-releasenotes']);
+gulp.task('compile-all', ['compile-docs', 'compile-releasenotes', 'compile-blog']);
 
 gulp.task('clean-out-folder', common.rimraf('out'));
 

scripts/gulpfile.blog.js

@@ -0,0 +1,112 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+var gulp = require('gulp');
+var es = require('event-stream');
+var markdownIt = require('markdown-it');
+var frontMatter = require('gulp-front-matter');
+var rename = require('gulp-rename');
+var keybindings = require('./keybindings/doc.keybindings');
+var imagemin = require('gulp-imagemin');
+var File = require('vinyl');
+var common = require('./gulpfile.common');
+var slash = require('gulp-slash');
+
+var BLOG_ROOT = 'blog'; 
+var DEST_ROOT = 'out/vscode-website/src'; 
+
+var blogs = [];
+
+function mapFileToBlogArticle(file) {
+    return {
+		Area: file.data.Area ? file.data.Area.toLowerCase() : null,
+		Link: slash(file.relative.substr(0, file.relative.lastIndexOf('.'))),
+		Title: file.data.PageTitle,
+		NavTitle: file.data.TOCTitle,
+		MetaDescription: file.data.MetaDescription,
+		MetaTags: !file.data.MetaTags ? [] : (file.data.MetaTags).join(','),
+		Sections: [],
+		Order: file.data.Order,
+		Content: "",
+        File: null
+	};
+}
+
+function renderTemplate(file, article) {
+    var template = common.swigCompiler('scripts/templates/blog-template.html');
+    var result = template(article);
+
+    file.contents = new Buffer(result, 'utf8');
+    article.File = file;
+
+    return file;
+}
+
+gulp.task('copy-blog-images', function () {
+	console.log('Copying blog images..');
+
+	var images = gulp.src([BLOG_ROOT + '/**/images/**/*.{png,PNG,jpg,JPG}']).pipe(imagemin());
+	var gifs = gulp.src([BLOG_ROOT + '/**/images/**/*.{gif,GIF}']);
+
+	return es.merge([images, gifs])
+		.pipe(rename(function (path) { 
+            path.basename = path.dirname + '_' + path.basename; 
+            path.dirname = ''; 
+        }))
+		.pipe(gulp.dest(DEST_ROOT + '/dist'));
+;})
+
+gulp.task('compile-blog-markdown', function () {
+	var sources = [
+		BLOG_ROOT + '/**/**/**/*.md',
+        '!' + BLOG_ROOT + '/README.md'
+	];
+
+	console.log('Parsing blog MD, applying templates...');
+	return gulp.src(sources)
+		.pipe(frontMatter({ 
+            property: 'data', 
+            remove: true 
+        }))
+		.pipe(es.mapSync(function (file) {
+			var blogArticle = mapFileToBlogArticle(file);
+			console.log("Compiling Blog: " + blogArticle.Title);
+
+			blogArticle = common.compileMarkdown(file, blogArticle);
+
+			if (blogArticle.Order) {
+				blogs.push(blogArticle);
+			}
+
+            return renderTemplate(file, blogArticle);
+		}))
+		.pipe(rename({ extname: '.handlebars' }))
+		.pipe(gulp.dest(DEST_ROOT + '/views/blogs'));
+});
+
+gulp.task('compile-blog', ['compile-blog-markdown', 'copy-blog-images'], function () {
+	console.log('Creating blog index...');
+	var template = common.swigCompiler('scripts/templates/blog-navigation-template.html');
+
+	blogs = blogs.sort(function (a, b) {
+		return parseFloat(b.Order) - parseFloat(a.Order);
+	});
+
+    var latest = new File({
+       path: 'latest.handlebars',
+       contents: blogs[0].File.contents
+    });
+
+    es.readArray([latest])
+        .pipe(gulp.dest(DEST_ROOT + '/views/blogs'));
+
+	var file = new File({
+		path: 'blogNavigation.handlebars',
+		contents: new Buffer(template({ articles: blogs }))
+	});
+
+	return es.readArray([file])
+        .pipe(gulp.dest(DEST_ROOT + '/views/partials'));
+});

scripts/gulpfile.common.js

@@ -36,7 +36,10 @@ exports.tableRendererRule = function(tokens, idx, options, env, self) {
 exports.imageRendererRule = function(tokens, idx, options, env, self) {
 	var imageToken = tokens[idx];
 	var src = imageToken.attrs[imageToken.attrIndex('src')][1];
-	imageToken.attrs[imageToken.attrIndex('src')][1] = "/images/" + src.replace('images/', '').replace('/', '_');
+
+    if (src.charAt('images/') > -1) {
+        imageToken.attrs[imageToken.attrIndex('src')][1] = "/images/" + src.replace('images/', '').replace('/', '_');
+    }
 
 	// DO NOT REMOVE - from original rule
 	imageToken.attrs[imageToken.attrIndex('alt')][1] = self.renderInlineAsText(imageToken.children, options, env);
@@ -75,6 +78,7 @@ exports.compileMarkdown = function(file, article) {
 			};
 			article.Sections.push(section);
 			headerToken.attrPush(['id', anchor]);
+            headerToken.attrPush(['data-needslink', anchor]);
 			tokens[idx] = headerToken;
 		}
 

scripts/templates/blog-navigation-template.html

@@ -0,0 +1,24 @@
+<nav id="docs-navbar" class="docs-nav updates-nav visible-md visible-lg">
+	<ul class="nav">
+		{% for article in articles %}
+			<li {{#ifCond section "{$ article.Link $}"}}class="active"{{/ifCond}}><a href="/blogs/{$ article.Link $}">{$ article.NavTitle $}</a></li>
+		{% endfor %}
+	</ul>
+</nav>
+<nav id="small-nav" class="docs-nav updates-nav hidden-md hidden-lg">
+	<h4>Blogs</h4>
+	<select id="small-nav-dropdown">
+		{% for article in articles %}
+			<option value="/blogs/{$ article.Link $}" {{#ifCond section "{$ article.Link $}"}}"selected"{{/ifCond}}>{$ article.NavTitle $}</option>
+		{% endfor %}
+	</select>
+	<div class="social-buttons">
+		<a class="twitter-share-button"
+		   data-text="Sharing this doc"
+           data-via="Code"
+		   href="https://twitter.com/share">
+		    Tweet
+		</a>
+		<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
+	</div>
+</nav>

scripts/templates/blog-template.html

@@ -0,0 +1,37 @@
+{{#regObject page="blog" section="{$ Link $}" title="{$ Title $}"}}{{/regObject}}
+
+<div class="container body-content docs blog">
+    <div class="row">
+        <div class="col-md-2">            
+			{{> blogNavigation}}
+		</div>
+		<div class="col-sm-9 col-md-8 body">
+			{$ Content $}
+		</div>
+        <div class="hidden-xs col-sm-3 col-md-2">
+            <nav id="docs-subnavbar">
+				<h4>In this blog</h4>
+                <ul class="nav">
+                	{% for section in Sections %}
+                		<li><a href="#{$ section.Anchor $}">{$ section.Title $}</a></li>
+                	{% endfor %}
+                </ul>
+				<a class="twitter-share-button"
+				   href="https://twitter.com/share"
+				   data-text="Sharing this doc"
+                   data-via="Code"
+				   data-counturl="https://code.visualstudio.com/Updates/{$ Link $}"
+				   data-count="vertical">
+				    Tweet
+				</a>
+
+				<div class="fb-like" data-href="{% if Link == '' %}https://code.visualstudio.com/Updates{% else %}https://code.visualstudio.com/Updates/{$ Link $}{% endif %}" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
+			</nav>
+        </div>
+	</div>
+</div>
+<div id="fb-root"></div>
+{{#section 'meta'}}
+	<meta name="description" content="{$ MetaDescription $}" />
+	<meta name="keywords" content="{$ MetaTags $}" />
+{{/section}}