json-schema-docs 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3049cd9fed945058bbd3d668f0cda02d75f50aa114ea0e93e7aa3ed17313011b
-  data.tar.gz: f247ed95de772c8461e7022dc12a1d922288cb9b85d4d259c2a904ccfb09bae3
+  metadata.gz: 70ce09af68c836c67047b91049579f0907fe9e4e8b935211482dd6163bb96bc2
+  data.tar.gz: a069ce9a8503d02bcf5d98f608ad734f335296b25a8528701b26a0eb4306a286
 SHA512:
-  metadata.gz: ce9a9ef62d0216c5f7fb110850c71d2b1f9da4738f12eb204fa588d22078ba046361907b0594fb9fc8ec919fb52b16060f8c6ffd163d17251ceeeb60228f1b25
-  data.tar.gz: 180f02533338faa832fe751eea09c7cde31ee9abcb81e4d19b384bb09d3dc2a29313cc1e882b17a97497f01640b738906890666766d1964a08ec04eae7b702cf
+  metadata.gz: f4ff3f550c966a17f8faf158564610b14132e044a3aafcc0c1614f4509a961ef77ad03e0967e6d8a73a3942c1ac23c97e89904ed473ec4799117510cff93e31c
+  data.tar.gz: 48e657b95352ef05360e07137fea1748deaa4cdcbe6d87bbb9c3f6f6c71f5c0523afd1d64ee85dfcfcbe313c5fb558e9478f6450f1c724879c22fa87e96a2075

data/README.md

@@ -39,7 +39,8 @@ There are several phases going on the single `JsonSchemaDocs.build` call:
 
 * The JSON schema file is read (if you passed `filename`) through `Prmd::Schema` (or simply consumed if you passed it through `schema`).
 * `JsonSchemaDocs::Parser` manipulates the schema into a slightly saner format.
-* `JsonSchemaDocs::Generator` takes that saner format and converts it into Markdown, via ERB templates.
+* `JsonSchemaDocs::Generator` takes that saner format and  begins the process of applying items to the HTML templates.
+* `JsonSchemaDocs::Renderer` technically runs as part of the generation phase. It passes the contents of each page and converts it into HTML.
 
 If you wanted to, you could break these calls up individually. For example:
 
@@ -47,7 +48,7 @@ If you wanted to, you could break these calls up individually. For example:
 options = {}
 options[:filename] = "#{File.dirname(__FILE__)}/../data/schema.json"
 
-options = JsonSchemaDocs::Configuration::JSON_SCHEMA_DOCS.merge(options)
+options = JsonSchemaDocs::Configuration::JSON_SCHEMA_DOCS_DEFAULTS.merge(options)
 
 response = File.read(options[:filename])
 
@@ -61,14 +62,47 @@ generator.generate
 
 ## Generating output
 
-By default, the generation process uses ERB to layout the content into Markdown.
+By default, the generation process uses ERB to layout the content. There are a bunch of default options provided for you, but feel free to override any of these. The *Configuration* section below has more information on what you can change.
+
+It also uses [html-pipeline](https://github.com/jch/html-pipeline) to perform the rendering by default. You can override this by providing a custom rendering class.You must implement two methods:
+
+* `initialize` - Takes two arguments, the parsed `schema` and the configuration `options`.
+* `render` Takes the contents of a template page. It also takes an optional kwargs, `meta`, for anything you want to include in your template. For example:
+
+``` ruby
+class CustomRenderer
+  def initialize(parsed_schema, options)
+    @parsed_schema = parsed_schema
+    @options = options
+  end
+
+  def render(contents, meta: {})
+    contents = contents.sub(/Repository/i, '<strong>Meow Woof!</strong>')
+    opts = meta.merge({ foo: "bar" })
+
+    @default_layout.result(OpenStruct.new(opts).instance_eval { binding })
+  end
+end
+
+options[:filename] = 'location/to/schema.json'
+options[:renderer] = CustomRenderer
+
+JsonSchemaDocs.build(options)
+```
+
+If your `render` method returns `nil`, the `Generator` will not attempt to write any HTML file.
 
 ### Helper methods
 
 In your ERB layouts, there are several helper methods you can use. The helper methods are:
 
-* `slugify(str)` - This slugifies the given string.
-* `include(filename, opts)` - This embeds a template from your `includes` folder, passing along the local options provided.
+* `slugify(str)`: This slugifies the given string.
+* `include(filename, opts)`: This embeds a template from your `includes` folder, passing along the local options provided.
+* `markdownify(string)`: This converts a string into HTML via CommonMarker.
+* `types`: Collections of the various types.
+* `schemata(name)`: The schemata defined by `name`.
+
+To call these methods within templates, you must use the dot notation, such as `<%= slugify.(text) %>`.
 
 ## Configuration
 
@@ -76,11 +110,16 @@ The following options are available:
 
 | Option | Description | Default |
 | :----- | :---------- | :------ |
-| `filename` | The location of your schema's IDL file. | `nil` |
-| `schema` | A string representing a schema IDL file. | `nil` |
+| `filename` | The location of your schema's JSON file. | `nil` |
+| `schema` | A string representing a schema JSON file. | `nil` |
+| `output_dir` | The location of the output HTML files. | `./output/` |
+| `use_default_styles` | Indicates if you want to use the default styles. | `true` |
+| `base_url` | Indicates the base URL to prepend for assets and links. | `""` |
 | `delete_output` | Deletes `output_dir` before generating content. | `false` |
-| `output_dir` | The location of the output Markdown files. | `./output/` |
-| `templates` | The templates to use when generating Markdown files. You may override any of the following keys: `endpoint`, `object`, `includes`. | The defaults are found in _lib/json-schema-docs/layouts/_.
+| `pipeline_config` | Defines two sub-keys, `pipeline` and `context`, which are used by `html-pipeline` when rendering your output. |  The defaults are found in _lib/json-schema-docs/configuration.rb/_ |
+| `renderer` | The rendering class to use. | `JsonSchemaDocs::Renderer`
+| `templates` | The templates to use when generating HTML. You may override any of the following keys: `default`, `links`, `resource`. | The defaults are found in _lib/json-schema-docs/layouts/_.
+| `landing_pages` | The landing page to use when generating HTML for each type. You may override any of the following keys: `index`. | The defaults are found in _lib/json-schema-docs/landing\_pages/_.
 | `prmd` | The options to pass into PRMD's parser. | The defaults are found in _lib/json-schema-docs/configuration.rb/_.
 
 ## Development

data/Rakefile

@@ -33,14 +33,7 @@ task sample: [:generate_sample] do
 
   puts 'Navigate to http://localhost:3000 to see the sample docs'
 
-  mime_types = WEBrick::HTTPUtils::DefaultMimeTypes
-  mime_types.store 'md', 'text/plain'
-
-  options = {
-    Port: 3000,
-    MimeTypes: mime_types
-  }
-  server = WEBrick::HTTPServer.new options
+  server = WEBrick::HTTPServer.new Port: 3000
   server.mount '/', WEBrick::HTTPServlet::FileHandler, 'output'
   trap('INT') { server.stop }
   server.start

data/json-schema-docs.gemspec

@@ -23,6 +23,17 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency 'prmd', '~> 0.13'
 
+  # rendering
+  spec.add_dependency 'commonmarker', '~> 0.16'
+  spec.add_dependency 'gemoji', '~> 3.0'
+  spec.add_dependency 'html-pipeline', '~> 2.9'
+  spec.add_dependency 'escape_utils',  '~> 1.2'
+  spec.add_dependency 'extended-markdown-filter', '~> 0.4'
+  spec.add_dependency 'neatjson', '~> 0.9'
+  spec.add_dependency 'page-toc-filter', '~> 0.2'
+  spec.add_dependency 'rouge', '~> 3.10'
+  spec.add_dependency 'sass', '~> 3.4'
+
   spec.add_development_dependency 'awesome_print'
   spec.add_development_dependency 'html-proofer', '~> 3.4'
   spec.add_development_dependency 'minitest', '~> 5.0'

data/lib/json-schema-docs.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 require 'json-schema-docs/helpers'
+require 'json-schema-docs/renderer'
 require 'json-schema-docs/configuration'
 require 'json-schema-docs/generator'
 require 'json-schema-docs/parser'

data/lib/json-schema-docs/configuration.rb

@@ -9,12 +9,35 @@ module JsonSchemaDocs
       # Generating
       delete_output: false,
       output_dir: './output/',
+      pipeline_config: {
+        pipeline:
+          %i(ExtendedMarkdownFilter
+           EmojiFilter
+           TableOfContentsFilter
+           SyntaxHighlightFilter),
+        context: {
+          gfm: false,
+          unsafe: true, # necessary for layout needs, given that it's all HTML templates
+          asset_root: 'https://a248.e.akamai.net/assets.github.com/images/icons'
+        }
+      },
+      renderer: JsonSchemaDocs::Renderer,
+      use_default_styles: true,
+      base_url: '',
 
       templates: {
-        endpoint: "#{File.dirname(__FILE__)}/layouts/endpoint.md.erb",
-        object: "#{File.dirname(__FILE__)}/layouts/object.md.erb",
+        default: "#{File.dirname(__FILE__)}/layouts/default.html.erb",
 
         includes: "#{File.dirname(__FILE__)}/layouts/includes",
+
+        links: "#{File.dirname(__FILE__)}/layouts/links.html.erb",
+        resource: "#{File.dirname(__FILE__)}/layouts/resource.html.erb",
+      },
+
+      landing_pages: {
+        index: "#{File.dirname(__FILE__)}/landing_pages/index.md",
+
+        variables: {} # only used for ERB landing pages
       },
 
       prmd: {

data/lib/json-schema-docs/generator.rb

@@ -7,50 +7,92 @@ module JsonSchemaDocs
 
     attr_accessor :parsed_schema
 
+    DYNAMIC_PAGES = %i(links resource)
+    STATIC_PAGES = %i(index)
+
     def initialize(parsed_schema, options)
       @parsed_schema = parsed_schema
       @options = options
 
-      %i(endpoint object).each do |sym|
+      @renderer = @options[:renderer].new(@parsed_schema, @options)
+
+      DYNAMIC_PAGES.each do |sym|
         if !File.exist?(@options[:templates][sym])
           raise IOError, "`#{sym}` template #{@options[:templates][sym]} was not found"
         end
         instance_variable_set("@json_schema_#{sym}_template", ERB.new(File.read(@options[:templates][sym]), nil, '-'))
       end
+
+      STATIC_PAGES.each do |sym|
+        if @options[:landing_pages][sym].nil?
+          instance_variable_set("@#{sym}_landing_page", nil)
+        elsif !File.exist?(@options[:landing_pages][sym])
+          raise IOError, "`#{sym}` landing page #{@options[:landing_pages][sym]} was not found"
+        end
+
+        landing_page_contents = File.read(@options[:landing_pages][sym])
+
+        instance_variable_set("@json_schema_#{sym}_landing_page", landing_page_contents)
+      end
     end
 
     def generate
       FileUtils.rm_rf(@options[:output_dir]) if @options[:delete_output]
 
       @parsed_schema.each_pair do |resource, schemata|
-        %i(endpoint object).each do |type|
-          contents = render(type, resource, schemata)
-          write_file(type, resource, contents)
+        DYNAMIC_PAGES.each do |type|
+          layout = instance_variable_get("@json_schema_#{type}_template")
+          opts = @options.merge(helper_methods)
 
-          contents = render(type, resource, schemata)
+          opts[:schemata_resource] = resource
+          opts[:schemata] = schemata
+
+          contents = layout.result(OpenStruct.new(opts).instance_eval { binding })
           write_file(type, resource, contents)
         end
       end
-    end
 
-    private
+      STATIC_PAGES.each do |name|
+        landing_page = instance_variable_get("@json_schema_#{name}_landing_page")
+
+        unless landing_page.nil?
+          write_file(:landing_page, name.to_s, landing_page, trim: false)
+        end
+      end
 
-    def render(type, resource, schemata)
-      layout = instance_variable_get("@json_schema_#{type}_template")
-      opts = @options.merge(helper_methods)
+      if @options[:use_default_styles]
+        assets_dir = File.join(File.dirname(__FILE__), 'layouts', 'assets')
+        FileUtils.mkdir_p(File.join(@options[:output_dir], 'assets'))
+
+        sass = File.join(assets_dir, 'css', 'screen.scss')
+        system `sass --sourcemap=none #{sass}:#{@options[:output_dir]}/assets/style.css`
+      end
 
-      opts[:schemata_resource] = resource
-      opts[:schemata] = schemata
-      layout.result(OpenStruct.new(opts).instance_eval { binding })
+      true
     end
 
+    private
+
     def write_file(type, name, contents, trim: true)
-      if type == :object
-        path = File.join(@options[:output_dir], 'objects', name.downcase)
-        FileUtils.mkdir_p(path)
-      elsif type == :endpoint
-        path = File.join(@options[:output_dir], 'objects', name.downcase, 'endpoints')
-        FileUtils.mkdir_p(path)
+      if type == :landing_page
+        if name == 'index'
+          path = @options[:output_dir]
+        else
+          path = File.join(@options[:output_dir], name)
+          FileUtils.mkdir_p(path)
+        end
+      elsif type == :resource
+        path = File.join(@options[:output_dir], 'resources', name.downcase)
+      elsif type == :links
+        path = File.join(@options[:output_dir], 'resources', name.downcase, 'links')
+      end
+
+      FileUtils.mkdir_p(path)
+
+      meta = { title: name, name: name }
+      if has_yaml?(contents)
+        # Split data
+        meta, contents = split_into_metadata_and_contents(contents)
       end
 
       if trim
@@ -59,8 +101,38 @@ module JsonSchemaDocs
         contents = contents.gsub(/^\s{4}/m, '  ')
       end
 
-      filename = File.join(path, 'index.md')
-      File.write(filename, contents) unless contents.nil?
+      filename = File.join(path, 'index.html')
+      output = @renderer.render(contents, meta: meta)
+      File.write(filename, output) unless output.nil?
+    end
+
+    def split_into_metadata_and_contents(contents, parse: true)
+      opts = {}
+      pieces = yaml_split(contents)
+      if pieces.size < 4
+        raise RuntimeError.new(
+          "The file '#{content_filename}' appears to start with a metadata section (three or five dashes at the top) but it does not seem to be in the correct format.",
+        )
+      end
+      # Parse
+      begin
+        if parse
+          meta = YAML.load(pieces[2]) || {}
+        else
+          meta = pieces[2]
+        end
+      rescue Exception => e # rubocop:disable Lint/RescueException
+        raise "Could not parse YAML for #{name}: #{e.message}"
+      end
+      [meta, pieces[4]]
+    end
+
+    def has_yaml?(contents)
+      contents =~ /\A-{3,5}\s*$/
+    end
+
+    def yaml_split(contents)
+      contents.split(/^(-{5}|-{3})[ \t]*\r?\n?/, 3)
     end
   end
 end

data/lib/json-schema-docs/helpers.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require 'commonmarker'
+
 module JsonSchemaDocs
   module Helpers
     SLUGIFY_PRETTY_REGEXP = Regexp.new("[^[:alnum:]._~!$&'()+,;=@]+").freeze
@@ -14,10 +16,24 @@ module JsonSchemaDocs
 
     def include(filename, opts = {})
       template = fetch_include(filename)
-      opts = @options.merge(opts)
+      opts = { base_url: @options[:base_url] }.merge(opts)
       template.result(OpenStruct.new(opts.merge(helper_methods)).instance_eval { binding })
     end
 
+    def markdownify(string)
+      return '' if string.nil?
+      type = @options[:pipeline_config][:context][:unsafe] ? :UNSAFE : :DEFAULT
+      ::CommonMarker.render_html(string, type).strip
+    end
+
+    def types
+      @parsed_schema.keys
+    end
+
+    def schemata(name)
+      @parsed_schema[name]
+    end
+
     private
 
     def fetch_include(filename)

data/lib/json-schema-docs/landing_pages/index.md

@@ -0,0 +1,7 @@
+---
+title: API Reference documentation
+---
+
+# API Reference documentation
+
+These docs were generated by [json-schema-docs](https://github.com/gjtorikian/json-schema-docs).

data/lib/json-schema-docs/layouts/assets/_sass/_content.scss

@@ -0,0 +1,518 @@
+#content {
+  padding: 20px 30px;
+  margin: 0px auto;
+  -webkit-text-size-adjust: 100%;
+  em {
+    font-style: italic;
+  }
+  strong {
+    font-family: "ProximaNova-Bold";
+  }
+  h1 {
+    margin: 15px 0;
+    line-height: 1.4em;
+    font-size: 2em;
+    margin-top: 0;
+    margin-bottom: 30px;
+  }
+  h2 {
+    margin: 15px 0;
+    line-height: 1.4em;
+    font-size: 1.5em;
+    margin-top: 30px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+    position: relative;
+    .anchor {
+      opacity: 0;
+      position: absolute;
+      font-size: 16px;
+      top: 2px;
+      left: -21px;
+    }
+    &:hover {
+      .anchor {
+        opacity: 1;
+      }
+    }
+  }
+  h3 {
+    margin: 15px 0;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    margin-top: 30px;
+    position: relative;
+    .anchor {
+      opacity: 0;
+      position: absolute;
+      font-size: 16px;
+      top: 2px;
+      left: -21px;
+    }
+    &:hover {
+      .anchor {
+        opacity: 1;
+      }
+    }
+  }
+  h4 {
+    margin: 15px 0;
+    line-height: 1.4em;
+  }
+  h5 {
+    margin: 15px 0;
+    line-height: 1.4em;
+  }
+  h6 {
+    margin: 15px 0;
+    line-height: 1.4em;
+  }
+  p {
+    margin: 15px 0;
+    line-height: 1.4em;
+  }
+  ul {
+    margin: 15px 0;
+    line-height: 1.4em;
+    padding-left: 1.5em;
+    list-style-type: disc;
+    li {
+      margin-bottom: 5px;
+    }
+  }
+  ol {
+    margin: 15px 0;
+    line-height: 1.4em;
+    padding-left: 1.5em;
+    list-style-type: decimal;
+    li {
+      margin-bottom: 5px;
+    }
+  }
+  figure {
+    margin: 15px 0;
+    line-height: 1.4em;
+  }
+  a {
+    color: #de4f4f;
+  }
+  img {
+    max-width: 100%;
+  }
+  code {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: 0.8em;
+    line-height: 1.6em;
+    padding: 1px 4px;
+    background-color: #eee;
+    margin: 0 2px;
+  }
+  blockquote {
+    padding-left: 1.3em;
+    border-left: #eee solid 0.2em;
+    font-style: italic;
+  }
+  blockquote.warning {
+    border-color: #f00;
+    color: #f00;
+  }
+  dl {
+    margin-left: 1.5em;
+    dt {
+      .name {
+        font-family: monospace;
+      }
+      .type {
+        margin-left: 0.5em;
+      }
+    }
+    dd {
+      margin-left: 1.5em;
+    }
+  }
+  .edit-discuss-links {
+    margin-top: -25px;
+    margin-bottom: 40px;
+  }
+  table {
+    margin-top: 10px;
+    th {
+      text-align: left;
+      padding: 0 25px 0 25px;
+    }
+    thead th:first-child {
+      padding: 0;
+    }
+    td p {
+      padding: 0 25px 0 25px;
+    }
+  }
+  pre {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    line-height: 1.6em;
+    margin: 20px 0;
+    overflow-x: auto;
+    position: relative;
+    padding: 20px 30px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      padding: 0;
+      margin: 0;
+    }
+    tr {
+      width: 100%;
+      border-collapse: collapse;
+      padding: 0;
+      margin: 0;
+    }
+    td {
+      width: 100%;
+      border-collapse: collapse;
+      padding: 0;
+      margin: 0;
+    }
+    code {
+      background-color: #272822;
+      padding: 0;
+      margin: 0;
+    }
+    .gutter {
+      user-select: none;
+      width: 1.5em;
+      padding-right: 30px;
+    }
+  }
+  .highlight.html {
+    .code {
+      &:after {
+        font-family: "ProximaNova-Semibold";
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #ccc;
+        text-align: right;
+        font-size: 0.75em;
+        padding: 5px 10px 0;
+        letter-spacing: 1.5px;
+        line-height: 15px;
+        height: 15px;
+        font-weight: 600;
+      }
+    }
+  }
+  .highlight.js {
+    .code {
+      &:after {
+        font-family: "ProximaNova-Semibold";
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #ccc;
+        text-align: right;
+        font-size: 0.75em;
+        padding: 5px 10px 0;
+        letter-spacing: 1.5px;
+        line-height: 15px;
+        height: 15px;
+        font-weight: 600;
+      }
+    }
+  }
+  .highlight.bash {
+    .code {
+      &:after {
+        font-family: "ProximaNova-Semibold";
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #ccc;
+        text-align: right;
+        font-size: 0.75em;
+        padding: 5px 10px 0;
+        letter-spacing: 1.5px;
+        line-height: 15px;
+        height: 15px;
+        font-weight: 600;
+      }
+    }
+  }
+  .highlight.css {
+    .code {
+      &:after {
+        font-family: "ProximaNova-Semibold";
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #ccc;
+        text-align: right;
+        font-size: 0.75em;
+        padding: 5px 10px 0;
+        letter-spacing: 1.5px;
+        line-height: 15px;
+        height: 15px;
+        font-weight: 600;
+      }
+    }
+  }
+  .highlight.jsx {
+    .code {
+      &:after {
+        font-family: "ProximaNova-Semibold";
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #ccc;
+        text-align: right;
+        font-size: 0.75em;
+        padding: 5px 10px 0;
+        letter-spacing: 1.5px;
+        line-height: 15px;
+        height: 15px;
+        font-weight: 600;
+      }
+    }
+  }
+  .highlight.html.html {
+    .code {
+      &:after {
+        content: "HTML";
+      }
+    }
+  }
+  .highlight.js.html {
+    .code {
+      &:after {
+        content: "HTML";
+      }
+    }
+  }
+  .highlight.bash.html {
+    .code {
+      &:after {
+        content: "HTML";
+      }
+    }
+  }
+  .highlight.css.html {
+    .code {
+      &:after {
+        content: "HTML";
+      }
+    }
+  }
+  .highlight.jsx.html {
+    .code {
+      &:after {
+        content: "HTML";
+      }
+    }
+  }
+  .highlight.html.js {
+    .code {
+      &:after {
+        content: "JS";
+      }
+    }
+  }
+  .highlight.js.js {
+    .code {
+      &:after {
+        content: "JS";
+      }
+    }
+  }
+  .highlight.bash.js {
+    .code {
+      &:after {
+        content: "JS";
+      }
+    }
+  }
+  .highlight.css.js {
+    .code {
+      &:after {
+        content: "JS";
+      }
+    }
+  }
+  .highlight.jsx.js {
+    .code {
+      &:after {
+        content: "JS";
+      }
+    }
+  }
+  .highlight.html.bash {
+    .code {
+      &:after {
+        content: "Shell";
+      }
+    }
+  }
+  .highlight.js.bash {
+    .code {
+      &:after {
+        content: "Shell";
+      }
+    }
+  }
+  .highlight.bash.bash {
+    .code {
+      &:after {
+        content: "Shell";
+      }
+    }
+  }
+  .highlight.css.bash {
+    .code {
+      &:after {
+        content: "Shell";
+      }
+    }
+  }
+  .highlight.jsx.bash {
+    .code {
+      &:after {
+        content: "Shell";
+      }
+    }
+  }
+  .highlight.html.css {
+    .code {
+      &:after {
+        content: "CSS";
+      }
+    }
+  }
+  .highlight.js.css {
+    .code {
+      &:after {
+        content: "CSS";
+      }
+    }
+  }
+  .highlight.bash.css {
+    .code {
+      &:after {
+        content: "CSS";
+      }
+    }
+  }
+  .highlight.css.css {
+    .code {
+      &:after {
+        content: "CSS";
+      }
+    }
+  }
+  .highlight.jsx.css {
+    .code {
+      &:after {
+        content: "CSS";
+      }
+    }
+  }
+  .highlight.html.jsx {
+    .code {
+      &:after {
+        content: "JSX";
+      }
+    }
+  }
+  .highlight.js.jsx {
+    .code {
+      &:after {
+        content: "JSX";
+      }
+    }
+  }
+  .highlight.bash.jsx {
+    .code {
+      &:after {
+        content: "JSX";
+      }
+    }
+  }
+  .highlight.css.jsx {
+    .code {
+      &:after {
+        content: "JSX";
+      }
+    }
+  }
+  .highlight.jsx.jsx {
+    .code {
+      &:after {
+        content: "JSX";
+      }
+    }
+  }
+  > table {
+    width: 100%;
+    margin: 20px 0;
+    tr {
+      border-top: 1px solid #eee;
+      &:nth-child(2n) {
+        background-color: #f8f8f8;
+      }
+    }
+    th {
+      font-family: "ProximaNova-Semibold";
+      padding: 12px 13px;
+      border: 1px solid #eee;
+      vertical-align: middle;
+      text-align: left;
+    }
+    td {
+      border: 1px solid #eee;
+      vertical-align: middle;
+      padding: 6px 13px;
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+      font-size: 0.8em;
+      line-height: 1.6em;
+    }
+  }
+  .bottom-nav {
+    height: 44px;
+    margin: 30px 0 25px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 25px;
+    a {
+      font-family: "ProximaNova-Semibold";
+      margin: 0 5px;
+    }
+  }
+  .edit-link {
+    text-align: center;
+    a {
+      color: #aaa;
+      font-family: "ProximaNova-Semibold";
+      &:before {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-size: 16px;
+        opacity: 0.3;
+        margin-right: 8px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+
+  .field-name {
+    font-weight: bold;
+  }
+
+  .field-entry {
+    margin-bottom: 4rem;
+  }
+  .description-wrapper {
+    > p {
+      padding-left: 1rem;
+      margin-bottom: 1rem;
+    }
+  }
+}