Disqus integration

docs/src/templates/docs.css

@@ -268,7 +268,7 @@ li {
 
 /*----- content styles -----*/
 
-#content-panel {
+.content-panel {
   float: left;
   margin-top: 4em;
   margin-left: 3em;
@@ -286,33 +286,22 @@ li {
   border-radius: 15px;
 }
 
-#content-panel > h2 {
+.content-panel > h2 {
   font-size: 2em;
   font-weight: normal;
   color: #fff;
   margin: 0 4em 0 0;
   height: 1em;
 }
 
-
-#content {
+.content-panel-content {
   background-color: #fff;
   display: block;
   margin: 0.7em -1em -1em;
   padding: 0.5em 1.5em;
 }
 
 
-#feedback {
-  float: right;
-  margin-top: -2.3em;
-  margin-right: 0.5em;
-  width: 8em;
-  font-size: 0.8em;
-  color: #fff;
-}
-
-
 #content > h1 {
   display: none;
 }
@@ -354,6 +343,10 @@ li {
   padding-left: 0;
 }
 
+#disqus #disqus_thread {
+  margin: 0.7em -1em -1em;
+}
+
 /* subpages */
 
 #fader {

docs/src/templates/docs.js

@@ -26,26 +26,25 @@ function DocsController($location, $window, $cookies) {
       scope.sectionId = parts[1];
       scope.partialId = parts[2] || 'index';
       scope.pages = angular.Array.filter(NG_PAGES, {section: scope.sectionId});
-      scope.loading++;
 
       var i = scope.pages.length;
       while (i--) {
-        if (scope.pages[i].id == scope.partialId) {
-          // TODO(i): this is not ideal but better than updating the title before a partial arrives,
-          //   which results in the old partial being displayed with the new title
-          scope.futurePartialTitle = scope.pages[i].name;
-          break;
-        }
+        if (scope.pages[i].id == scope.partialId) break;
       }
       if (i<0) {
         scope.partialTitle = 'Error: Page Not Found!';
         delete scope.partialId;
+      } else {
+        // TODO(i): this is not ideal but better than updating the title before a partial arrives,
+        //   which results in the old partial being displayed with the new title
+        scope.futurePartialTitle = scope.pages[i].name;
+        scope.loading++;
       }
     }
   });
 
   scope.getUrl = function(page) {
-    return page.section + '/' + page.id;
+    return page.section + (page.id == 'index' ? '' : '/' + page.id);
   };
 
   scope.getCurrentPartial = function() {
@@ -71,17 +70,13 @@ function DocsController($location, $window, $cookies) {
   };
 
   scope.afterPartialLoaded = function() {
+    var currentPageId = $location.path();
     scope.loading--;
     scope.partialTitle = scope.futurePartialTitle;
     SyntaxHighlighter.highlight();
     $window.scrollTo(0,0);
-    $window._gaq.push(['_trackPageview', $location.path()]);
-  };
-
-  scope.getFeedbackUrl = function() {
-    return "mailto:[email protected]?" +
-           "subject=" + escape("Feedback on " + $location.absUrl()) + "&" +
-           "body=" + escape("Hi there,\n\nI read " + $location.absUrl() + " and wanted to ask ....");
+    $window._gaq.push(['_trackPageview', currentPageId]);
+    loadDisqus(currentPageId);
   };
 
   /** stores a cookie that is used by apache to decide which manifest ot send */
@@ -105,6 +100,26 @@ function DocsController($location, $window, $cookies) {
       });
     }
   });
+
+  function loadDisqus(currentPageId) {
+    // http://docs.disqus.com/help/2/
+    window.disqus_shortname = 'angularjs';
+    window.disqus_identifier = currentPageId;
+
+    if ($location.host() == 'localhost') {
+      window.disqus_developer = 1;
+    }
+
+    // http://docs.disqus.com/developers/universal/
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      dsq.src = 'http://angularjs.disqus.com/embed.js';
+      (document.getElementsByTagName('head')[0] ||
+        document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+
+    angular.element(document.getElementById('disqus_thread')).html('');
+  }
 }
 
 // prevent compilation of code

docs/src/templates/index.html

@@ -114,10 +114,17 @@
     <div id="loading" ng:show="loading">Loading...</div>
 
 
-    <div id="content-panel">
+    <div class="content-panel">
       <h2 ng:bind="partialTitle"></h2>
-      <a id="feedback" ng:href="{{getFeedbackUrl()}}">Report an Issue or Ask a Question</a>
-      <ng:include id="content" src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include>
+      <ng:include id="content"
+                  class="content-panel-content"
+                  src="getCurrentPartial()"
+                  onload="afterPartialLoaded()"></ng:include>
+    </div>
+
+    <div id="disqus" class="content-panel">
+      <h2>Discussion</h2>
+      <div id="disqus_thread" class="content-panel-content"></div>
     </div>
 
     <div id="footer" ng:cloak>