Embed your README

Help.md

Easily embed your README.md as documentation

• Disregards everything before the first # Heading
• Requires kramdown

index.erb

<div class='row'>
  <div class='col-md-3'></div>

  <% lines = File.read('README.md').split("\n") %>
  <% interesting_index = lines.index { |s| s =~ /^#/ } %>
  <% good_parts = lines[interesting_index..-1] %>
  <% good_parts[0] = good_parts[0] + " <button data-toggle='collapse' data-target='#readme' class='btn btn-info read-docs pull-right'>Show documentation <i class='fa fa-arrow-circle-down'></i></button>" %>

  <div class='col-md-6 well docs'>
    <div id='heading'>
      <%= Kramdown::Document.new(good_parts[0..2].join("\n")).to_html %>
    </div>
    <div id='readme' class='collapse'>
      <%= Kramdown::Document.new(good_parts[3..-1].join("\n")).to_html %>
    </div>
  </div>
  <div class='col-md-3'></div>
</div>

<script>
  $('.read-docs').click(function(){
    var $this = $(this);
    $this.toggleClass('read-docs');
    if($this.hasClass('read-docs')){
      $this.html('Show documentation <i class="fa fa-arrow-circle-down"></i>');
    } else {
      $this.html('Hide documentation <i class="fa fa-arrow-circle-up"></i>');
    }
  });
</script>

styles.css

#readme img {
  width: 100%;
}

.docs {
  margin-top: 30px;
}