From 559cd63fc5feace32bb44c695207579609516f15 Mon Sep 17 00:00:00 2001
From: slene <vslene@gmail.com>
Date: Sun, 23 Mar 2014 20:58:12 +0800
Subject: fix code view indentation

---
 public/js/app.js | 44 +++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

(limited to 'public/js')

diff --git a/public/js/app.js b/public/js/app.js
index e0f92854..3e995d5b 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -110,25 +110,6 @@ var Gogits = {
         $pre.addClass('prettyprint linenums');
         prettyPrint();
 
-        var $lineNums = $pre.parent().siblings('.lines-num');
-        if ($lineNums.length > 0) {
-            var nums = $pre.find('ol.linenums > li').length;
-            for (var i = 1; i <= nums; i++) {
-                $lineNums.append('<span id="L' + i + '" rel=".L' + i + '">' + i + '</span>');
-            }
-
-            var last;
-            $(document).on('click', '.lines-num span', function () {
-                var $e = $(this);
-                if (last) {
-                    last.removeClass('active');
-                }
-                last = $e.parent().siblings('.lines-code').find('ol.linenums > ' + $e.attr('rel'));
-                last.addClass('active');
-                window.location.href = '#' + $e.attr('id');
-            });
-        }
-
         // Set anchor.
         var headers = {};
         $md.find('h1, h2, h3, h4, h5, h6').each(function () {
@@ -148,6 +129,30 @@ var Gogits = {
         });
     }
 
+    Gogits.renderCodeView = function () {
+        $('.code-view .lines-code > pre').each(function(){
+            var $pre = $(this);
+            var $lineNums = $pre.parent().siblings('.lines-num');
+            if ($lineNums.length > 0) {
+                var nums = $pre.find('ol.linenums > li').length;
+                for (var i = 1; i <= nums; i++) {
+                    $lineNums.append('<span id="L' + i + '" rel=".L' + i + '">' + i + '</span>');
+                }
+
+                var last;
+                $(document).on('click', '.lines-num span', function () {
+                    var $e = $(this);
+                    if (last) {
+                        last.removeClass('active');
+                    }
+                    last = $e.parent().siblings('.lines-code').find('ol.linenums > ' + $e.attr('rel'));
+                    last.addClass('active');
+                    window.location.href = '#' + $e.attr('id');
+                });
+            }
+        });
+    };
+
 })(jQuery);
 
 // ajax utils
@@ -177,6 +182,7 @@ function initCore() {
     Gogits.initModals();
     Gogits.initDropDown();
     Gogits.renderMarkdown();
+    Gogits.renderCodeView();
 }
 
 function initRegister() {
-- 
cgit v1.2.3


From f7f175a0793a53f3c50d20d89e324a610f94c442 Mon Sep 17 00:00:00 2001
From: slene <vslene@gmail.com>
Date: Sun, 23 Mar 2014 22:14:29 +0800
Subject: fix code select range

---
 public/js/app.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++---------
 public/js/lib.js |  2 +-
 2 files changed, 71 insertions(+), 14 deletions(-)

(limited to 'public/js')

diff --git a/public/js/app.js b/public/js/app.js
index 3e995d5b..d5185580 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -31,6 +31,23 @@ var Gogits = {
                 }
             };
             return ajax(url, options);
+        },
+
+        changeHash: function(hash) {
+            if(history.pushState) {
+                history.pushState(null, null, hash);
+            }
+            else {
+                location.hash = hash;
+            }
+        },
+
+        deSelect: function() {
+            if(window.getSelection) {
+                window.getSelection().removeAllRanges();
+            } else {
+                document.selection.empty();
+            }
         }
     });
 }(jQuery));
@@ -130,27 +147,67 @@ var Gogits = {
     }
 
     Gogits.renderCodeView = function () {
+        function selectRange($list, $select, $from){
+            $list.removeClass('active');
+            if($from){
+                var a = parseInt($select.attr('rel').substr(1));
+                var b = parseInt($from.attr('rel').substr(1));
+                var c;
+                if(a != b){
+                    if(a > b){
+                        c = a;
+                        a = b;
+                        b = c;
+                    }
+                    var classes = [];
+                    for(i = a; i <= b; i++) {
+                        classes.push('.L'+i);
+                    }
+                    $list.filter(classes.join(',')).addClass('active');
+                    $.changeHash('#L' + a + '-' + 'L' + b);
+                    return
+                }
+            }
+            $select.addClass('active');
+            $.changeHash('#' + $select.attr('rel'));
+        }
+
+        $(document).on('click', '.lines-num span', function (e) {
+            var $select = $(this);
+            var $list = $select.parent().siblings('.lines-code').find('ol.linenums > li');
+            selectRange($list, $list.filter('[rel='+$select.attr('rel')+']'), (e.shiftKey?$list.filter('.active').eq(0):null));
+            $.deSelect();
+        });
+
         $('.code-view .lines-code > pre').each(function(){
             var $pre = $(this);
-            var $lineNums = $pre.parent().siblings('.lines-num');
+            var $lineCode = $pre.parent();
+            var $lineNums = $lineCode.siblings('.lines-num');
             if ($lineNums.length > 0) {
                 var nums = $pre.find('ol.linenums > li').length;
                 for (var i = 1; i <= nums; i++) {
-                    $lineNums.append('<span id="L' + i + '" rel=".L' + i + '">' + i + '</span>');
+                    $lineNums.append('<span id="L' + i + '" rel="L' + i + '">' + i + '</span>');
                 }
-
-                var last;
-                $(document).on('click', '.lines-num span', function () {
-                    var $e = $(this);
-                    if (last) {
-                        last.removeClass('active');
-                    }
-                    last = $e.parent().siblings('.lines-code').find('ol.linenums > ' + $e.attr('rel'));
-                    last.addClass('active');
-                    window.location.href = '#' + $e.attr('id');
-                });
             }
         });
+
+        $(window).on('hashchange', function(e) {
+            var m = window.location.hash.match(/^#(L\d+)\-(L\d+)$/);
+            var $list = $('.code-view ol.linenums > li');
+            if(m){
+                var $first = $list.filter('.'+m[1]);
+                selectRange($list, $first, $list.filter('.'+m[2]));
+                $("html, body").scrollTop($first.offset().top-200);
+                console.log($first.offset().top);
+                return;
+            }
+            m = window.location.hash.match(/^#(L\d+)$/);
+            if(m){
+                var $first = $list.filter('.'+m[1]);
+                selectRange($list, $first);
+                $("html, body").scrollTop($first.offset().top-200);
+            }
+        }).trigger('hashchange');
     };
 
 })(jQuery);
diff --git a/public/js/lib.js b/public/js/lib.js
index b5cc41c0..8735ac9c 100644
--- a/public/js/lib.js
+++ b/public/js/lib.js
@@ -340,7 +340,7 @@ q,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?
 s+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&g.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&g.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),q]);d.push(["pln",/^\s+/,q," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");g.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,
 q],["pun",RegExp(b),q]);return C(d,g)}function J(a,d,g){function b(a){var c=a.nodeType;if(c==1&&!x.test(a.className))if("br"===a.nodeName)s(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&g){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(j.createTextNode(d),a.nextSibling),s(a),c||a.parentNode.removeChild(a)}}function s(a){function b(a,c){var d=
 c?a.cloneNode(!1):a,e=a.parentNode;if(e){var e=b(e,1),g=a.nextSibling;e.appendChild(d);for(var i=g;i;i=g)g=i.nextSibling,e.appendChild(i)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var x=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,j=a.ownerDocument,k=j.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var c=[k],i=0;i<c.length;++i)b(c[i]);d===(d|0)&&c[0].setAttribute("value",d);var r=j.createElement("ol");
-r.className="linenums";for(var d=Math.max(0,d-1|0)||0,i=0,n=c.length;i<n;++i)k=c[i],k.className="L"+(i+d+1),k.firstChild||k.appendChild(j.createTextNode("\u00a0")),r.appendChild(k);a.appendChild(r)}function p(a,d){for(var g=d.length;--g>=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*</.test(d)?"default-markup":"default-code";return F[a]}function K(a){var d=a.h;try{var g=T(a.c,a.i),b=g.a;
+r.className="linenums";for(var d=Math.max(0,d-1|0)||0,i=0,n=c.length;i<n;++i)k=c[i],k.setAttribute("rel", "L"+(i+d+1)),k.className="L"+(i+d+1),k.firstChild||k.appendChild(j.createTextNode("\u00a0")),r.appendChild(k);a.appendChild(r)}function p(a,d){for(var g=d.length;--g>=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*</.test(d)?"default-markup":"default-code";return F[a]}function K(a){var d=a.h;try{var g=T(a.c,a.i),b=g.a;
 a.a=b;a.d=g.d;a.e=0;I(d,b)(a);var s=/\bMSIE\s(\d+)/.exec(navigator.userAgent),s=s&&+s[1]<=8,d=/\n/g,x=a.a,m=x.length,g=0,j=a.d,k=j.length,b=0,c=a.g,i=c.length,r=0;c[i]=m;var n,e;for(e=n=0;e<i;)c[e]!==c[e+2]?(c[n++]=c[e++],c[n++]=c[e++]):e+=2;i=n;for(e=n=0;e<i;){for(var p=c[e],w=c[e+1],t=e+2;t+2<=i&&c[t+1]===w;)t+=2;c[n++]=p;c[n++]=w;e=t}c.length=n;var f=a.c,h;if(f)h=f.style.display,f.style.display="none";try{for(;b<k;){var l=j[b+2]||m,B=c[r+2]||m,t=Math.min(l,B),A=j[b+1],G;if(A.nodeType!==1&&(G=x.substring(g,
 t))){s&&(G=G.replace(d,"\r"));A.nodeValue=G;var L=A.ownerDocument,o=L.createElement("span");o.className=c[r+1];var v=A.parentNode;v.replaceChild(o,A);o.appendChild(A);g<l&&(j[b+1]=A=L.createTextNode(x.substring(t,l)),v.insertBefore(A,o.nextSibling))}g=t;g>=l&&(b+=2);g>=B&&(r+=2)}}finally{if(f)f.style.display=h}}catch(u){D.console&&console.log(u&&u.stack||u)}}var D=window,y=["break,continue,do,else,for,if,return,while"],E=[[y,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
 "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],M=[E,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],N=[E,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],
-- 
cgit v1.2.3


From dd12d0cf8227d7a0706f62485b8b2f8783cfe09d Mon Sep 17 00:00:00 2001
From: slene <vslene@gmail.com>
Date: Sun, 23 Mar 2014 22:47:46 +0800
Subject: remove

---
 public/js/app.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'public/js')

diff --git a/public/js/app.js b/public/js/app.js
index d5185580..4bf4b29e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -198,7 +198,6 @@ var Gogits = {
                 var $first = $list.filter('.'+m[1]);
                 selectRange($list, $first, $list.filter('.'+m[2]));
                 $("html, body").scrollTop($first.offset().top-200);
-                console.log($first.offset().top);
                 return;
             }
             m = window.location.hash.match(/^#(L\d+)$/);
-- 
cgit v1.2.3


From 5e22f1437ac2466d599c242fd5e256180fa7b68e Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Mon, 24 Mar 2014 21:27:19 +0800
Subject: diff page ui

---
 public/css/gogs.css      | 131 ++++++++++++++-
 public/js/app.js         |  73 +++++----
 routers/repo/commit.go   |   6 +
 templates/repo/diff.tmpl | 418 +++++++++++++++++++++++++++++++++++++++++++++++
 web.go                   |   4 +-
 5 files changed, 599 insertions(+), 33 deletions(-)
 create mode 100644 templates/repo/diff.tmpl

(limited to 'public/js')

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 65a6c03d..ec37721f 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -798,7 +798,7 @@ html, body {
     margin-left: .5em;
 }
 
-.commit-box .avatar {
+.commit-box .avatar, .diff-head-box .avatar {
     width: 20px;
     height: 20px;
     margin-right: 8px;
@@ -831,10 +831,137 @@ html, body {
     background-color: #FFF;
 }
 
-.guide-box {
+.guide-box, .diff-head-box {
     margin-top: 20px;
 }
 
+.diff-head-box h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 26px;
+}
+
+.diff-head-box p {
+    margin-bottom: 0;
+}
+
+.diff-head-box .sha {
+    margin-left: 8px;
+}
+
+.diff-head-box a.name {
+    color: #444;
+    margin-right: 8px;
+}
+
+.diff-head-box span.time {
+    color: #888;
+}
+
+.diff-detail-box {
+    margin-bottom: 16px;
+    line-height: 30px;
+}
+
+.diff-detail-box span.status {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.diff-detail-box ol {
+    padding-left: 0;
+    margin-bottom: 28px;
+}
+
+.diff-detail-box li {
+    list-style: none;
+    padding-bottom: 4px;
+    margin-bottom: 4px;
+    border-bottom: 1px dashed #DDD;
+    padding-left: 6px;
+}
+
+.diff-detail-box span.status.modify {
+    background-color: #f0db88;
+}
+
+.diff-detail-box span.status.add {
+    background-color: #b4e2b4;
+}
+
+.diff-detail-box span.status.del {
+    background-color: #e9aeae;
+}
+
+.diff-detail-box span.status.rename{
+    background-color: #dad8ff;
+}
+
+.diff-file-box .panel-heading {
+    padding: 10px 20px;
+    line-height: 26px;
+}
+
+.diff-box .count {
+    margin-right: 12px;
+}
+
+.diff-box .count .bar {
+    width: 40px;
+    display: inline-block;
+    margin: 2px 4px 0 4px;
+    vertical-align: text-top;
+}
+
+.diff-box .file {
+    color: #888;
+}
+
+#gogs-source .file-content.diff-file-box {
+    margin-bottom: 20px;
+}
+
+.diff-box .count .bar .add {
+    background-color: #77c64a;
+    height: 12px;
+}
+
+.diff-box .count .bar .del, .diff-box .count .bar {
+    background-color: #e75316;
+    height: 12px;
+}
+
+.diff-file-box .file-body.file-code .lines-code > pre {
+    margin: 0;
+    padding: 3px;
+}
+
+.diff-file-box .file-body.file-code .lines-num-old {
+    border-right: 1px solid #DDD;
+}
+
+.diff-file-box .code-bin td {
+    padding: 20px;
+}
+
+.diff-file-box .code-diff tbody tr.add-code td, .diff-file-box .code-diff tbody tr.add-code pre {
+    background-color: #d1ffd6 !important;
+    border-color: #b4e2b4 !important;
+}
+
+.diff-file-box .code-diff tbody tr.del-code td, .diff-file-box .code-diff tbody tr.del-code pre {
+    background-color: #ffe2dd !important;
+    border-color: #e9aeae !important;
+}
+
+.diff-file-box .code-diff tbody tr:hover td, .diff-file-box .code-diff tbody tr:hover pre {
+    background-color: #fff8d2 !important;
+    border-color: #f0db88 !important;
+}
+
 /* wrapper and footer */
 
 #wrapper {
diff --git a/public/js/app.js b/public/js/app.js
index 4bf4b29e..9a58a6f2 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -2,11 +2,11 @@ var Gogits = {
     "PageIsSignup": false
 };
 
-(function($){
+(function ($) {
     // extend jQuery ajax, set csrf token value
     var ajax = $.ajax;
     $.extend({
-        ajax: function(url, options) {
+        ajax: function (url, options) {
             if (typeof url === 'object') {
                 options = url;
                 url = undefined;
@@ -17,24 +17,24 @@ var Gogits = {
             var headers = options.headers || {};
             var domain = document.domain.replace(/\./ig, '\\.');
             if (!/^(http:|https:).*/.test(url) || eval('/^(http:|https:)\\/\\/(.+\\.)*' + domain + '.*/').test(url)) {
-                headers = $.extend(headers, {'X-Csrf-Token':csrftoken});
+                headers = $.extend(headers, {'X-Csrf-Token': csrftoken});
             }
             options.headers = headers;
             var callback = options.success;
-            options.success = function(data){
-                if(data.once){
+            options.success = function (data) {
+                if (data.once) {
                     // change all _once value if ajax data.once exist
                     $('[name=_once]').val(data.once);
                 }
-                if(callback){
+                if (callback) {
                     callback.apply(this, arguments);
                 }
             };
             return ajax(url, options);
         },
 
-        changeHash: function(hash) {
-            if(history.pushState) {
+        changeHash: function (hash) {
+            if (history.pushState) {
                 history.pushState(null, null, hash);
             }
             else {
@@ -42,8 +42,8 @@ var Gogits = {
             }
         },
 
-        deSelect: function() {
-            if(window.getSelection) {
+        deSelect: function () {
+            if (window.getSelection) {
                 window.getSelection().removeAllRanges();
             } else {
                 document.selection.empty();
@@ -114,8 +114,8 @@ var Gogits = {
         $tabs.find("li:eq(0) a").tab("show");
     };
     // fix dropdown inside click
-    Gogits.initDropDown = function(){
-        $('.dropdown-menu.no-propagation').on('click',function(e){
+    Gogits.initDropDown = function () {
+        $('.dropdown-menu.no-propagation').on('click', function (e) {
             e.stopPropagation();
         });
     };
@@ -144,24 +144,24 @@ var Gogits = {
             node = node.wrap('<div id="' + name + '" class="anchor-wrap" ></div>');
             node.append('<a class="anchor" href="#' + name + '"><span class="octicon octicon-link"></span></a>');
         });
-    }
+    };
 
     Gogits.renderCodeView = function () {
-        function selectRange($list, $select, $from){
+        function selectRange($list, $select, $from) {
             $list.removeClass('active');
-            if($from){
+            if ($from) {
                 var a = parseInt($select.attr('rel').substr(1));
                 var b = parseInt($from.attr('rel').substr(1));
                 var c;
-                if(a != b){
-                    if(a > b){
+                if (a != b) {
+                    if (a > b) {
                         c = a;
                         a = b;
                         b = c;
                     }
                     var classes = [];
-                    for(i = a; i <= b; i++) {
-                        classes.push('.L'+i);
+                    for (i = a; i <= b; i++) {
+                        classes.push('.L' + i);
                     }
                     $list.filter(classes.join(',')).addClass('active');
                     $.changeHash('#L' + a + '-' + 'L' + b);
@@ -175,11 +175,11 @@ var Gogits = {
         $(document).on('click', '.lines-num span', function (e) {
             var $select = $(this);
             var $list = $select.parent().siblings('.lines-code').find('ol.linenums > li');
-            selectRange($list, $list.filter('[rel='+$select.attr('rel')+']'), (e.shiftKey?$list.filter('.active').eq(0):null));
+            selectRange($list, $list.filter('[rel=' + $select.attr('rel') + ']'), (e.shiftKey ? $list.filter('.active').eq(0) : null));
             $.deSelect();
         });
 
-        $('.code-view .lines-code > pre').each(function(){
+        $('.code-view .lines-code > pre').each(function () {
             var $pre = $(this);
             var $lineCode = $pre.parent();
             var $lineNums = $lineCode.siblings('.lines-num');
@@ -191,20 +191,20 @@ var Gogits = {
             }
         });
 
-        $(window).on('hashchange', function(e) {
+        $(window).on('hashchange',function (e) {
             var m = window.location.hash.match(/^#(L\d+)\-(L\d+)$/);
             var $list = $('.code-view ol.linenums > li');
-            if(m){
-                var $first = $list.filter('.'+m[1]);
-                selectRange($list, $first, $list.filter('.'+m[2]));
-                $("html, body").scrollTop($first.offset().top-200);
+            if (m) {
+                var $first = $list.filter('.' + m[1]);
+                selectRange($list, $first, $list.filter('.' + m[2]));
+                $("html, body").scrollTop($first.offset().top - 200);
                 return;
             }
             m = window.location.hash.match(/^#(L\d+)$/);
-            if(m){
-                var $first = $list.filter('.'+m[1]);
+            if (m) {
+                var $first = $list.filter('.' + m[1]);
                 selectRange($list, $first);
-                $("html, body").scrollTop($first.offset().top-200);
+                $("html, body").scrollTop($first.offset().top - 200);
             }
         }).trigger('hashchange');
     };
@@ -334,6 +334,21 @@ function initRepository() {
             return false;
         });
     })();
+
+    // repo diff counter
+    (function () {
+        var $counter = $('.diff-counter');
+        if ($counter.length < 1) {
+            return;
+        }
+        $counter.each(function (i, item) {
+            var $item = $(item);
+            var addLine = $item.find('span[data-line].add').data("line");
+            var delLine = $item.find('span[data-line].del').data("line");
+            var addPercent = parseFloat(addLine) / (parseFloat(addLine) + parseFloat(delLine)) * 100;
+            $item.find(".bar .add").css("width", addPercent + "%");
+        });
+    }());
 }
 
 (function ($) {
diff --git a/routers/repo/commit.go b/routers/repo/commit.go
index 60ee2177..e038998f 100644
--- a/routers/repo/commit.go
+++ b/routers/repo/commit.go
@@ -33,3 +33,9 @@ func Commits(ctx *middleware.Context, params martini.Params) {
 	ctx.Data["Commits"] = commits
 	ctx.HTML(200, "repo/commits")
 }
+
+func Diff(ctx *middleware.Context,params martini.Params){
+	ctx.Data["Title"] = "commit-sha"
+	ctx.Data["IsRepoToolbarCommits"] = true
+	ctx.HTML(200,"repo/diff")
+}
diff --git a/templates/repo/diff.tmpl b/templates/repo/diff.tmpl
new file mode 100644
index 00000000..0c6f4feb
--- /dev/null
+++ b/templates/repo/diff.tmpl
@@ -0,0 +1,418 @@
+{{template "base/head" .}}
+{{template "base/navbar" .}}
+{{template "repo/nav" .}}
+{{template "repo/toolbar" .}}
+<div id="gogs-body" class="container" data-page="repo">
+    <div id="gogs-source">
+        <div class="panel panel-info diff-box diff-head-box">
+            <div class="panel-heading">
+                <a class="pull-right btn btn-primary btn-sm" href="#commit-source">Browse Source</a>
+                <h4>bsongen: support for custom tags</h4>
+            </div>
+            <div class="panel-body">
+                <span class="pull-right">
+                    commit <span class="label label-default sha">commit-sha</span>
+                </span>
+                <p class="author">
+                    <img class="avatar" src="#" alt=""/>
+                    <a class="name" href="#"><strong>author-name</strong></a>
+                    <span class="time">times-ago</span>
+                </p>
+            </div>
+        </div>
+
+        <div class="diff-detail-box diff-box">
+            <a class="pull-right btn btn-default" data-toggle="collapse" data-target="#diff-files">Show Diff Files</a>
+            <p class="showing">
+                <i class="fa fa-retweet"></i>
+                <strong> 5 changed files</strong> with <strong>25 additions</strong> and <strong>9 deletions</strong>.
+            </p>
+            <ol class="detail-files collapse" id="diff-files">
+                <li>
+                    <div class="diff-counter count pull-right">
+                        <span class="add" data-line="2">2</span>
+                        <span class="bar">
+                            <span class="pull-left add"></span>
+                            <span class="pull-left del"></span>
+                        </span>
+                        <span class="del" data-line="4">4</span>
+                    </div>
+                    <!-- todo finish all file status, now modify, add, delete and rename -->
+                    <span class="status modify" data-toggle="tooltip" data-placement="right" title="modify">&nbsp;</span>
+                    <a class="file" href="#diff-1">gopmweb.go</a>
+                </li>
+                <li>
+                    <div class="diff-counter count pull-right">
+                        <span class="add" data-line="666">666</span>
+                        <span class="bar">
+                            <span class="pull-left add"></span>
+                            <span class="pull-left del"></span>
+                        </span>
+                        <span class="del" data-line="44">44</span>
+                    </div>
+                    <span class="status add" data-toggle="tooltip" data-placement="right" title="add">&nbsp;</span>
+                    <a class="file" href="#diff-2">static/img/favicon.png</a>
+                </li>
+                <li>
+                    <span class="status del" data-toggle="tooltip" data-placement="right" title="delete">&nbsp;</span>
+                    <a class="file" href="#diff-2">static/img/favicon.png</a>
+                </li>
+                <li>
+                    <span class="status rename" data-toggle="tooltip" data-placement="right" title="rename">&nbsp;</span>
+                    <a class="file" href="#diff-2">static/img/favicon.png</a>
+                </li>
+            </ol>
+        </div>
+
+        <div class="panel panel-default diff-file-box diff-box file-content" id="diff-1">
+            <div class="panel-heading">
+                <div class="diff-counter count pull-left">
+                    <span class="add" data-line="1">BIN</span>
+                    <span class="bar">
+                        <span class="pull-left add"></span>
+                        <span class="pull-left del"></span>
+                    </span>
+                    <span class="del" data-line="0"></span>
+                </div>
+                <a class="btn btn-default btn-sm pull-right" href="#">View File</a>
+               <span class="file">data/test/bson_test/simple_type.png</span>
+            </div>
+            <div class="panel-body file-body file-code code-view code-bin">
+                <table>
+                    <tbody>
+                        <tr class="text-center"><td><img src="http://1.gravatar.com/avatar/f72f7454ce9d710baa506394f68f4132?s=200" alt=""/></td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="panel panel-default diff-file-box diff-box file-content" id="diff-2">
+            <div class="panel-heading">
+                <div class="diff-counter count pull-left">
+                    <span class="add" data-line="30">+ 30</span>
+                    <span class="bar">
+                        <span class="pull-left add"></span>
+                        <span class="pull-left del"></span>
+                    </span>
+                    <span class="del" data-line="4">- 4</span>
+                </div>
+                <a class="btn btn-default btn-sm pull-right" href="#">View File</a>
+                <span class="file">data/test/bson_test/simple_type.go</span>
+            </div>
+            <div class="panel-body file-body file-code code-view code-diff">
+                <table>
+                    <tbody>
+                    <tr class="same-code nl-1 ol-1">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">1</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">1</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-2 ol-2">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">2</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">2</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-3 ol-3">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L3">3</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L3">3</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="add-code nl-4 ol-0">
+                        <td class="lines-num lines-num-old">
+                            <span rel="add">+</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L4">4</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="add-code nl-5 ol-0">
+                        <td class="lines-num lines-num-old">
+                            <span rel="add">+</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L5">5</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-4">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L4">4</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-5">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L5">5</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-6">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L6">6</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-7">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L7">7</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-6 ol-8">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L8">8</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L6">6</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-7 ol-9">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">9</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">7</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-8 ol-10">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">10</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">8</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="panel panel-default diff-file-box diff-box file-content">
+            <div class="panel-heading">
+                <div class="diff-counter count pull-left">
+                    <span class="add" data-line="2">+ 2</span>
+                    <span class="bar">
+                        <span class="pull-left add"></span>
+                        <span class="pull-left del"></span>
+                    </span>
+                    <span class="del" data-line="4">- 4</span>
+                </div>
+                <a class="btn btn-default btn-sm pull-right" href="#">View File</a>
+                <span class="file">data/test/bson_test/simple_type.go</span>
+            </div>
+            <div class="panel-body file-body file-code code-view code-diff">
+                <table>
+                    <tbody>
+                    <tr class="same-code nl-1 ol-1">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">1</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">1</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-2 ol-2">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">2</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">2</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-3 ol-3">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L3">3</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L3">3</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="add-code nl-4 ol-0">
+                        <td class="lines-num lines-num-old">
+                            <span rel="add">+</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L4">4</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="add-code nl-5 ol-0">
+                        <td class="lines-num lines-num-old">
+                            <span rel="add">+</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L5">5</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-4">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L4">4</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-5">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L5">5</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-6">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L6">6</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="del-code nl-0 ol-7">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L7">7</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="del">-</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-6 ol-8">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L8">8</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L6">6</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-7 ol-9">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">9</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">7</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    <tr class="same-code nl-8 ol-10">
+                        <td class="lines-num lines-num-old">
+                            <span rel="L1">10</span>
+                        </td>
+                        <td class="lines-num lines-num-new">
+                            <span rel="L1">8</span>
+                        </td>
+                        <td class="lines-code">
+                            <pre>	"github.com/youtube/vitess/go/bson"</pre>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="panel panel-default diff-file-box diff-box file-content">
+            <div class="panel-heading">
+                <div class="diff-counter count pull-left">
+                    <span class="add" data-line="0">BIN</span>
+                    <span class="bar">
+                        <span class="pull-left add"></span>
+                        <span class="pull-left del"></span>
+                    </span>
+                    <span class="del" data-line="1"></span>
+                </div>
+                <a class="btn btn-default btn-sm pull-right" href="#">View File</a>
+                <span class="file">data/test/bson_test/simple_type.png</span>
+            </div>
+            <div class="panel-body file-body file-code code-view code-bin">
+                <table>
+                    <tbody>
+                    <tr class="text-center"><td><img src="http://1.gravatar.com/avatar/f72f7454ce9d710baa506394f68f4132?s=200" alt=""/></td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/web.go b/web.go
index 9a613dce..be9378f1 100644
--- a/web.go
+++ b/web.go
@@ -156,8 +156,8 @@ func runWeb(*cli.Context) {
 	}, ignSignIn, middleware.RepoAssignment(true))
 
 	// TODO: implement single commit page
-	// m.Get("/:username/:reponame/commit/:commitid/**", ignSignIn, middleware.RepoAssignment(true), repo.Single)
-	// m.Get("/:username/:reponame/commit/:commitid", ignSignIn, middleware.RepoAssignment(true), repo.Single)
+	m.Get("/:username/:reponame/commit/:commitid/**", ignSignIn, middleware.RepoAssignment(true), repo.Diff)
+	m.Get("/:username/:reponame/commit/:commitid", ignSignIn, middleware.RepoAssignment(true), repo.Diff)
 
 	m.Group("/:username", func(r martini.Router) {
 		r.Get("/:reponame", middleware.RepoAssignment(true), repo.Single)
-- 
cgit v1.2.3