danielgtaylor · jk2K · Aug 24, 2017 · Aug 25, 2017 · Aug 28, 2017 · Aug 28, 2017
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 npm-debug.log
 coverage
 cache
+.idea/
diff --git a/package.json b/package.json
@@ -34,22 +34,26 @@
   },
   "homepage": "https://github.com/danielgtaylor/aglio/tree/olio-theme",
   "dependencies": {
+    "attributes-kit": "https://github.com/jk2K/attributes-kit.git#publish-patch",
     "coffee-script": "^1.8.0",
-    "highlight.js": "^8.4.0",
-    "jade": "^1.8.2",
-    "less": "^2.1.2",
-    "markdown-it": "^4.3.0",
-    "markdown-it-anchor": "^2.1.0",
+    "highlight.js": "^9.12.0",
+    "less": "^2.7.2",
+    "markdown-it": "^8.3.2",
+    "markdown-it-anchor": "^4.0.0",
     "markdown-it-checkbox": "^1.1.0",
-    "markdown-it-container": "^1.0.0",
-    "markdown-it-emoji": "^1.0.0",
-    "moment": "^2.8.4",
-    "stylus": "^0.51.1"
+    "markdown-it-container": "^2.0.0",
+    "markdown-it-emoji": "^1.4.0",
+    "moment": "^2.18.1",
+    "pug": "^2.0.0-rc.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "stylus": "^0.54.5"
   },
   "devDependencies": {
     "chai": "^3.0.0",
     "coffeelint": "^1.7.1",
     "coveralls": "^2.11.2",
+    "drafter.js": "^2.6.7",
     "istanbul": "^0.3.6",
     "mocha": "^2.0.1",
     "rimraf": "^2.4.1"

diff --git a/src/expand-data-structures.coffee b/src/expand-data-structures.coffee
@@ -0,0 +1,38 @@
+# When named type inheriting from another data structure,
+# all of the parents properties will be inherited
+#
+# get inherited properties for refracted MSON input
+
+module.exports = expandDS = (root, dataStructures) ->
+  # First, we do a deep copy of the clonedRoot element
+  clonedRoot = JSON.parse(JSON.stringify(root))
+
+  switch clonedRoot.element
+    when 'boolean', 'string', 'number', 'enum'
+      break
+    when 'member'
+      valueOfContent = clonedRoot['content']['value']
+      newValue = expandDS(valueOfContent, dataStructures)
+      clonedRoot.content['value'] = newValue
+    when 'object'
+      for item, index in clonedRoot.content
+        clonedRoot.content[index] = expandDS(item, dataStructures)
+    when 'array'
+      if clonedRoot.content
+        for valueOfArray, keyOfArray in clonedRoot.content
+          newValue = expandDS(valueOfArray, dataStructures)
+          # only show one element in array
+          clonedRoot.content = []
+          clonedRoot.content[keyOfArray] = newValue
+          break
+    else
+      ref = dataStructures[clonedRoot.element]
+      if ref
+        newRoot = expandDS(ref, dataStructures)
+        if clonedRoot.content
+          for valueOfArray in clonedRoot.content
+            newValue = expandDS(valueOfArray, dataStructures)
+            newRoot.content.push newValue
+        clonedRoot = newRoot
+
+  return clonedRoot
diff --git a/src/main.coffee b/src/main.coffee
@@ -1,15 +1,19 @@
 crypto = require 'crypto'
 fs = require 'fs'
 hljs = require 'highlight.js'
-jade = require 'jade'
+pug = require 'pug'
 less = require 'less'
 markdownIt = require 'markdown-it'
 moment = require 'moment'
 path = require 'path'
-querystring = require 'querystring'
+React = require 'react'
+ReactDomServer = require 'react-dom/server'
+AttributesKit = require 'attributes-kit/dist/attributes-kit'
+queryString = require 'querystring'
 
 renderExample = require './example'
 renderSchema = require './schema'
+expandDataStructures = require './expand-data-structures'
 
 # The root directory of this project
 ROOT = path.dirname __dirname
@@ -184,14 +188,14 @@ getCss = (variables, styles, verbose, done) ->
 
 compileTemplate = (filename, options) ->
   compiled = """
-    var jade = require('jade/runtime');
-    #{jade.compileFileClient filename, options}
-    module.exports = compiledFunc;
+    var pug = require('pug');
+    #{pug.compileFileClient filename, options}
+    module.exports = #{options.name};
   """
 
 getTemplate = (name, verbose, done) ->
   # Check if this is a built-in template name
-  builtin = path.join(ROOT, 'templates', "#{name}.jade")
+  builtin = path.join(ROOT, 'templates', "#{name}.pug")
   if not fs.existsSync(name) and fs.existsSync(builtin)
     name = builtin
 
@@ -231,7 +235,7 @@ getTemplate = (name, verbose, done) ->
     # because we are compiling to a client-side template, then adding some
     # module-specific code to make it work here. This allows us to save time
     # in the future by just loading the generated javascript function.
-    benchmark.start 'jade-compile'
+    benchmark.start 'pug-compile'
     compileOptions =
       filename: name
       name: 'compiledFunc'
@@ -259,7 +263,7 @@ getTemplate = (name, verbose, done) ->
     catch writeErr
       return done(errMsg 'Error writing cached template file', writeErr)
 
-    benchmark.end 'jade-compile'
+    benchmark.end 'pug-compile'
 
     cache[key] = require(compiledPath)
     done null, cache[key]
@@ -273,7 +277,7 @@ modifyUriTemplate = (templateUri, parameters, colorize) ->
   parameterValidator = (b) ->
     # Compare the names, removing the special `*` operator
     parameterNames.indexOf(
-      querystring.unescape b.replace(/^\*|\*$/, '')) isnt -1
+      queryString.unescape b.replace(/^\*|\*$/, '')) isnt -1
   parameterNames = (param.name for param in parameters)
   parameterBlocks = []
   lastIndex = index = 0
@@ -303,7 +307,7 @@ modifyUriTemplate = (templateUri, parameters, colorize) ->
         if not colorize then name else
           # TODO: handle errors here?
           name = name.replace(/^\*|\*$/, '')
-          param = parameters[parameterNames.indexOf(querystring.unescape name)]
+          param = parameters[parameterNames.indexOf(queryString.unescape name)]
           if v.querySet or v.formSet
             "<span class=\"hljs-attribute\">#{name}=</span>" +
               "<span class=\"hljs-literal\">#{param.example || ''}</span>"
@@ -412,6 +416,23 @@ decorate = (api, md, slugCache, verbose) ->
               if name is 'requests' and not action.hasRequest
                 action.hasRequest = true
 
+              if item.content
+                for dataStructure in item.content
+                  # generate attribute html with Attributes Kit
+                  if dataStructure.element isnt 'dataStructure' then continue
+
+                  tempDS = dataStructure.content[0]
+                  tempDS = expandDataStructures(tempDS, dataStructures)
+                  tempDS["meta"] = {
+                    "id": "ATTRIBUTES"
+                  }
+                  element = React.createElement AttributesKit.Attributes, {
+                    dataStructures: [tempDS],
+                    element: tempDS
+                  }
+                  html = ReactDomServer.renderToStaticMarkup element
+                  item.attributes = html
+
               # If there is no schema, but there are MSON attributes, then try
               # to generate the schema. This will fail sometimes.
               # TODO: Remove me when Drafter is released.
@@ -496,10 +517,11 @@ exports.render = (input, options, done) ->
   options.themeTemplate ?= 'default'
   options.themeCondenseNav ?= true
   options.themeFullWidth ?= false
+  options.themeEmoji ?= true
 
   # Transform built-in layout names to paths
   if options.themeTemplate is 'default'
-    options.themeTemplate = path.join ROOT, 'templates', 'index.jade'
+    options.themeTemplate = path.join ROOT, 'templates', 'index.pug'
 
   # Setup markdown with code highlighting and smartypants. This also enables
   # automatically inserting permalinks for headers.
@@ -547,7 +569,7 @@ exports.render = (input, options, done) ->
       highlight: highlight
       markdown: (content) -> md.render content
       slug: slug.bind(slug, slugCache)
-      urldec: (value) -> querystring.unescape(value)
+      urldec: (value) -> queryString.unescape(value)
 
     for key, value of options.locals or {}
       locals[key] = value

diff --git a/styles/variables-default.less b/styles/variables-default.less
@@ -146,3 +146,46 @@
 .right {
   .hljs-comment{color:#969896}.css .hljs-class,.css .hljs-id,.css .hljs-pseudo,.hljs-attribute,.hljs-regexp,.hljs-tag,.hljs-variable,.html .hljs-doctype,.ruby .hljs-constant,.xml .hljs-doctype,.xml .hljs-pi,.xml .hljs-tag .hljs-title{color:#c66}.hljs-built_in,.hljs-constant,.hljs-literal,.hljs-number,.hljs-params,.hljs-pragma,.hljs-preprocessor{color:#de935f}.css .hljs-rule .hljs-attribute,.ruby .hljs-class .hljs-title{color:#f0c674}.hljs-header,.hljs-inheritance,.hljs-name,.hljs-string,.hljs-value,.ruby .hljs-symbol,.xml .hljs-cdata{color:#b5bd68}.css .hljs-hexcolor,.hljs-title{color:#8abeb7}.coffeescript .hljs-title,.hljs-function,.javascript .hljs-title,.perl .hljs-sub,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword{color:#81a2be}.hljs-keyword,.javascript .hljs-function{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.5em;-webkit-text-size-adjust:none}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .css,.xml .hljs-cdata,.xml .javascript,.xml .vbscript{opacity:.5}
 }
+
+/* attributes */
+.attributesKitContainer {
+  overflow-x: scroll;
+  background: white;
+}
+
+
+/* show or hide JSON Schema */
+.rawExampleHeaderLabelJsonSchema {
+  margin: 0 -12px;
+  padding: 12px;
+}
+
+.jsonSchemaContent {
+  display: none;
+}
+
+.showJSONSchemaButton {
+  float: right;
+}
+
+.showJSONSchemaButton span {
+  color: #428bca;
+  cursor: pointer;
+}
+
+.showJSONSchemaButton.show .close {
+  display: inline;
+}
+
+.showJSONSchemaButton.show .open {
+  display: none;
+}
+
+.showJSONSchemaButton .close {
+  display: none;
+}
+
+.showJSONSchemaButton .open {
+  display: inline;
+}
+
diff --git a/templates/index.jade → templates/index.pug b/templates/index.jade → templates/index.pug
@@ -1,6 +1,6 @@
 doctype
 
-include mixins.jade
+include mixins
 
 html
     head

diff --git a/templates/mixins.jade → templates/mixins.pug b/templates/mixins.jade → templates/mixins.pug
@@ -126,15 +126,22 @@ mixin RequestResponseBody(request, collapse, showBlank)
                         if index < request.headers.length - 1
                           br
                 div(style="height: 1px;")
+                div(class='attributesKitContainer') !{request.attributes}
+                div(style="height: 20px;")
             if request.body
                 h5 Body
                 pre: code
                     != self.highlight(request.body, null, ['json', 'yaml', 'xml', 'javascript'])
                 div(style="height: 1px;")
             if request.schema
-                h5 Schema
-                pre: code
-                    != self.highlight(request.schema, null, ['json', 'yaml', 'xml'])
+                div(class='rawExampleHeaderLabelJsonSchema')
+                    span Schema
+                    div(class='showJSONSchemaButton')
+                        span(class='open') Show
+                        span(class='close') Hide
+                div(class='jsonSchemaContent')
+                    pre: code
+                        != self.highlight(request.schema, null, ['json', 'yaml', 'xml'])
                 div(style="height: 1px;")
             if !request.hasContent
                 .description.text-muted This response has no content.

diff --git a/templates/scripts.js b/templates/scripts.js
@@ -64,6 +64,33 @@ function toggleCollapseButton(event) {
     }
 }
 
+/**
+ * show or hide JSON Schema
+ * @param event
+ */
+function toggleShowJSONSchemaButton(event) {
+    var button = event.target.parentNode;
+    var jsonContent = button.parentNode.nextSibling;
+    var inner = jsonContent.parentNode;
+    var content = inner.parentNode;
+
+    if (button.className.indexOf('showJSONSchemaButton') === -1) {
+        // Clicked without hitting the right element?
+        return;
+    }
+
+    if (jsonContent.style.display && jsonContent.style.display !== 'none') {
+        // Currently showing, so let's hide it
+        button.className = 'showJSONSchemaButton';
+        jsonContent.style.display = 'none';
+    } else {
+        // Currently hidden, so let's show it
+        button.className = 'showJSONSchemaButton show';
+        jsonContent.style.display = 'block';
+        content.style.maxHeight = inner.offsetHeight + 12 + 'px';
+    }
+}
+
 function toggleTabButton(event) {
     var i, index;
     var button = event.target;
@@ -190,6 +217,12 @@ function init() {
         }
     }
 
+    // make showJSONSchema buttons clickable
+    var showJSONSchemaButtons = document.querySelectorAll('.showJSONSchemaButton');
+    for (i = 0; i < showJSONSchemaButtons.length; i++) {
+        showJSONSchemaButtons[i].onclick = toggleShowJSONSchemaButton;
+    }
+
     var responseCodes = document.querySelectorAll('.example-names');
     for (i = 0; i < responseCodes.length; i++) {
         var tabButtons = childrenByClass(responseCodes[i], 'tab-button');

diff --git a/templates/triple.jade → templates/triple.pug b/templates/triple.jade → templates/triple.pug
@@ -1,6 +1,6 @@
 doctype
 
-include mixins.jade
+include mixins.pug
 
 html
     head
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ node_modules @@
     npm-debug.log
     coverage
     cache
+    .idea/