rtfdoc 0.1.0 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6cf4dfb3f18bf5958f797ccf1ee055c96befecb7cf2df7a1b7256412f254ff5f
-  data.tar.gz: 39bb4ecdb1f6279084be35ed1c6dc41ac73e596c7a442ed3f37a9817858387f5
+  metadata.gz: 3536b8048b251df0869eb0bb16378eadc247d8cd4d46382ace2899a49cfc1f30
+  data.tar.gz: b659fd9034ca9183b442dd39e7e1eebe75644fc01d166bf37f84cd54d1de31df
 SHA512:
-  metadata.gz: a343b4d4783ff8e42b53298de89340a9472dcb6ded881d69bf34dee7c7fdfd5aa6879795a26c38ea5e535313ea7718082a99be2b77c41958529b35271674b4ae
-  data.tar.gz: 2c7cdf91e981af582f8c14569d86c3a74ef91bc3f9070e1c640db828d4ada8d47224451b31833f44017e6515c748109d910f09ad8555822816e3841ef205dff7
+  metadata.gz: a0f64a36efec12b759cca63ef5f6c9dabea13e3f56a08061e9d2c08a34ea37eeaff96c35aacb30fd472e20bcb86414b3fe708d17c5ec96800107fc733e5fc700
+  data.tar.gz: 7b83e3baab95dcd2bbc0e6eaed000224ddc565b5b64b0553b765b8be88e27bac16c5c86514b0d58be4c178036a9430b4e13c2470a6c9831d2ccbb758107eea36

data/Gemfile.lock

@@ -1,10 +1,10 @@
 PATH
   remote: .
   specs:
-    rtfdoc (0.1.0)
+    rtfdoc (0.1.3)
       erubi (~> 1.9.0)
       redcarpet (~> 3.5.0)
-      rouge (~> 3.20.0)
+      rouge (~> 3.22.0)
       thor (~> 1.0.1)
 
 GEM
@@ -17,11 +17,11 @@ GEM
     irb (1.2.4)
       reline (>= 0.0.1)
     minitest (5.14.1)
-    rake (10.5.0)
+    rake (13.0.1)
     redcarpet (3.5.0)
     reline (0.1.4)
       io-console (~> 0.5)
-    rouge (3.20.0)
+    rouge (3.22.0)
     thor (1.0.1)
 
 PLATFORMS
@@ -33,7 +33,7 @@ DEPENDENCIES
   byebug
   irb
   minitest (~> 5.0)
-  rake (~> 10.0)
+  rake (~> 13.0)
   rtfdoc!
 
 BUNDLED WITH

data/README.md

@@ -14,7 +14,8 @@ $ gem install rtfdoc
 
 You can scaffold a new project using `rtfdoc bootstrap <project_name>`. It will create a skeleton for your project, and generate needed configuration files.
 
-Once in your project directory, you can install ruby dependencies using `bundle install` and javascript dependencies using `yarn install`.
+Once in your project directory, you can install ruby dependencies using `bundle install` and javascript dependencies using `yarn install`. Then we want to stub the binary by running `bundle binstubs bundler rtfdoc`.
+And finally, you'll copy the assets source by running `bin/rtfdoc install`.
 
 By convention, you should put your documentation content under the `content/` directory. If you don't follow this convention, don't forget to modify the configuration file as well.
 

data/lib/rtfdoc.rb

@@ -3,8 +3,20 @@ require 'rouge'
 require 'redcarpet'
 require 'tmpdir'
 
+require 'rtfdoc/version'
+
 module RTFDoc
   class AttributesComponent
+    # Needed because we can't call the same rendered within itself.
+    def self.private_renderer
+      @renderer ||= Redcarpet::Markdown.new(::RTFDoc::Renderer, {
+        underline:            true,
+        space_after_headers:  true,
+        fenced_code_blocks:   true,
+        no_intra_emphasis:    true
+      })
+    end
+
     def initialize(raw_attrs, title)
       @attributes = YAML.load(raw_attrs)
       @title      = title
@@ -14,6 +26,10 @@ module RTFDoc
     class_eval <<-RUBY
       define_method(:output) { #{template.src} }
     RUBY
+
+    def to_html(text)
+      self.class.private_renderer.render(text) if text
+    end
   end
 
   class Renderer < Redcarpet::Render::Base
@@ -37,6 +53,10 @@ module RTFDoc
       "<p>#{text}</p>"
     end
 
+    def link(link, title, content)
+      %(<a title="#{title}" href="#{link}">#{content}</a>)
+    end
+
     def header(text, level)
       if level == 4
         %(<div class="header-table">#{text}</div>)
@@ -89,26 +109,71 @@ module RTFDoc
       if language == 'attributes' || language == 'parameters'
         AttributesComponent.new(code, language).output
       elsif language == 'response'
-        <<-HTML
-        <div class="section-response">
-          <div class="response-topbar">RESPONSE</div>
-          <pre><code>#{rouge_formatter.format(rouge_lexer.lex(code.strip))}</code></pre>
-        </div>
-        HTML
+        format_code('RESPONSE', code)
+      elsif language == 'title_and_code'
+        title, _code = code.split("\n", 2)
+        title ||= 'RESPONSE'
+        format_code(title, _code)
       end
     end
+
+    private def format_code(title, code)
+      <<-HTML
+      <div class="section-response">
+        <div class="response-topbar">#{title}</div>
+        <pre><code>#{rouge_formatter.format(rouge_lexer.lex(code.strip))}</code></pre>
+      </div>
+      HTML
+    end
+
   end
 
   class Template
-    def initialize(sections)
-      @content = sections.map(&:output).join
-      @menu_content = sections.map(&:menu_output).join
+    attr_reader :app_name, :page_title
+
+    def initialize(nodes, config)
+      @content      = nodes.flat_map(&:output).join
+      # @menu_content = nodes.map(&:menu_output).join
+      @app_name     = config['app_name']
+      @page_title   = config['title']
+
+      generate_grouped_menu_content(nodes)
     end
 
     def output
       template = Erubi::Engine.new(File.read(File.expand_path('../src/index.html.erb', __dir__)))
       eval(template.src)
     end
+
+    private
+
+    # Transform a list of nodes into a list of groups. If all nodes already are groups, it will
+    # return the same list. Otherwise, it will build group from consecutives single resources.
+    def generate_grouped_menu_content(nodes)
+      i   = 0
+      res = []
+
+      while i < nodes.length
+        node = nodes[i]
+        if node.is_a?(Group)
+          res << node
+          i += 1
+        else
+          inner = []
+          j = i
+          while node && !node.is_a?(Group)
+            inner << node
+            j += 1
+            node = nodes[j]
+          end
+
+          res << Group.new(nil, inner)
+          i = j
+        end
+      end
+
+      @menu_content = res.map(&:menu_output).join
+    end
   end
 
   module RenderAsSection
@@ -155,7 +220,7 @@ module RTFDoc
         parse_metadata(YAML.load(raw_content.slice!(0, idx + 3)))
       end
 
-      raise 'missing metadata' if resource && !@path && !@method
+      raise 'missing metadata' if resource && !meta_section? && !@path && !@method
 
       @content, @example = raw_content.split('$$$')
     end
@@ -177,17 +242,28 @@ module RTFDoc
     end
 
     def signature
-      sig = <<-HTML.strip!
+      anchor(sig)
+    end
+
+    def example_to_html
+      res = super
+      @resource && res && !meta_section? ? res.sub('RESPONSE', sig) : res
+    end
+
+    private
+
+    def sig
+      @sig ||= <<-HTML.strip!
         <div class="endpoint-def">
           <div class="method method__#{method.downcase}">#{method.upcase}</div>
           <div class="path">#{path}</div>
         </div>
       HTML
-
-      anchor(sig)
     end
 
-    private
+    def meta_section?
+      name == 'desc' || name == 'object'
+    end
 
     def menu_title
       @menu_title || name.capitalize
@@ -221,16 +297,18 @@ module RTFDoc
     end
 
     def generate_example(sections)
-      endpoints   = sections.reject { |s| s.name == 'desc' || s.name == 'object' }
+      endpoints   = sections.reject { |s| s.is_a?(Scope) || s.name == 'desc' || s.name == 'object' }
       signatures  = endpoints.each_with_object("") do |e, res|
         res << %(<div class="resource-sig">#{e.signature}</div>)
       end
+      scopes = sections.select { |s| s.is_a?(Scope) }.map!(&:generate_example).join("\n")
 
       @example = <<-HTML
       <div class="section-response">
         <div class="response-topbar">ENDPOINTS</div>
         <div class="section-endpoints">#{signatures}</div>
       </div>
+      #{scopes}
       HTML
     end
 
@@ -247,6 +325,25 @@ module RTFDoc
       desc = nil
 
       sections = endpoints.each_with_object([]) do |endpoint, res|
+        if endpoint.is_a?(Hash)
+          n, values = endpoint.each_pair.first
+          next unless n.start_with?('scope|')
+          dir_name = n.slice(6..-1)
+
+          scope_name = values['title'] || dir_name
+          scoped_endpoints = values['endpoints']
+
+          subsections = scoped_endpoints.each_with_object([]) do |e, r|
+            filename = paths.dig(dir_name, e)
+            next unless filename
+            content  = File.read(filename)
+            r << Section.new(e, content, resource: name)
+          end
+
+          res << Scope.new(scope_name, subsections)
+          next res
+        end
+
         filename = paths[endpoint]
         next unless filename
 
@@ -274,7 +371,7 @@ module RTFDoc
       head, *tail = sections
       head.include_show_button = true
 
-      inner = sections.map(&:output).join("\n")
+      inner = sections.flat_map(&:output).join("\n")
       %(<section class="head-section">#{inner}</section>)
     end
 
@@ -282,11 +379,80 @@ module RTFDoc
       head, *tail = sections
       <<-HTML
         <li data-anchor="#{name}">
-          #{head.anchor(name.capitalize, class_list: 'expandable')}
+          #{head.anchor(human_name, class_list: 'expandable')}
           <ul>#{tail.map(&:menu_output).join}</ul>
         </li>
       HTML
     end
+
+    private
+
+    def human_name
+      name.tr('_', ' ').split.map!(&:capitalize).join(' ')
+    end
+  end
+
+  class Group
+    attr_reader :name, :resources
+
+    def initialize(name, resources, options = {})
+      @name       = name
+      @resources  = resources
+
+      sorted = true
+      sorted = options['sort'] if options.key?('sort')
+      @resources.sort! { |a, b| a.name <=> b.name } if sorted
+    end
+
+    def output
+      resources.map(&:output)
+    end
+
+    def menu_output
+      title = "<h5 class=\"nav-group-title\">#{name}</h5>" if name && name.length > 0
+
+      <<-HTML
+        <div class="sidebar-nav-group">
+          #{title}
+          <ul>#{resources.map(&:menu_output).join}</ul>
+        </div>
+      HTML
+    end
+  end
+
+  class Scope
+    attr_reader :name, :sections
+
+    def initialize(name, sections)
+      @name       = name
+      @sections   = sections
+    end
+
+    def output
+      sections.map(&:output)
+    end
+
+    def menu_output
+      <<-HTML
+        <li>
+          <div class="scope-title">#{name}</div>
+          <ul class="scoped">#{sections.map(&:menu_output).join}</ul>
+        </li>
+      HTML
+    end
+
+    def generate_example
+      signatures  = sections.each_with_object("") do |s, res|
+        res << %(<div class="resource-sig">#{s.signature}</div>)
+      end
+
+      <<-HTML
+      <div class="section-response">
+        <div class="response-topbar">#{name} ENDPOINTS</div>
+        <div class="section-endpoints">#{signatures}</div>
+      </div>
+      HTML
+    end
   end
 
   class Generator
@@ -299,26 +465,37 @@ module RTFDoc
     end
 
     def run
-      tree = build_content_tree
+      @tree = build_content_tree
+      nodes = build_nodes(config['resources'])
 
-      nodes = config['resources'].map do |rs|
+      out = File.new("#{Dir.tmpdir}/rtfdoc_output.html", 'w')
+      out.write(Template.new(nodes, config).output)
+      out.close
+    end
+
+    private
+
+    def build_nodes(ary, allow_groups: true)
+      ary.map do |rs|
         if rs.is_a?(Hash)
-          name, endpoints = rs.each_pair.first
-          paths = tree[name]
-          Resource.build(name, paths, endpoints: endpoints)
+          name, values = rs.each_pair.first
+
+          if name.start_with?('group|')
+            raise 'Nested groups are not yet supported' if !allow_groups
+
+            group_name = values.key?('title') ? values['title'] : name.slice(6..-1)
+            Group.new(group_name, build_nodes(values['resources'], allow_groups: false), values)
+          else
+            paths = @tree[name]
+            Resource.build(name, paths, endpoints: values)
+          end
         else
-          paths = tree[rs]
+          paths = @tree[rs]
           paths.is_a?(Hash) ? Resource.build(rs, paths) : Section.new(rs, File.read(paths))
         end
       end
-
-      out = File.new("#{Dir.tmpdir}/rtfdoc_output.html", 'w')
-      out.write(Template.new(nodes).output)
-      out.close
     end
 
-    private
-
     def build_content_tree
       tree        = {}
       slicer      = (@content_dir.length + 1)..-1

data/lib/rtfdoc/cli.rb

@@ -3,6 +3,8 @@ require 'rtfdoc/generators/bootstrap'
 
 module RTFDoc
   class CLI < Thor
+    include Thor::Actions
+
     def self.exit_on_failure?
       true
     end
@@ -14,5 +16,12 @@ module RTFDoc
     def convert
       ::RTFDoc::Generator.new(options[:config]).run
     end
+
+    source_root(File.expand_path('../../', __dir__))
+
+    desc 'install', 'Copy the latest version of the assets source in your project'
+    def install
+      directory 'src', 'src', exclude_pattern: /\.erb\Z/
+    end
   end
 end

data/lib/rtfdoc/generators/bootstrap.rb

@@ -25,18 +25,11 @@ module RTFDoc
 
     def create_webpack_config
       template('package.json.erb', "#{name}/package.json")
-      template('webpack.config.js.erb', "#{name}/webpack.config.js")
+      copy_file('webpack.config.js', "#{name}/webpack.config.js")
     end
 
     def create_config
       template('config.yml.erb', "#{name}/config.yml")
     end
-
-    private
-
-    def gem_dir
-      File.expand_path('../../../', __dir__)
-    end
-
   end
 end

data/lib/rtfdoc/templates/{webpack.config.js.erb → webpack.config.js}

@@ -8,13 +8,13 @@ const devMode = process.env.NODE_ENV != 'production'
 
 module.exports = {
   mode: devMode ? "development" : "production",
-  entry: "<%= gem_dir %>/src/js/index.js",
+  entry: __dirname + "/src/js/index.js",
   output: {
     filename: devMode ? "main.js" : "main.[contenthash].js",
     path: __dirname + "/dist",
   },
   plugins: [
-    new CleanWebpackPlugin(),
+    new CleanWebpackPlugin({ cleanStaleWebpackAssets: !devMode }),
     new MiniCssExtractPlugin({
       filename: devMode ? '[name].css' : '[name].[contenthash].css'
     }),
@@ -23,6 +23,9 @@ module.exports = {
     })
   ],
   devtool: devMode ? "inline-source-map" : "source-map",
+  resolve: {
+    modules: [path.resolve(__dirname, 'node_modules')]
+  },
   module: {
     rules: [
       {

data/lib/rtfdoc/version.rb

@@ -1,3 +1,3 @@
 module RTFDoc
-  VERSION = "0.1.0"
+  VERSION = "0.1.5"
 end

data/rtfdoc.gemspec

@@ -37,11 +37,11 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_dependency "erubi", "~> 1.9.0"
-  spec.add_dependency "rouge", "~> 3.20.0"
+  spec.add_dependency "rouge", "~> 3.22.0"
   spec.add_dependency "redcarpet", "~> 3.5.0"
   spec.add_dependency "thor", "~> 1.0.1"
 
   spec.add_development_dependency "bundler", "~> 1.17"
-  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rake", "~> 13.0"
   spec.add_development_dependency "minitest", "~> 5.0"
 end

data/src/attributes.erb

@@ -1,5 +1,4 @@
 <div class="section-list">
-  <h5 class="section-list-title"><%= @title.capitalize %></h5>
   <ul>
     <% @attributes.each do |name, hash| %>
     <li class="list-item">
@@ -11,9 +10,9 @@
         <% end %>
       </div>
       <div class="list-item-description">
-        <p><%= hash['desc'] %></p>
+        <%= to_html(hash['desc']) %>
       </div>
-      <% if hash['children']&.any? %>
+      <% if hash.key?('children') || hash.key?('after_children') %>
         <div class="section-list section-list-child">
           <h5
             class="section-list-title section-list-title-child"
@@ -27,17 +26,24 @@
             <span>Show child attributes</span>
           </h5>
           <ul class="child-list hidden">
-            <% hash['children'].each do |child_name, child_hash| %>
+            <% Array(hash['children']).each do |child_name, child_hash| %>
               <li class="list-item">
                 <div class="list-item-label">
-                  <div class="list-item-name"><%= name %></div>
-                  <div class="list-item-type"><%= hash['type'] %> </div>
+                  <div class="list-item-name"><%= child_name %></div>
+                  <div class="list-item-type"><%= child_hash['type'] %> </div>
                 </div>
                 <div class="list-item-description">
-                  <p><%= hash['desc'] %></p>
+                  <%= to_html(child_hash['desc']) %>
                 </div>
               </li>
             <% end %>
+            <% if (str = hash['after_children']) %>
+            <li class="list-item">
+              <div class="list-item-description">
+                <%= to_html(str) %>
+              </div>
+            </li>
+            <% end %>
           </ul>
         </div>
       <% end %>

data/src/css/application.scss

@@ -17,6 +17,7 @@
   --content-width: calc(100vw - var(--sidebar-width));
   --section-padding: 5vw;
   --example-width: 40vw;
+  --max-example-width: 33vw;
   --sp20: 20px;
   --sp24: 24px;
   --monospace-font: "SFMono-Regular", "Consolas", "Menlo", monospace;
@@ -29,14 +30,20 @@
   --endpoints-line-height: 22px;
   --table-font-size: 14px;
   --table-line-height: 18px;
-  --code-font-size: 14px; }
+  --code-font-size: 14px;
+  --code-block-font-size: 13px;
+}
 
 * {
   box-sizing: border-box;
-  word-wrap: break-word; }
+  word-wrap: break-word;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
 
 html {
-  overflow: auto; }
+  overflow: auto;
+}
 
 body {
   margin: 0;
@@ -46,7 +53,9 @@ body {
   overflow-y: scroll;
   max-width: 100%;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--background-color); }
+  -webkit-font-smoothing: antialiased;
+  background-color: var(--background-color);
+}
 
 body[data-theme="dark"] {
   --background-color: var(--sail-gray900);
@@ -73,13 +82,16 @@ body[data-theme="dark"] {
   --nav-color: var(--sail-gray300);
   --nav-hover-color: var(--sail-gray50);
   --nav-header-color: var(--sail-gray50);
-  --brand-color: var(--sail-cyan500);
-  --switch-background-color: #212d63;
+  --brand-color: #4db7e8;
+  --switch-background-color: #3d4eac;
   --code-strings: #98c379;
   --code-numbers: #56b6c2;
   --code-booleans: #d19a66;
   --child-list-title-color: var(--sail-gray500);
-  --child-list-title-hover-color: var(--sail-gray100); }
+  --child-list-title-hover-color: var(--sail-gray100);
+  --scoped-endpoints-title-color: var(--sail-gray50);
+  --link-color: #4db7e8;
+}
 
 body[data-theme="light"] {
   --background-color: #fff;
@@ -112,7 +124,20 @@ body[data-theme="light"] {
   --code-numbers: #005cc5;
   --code--booleans: #e36209;
   --child-list-title-color: #586069;
-  --child-list-title-hover-color: #24292e; }
+  --child-list-title-hover-color: #24292e;
+  --scoped-endpoints-title-color: var(--sail-cyan500);
+  --link-color: var(--sail-cyan500);
+}
+
+a, a:visited {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--nav-hover-color);
+  text-decoration: none;
+}
 
 #sidebar {
   width: var(--sidebar-width);
@@ -122,42 +147,89 @@ body[data-theme="light"] {
   left: 0;
   bottom: 0;
   z-index: 10;
-  box-shadow: -1px 0 0 0 var(--divider-color) inset; }
+  box-shadow: -1px 0 0 0 var(--divider-color) inset;
+}
 
 .sidebar-header {
   color: var(--nav-header-color);
   padding: 16px;
   display: flex;
   flex-direction: row;
-  justify-content: space-between; }
-  .sidebar-header .sidebar-title {
+  justify-content: space-between;
+  .sidebar-title {
     font-size: 15px;
-    line-height: 20px; }
-  .sidebar-header .api {
+    line-height: 20px;
+  }
+  .api {
     text-transform: uppercase;
-    color: var(--brand-color); }
+    color: var(--brand-color);
+  }
+}
 
 .sidebar-nav {
-  margin-top: 16px; }
-  .sidebar-nav a {
-    text-decoration: none;
-    color: var(--nav-color);
-    transition: color .2s ease;
-    font-size: var(--nav-font-size);
-    font-weight: 500;
-    display: block;
-    padding: 5px 16px; }
-    .sidebar-nav a:hover {
-      color: var(--nav-hover-color); }
-  .sidebar-nav a.current span {
-    border-bottom: 2px solid var(--brand-color); }
-  .sidebar-nav li > ul {
-    display: none;
-    padding-left: 16px;
-    transition: all 2s ease; }
-  .sidebar-nav li.expanded > ul,
-  .sidebar-nav li.current > ul {
-    display: block; }
+  margin-top: 16px;
+  width: 100%;
+  max-height: 570px;
+  overflow-y: scroll;
+}
+
+.sidebar-nav-group {
+  padding-bottom: 12px;
+
+  h5 {
+    text-transform: uppercase;
+    margin: 0;
+    padding: 16px 16px 8px 16px;
+    color: var(--title-color);
+    font-size: 13px;
+    font-weight: 600;
+  }
+}
+
+.sidebar-nav a {
+  text-decoration: none;
+  color: var(--nav-color);
+  transition: color .2s ease;
+  font-size: var(--nav-font-size);
+  font-weight: 500;
+  display: block;
+  padding: 5px 16px;
+}
+
+.sidebar-nav a:hover {
+  color: var(--nav-hover-color);
+}
+
+.sidebar-nav a.current span {
+  border-bottom: 2px solid var(--brand-color);
+}
+
+.sidebar-nav li > ul {
+  display: none;
+  padding-left: 16px;
+  transition: all 2s ease;
+}
+
+.sidebar-nav li.expanded {
+  margin-bottom: 10px;
+}
+
+.sidebar-nav li.expanded > ul,
+.sidebar-nav li.current > ul {
+  display: block;
+}
+
+.sidebar-nav li > ul.scoped {
+  display: block;
+}
+
+.sidebar-nav .scope-title {
+  font-size: 13px;
+  color: var(--scoped-endpoints-title-color);
+  text-transform: uppercase;
+  font-weight: 400;
+  padding: 8px 0 3px 16px;
+}
 
 /*Simple css to style it like a toggle switch*/
 .theme-switch-wrapper {
@@ -289,18 +361,21 @@ section > section .section-divider {
 .section-body {
   flex-shrink: 0;
   width: calc(var(--example-width) - var(--section-padding));
-  margin-right: var(--section-padding); }
+  margin-right: var(--section-padding);
+
+  a { font-weight: 500; }
+}
 
 .section-example {
   position: sticky;
   align-self: flex-start;
   top: 0;
   flex-grow: 1;
-  max-width: 600px;
+  max-width: var(--max-example-width);
   padding-top: calc(40px + var(--sp20)); }
 
 p {
-  margin-top: var(--sp20);
+  margin-top: 16px;
   font-size: var(--main-font-size);
   line-height: var(--main-line-height);
   font-weight: 400;
@@ -330,75 +405,103 @@ ul {
 .section-response {
   background: var(--response-background-color);
   border-radius: 8px;
-  box-shadow: 0 0 0 1px var(--response-shadow-color); }
-  .section-response .response-topbar {
+  box-shadow: 0 0 0 1px var(--response-shadow-color);
+  max-height: 83vh;
+  overflow: hidden;
+  margin-bottom: 24px;
+
+  &:last-child { margin-bottom: 0 }
+
+  .response-topbar {
     background: var(--block-header-background-color);
     padding: 10px 12px;
     font-weight: 500;
     font-size: 12px;
     color: var(--response-header-color);
-    border-radius: 8px 8px 0 0; }
-  .section-response p {
+    border-radius: 8px 8px 0 0;
+    text-transform: uppercase;
+
+    .endpoint-def { overflow-y: auto; }
+  }
+
+  p {
     margin: 0;
-    padding: 12px var(--sp20); }
-  .section-response pre {
+    padding: 12px var(--sp20);
+  }
+
+  pre {
     margin: 0;
     padding: 12px;
     color: var(--code-color);
     font-family: var(--monospace-font);
     font-size: var(--code-font-size);
     font-weight: 400;
-    line-height: 18px; }
+    line-height: 18px;
+    max-height: 75vh;
+    overflow: auto;
+  }
+}
 
-.section-endpoints {
-  padding: 12px 22px; }
-  .section-endpoints .endpoint-def {
-    display: flex;
-    flex-direction: row;
-    font-family: var(--monospace-font);
-    font-size: var(--code-font-size);
-    font-weight: 500;
-    line-height: 22px;
-    color: var(--endpoints-def-color); }
-  .section-endpoints .method {
+
+
+.endpoint-def {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--monospace-font);
+  font-size: var(--code-font-size);
+  font-weight: 500;
+  line-height: 22px;
+  color: var(--endpoints-def-color);
+
+  .method {
     text-align: right;
+    margin-right: 7px;
+    text-transform: uppercase;
+  }
+
+  .path { text-transform: none }
+
+  .method__get  { color: var(--sail-blue400); }
+  .method__post { color: #50b573; }
+  .method__patch,
+  .method__put {
+    color: #50b573;
+  }
+  .method__delete { color: var(--redish); }
+}
+
+.section-endpoints {
+  padding: 12px 22px;
+  overflow-y: auto;
+
+  a { text-decoration: none; }
+  a:hover .method {
+    filter: brightness(calc(100% + var(--filter-ratio)));
+  }
+  a:hover .path {
+    color: var(--endpoints-def-hover-color);
+  }
+
+  .resource-sig .method {
     width: 55px;
-    margin-right: 7px; }
-  .section-endpoints .method__get {
-    color: var(--sail-blue400); }
-  .section-endpoints .method__post {
-    color: #50b573; }
-  .section-endpoints .method__patch,
-  .section-endpoints .method__put {
-    color: #50b573; }
-  .section-endpoints .method__delete {
-    color: var(--redish); }
-  .section-endpoints a {
-    text-decoration: none; }
-  .section-endpoints a:hover .method {
-    filter: brightness(calc(100% + var(--filter-ratio))); }
-  .section-endpoints a:hover .path {
-    color: var(--endpoints-def-hover-color); }
+    min-width: 55px;
+  }
+}
 
-h3 {
-  margin-top: 20px;
-  padding-top: 16px; }
 
-h3,
-.section-list .section-list-title {
+h3 {
   font-size: 16px;
   font-weight: 500;
-  padding-bottom: 12px;
+  padding: 24px 0 10px;
   border-bottom: 1px solid var(--divider-color);
   display: flex;
   align-items: baseline;
   color: var(--title-color);
   margin: 0;
-  margin-top: var(--sp20);
-  width: 100%; }
+  margin-top: 16px;
+  width: 100%;
+}
 
-.section-list {
-  margin-top: 32px; }
   .section-list .list-item {
     padding-top: 16px;
     padding-bottom: 15px;
@@ -453,7 +556,9 @@ h3,
       cursor: pointer;
       color: var(--child-list-title-hover-color); }
     .section-list .section-list-title-child.child-revealed {
-      border-bottom: 1px solid var(--divider-color); }
+      border-bottom: 1px solid var(--divider-color);
+      width: 100%;
+    }
       .section-list .section-list-title-child.child-revealed .svg-plus {
         transform: rotate(45deg); }
     .section-list .section-list-title-child .svg-plus {
@@ -509,12 +614,17 @@ p code {
   border: 1px solid var(--inline-code-border);
   padding: 2px 3px 0;
   margin: 0 1px;
-  font-size: 15px;
+  font-size: .9em;
   font-family: var(--monospace-font);
   font-weight: 500;
   background: var(--inline-code-background); }
 
 /** Code highlighting **/
+pre code {
+  font-family: var(--monospace-font);
+  font-size: var(--code-block-font-size);
+}
+
 pre code,
 pre code .w {
   color: var(--code-color); }

data/src/index.html.erb

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>RTFDoc</title>
+  <title><%= page_title %></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -11,7 +11,7 @@
   <div id="sidebar" class="sidebar">
     <div class="sidebar-header">
       <div class="sidebar-title">
-        odyssey <span class="api">api</span>
+        <%= app_name %> <span class="api">api</span>
       </div>
       <div class="theme-switch-wrapper">
         <div class="theme-switch">
@@ -23,7 +23,7 @@
       </div>
     </div>
     <nav class="sidebar-nav" role="navigation">
-      <ul><%= @menu_content %></ul>
+      <%= @menu_content %>
     </nav>
   </div>
   <div id="content" class="content-area">

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rtfdoc
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.5
 platform: ruby
 authors:
 - ccocchi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-04 00:00:00.000000000 Z
+date: 2021-01-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: erubi
@@ -30,14 +30,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.20.0
+        version: 3.22.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.20.0
+        version: 3.22.0
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
@@ -86,14 +86,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -132,7 +132,7 @@ files:
 - lib/rtfdoc/templates/config.yml.erb
 - lib/rtfdoc/templates/gitignore
 - lib/rtfdoc/templates/package.json.erb
-- lib/rtfdoc/templates/webpack.config.js.erb
+- lib/rtfdoc/templates/webpack.config.js
 - lib/rtfdoc/version.rb
 - rtfdoc.gemspec
 - src/attributes.erb