complete rewrite of documentation generation

- romeved mustache.js - unified templates - improved testability of the code
author: Misko Hevery 2010-12-23 00:44:27 +0100
committer: Misko Hevery 2011-01-10 11:50:11 -0800
commit: 4f22d6866c052fb5b770ce4f377cecacacd9e6d8 (patch)
tree: 6bdb1c5eb70cfd7e6bcf143c121c53025a0489a4 /docs/src/templates
parent: aab3df7aeaf79908e8b6212288b283adb42b1ce6 (diff)
download: angular.js-4f22d6866c052fb5b770ce4f377cecacacd9e6d8.tar.bz2
7 files changed, 479 insertions, 0 deletions
diff --git a/docs/src/templates/doc_widgets.css b/docs/src/templates/doc_widgets.css
new file mode 100644
index 00000000..8361f105
--- /dev/null
+++ b/docs/src/templates/doc_widgets.css
@@ -0,0 +1,35 @@
+@namespace doc url("http://docs.angularjs.org/");
+
+doc\:example {
+  display: none;
+}
+
+ul.doc-example {
+  list-style-type: none;
+  position: relative;
+  font-size: 14px;
+}
+
+ul.doc-example > li {
+  border: 2px solid gray;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  background-color: white;
+  margin-bottom: 20px;
+}
+
+ul.doc-example > li.doc-example-heading {
+  border: none;
+  border-radius: none;
+  margin-bottom: -10px;
+}
+
+li.doc-example-live {
+  padding: 10px;
+  font-size: 1.2em;
+}
+
+div.syntaxhighlighter {
+  padding-bottom: 1px !important; /* fix to remove unnecessary scrollbars http://is.gd/gSMgC */
+}
+\ No newline at end of file
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
new file mode 100644
index 00000000..b119e326
--- /dev/null
+++ b/docs/src/templates/doc_widgets.js
@@ -0,0 +1,71 @@
+(function(){
+  
+  var angularJsUrl;
+  var scripts = document.getElementsByTagName("script");
+  var filename = /(.*\/)angular([^\/]*)/;
+  for(var j = 0; j < scripts.length; j++) {
+    var src = scripts[j].src;
+    if (src && src.match(filename)) {
+      angularJsUrl = src;
+    }
+  }
+
+  
+  var HTML_TEMPLATE =
+  '<!doctype html>\n' +
+  '<html xmlns:ng="http://angularjs.org">\n' +
+  ' <script type="text/javascript" ng:autobind\n' + 
+  '         src="' + angularJsUrl + '"></script>\n' +
+  ' <body>\n' +
+  '_HTML_SOURCE_\n' +
+  ' </body>\n' +
+  '</html>';
+
+  angular.widget('doc:example', function(element){
+    this.descend(true); //compile the example code
+    element.hide();
+
+    var example = element.find('doc\\:source').eq(0),
+        exampleSrc = example.text(),
+        scenario = element.find('doc\\:scenario').eq(0);
+
+    var code = indent(exampleSrc);
+    var tabs = angular.element(
+        '<ul class="doc-example">' +
+          '<li class="doc-example-heading"><h3>Source</h3></li>' +
+          '<li class="doc-example-source" ng:non-bindable>' + 
+            '<pre class="brush: js; html-script: true; highlight: [' + 
+            code.hilite + ']; toolbar: false;"></pre></li>' +
+          '<li class="doc-example-heading"><h3>Live Preview</h3></li>' +
+          '<li class="doc-example-live">' + exampleSrc +'</li>' +
+          '<li class="doc-example-heading"><h3>Scenario Test</h3></li>' +
+          '<li class="doc-example-scenario"><pre class="brush: js">' + scenario.text() + '</pre></li>' +
+        '</ul>');
+    
+    tabs.find('li.doc-example-source > pre').text(HTML_TEMPLATE.replace('_HTML_SOURCE_', code.html));
+
+    element.html('');
+    element.append(tabs);
+    element.show();
+
+    var script = (exampleSrc.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
+    try {
+      eval(script);
+    } catch (e) {
+      alert(e);
+    }
+  });
+  
+  function indent(text) {
+    var lines = text.split(/\n/);
+    var lineNo = [];
+    while (lines[0].match(/^\s*$/)) lines.shift();
+    while (lines[lines.length - 1].match(/^\s*$/)) lines.pop();
+    for ( var i = 0; i < lines.length; i++) {
+      lines[i] = '  ' + lines[i];
+      lineNo.push(6 + i);
+    }
+    return {html: lines.join('\n'), hilite: lineNo.join(',') };
+  };
+  
+})();
+\ No newline at end of file
diff --git a/docs/src/templates/docs-scenario.html b/docs/src/templates/docs-scenario.html
new file mode 100644
index 00000000..c75155c5
--- /dev/null
+++ b/docs/src/templates/docs-scenario.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html xmlns:ng="http://angularjs.org" wiki:ng="http://angularjs.org">
+<head>
+  <title>&lt;angular/&gt; Docs Scenario Runner</title>
+  <script type="text/javascript" src="../angular-scenario.js" ng:autobind></script>
+  <script type="text/javascript" src="docs-scenario.js"></script>
+</head>
+<body>
+</body>
+</html>
+\ No newline at end of file
diff --git a/docs/src/templates/docs-scenario.js b/docs/src/templates/docs-scenario.js
new file mode 100644
index 00000000..2ee8387b
--- /dev/null
+++ b/docs/src/templates/docs-scenario.js
@@ -0,0 +1,9 @@
+{{#pages}}
+describe('{{name}}', function(){
+  beforeEach(function(){
+    browser().navigateTo('index.html#!{{name}}');
+  });
+  // {{raw.file}}:{{raw.line}}
+{{{scenario}}}
+});
+{{/pages}}
diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css
new file mode 100644
index 00000000..aaef7e58
--- /dev/null
+++ b/docs/src/templates/docs.css
@@ -0,0 +1,262 @@
+/* Common Style */
+
+body {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: blue;
+}
+
+
+/* Main Layout */
+
+#header {
+  height: 3.5em;
+}
+
+#sidebar,
+#main {
+  position: absolute;
+  top: 3.5em;
+  bottom: 0;
+  margin-top: 1px;
+  overflow-x: hidden;
+}
+
+#sidebar {
+  width: 13.8em;
+  padding: 0.8em 0em 1.5em 0.8em;
+}
+
+#main {
+  left: 14.6em;
+  right: 0;
+  padding: 1em;
+  overflow-y: scroll;
+}
+
+#api-list {
+  position: absolute;
+  top: 3em;
+  bottom: 1em;
+  overflow-y: scroll;
+  padding-right: 0.8em;
+}
+
+
+/* App Header */
+
+#header {
+  background-color: #F2C200;
+  border-bottom: 1px solid #957800;
+}
+
+#header h1 {
+  font-weight: normal;
+  font-size: 30px;
+  line-height: 30px;
+  margin: 0;
+  padding: 10px 10px;
+  height: 30px;
+}
+
+#header .angular {
+  font-family: "Courier New", monospace;
+  font-weight: bold;
+}
+
+#header h1 a {
+  color: black;
+  text-decoration: none;
+}
+
+#header h1 a:hover {
+  text-decoration: underline;
+}
+
+
+/* Main main Style */
+
+#main h1 {
+  font-family: monospace;
+  margin-top: 0;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #CCC;
+}
+
+#main h2 {
+  margin-top: 1.8em;
+}
+
+#main h1 + h2 {
+  margin-top: 1.3em;
+}
+
+#main h3 {
+  margin-top: 1.5em;
+}
+
+#main ul.methods h3,
+#main ul.properties h3 {
+  margin-top: 1.5em;
+  font-family: "Courier New", monospace;
+}
+
+.main-title {
+  float: right;
+}
+
+
+/* Searchbox & Sidebar Style */
+
+#search-box, #sidebar {
+  border-right: 1px solid #DDD;
+}
+
+#sidebar {
+  background-color: #EEE;
+}
+
+#search-box {
+  width: 16em;
+  margin-bottom: 1em;
+}
+
+#sidebar a {
+  text-decoration: none;
+}
+
+#sidebar a:hover {
+  text-decoration: underline;
+}
+
+#sidebar ul {
+  list-style-type: none;
+  /*TODO(esprehn): Can we just reset globally and not break examples?*/
+  margin: 0;
+  padding: 0 0.8em 0 0;
+  width: 13em;
+}
+
+#sidebar ul li {
+}
+
+#sidebar ul li a {
+  display: block;
+  padding: 2px 2px 2px 4px;
+} 
+
+#sidebar ul li.selected a {
+  background-color: #DDD;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  border: 1px solid #CCC;
+  padding: 1px 1px 1px 3px;
+}
+
+#sidebar ul li.level-0 {
+  margin-left: 0em;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+#sidebar ul li.level-1.level-angular {
+  font-family: monospace;
+  font-weight: normal;
+  font-size: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#sidebar ul li.level-1 {
+  margin-left: 1em;
+  margin-top: 5px;
+  font-size: 1.1em;
+  font-weight: bold;
+}
+
+#sidebar ul li.level-2 {
+  margin-left: 2em;
+  font-family: monospace;
+}
+
+#sidebar ul li.level-3 {
+  margin-left: 3em;
+  font-family: monospace;
+}
+
+
+/* Warning and Info Banners */
+
+.deprecated {
+  border: 2px solid red;
+}
+
+.deprecated legend {
+  font-weight: bold;
+  color: red;
+}
+
+.workInProgress {
+  border: 2px solid orange;
+}
+
+.workInProgress legend {
+  font-weight: bold;
+  color: orange;
+}
+
+
+/* Feedback Link */
+
+#feedback {
+  float: right;
+  width: 10em;
+  text-align: right;
+}
+
+
+/* Live Example Style */
+
+.doc-example-live table td {
+  padding: 0 1.5em;
+}
+
+
+/* Scrollbars */
+
+::-webkit-scrollbar{
+  width:0.8em;
+  margin: 0.2em 0em;
+}
+
+::-webkit-scrollbar:hover{
+  background-color:#eee;
+}
+
+::-webkit-scrollbar-thumb{
+  min-height:0.8em;
+  min-width:0.8em;
+  -webkit-border-radius:0.5em;
+  background-color: #ddd;
+}
+
+::-webkit-scrollbar-thumb:hover{
+  background-color: #bbb;
+}
+
+::-webkit-scrollbar-thumb:active{
+  background-color:#888;
+}
+
+#sidebar::-webkit-scrollbar {
+  background-color:#eee;
+}
+
+#main::-webkit-scrollbar {
+  background-color:#fff;
+}
diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js
new file mode 100644
index 00000000..6bf86ed3
--- /dev/null
+++ b/docs/src/templates/docs.js
@@ -0,0 +1,47 @@
+DocsController.$inject = ['$location', '$browser', '$window'];
+function DocsController($location, $browser, $window) {
+  this.pages = NG_PAGES;
+  window.$root = this.$root;
+  
+  this.getUrl = function(page){
+    return '#!' + page.name;
+  };
+
+  this.getCurrentPartial = function(){
+    return './' + this.getTitle() + '.html';
+  };
+  
+  this.getTitle = function(){
+    var hashPath = $location.hashPath || '!angular';
+    if (hashPath.match(/^!angular/)) {
+      this.partialTitle = hashPath.substring(1);
+    }
+    return this.partialTitle;
+  };
+  
+  this.getClass = function(page) {
+    var depth = page.name.split(/\./).length - 1,
+        cssClass = 'level-' + depth + (page.name == this.getTitle() ? ' selected' : '');
+
+    if (depth == 1 && page.type !== 'overview') cssClass += ' level-angular';
+
+    return cssClass;
+  };
+
+  this.afterPartialLoaded = function() {
+    SyntaxHighlighter.highlight();
+  };
+
+  this.getFeedbackUrl = function() {
+    return "mailto:angular@googlegroups.com?" +
+           "subject=" + escape("Feedback on " + $location.href) + "&" +
+           "body=" + escape("Hi there,\n\nI read " + $location.href + " and wanted to ask ....");
+  };
+  
+}
+
+angular.filter('short', function(name){
+  return (name||'').split(/\./).pop();
+});
+
+SyntaxHighlighter['defaults'].toolbar = false;
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
new file mode 100644
index 00000000..64b73bfc
--- /dev/null
+++ b/docs/src/templates/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html xmlns:ng="http://angularjs.org/"
+      xmlns:doc="http://docs.angularjs.org/"
+      ng:controller="DocsController">
+<head>
+  <title ng:bind-template="&lt;angular/&gt;: {{getTitle()}}">&lt;angular/&gt;</title>
+
+  <meta name="fragment" content="!">
+
+  <link rel="stylesheet" href="doc_widgets.css" type="text/css" />
+  <link rel="stylesheet" href="docs.css" type="text/css"/>
+  <link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" type="text/css"/>
+  <link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" type="text/css"/>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+  <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
+  <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
+  <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
+
+  <script src="../angular.min.js" ng:autobind></script>
+  <script src="docs.js"></script>
+  <script src="doc_widgets.js"></script>
+  <script src="docs-keywords.js"></script>
+</head>
+<body style="display:none;" ng:show="true">
+  <div id="header">
+    <h1>
+      <span class="main-title">{{getTitle()}}</span>
+      <a href="#"><span class="angular">&lt;angular/&gt;</span> Docs</a>
+    </h1>
+  </div>
+  <div id="sidebar">
+    <input type="text" name="search" id="search-box" placeholder="search the docs"/>
+    <ul id="api-list">
+      <li ng:repeat="page in pages.$filter(search)" ng:class="getClass(page)">
+        <a href="{{getUrl(page)}}" ng:click="">{{page.name | short}}</a>
+      </li>
+    </ul>
+  </div>
+  <div id="main">
+    <a id="feedback" ng:href="{{getFeedbackUrl()}}">Report an Issue or Ask a Question</a>
+    <ng:include src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include>
+  </div>
+</body>
+</html>
author	Misko Hevery	2010-12-23 00:44:27 +0100
committer	Misko Hevery	2011-01-10 11:50:11 -0800
commit	4f22d6866c052fb5b770ce4f377cecacacd9e6d8 (patch)
tree	6bdb1c5eb70cfd7e6bcf143c121c53025a0489a4 /docs/src/templates
parent	aab3df7aeaf79908e8b6212288b283adb42b1ce6 (diff)
download	angular.js-4f22d6866c052fb5b770ce4f377cecacacd9e6d8.tar.bz2