Added preview of the file "readme" like in github with using showdown.js parser (http://github.com/coreyti/showdown).

controllers/treeController.php

@@ -16,6 +16,7 @@ $app->get('{repo}/', function($repo) use($app) {
         'breadcrumbs'    => $breadcrumbs,
         'branches'       => $repository->getBranches(),
         'tags'           => $repository->getTags(),
+        'readme'         => $app['utils']->getReadme($repo),
     ));
 })->assert('repo', '[\w-._]+');
 
@@ -35,6 +36,7 @@ $app->get('{repo}/tree/{branch}/', function($repo, $branch) use($app) {
         'breadcrumbs'    => $breadcrumbs,
         'branches'       => $repository->getBranches(),
         'tags'           => $repository->getTags(),
+        'readme'         => $app['utils']->getReadme($repo, $branch),
     ));
 })->assert('repo', '[\w-._]+')
   ->assert('branch', '[\w-._]+');

lib/Application/Utils.php

@@ -245,4 +245,19 @@ class Utils
                      'total' => $totalCommits,
         );
     }
+
+    public function getReadme($repo, $branch = 'master')
+    {
+        $repository = $this->app['git']->getRepository($this->app['git.repos'] . $repo);
+        $files = $repository->getTree('master')->output();
+
+        foreach ($files as $fileInfo)
+            if (preg_match('/^readme(\.md|\.markdown|)$/i', $fileInfo['name'])) {
+                $readmeFile = $fileInfo['name'];
+                break;
+            }
+
+        if ($readmeFile) return array('filename' => $readmeFile, 'content' => $repository->getBlob("$branch:'$readmeFile'")->output());
+        return array();
+    }
 }

views/layout.twig

@@ -14,6 +14,7 @@
         <script src="{{ baseurl }}/web/js/jquery.js"></script>
         <script src="{{ baseurl }}/web/js/bootstrap.js"></script>
         <script src="{{ baseurl }}/web/js/codemirror.js"></script>
+        <script src="{{ baseurl }}/web/js/showdown.js"></script>
         <script src="{{ baseurl }}/web/js/main.js"></script>
     </body>
 </html>

views/tree.twig

@@ -49,6 +49,14 @@
             {% endfor %}
         </tbody>
     </table>
+    {% if readme is not empty %}
+        <div class="readme-view">
+            <div class="readme-header">
+                <div class="meta">{{ readme.filename }}</div>
+            </div>
+            <div id="readme-content">{{ readme.content }}</div>
+        </div>
+    {% endif %}
 
     <hr>
 

web/css/style.css

@@ -271,6 +271,8 @@ table .span24{float:none;width:1884px;margin-left:0;}
 .commit-list li:last-child{border-bottom:0;margin-bottom:25px;}
 .repository{margin-bottom:18px;border:1px solid #d7d7d7;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.repository .repository-header{border-bottom:1px solid #d7d7d7;text-shadow:1px 1px 1px #ffffff;padding:8px;font-weight:700;font-size:14px;}
 .repository .repository-body{padding:8px;background-color:#f7f7f7;}.repository .repository-body p{margin:0;}
+.readme-view{width:100%;margin-bottom:18px;border:1px solid #cacaca;}.readme-view .readme-header{padding:8px;line-height:18px;text-align:left;vertical-align:bottom;background-color:#f4f4f4;background-image:-moz-linear-gradient(top, #fafafa, #eaeaea);background-image:-ms-linear-gradient(top, #fafafa, #eaeaea);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#eaeaea));background-image:-webkit-linear-gradient(top, #fafafa, #eaeaea);background-image:-o-linear-gradient(top, #fafafa, #eaeaea);background-image:linear-gradient(top, #fafafa, #eaeaea);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea', GradientType=0);border-bottom:1px solid #d7d7d7;font-weight:bold;color:#555555;text-shadow:1px 1px 1px #ffffff;height:28px;}.readme-view .readme-header .meta{float:left;padding:4px 0;font-size:14px;}
+.readme-view #readme-content{padding:30px;color:#000;}
 .rss{display:inline-block;width:16px;height:16px;*margin-right:.3em;line-height:16px;vertical-align:text-top;background-image:url("../img/feed.png");background-position:0 0;background-repeat:no-repeat;}.rss:last-child{*margin-left:0;}
 [class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat;}[class^="icon-"]:last-child,[class*=" icon-"]:last-child{*margin-left:0;}
 .icon-white{background-image:url("../img/glyphicons-halflings-white.png");}

web/js/main.js

@@ -10,3 +10,9 @@ $(function () {
         mode: mode
     });
 });
+
+	if ($('#readme-content').length) {
+		var converter = new Showdown.converter();
+		$('#readme-content').html(converter.makeHtml($('#readme-content').text()));
+	}
+});

web/less/files.less

@@ -146,3 +146,32 @@
     }
   }
 }
+
+.readme-view {
+  width: 100%;
+  margin-bottom: @baseLineHeight;
+  border: 1px solid @treeHeaderBorder;
+
+  .readme-header {
+    padding: 8px;
+    line-height: @baseLineHeight;
+    text-align: left;
+    vertical-align: bottom;
+    #gradient > .vertical(@treeHeaderHighlight, @treeHeader);
+    border-bottom: 1px solid lighten(@treeHeaderBorder, 5%);
+    font-weight: bold;
+    color: @gray;
+    text-shadow: 1px 1px 1px rgba(255,255,255,1);
+    height:28px;
+    .meta {
+      float: left;
+      padding: 4px 0;
+      font-size: 14px;
+    }
+  }
+
+  #readme-content {
+    padding: 30px;
+    color: @black;
+  }
+}