webapidoc 0.0.6 → 0.0.7

data/lib/generators/webapidoc/templates/index.md.erb

@@ -1,4 +1,4 @@
-<%= @data[:title] %> Documentation
+<%= @data["title"] %> Documentation
 ====================
 
 Welcome

data/lib/generators/webapidoc/templates/sample.md.erb

@@ -1,4 +1,4 @@
-<%= @data[:title] %> Sample Page
+<%= @data["title"] %> Sample Page
 ====================
 
 Paragraphs
@@ -61,3 +61,12 @@ This is just some code.
         ]
 
 This is some `code` within a paragraph. More to come!
+This is just some more code.
+
+        [
+          {
+            "title": "apples",
+            "count": [12000, 20000],
+            "description": {"text": "...", "sensitive": false}
+          }
+        ]

data/lib/generators/webapidoc/templates/webapidoc.yml

@@ -1,5 +1,6 @@
 title: "WebAPIDoc"
 description: "Static HTML Documentation for JSON APIs"
+url: "http://localhost:3000"
 
 chapters:
   -

data/lib/webapidoc/base.rb

@@ -8,9 +8,7 @@ module Webapidoc
     raise "both paths are invalid: #{t}"
   end
 
-  def self.build(data=nil)
-
-    @data = data
+  def self.build
 
     publicDir = "public/documentation"
     docDir = "app/documentation"
@@ -18,9 +16,10 @@ module Webapidoc
 
     # get config hash
     configFile = 'config/webapidoc.yml'
-    config = YAML.load_file(configFile).freeze
+    @data = YAML.load_file(configFile).freeze
 
-    puts "building webapidoc for " + config["title"]
+    puts "building webapidoc for " + @data["title"]
+    puts "api url: " + @data["url"]
 
     # clean up
     FileUtils.remove_dir publicDir if File.exists?(publicDir)
@@ -33,7 +32,7 @@ module Webapidoc
     # copy jquery
     FileUtils.copy(libDir + "/js/jquery.js", publicDir + "/js/jquery.js")
 
-    # copy highlighter
+    # copy highlight
     FileUtils.copy(libDir + "/js/highlight.js", publicDir + "/js/highlight.js")
 
     # compile webapidoc style
@@ -45,7 +44,7 @@ module Webapidoc
     @chapters = []
 
     # get chapter info
-    config["chapters"].each_with_index do | chapter, idx|
+    @data["chapters"].each_with_index do | chapter, idx|
 
       inFile = "#{docDir}/#{chapter["file"]}.md"
       outFile = chapter["file"] + ".html"

data/lib/webapidoc/css/webapidoc.scss

@@ -18,7 +18,7 @@
 
 */
 
-$color-text: #333;
+$color-text: #666;
 $color: #148773;
 $color-highlight: #17BCA5;
 $color-code: #f0f0f0;
@@ -67,7 +67,7 @@ table {
 h1, h2, h3, h4, h5, h6 {
   font-family: inherit;
   line-height: normal;
-  font-weight: 400;
+  font-weight: 300;
   color: inherit;
   background-color: transparent;
   border-bottom: none;
@@ -132,7 +132,7 @@ pre {
 body {
 
   font-family: "Lato", Calibri, Arial, sans-serif;
-  font-weight: 400;
+  font-weight: 300;
   color: $color-text;
 
   background: #f9f9f9;
@@ -360,7 +360,7 @@ p {
   font-size: 16px;
   line-height: 1.4;
   text-align: justify;
-  font-weight: 400;
+  font-weight: 300;
   margin-top: 12px;
 }
 
@@ -478,16 +478,50 @@ p.version {
   margin-top: 24px;
 }
 
-/* #Code Styles, from tomorrow style -> http://jmblog.github.com/color-themes-for-google-code-highlightjs
+/* #Code Styles
 ================================================== */
 
-pre {
+/* inline code */
+code {
+  font-family: monospace;
+  background: $color-code;
+  color: #718c00;
+  border-radius: 4px;
+  text-shadow: none;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 2px;
+  padding-left:4px;
+  padding-right:4px;
+}
+
+/* editor */
+.ace_editor {
+  width: 100%;
+  display: block;
+  position: relative;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  border:  1px solid #ddd;
+}
+
+/* #Response Code Styles, from tomorrow style -> http://jmblog.github.com/color-themes-for-google-code-highlightjs
+================================================== */
+
+pre.response {
+  padding: 10px;
+
+  border:  1px solid #ddd;
+  background: #F0F0F0;
+  border-radius: 4px;
+  box-shadow: 1px 1px 10px white;
+
   .comment, .title {
     color: #8e908c;
   }
 }
 
-pre {
+pre.response {
   .variable, .attribute, .tag, .regexp, .ruby .constant {
     color: #c82829;
   }
@@ -506,29 +540,29 @@ pre {
   }
 }
 
-pre {
+pre.response {
   .number, .preprocessor, .built_in, .literal, .params, .constant {
     color: #f5871f;
   }
 }
 
-pre {
+pre.response {
   .class, .ruby .class .title, .css .rules .attribute {
     color: #eab700;
   }
 }
 
-pre {
+pre.response {
   .string, .value, .inheritance, .header, .ruby .symbol, .xml .cdata {
     color: #718c00;
   }
 }
 
-pre .css .hexcolor {
+pre.response .css .hexcolor {
   color: #3e999f;
 }
 
-pre {
+pre.response {
   .function {
     color: #4271ae;
   }
@@ -547,21 +581,7 @@ pre {
   }
 }
 
-code {
-  font-family: monospace;
-  background: $color-code;
-  color: #718c00;
-  border-radius: 4px;
-  box-shadow: 1px 1px 10px #fff;
-  text-shadow: none;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 2px;
-  padding-left:4px;
-  padding-right:4px;
-}
-
-pre {
+pre.response {
   margin-top: 12px;
 
   .keyword, .javascript .function {
@@ -570,6 +590,15 @@ pre {
   code {
     display: block;
     padding: 12px;
+    background: $color-code;
+    color: #718c00;
+    border-radius: 4px;
+    text-shadow: none;
+    line-height: 20px;
+
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace;
+    font-size: 12px;
+
   }
   .coffeescript .javascript, .javascript .xml, .tex .formula {
     opacity: 0.5;
@@ -581,6 +610,8 @@ pre {
   }
 }
 
+
+
 /* #Print Styles
 ================================================== */
 

data/lib/webapidoc/template.html.erb

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Webapidoc for <%= @data[:title] %></title>
+  <title>Webapidoc for <%= @data["title"] %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="in-depth WebAPI documentation for <%= @data[:title] %>">
-  <meta name="author" content="the nice guys from <%= @data[:title] %>">
+  <meta name="description" content="in-depth WebAPI documentation for <%= @data["title"] %>">
+  <meta name="author" content="the nice guys from <%= @data["title"] %>">
 
   <!-- SVG version of grayscale filter: desaturate.svg -->
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none;">
@@ -32,12 +32,8 @@
   <script src="/documentation/js/jquery.js"></script>
   <script src="/documentation/js/highlight.js"></script>
 
-  <!-- enable script highlighting -->
-  <script>
-    $(document).ready(function() {
-      hljs.initHighlightingOnLoad();
-    });
-  </script>
+  <!-- Ace Code Editor -->
+  <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 
   <!-- Fav and touch icons -->
   <link rel="shortcut icon" href="favicon.ico">
@@ -78,10 +74,62 @@
   <!--/row-->
 
   <footer>
-    <p>&copy; <%= @data[:title] %> 2012</p>
+    <p>&copy; <%= @data["title"] %> 2012</p>
   </footer>
 
 </div>
 
+  <!-- enable script highlighting -->
+  <script>
+    $(document).ready(function() {
+
+      $("#content > pre > code").each( function (idx) {
+        var $editor = $(this);
+        var id = "editor" + idx;
+        var height = $editor.height();
+
+        $editor.attr("id", id)
+
+        /* build editor */
+        var editor = ace.edit(id);
+        editor.setTheme("ace/theme/tomorrow");
+        editor.getSession().setMode("ace/mode/javascript");
+
+        $editor.css("height", ((height+8) + "px"));
+
+        /* build response field */
+        var rid = "response" + idx;
+        var $response = $('<pre><code>change code to see response...</code></pre>').attr("id", rid).addClass("response");
+
+        $editor.after($response);
+
+        /* bind editor change function for api requests */
+        editor.on("change", function(e) {
+          console.log(e);
+
+          /* validate json */
+          var query = "";
+
+          try {
+            query = JSON.stringify($.parseJSON(editor.getValue()));
+          }
+          catch (err) {
+            return;
+          }
+          var url = "<%= @data['url'] %>";
+          $.getJSON(url + '&source=' + encodeURIComponent(query)).complete(function (data) {
+
+
+            $response.html("<code>" + data.responseText + "</code>");
+            hljs.highlightBlock($response[0]);
+          });
+        });
+
+      })
+
+    });
+
+  </script>
+
 </body>
 </html>

data/lib/webapidoc/version.rb

@@ -1,4 +1,4 @@
 module Webapidoc
   NAME = "webapidoc"
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: webapidoc
 version: !ruby/object:Gem::Version 
-  hash: 19
+  hash: 17
   prerelease: 
   segments: 
   - 0
   - 0
-  - 6
-  version: 0.0.6
+  - 7
+  version: 0.0.7
 platform: ruby
 authors: 
 - Adrian Fuhrmann