Fix dartdoc styles and prep layout for ng2 pages (#2530)

- Use custom bootstrap grid system styles
- Cache a copy of the dartdoc static-assets styles.css w/ footer styles
disabled.
- Alternate page layout controlled by jade2ng harp global

gulpfile.js

@@ -50,6 +50,8 @@ var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPl
 var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
 
+const WWW = argv.page ? 'www-pages' : 'www'
+
 const isSilent = !!argv.silent;
 if (isSilent) gutil.log = gutil.noop;
 const _dgeniLogLevel = argv.dgeniLog || (isSilent ? 'error' : 'info');
@@ -747,7 +749,7 @@ gulp.task('harp-serve', () => {
 
 gulp.task('serve-www', () => {
   // Serve generated site.
-  return execPromise('npm run live-server ./www');
+  return execPromise(`npm run live-server ${WWW}`);
 });
 
 gulp.task('build-compile', ['build-docs'], function() {
@@ -758,7 +760,7 @@ gulp.task('check-deploy', ['build-docs'], function() {
   return harpCompile().then(function() {
     gutil.log('compile ok');
     gutil.log('running live server ...');
-    execPromise('npm run live-server ./www');
+    execPromise(`npm run live-server ${WWW}`);
     return askDeploy();
   }).then(function(shouldDeploy) {
     if (shouldDeploy) {
@@ -902,11 +904,13 @@ function harpCompile() {
   env({ vars: { NODE_ENV: "production" } });
   gutil.log("NODE_ENV: " + process.env.NODE_ENV);
 
-  if(skipLangs && fs.existsSync('www') && backupApiHtmlFilesExist('www')) {
+  if(argv.page) harpJsonSetJade2NgTo(true);
+  
+  if(skipLangs && fs.existsSync(WWW) && backupApiHtmlFilesExist(WWW)) {
     gutil.log(`Harp site recompile: skipping recompilation of API docs for [${skipLangs}]`);
-    gutil.log(`API docs will be copied from existing www folder.`)
-    del.sync('www-backup'); // remove existing backup if it exists
-    renameIfExistsSync('www', 'www-backup');
+    gutil.log(`API docs will be copied from existing ${WWW} folder.`)
+    del.sync(`${WWW}-backup`); // remove existing backup if it exists
+    renameIfExistsSync(WWW, `${WWW}-backup`);
   } else {
     gutil.log(`Harp full site compile, including API docs for all languages.`);
     if (skipLangs)
@@ -918,11 +922,12 @@ function harpCompile() {
   gutil.log('running harp compile...');
   showHideExampleNodeModules('hide');
   showHideApiDir('hide');
-  var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', './www' ]);
+  var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', WWW ]);
   spawnInfo.promise.then(function(x) {
     gutil.log("NODE_ENV: " + process.env.NODE_ENV);
     showHideExampleNodeModules('show');
     showHideApiDir('show');
+    harpJsonSetJade2NgTo(false);
     if (x !== 0) {
       deferred.reject(x)
     } else {
@@ -933,6 +938,7 @@ function harpCompile() {
     gutil.log("NODE_ENV: " + process.env.NODE_ENV);
     showHideExampleNodeModules('show');
     showHideApiDir('show');
+    harpJsonSetJade2NgTo(false);
     deferred.reject(e);
   });
   return deferred.promise;
@@ -1050,21 +1056,21 @@ function _showHideApiDir(lang, showOrHide) {
   renameIfExistsSync(...args);
 }
 
-// For each lang in skipLangs, copy the API dir from www-backup to www.
+// For each lang in skipLangs, copy the API dir from ${WWW}-backup to WWW.
 function restoreApiHtml() {
   const vers = 'latest';
   skipLangs.forEach(lang => {
     const relApiDir = path.join('docs', lang, vers, 'api');
-    const wwwApiSubdir = path.join('www', relApiDir);
-    const backupApiSubdir = path.join('www-backup', relApiDir);
+    const apiSubdir = path.join(WWW, relApiDir);
+    const backupApiSubdir = path.join(`${WWW}-backup`, relApiDir);
     if (fs.existsSync(backupApiSubdir) || argv.forceSkipApi !== true) {
-      gutil.log(`cp ${backupApiSubdir} ${wwwApiSubdir}`)
-      fs.copySync(backupApiSubdir, wwwApiSubdir);
+      gutil.log(`cp ${backupApiSubdir} ${apiSubdir}`)
+      fs.copySync(backupApiSubdir, apiSubdir);
     }
   });
 }
 
-// For each lang in skipLangs, ensure API dir exists in www-backup
+// For each lang in skipLangs, ensure API dir exists in folderName
 function backupApiHtmlFilesExist(folderName) {
   const vers = 'latest';
   var result = 1;
@@ -1079,6 +1085,14 @@ function backupApiHtmlFilesExist(folderName) {
   return result;
 }
 
+function harpJsonSetJade2NgTo(v) {
+  const execSync = require('child_process').execSync;
+  const harpJsonPath = path.join(ANGULAR_IO_PROJECT_PATH, 'harp.json');
+  execSync(`perl -pi -e 's/("jade2ng": *)\\w+/$1${v}/' ${harpJsonPath}`);
+  const harpJson = require(harpJsonPath);
+  gutil.log(`jade2ng: ${harpJson.globals.jade2ng}`);
+}
+
 // Copies fileNames into destPaths, setting the mode of the
 // files at the destination as optional_destFileMode if given.
 // returns a promise

harp.json

@@ -6,6 +6,7 @@
     "siteURL": "http://angular.io",
     "jsLatest": "2.0.0-beta.02",
     "dartLatest": "2.0.0-beta.02",
+    "jade2ng": false,
 
     "bios": {
       "misko": {

public/_includes/_hero.jade

@@ -1,4 +1,4 @@
-// template: public/_includes/_hero
+//- template: public/_includes/_hero
 //- Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates
 - var textFormat = '';
 - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : '');
@@ -24,16 +24,14 @@ header.hero.background-sky
       span(class="badge is-deprecated").
         Security Risk
 
-  //CLEAR FLOAT ELEMENTS
+  //- CLEAR FLOAT ELEMENTS
   .clear
 
   if subtitle
     h2.hero-subtitle #{subtitle}
-
   else if docType
     h2.hero-subtitle #{renamer(capitalize(docType))}
 
-
-if current.path[3] == 'api' && current.path[1] == 'dart'
-  block breadcrumbs
+  if current.path[3] == 'api' && current.path[1] == 'dart'
+    block breadcrumbs
 

public/_includes/_util-fns.jade

@@ -300,7 +300,7 @@ if !jade2ng
 -   } else {
 -     // ``` gets translated to <pre><code>.....</code></pre> and we need
 -     // to remove this from the fragment prefix is 11 long and suffix is 13 long
--     frag = jade2ng ? frag : frag.substring(11, frag.length-13);
+-     frag = frag.substring(11, frag.length-13);
 -     // Uncomment next line for debugging.
 -     // frag = "FileName: " + fullFileName + "   Current path: " + current.path +  " PathToDocs: " + getPathToDocs() + "\n" + frag;
 -     return frag;

public/docs/_layout-dart-api.jade

@@ -1,40 +1,51 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
-doctype
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
-  // template: public/docs/_layout-dart-api
-  head
-    include ../_includes/_head-include
-    block head-extra
-
-  block var-def
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
-    include ../_includes/_main-nav
-    if current.path[2]
-      include _includes/_side-nav
+if jade2ng
+  .side-nav--offset
+    link(rel="stylesheet" href="/assets/css/vendor/dartdoc/bootstrap.min.css")
+    link(rel="stylesheet" href="/assets/css/vendor/dartdoc/styles.css")
     include ../_includes/_hero
     include ../_includes/_banner
+    .l-content-small.grid-fluid.docs-content
+      block main-content
+else
+  doctype
+  html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+    // template: public/docs/_layout-dart-api
+    head
+      include ../_includes/_head-include
+      link(rel="stylesheet" href="/resources/css/vendor/dartdoc/bootstrap.min.css")
+      link(rel="stylesheet" href="/resources/css/vendor/dartdoc/styles.css")
+      block head-extra
 
-    if current.path[3] == 'api'
-      if current.path[4] == 'index'
+    block var-def
+    body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
+      include ../_includes/_main-nav
+      if current.path[2]
+        include _includes/_side-nav
+      include ../_includes/_hero
+      include ../_includes/_banner
+
+      if current.path[3] == 'api'
+        if current.path[4] == 'index'
+          block main-content
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            block main-content
+      else if current.path.indexOf('cheatsheet') > 0
         block main-content
       else
-        article(class="l-content-small grid-fluid docs-content")
-          block main-content
-    else if current.path.indexOf('cheatsheet') > 0
-      block main-content
-    else
-      if current.path[3] == 'index' || current.path[3] == 'styleguide'
-        article(class="l-content-small grid-fluid docs-content")
-          block main-content
-      else
-        article(class="l-content-small grid-fluid docs-content")
-          div(class="c10")
-            .showcase
-              .showcase-content
-                block main-content
-                if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-                  include ../_includes/_next-item
+        if current.path[3] == 'index' || current.path[3] == 'styleguide'
+          article(class="l-content-small grid-fluid docs-content")
+            block main-content
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            div(class="c10")
+              .showcase
+                .showcase-content
+                  block main-content
+                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+                    include ../_includes/_next-item
 
-    include ../_includes/_footer
-    include ../_includes/_scripts-include
+      include ../_includes/_footer
+      include ../_includes/_scripts-include

public/docs/_layout.jade

@@ -1,37 +1,44 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
-doctype
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
-  // template: public/docs/_layout
-  head
-    != partial("../_includes/_head-include")
-    block head-extra
-
-  //-
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
-    != partial("../_includes/_main-nav")
-    if current.path[2]
-      != partial("_includes/_side-nav")
+if jade2ng
+  .side-nav--offset
     != partial("../_includes/_hero")
     != partial("../_includes/_banner")
+    .l-content-small.grid-fluid.docs-content
+      != yield    
+else
+  doctype
+  html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+    // template: public/docs/_layout
+    head
+      != partial("../_includes/_head-include")
+      block head-extra
 
-    if current.path[3] == 'api'
-      if current.path[4] == 'index'
+    //-
+    body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
+      != partial("../_includes/_main-nav")
+      if current.path[2]
+        != partial("_includes/_side-nav")
+      != partial("../_includes/_hero")
+      != partial("../_includes/_banner")
+
+      if current.path[3] == 'api'
+        if current.path[4] == 'index'
+          != yield
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+      else if current.path.indexOf('cheatsheet') > 0
         != yield
       else
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-    else if current.path.indexOf('cheatsheet') > 0
-      != yield
-    else
-      if current.path[3] == 'index' || current.path[3] == 'styleguide'
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-      else
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-            if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-              != partial("../_includes/_next-item")
+        if current.path[3] == 'index' || current.path[3] == 'styleguide'
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+              if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+                != partial("../_includes/_next-item")
 
-    != partial("../_includes/_footer")
-    != partial("../_includes/_scripts-include")
+      != partial("../_includes/_footer")
+      != partial("../_includes/_scripts-include")

tools/dart-api-builder/dab.js

@@ -219,12 +219,10 @@ block head-extra
   // generated Dart API page template: head-extra
   //- <base> is required because all the links in dartdoc generated pages are "pseudo-absolute"
   base(href="${baseHref}")
-  link(rel="stylesheet" href="static-assets/styles.css")
 
 block breadcrumbs
   // generated Dart API page template: breadcrumbs
-  .banner
-    ol.breadcrumbs.gt-separated.hidden-xs
+  ol.breadcrumbs.gt-separated.hidden-xs
 ${breadcrumbs}
 
 block main-content