Refactor Transaction and Dataset

docs/components/docs/docs-directives.js

@@ -0,0 +1,12 @@
+angular.module('gcloud.docs')
+  .directive('docsExample', function($compile) {
+    'use strict';
+
+    return {
+      link: function(scope, element, attr) {
+        scope.$watch(attr.ngBindHtml, function() {
+          $compile(element.contents())(scope);
+        }, true);
+      }
+    };
+  });

docs/components/docs/docs-services.js

@@ -0,0 +1,24 @@
+angular.module('gcloud.docs')
+  .factory('getLinks', function(pages) {
+    'use strict';
+
+    return function(version) {
+      var baseUrl = '#/docs/' + version;
+      var VERSIONS = pages.VERSIONS;
+      var versions;
+      var match;
+      if (!version || version === 'master') {
+        versions = Object.keys(VERSIONS);
+        match = versions[versions.length - 1];
+      } else {
+        match = Object.keys(VERSIONS).filter(semver.satisfies.bind(null, version))[0];
+      }
+      return VERSIONS[match]
+        .map(function(module) {
+          if (pages[module]._url) {
+            pages[module].url = pages[module]._url.replace('{baseUrl}', baseUrl);
+          }
+          return pages[module];
+        });
+    };
+  });

docs/components/docs/docs-values.js

@@ -0,0 +1,54 @@
+angular.module('gcloud.docs')
+  .value('pages', {
+    gcloud: {
+      title: 'gcloud',
+      _url: '{baseUrl}'
+    },
+
+    datastore: {
+      title: 'Datastore',
+      _url: '{baseUrl}/datastore',
+      pages: [
+        {
+          title: 'Dataset',
+          url: '/dataset'
+        },
+        {
+          title: 'Query',
+          url: '/query'
+        }
+      ]
+    },
+
+    datastoreWithTransaction: {
+      title: 'Datastore',
+      _url: '{baseUrl}/datastore',
+      pages: [
+        {
+          title: 'Dataset',
+          url: '/dataset'
+        },
+        {
+          title: 'Transaction',
+          url: '/transaction'
+        },
+        {
+          title: 'Query',
+          url: '/query'
+        }
+      ]
+    },
+
+    storage: {
+      title: 'Storage',
+      _url: '{baseUrl}/storage'
+    },
+
+    VERSIONS: {
+      // Give a version with/without a comparator, anything semver:
+      //   https://github.com/npm/node-semver#versions
+      // List should be in ascending order.
+      '<=0.7.1': ['gcloud', 'datastore', 'storage'],
+      '>0.7.1': ['gcloud', 'datastoreWithTransaction', 'storage']
+    }
+  });

docs/components/docs/docs.html

@@ -45,13 +45,13 @@ <h3 class="sub-heading">
           However, if you're running your app elsewhere, you will need to provide this information.
         </p>
         <div hljs>
-  // App Engine and Compute Engine
-  var gcloud = require('gcloud');
+// App Engine and Compute Engine
+var gcloud = require('gcloud');
 
-  // Elsewhere
-  var gcloud = require('gcloud')({
-    keyFilename: '/path/to/keyfile.json'
-  });</div>
+// Elsewhere
+var gcloud = require('gcloud')({
+  keyFilename: '/path/to/keyfile.json'
+});</div>
         <p>
           In any environment, you are free to provide these and other default properties, which eventually will be passed to the <code>gcloud</code> sub-modules (Datastore, Storage, etc.).
         </p>
@@ -98,8 +98,7 @@ <h2 ng-if="method.name[0].toUpperCase() === method.name[0]">
           ng-if="method.name[0].toUpperCase() !== method.name[0]">
           <a
             class="permalink"
-            ng-if="!noPermalink"
-            ng-href="{{activeUrl + '/' + method.name}}">#</a>
+            ng-href="{{activeUrl + '?method=' + method.name}}">#</a>
           {{method.name}}
         </h3>
         <p ng-if="method.description" ng-bind-html="method.description"></p>
@@ -118,9 +117,8 @@ <h4 ng-show="method.params">Parameters</h4>
         <h4 ng-show="method.returns">Returns</h4>
         <p ng-show="method.returns" ng-bind-html="method.returns"></p>
         <h4 ng-show="method.example">Example</h4>
-        <div ng-repeat-end
-          ng-show="method.example"
-          hljs source="method.example" language="js"></div>
+        <div docs-example ng-repeat-end
+          ng-show="method.example" ng-bind-html="method.example"></div>
         <hr ng-if="$index < methods.length - 1">
       </article>
     </article>
@@ -135,7 +133,7 @@ <h4 ng-show="method.example">Example</h4>
 
   <nav class="side-nav">
     <ul class="page-sections" ng-show="showReference">
-      <li ng-repeat="page in pages">
+      <li ng-repeat="page in links">
         <a
           ng-class="{ current: isActiveUrl(page.url) }"
           ng-href="{{page.url}}">