From 351a0902b2c32821bf5e22f6dae378ae14242a76 Mon Sep 17 00:00:00 2001
From: tdurieux <durieuxthomas@hotmail.com>
Date: Fri, 19 Mar 2021 10:23:46 +0100
Subject: [PATCH] improve page design

---
 public/css/style.css          | 129 ++++----------
 public/explore.html           |  40 ++---
 public/index.html             |   8 +-
 public/partials/anonymize.htm |   5 +-
 public/partials/claim.htm     |   5 +-
 public/partials/dashboard.htm |   5 +-
 public/partials/explore.htm   |   6 +-
 public/partials/faq.htm       |   5 +-
 public/partials/header.htm    | 203 +++++++++++-----------
 public/partials/home.htm      |   1 -
 public/robots.txt             |   2 +-
 public/script/exploreApp.js   | 127 +++++++-------
 public/script/homeApp.js      |  28 ++-
 public/script/langColors.js   | 316 ++++++++++++++++++++++++++++++++++
 14 files changed, 564 insertions(+), 316 deletions(-)
 create mode 100644 public/script/langColors.js

diff --git a/public/css/style.css b/public/css/style.css
index 68e14ee..9380b96 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -31,19 +31,12 @@ body {
   position: relative;
   height: 100%;
 }
-header {
-  position: relative;
-}
-.view {
-  color: #ffffff;
-}
 
-.top-nav-collapse {
+.navbar {
   background: #4a507b !important;
 }
 
 .navbar {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   font-weight: 300;
   transition: background-color 0.5s ease;
 }
@@ -54,18 +47,16 @@ header {
   font-size: 30px;
   line-height: 40px;
 }
-.navbar:not(.top-nav-collapse) {
-  /* background: transparent !important; */
-}
+
 .navbar-brand {
   width: 280px;
   text-align: center;
 }
 
-@media (max-width: 991px) {
-  .navbar:not(.top-nav-collapse) {
-    background: #4a507b !important;
-  }
+.generalMessage {
+  display: block;
+  text-align: center;
+  color: #ffffff;
 }
 
 .rgba-gradient {
@@ -138,20 +129,6 @@ a.black_border:hover {
   opacity: 1; /* Firefox */
 }
 
-.active .container {
-  transition: height 1s ease;
-}
-.add_form {
-  display: none;
-}
-.active .add_form {
-  display: block;
-}
-.main {
-  width: 100%;
-  margin: auto;
-  height: 100%;
-}
 .leftCol {
   position: relative;
   height: 100%;
@@ -164,12 +141,7 @@ a.black_border:hover {
   position: relative;
   display: block;
   overflow: scroll;
-  height: calc(100% - 168px);
-}
-.stats {
-  height: 120px;
-  overflow: scroll;
-  border-top: 1px solid #ddd;
+  height: 100%;
 }
 
 .files a {
@@ -215,9 +187,7 @@ a.black_border:hover {
   padding-left: 1px;
   color: #858b90;
 }
-.ace_editor {
-  height: 100%;
-}
+
 .files .folder::before {
   content: "\f07b";
   color: #3ba3f8;
@@ -226,14 +196,21 @@ a.black_border:hover {
   content: "\f07c";
 }
 
+.stats {
+  height: 120px;
+  overflow: scroll;
+  border-top: 1px solid #ddd;
+}
+
+.ace_editor {
+  height: 100%;
+}
+
 .paths {
   background-color: #ffffff;
   padding: 8px 6px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 0;
+  margin: 0;
+  border-bottom: 1px solid #dddddd ;
   border-radius: 0;
 }
 
@@ -246,53 +223,6 @@ a.black_border:hover {
 .paths .breadcrumb-item::before {
   padding-right: 3px;
 }
-@media (max-width: 640px) {
-  .main {
-    width: 100%;
-  }
-  .container-fluid {
-    padding: 0;
-  }
-  .files {
-    margin: 0;
-    border-left: 0;
-    border-right: 0;
-    border-radius: 0;
-  }
-}
-.repos {
-  margin: 0;
-  padding: 0;
-}
-.repo {
-  list-style: none;
-  margin: 0;
-  padding: 3px 7px;
-  background: #fdfdfd;
-  border: 1px solid #ddd;
-  border-top: 0;
-}
-.repo .options {
-  float: right;
-}
-.main > .container-fluid {
-  height: 100%;
-  position: relative;
-}
-.row.top {
-  padding-left: 0;
-  color: #ffffff;
-  background-color: #4a507b;
-}
-.row.center {
-  position: relative;
-  height: calc(100% - 56px);
-}
-.body {
-  position: relative;
-  height: 100%;
-  overflow: scroll;
-}
 
 .content {
   height: 100%;
@@ -317,7 +247,6 @@ a.black_border:hover {
   font-weight: bold;
   font-size: 50px;
   text-align: center;
-  padding-top: 100px;
 }
 
 .preview {
@@ -355,16 +284,11 @@ notebook {
   right: 10px !important;
 }
 
-#navbar {
-  padding-right: 150px;
-}
-
 .accordion-section .panel-default .panel-title a:after {
   font-family: "FontAwesome";
   font-style: normal;
   font-size: 3rem;
   content: "\f106";
-  color: #1f7de2;
   float: right;
   margin-top: -12px;
 }
@@ -377,4 +301,15 @@ notebook {
 
 .table.repositories td {
   word-break: break-word;
-}
\ No newline at end of file
+}
+
+loc {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 5px;
+}
+loc .lang {
+  float: left;
+  height: 100%;
+}
diff --git a/public/explore.html b/public/explore.html
index 1109f77..b70bb9d 100644
--- a/public/explore.html
+++ b/public/explore.html
@@ -3,7 +3,7 @@
 <html lang="en" ng-app="anonymous-github" ng-controller="mainController">
   <head>
     <meta charset="UTF-8" />
-    <title>{{title || "anonymous Github"}}</title>
+    <title ng-bind="title">Anonymous Github</title>
     <script>
       var base = document.createElement("base");
       base.href = `/r/${document.location.pathname.split("/")[2]}/`;
@@ -33,30 +33,15 @@
     <script src="/script/exploreApp.js"></script>
     <script src="/script/ng-pdfviewer.min.js"></script>
   </head>
-  <body keypress-events>
-    <div class="main">
-      <div class="container-fluid">
-        <ng-include
-          src="'/partials/header.htm'"
-          style="display:block;min-height: 50px;"
-        ></ng-include>
-        <div class="row center">
-          <div class="leftCol shadow p-2 h-100 overflow-auto" ng-show="files">
-            <button
-              class="btn btn-primary btn-lg btn-block"
-              ng-if="options.download"
-            >
-              Download
-            </button>
-            <tree class="files" file="files" parent=""></tree>
-            <div class="stats" ng-if="options.mode == 'download'">
-              <h5>Code Statistics (LOC)</h5>
-              <div ng-repeat="(lang, stat) in stats" ng-if="stat.code>0">
-                <span ng-bind="lang"></span> <span ng-bind="stat.code"></span>
-              </div>
-            </div>
+  <body keypress-events class="d-flex flex-column">
+    <ng-include src="'/partials/header.htm'"></ng-include>
+    <div class="align-items-stretch h-100 w-100 overflow-auto">
+      <div class="container-fluid h-100">
+        <div class="row h-100">
+          <div class="leftCol shadow p-1 h-100 overflow-auto" ng-show="files">
+            <tree class="files" file="files"></tree>
           </div>
-          <div class="col p-0 body">
+          <div class="col p-0 h-100 d-flex flex-column">
             <nav aria-label="breadcrumb">
               <ol class="breadcrumb shadow paths">
                 <li class="breadcrumb-item" ng-repeat="p in paths" ng-bind="p">
@@ -64,12 +49,13 @@
                 </li>
               </ol>
             </nav>
-            <div class="content" ng-view></div>
+            <loc stats="stats" ng-if="stats"></loc>
+            <div class="align-items-stretch h-100 w-100 overflow-auto" ng-view></div>
           </div>
         </div>
-        <div class="bottom"></div>
       </div>
     </div>
+
     <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
     <script>
       kofiWidgetOverlay.draw("tdurieux", {
@@ -90,6 +76,8 @@
     <script src="/script/external/purify.min.js"></script>
     <script src="/script/external/notebook.min.js"></script>
 
+    <script src="/script/langColors.js"></script>
+
     <script src="/script/external/ace/ace.js"></script>
     <script src="/script/external/ui-ace.min.js"></script>
   </body>
diff --git a/public/index.html b/public/index.html
index 1e5627f..297aa0a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 <html lang="en" ng-app="anonymous-github" ng-controller="mainController">
   <head>
     <meta charset="UTF-8" />
-    <title>{{title || "Anonymous Github"}}</title>
+    <title ng-bind="title">Anonymous Github</title>
     <base href="/" />
 
     <!-- CSS -->
@@ -16,6 +16,7 @@
 
     <!-- JS -->
     <script src="/script/external/angular.min.js"></script>
+    <script src="/script/external/angular-sanitize.min.js"></script>
     <script src="/script/external/angular-route.min.js"></script>
 
     <script src="/script/external/jquery-3.4.1.min.js"></script>
@@ -27,8 +28,9 @@
 
     <script src="/script/homeApp.js"></script>
   </head>
-  <body keypress-events>
-    <ng-view></ng-view>
+  <body keypress-events class="d-flex flex-column">
+    <ng-include src="'partials/header.htm'"></ng-include>
+    <ng-view class="align-items-stretch h-100 w-100 overflow-auto"></ng-view>
     <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
     <script>
       kofiWidgetOverlay.draw("tdurieux", {
diff --git a/public/partials/anonymize.htm b/public/partials/anonymize.htm
index b0131f3..c586d79 100644
--- a/public/partials/anonymize.htm
+++ b/public/partials/anonymize.htm
@@ -1,6 +1,5 @@
-<div class="container-fluid main">
-  <ng-include src="'partials/header.htm'"></ng-include>
-  <div class="row center">
+<div class="container-fluid h-100">
+  <div class="row h-100">
     <div
       class="col-9 p-2 preview markdown-body"
       ng-bind-html="html_readme"
diff --git a/public/partials/claim.htm b/public/partials/claim.htm
index ae3cb30..8ff0633 100644
--- a/public/partials/claim.htm
+++ b/public/partials/claim.htm
@@ -1,6 +1,5 @@
-<div class="container-fluid main">
-  <ng-include src="'partials/header.htm'"></ng-include>
-  <div class="row center">
+<div class="container-fluid h-100">
+  <div class="row h-100">
     <div class="col shadow overflow-auto h-100 d-flex ">
       <div class="card w-50 m-auto">
         <form
diff --git a/public/partials/dashboard.htm b/public/partials/dashboard.htm
index e88280b..0feef31 100644
--- a/public/partials/dashboard.htm
+++ b/public/partials/dashboard.htm
@@ -1,6 +1,5 @@
-<div class="container-fluid main">
-  <ng-include src="'partials/header.htm'"></ng-include>
-  <div class="row center">
+<div class="container-fluid h-100">
+  <div class="row h-100">
     <div class="leftCol shadow p-1 h-100 overflow-auto">
       <h3>Filters</h3>
       <h5>Status</h5>
diff --git a/public/partials/explore.htm b/public/partials/explore.htm
index 3e382a2..b101959 100644
--- a/public/partials/explore.htm
+++ b/public/partials/explore.htm
@@ -1,10 +1,10 @@
 <div ng-if="type == 'text'" ng-model="content" ui-ace="aceOption"></div>
 <div ng-if="type == 'html'" ng-bind-html="content" class="file-content markdown-body"></div>
-<div ng-if="type == 'code'" ui-ace="aceOption" ng-model="content"></div>
+<div ng-if="type == 'code' && content != null" ui-ace="aceOption" ng-model="content"></div>
 <img ng-if="type == 'image'" class="image-content" ng-src="{{url}}"></img>
 <div class="h-100 overflow-auto" ng-if="type == 'pdf'">
   <pdfviewer class="h-100 overflow-auto" src="{{url}}" id="viewer"></pdfviewer>
 </div>
 <div ng-if="type == 'IPython'"><notebook file="url"></notebook></div>
-<div ng-if="type == 'error'" class="file-error" ng-bind="content"></div>
-<div ng-if="content == null" class="file-error">Empty file!</div>
\ No newline at end of file
+<div ng-if="type == 'error'" class="file-error container d-flex h-100"><h1 class="display-1 m-auto" ng-bind="content">Error</h1></div></div>
+<div ng-if="content == null" class="file-error container d-flex h-100"><h1 class="display-1 m-auto">Empty file!</h1></div>
\ No newline at end of file
diff --git a/public/partials/faq.htm b/public/partials/faq.htm
index ca4829d..04b782b 100644
--- a/public/partials/faq.htm
+++ b/public/partials/faq.htm
@@ -1,6 +1,5 @@
-<div class="container-fluid main">
-  <ng-include src="'partials/header.htm'"></ng-include>
-  <div class="row center">
+<div class="container-fluid h-100">
+  <div class="row h-100">
     <div class="container px-md-3 px-sm-0">
       <section
         class="accordion-section clearfix mt-3"
diff --git a/public/partials/header.htm b/public/partials/header.htm
index e969e2e..880a741 100644
--- a/public/partials/header.htm
+++ b/public/partials/header.htm
@@ -1,106 +1,99 @@
-<div class="row top navbar navbar-expand-lg navbar-dark">
-  <div class="container-fluid">
-    <div class=""><a class="navbar-brand" href="">Anonymous GitHub</a></div>
-    <div class="col">
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbar"
-        aria-controls="navbar"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbar">
-        <ul class="navbar-nav mr-auto smooth-scroll">
-          <li class="nav-item" ng-if="!user">
-            <a class="nav-link" ng-class="{'active': path == '/'}" href="/">
-              Home
-            </a>
-          </li>
-          <li class="nav-item" ng-if="user">
-            <a
-              class="nav-link"
-              ng-class="{'active': path == '/dashboard'}"
-              href="/dashboard"
-            >
-              Home
-            </a>
-          </li>
-          <li class="nav-item" ng-if="user">
-            <a
-              class="nav-link"
-              ng-class="{'active':path == '/anonymize'}"
-              href="/anonymize"
-              >Annoymize</a
-            >
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" ng-class="{'active':path == '/faq'}" href="/faq"
-              >FAQ</a
-            >
-          </li>
-          <li class="nav-item">
-            <a
-              class="nav-link"
-              target="_blank"
-              href="https://github.com/tdurieux/anonymous_github/issues/new"
-              data-offset="30"
-              >Report an issue
-            </a>
-          </li>
-          <li class="nav-item" ng-if="!user">
-            <a
-              class="nav-link"
-              target="_self"
-              href="/github/login"
-              data-offset="30"
-              >Login
-            </a>
-          </li>
-          <li class="nav-item">
-            <a
-              class="nav-link nav-icon"
-              target="_blank"
-              href="https://github.com/tdurieux/anonymous_github/"
-              data-offset="30"
-              ><i class="fa fa-github" aria-hidden="true"></i
-            ></a>
-          </li>
-          <li class="nav-item dropdown" ng-if="user">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdownMenuLink"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              <!-- <img
-                height="30"
-                class="d-inline-block align-middle"
-                src="{{user.photo}}"
-                ng-if="user.photo"
-                data-offset="30"
-              /> -->
-              {{user.username}}
-              <!-- <span ng-bind="user.username"></span> -->
-            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <!-- <a class="dropdown-item" href="/profile">My Profile</a> -->
-              <a class="dropdown-item" href="/dashboard">Projects</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="/api/user/logout" target="__self"
-                >Logout</a
-              >
-            </div>
-          </li>
-        </ul>
-        <ul class="navbar-nav"></ul>
-      </div>
-    </div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark" ng-class="{'shadow': !generalMessage}">
+  <a class="navbar-brand" href="/">Anonymous GitHub</a>
+  <button
+    class="navbar-toggler"
+    type="button"
+    data-toggle="collapse"
+    data-target="#navbarSupportedContent"
+    aria-controls="navbarSupportedContent"
+    aria-expanded="false"
+    aria-label="Toggle navigation"
+  >
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto smooth-scroll">
+      <li class="nav-item" ng-if="!user">
+        <a class="nav-link" ng-class="{'active': path == '/'}" href="/">
+          Home
+        </a>
+      </li>
+      <li class="nav-item" ng-if="user">
+        <a
+          class="nav-link"
+          ng-class="{'active': path == '/dashboard'}"
+          href="/dashboard"
+        >
+          Home
+        </a>
+      </li>
+      <li class="nav-item" ng-if="user">
+        <a
+          class="nav-link"
+          ng-class="{'active':path == '/anonymize'}"
+          href="/anonymize"
+          >Annoymize</a
+        >
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" ng-class="{'active':path == '/faq'}" href="/faq"
+          >FAQ</a
+        >
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          target="_blank"
+          href="https://github.com/tdurieux/anonymous_github/issues/new"
+          data-offset="30"
+          >Report an issue
+        </a>
+      </li>
+      <li class="nav-item" ng-if="!user">
+        <a class="nav-link" target="_self" href="/github/login" data-offset="30"
+          >Login
+        </a>
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link nav-icon"
+          target="_blank"
+          href="https://github.com/tdurieux/anonymous_github/"
+          data-offset="30"
+          ><i class="fa fa-github" aria-hidden="true"></i
+        ></a>
+      </li>
+      <li class="nav-item dropdown" ng-if="user">
+        <a
+          class="nav-link dropdown-toggle"
+          href="#"
+          id="navbarDropdownMenuLink"
+          role="button"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <!-- <img
+            height="30"
+            class="d-inline-block align-middle"
+            src="{{user.photo}}"
+            ng-if="user.photo"
+            data-offset="30"
+          /> -->
+          {{user.username}}
+          <!-- <span ng-bind="user.username"></span> -->
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+          <!-- <a class="dropdown-item" href="/profile">My Profile</a> -->
+          <a class="dropdown-item" href="/dashboard">Projects</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="/api/user/logout" target="__self"
+            >Logout</a
+          >
+        </div>
+      </li>
+    </ul>
   </div>
-</div>
+</nav>
+<div class="navbar shadow generalMessage" ng-bind-html="generalMessage" ng-if="generalMessage"></div>
\ No newline at end of file
diff --git a/public/partials/home.htm b/public/partials/home.htm
index b35a44d..deba29d 100644
--- a/public/partials/home.htm
+++ b/public/partials/home.htm
@@ -1,5 +1,4 @@
 <div class="container-fluid">
-  <ng-include src="'partials/header.htm'"></ng-include>
   <div
     id="home"
     class="row view rgba-gradient d-flex align-self-stretch justify-content-center align-items-center"
diff --git a/public/robots.txt b/public/robots.txt
index f10c467..e08917a 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,2 +1,2 @@
 User-agent: * 
-Disallow: /
\ No newline at end of file
+Disallow: /r/
\ No newline at end of file
diff --git a/public/script/exploreApp.js b/public/script/exploreApp.js
index 3cebaca..1f659b7 100644
--- a/public/script/exploreApp.js
+++ b/public/script/exploreApp.js
@@ -10,75 +10,19 @@ angular
       .when("/:path*", {
         templateUrl: "/partials/explore.htm",
         controller: "exploreController",
-        title: "Explore",
+        title: "Anonymized Repository - Anonymous GitHub",
       })
       .otherwise({
         templateUrl: "/partials/loading.htm",
-        title: "Anonymous Github",
+        title: "Loading - Anonymous GitHub",
       });
     $locationProvider.html5Mode(true);
   })
-  .factory("RecursionHelper", [
-    "$compile",
-    function($compile) {
-      return {
-        /**
-         * Manually compiles the element, fixing the recursion loop.
-         * @param element
-         * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
-         * @returns An object containing the linking functions.
-         */
-        compile: function(element, link) {
-          // Normalize the link parameter
-          if (angular.isFunction(link)) {
-            link = { post: link };
-          }
-
-          // Break the recursion loop by removing the contents
-          var contents = element.contents().remove();
-          var compiledContents;
-          return {
-            pre: link && link.pre ? link.pre : null,
-            /**
-             * Compiles and re-adds the contents
-             */
-            post: function(scope, element) {
-              // Compile the contents
-              if (!compiledContents) {
-                compiledContents = $compile(contents);
-              }
-              // Re-add the compiled contents to the element
-              compiledContents(scope, function(clone) {
-                element.append(clone);
-              });
-
-              // Call the post-linking function, if any
-              if (link && link.post) {
-                link.post.apply(null, arguments);
-              }
-            },
-          };
-        },
-      };
-    },
-  ])
   .directive("tree", [
-    "RecursionHelper",
-    function(RecursionHelper) {
+    function() {
       return {
         restrict: "E",
         scope: { file: "=", parent: "@" },
-        // template:
-        //   "<ul>" +
-        //   '<li class="file" ng-repeat="f in afiles" ng-class="{folder: isDir(f.child), active: isActive(f.name), open: opens[f.name]}">' +
-        //   "<a href='/r/{{repoId}}/{{parent}}/{{f.name}}' ng-if='!isDir(f.child)'>{{f.name}}</a>" +
-        //   "<a ng-click='openFolder(f.name)' ng-if='isDir(f.child)'>{{f.name}}</a>" +
-        //   '<tree file="f.child" parent="{{parent}}/{{f.name}}" ng-if="isDir(f.child)""></tree>' +
-        //   "</li>" +
-        //   "</ul>",
-        compile: function(element) {
-          return RecursionHelper.compile(element);
-        },
         controller: function($element, $scope, $location, $compile) {
           $scope.repoId = document.location.pathname.split("/")[2];
 
@@ -216,6 +160,55 @@ angular
       };
     },
   ])
+  .directive("loc", [
+    function() {
+      return {
+        restrict: "E",
+        scope: { stats: "=" },
+        template:
+          "<div class='lang' ng-repeat='lang in elements' title='{{lang.lang|title}}: {{lang.loc | number}} lines' data-toggle='tooltip' data-placement='bottom'  style='width:{{lang.loc*100/total}}%;background:{{lang.color}};'></div>",
+        controller: function($scope) {
+          function render() {
+            $scope.elements = [];
+            $scope.total = 0;
+            for (let lang in $scope.stats) {
+              const loc = $scope.stats[lang].code;
+              if (!loc) {
+                continue;
+              }
+              $scope.total += loc;
+              $scope.elements.push({
+                lang,
+                loc,
+                color: langColors[lang],
+              });
+            }
+            setTimeout(() => {
+              $('[data-toggle="tooltip"]').tooltip();
+            }, 100);
+          }
+
+          $scope.$watch("stats", (v) => {
+            render();
+          });
+          render();
+        },
+      };
+    },
+  ])
+  .filter("title", function() {
+    return function(str) {
+      if (!str) return str;
+
+      str = str.toLowerCase();
+      var words = str.split(" ");
+
+      var capitalized = words.map(function(word) {
+        return word.charAt(0).toUpperCase() + word.substring(1, word.length);
+      });
+      return capitalized.join(" ");
+    };
+  })
   .filter("filterObj", function() {
     return function(input, search) {
       if (!input) return input;
@@ -239,6 +232,9 @@ angular
       .split("/");
 
     $scope.$on("$routeChangeSuccess", function(event, current) {
+      if (current) {
+        $scope.title = current.title;
+      }
       $scope.paths = $location
         .path()
         .substring(1)
@@ -288,6 +284,19 @@ angular
       );
     }
     getUser();
+
+    function getMessage() {
+      $http.get("/api/message").then(
+        (res) => {
+          if (res) $scope.generalMessage = res.data;
+        },
+        () => {
+          $scope.generalMessage = null;
+        }
+      );
+    }
+    getMessage();
+
     async function getOptions(callback) {
       $http.get(`/api/repo/${$scope.repoId}/options`).then(
         (res) => {
diff --git a/public/script/homeApp.js b/public/script/homeApp.js
index 685f913..1915933 100644
--- a/public/script/homeApp.js
+++ b/public/script/homeApp.js
@@ -1,5 +1,5 @@
 angular
-  .module("anonymous-github", ["ngRoute"])
+  .module("anonymous-github", ["ngRoute", "ngSanitize"])
   .config(function($routeProvider, $locationProvider) {
     $routeProvider
       .when("/", {
@@ -10,30 +10,30 @@ angular
       .when("/dashboard", {
         templateUrl: "/partials/dashboard.htm",
         controller: "dashboardController",
-        title: "Anonymous GitHub",
+        title: "Dashboard - Anonymous GitHub",
       })
       .when("/anonymize/:repoId?", {
         templateUrl: "/partials/anonymize.htm",
         controller: "anonymizeController",
-        title: "Anonymous GitHub",
+        title: "Anonymize - Anonymous GitHub",
       })
       .when("/404", {
         templateUrl: "/partials/404.htm",
-        title: "Not Found!",
+        title: "Page not found - Anonymous GitHub",
       })
       .when("/faq", {
         templateUrl: "/partials/faq.htm",
         controller: "faqController",
-        title: "Not Found!",
+        title: "FAQ - Anonymous GitHub",
       })
       .when("/claim", {
         templateUrl: "/partials/claim.htm",
         controller: "claimController",
-        title: "Not Found!",
+        title: "Claim repository - Anonymous GitHub",
       })
       .otherwise({
         templateUrl: "/partials/404.htm",
-        title: "Not Found!",
+        title: "Page not found - Anonymous GitHub",
       });
     $locationProvider.html5Mode(true);
   })
@@ -66,6 +66,18 @@ angular
     }
     getUser();
 
+    function getMessage() {
+      $http.get("/api/message").then(
+        (res) => {
+          if (res) $scope.generalMessage = res.data;
+        },
+        () => {
+          $scope.generalMessage = null;
+        }
+      );
+    }
+    getMessage();
+
     $scope.$on("$routeChangeSuccess", function(event, current) {
       if (current) {
         $scope.title = current.title;
@@ -87,7 +99,6 @@ angular
     $scope.repoId = null;
     $scope.repoUrl = null;
     $scope.claim = () => {
-      console.log("here");
       $http
         .post("/api/repo/claim", {
           repoId: $scope.repoId,
@@ -339,7 +350,6 @@ angular
     }
     async function getDetails() {
       const o = parseGithubUrl($scope.repoUrl);
-      console.log(o, $scope.repoUrl)
       try {
         $scope.anonymize.repoUrl.$setValidity("missing", true);
         const res = await $http.get(`/api/repo/${o.owner}/${o.repo}/`);
diff --git a/public/script/langColors.js b/public/script/langColors.js
new file mode 100644
index 0000000..83874ef
--- /dev/null
+++ b/public/script/langColors.js
@@ -0,0 +1,316 @@
+window.langColors = {
+  "1c enterprise": "#814ccc",
+  "abap": "#e8274b",
+  "abap cds": "#555e25",
+  "actionscript": "#882b0f",
+  "ada": "#02f88c",
+  "agda": "#315665",
+  "ags script": "#b9d9ff",
+  "al": "#3aa2b5",
+  "alloy": "#64c800",
+  "ampl": "#e6efbb",
+  "angelscript": "#c7d7dc",
+  "antlr": "#9dc3ff",
+  "apex": "#1797c0",
+  "api blueprint": "#2acca8",
+  "apl": "#5a8164",
+  "apollo guidance computer": "#0b3d91",
+  "applescript": "#101f1f",
+  "arc": "#aa2afe",
+  "asp.net": "#9400ff",
+  "aspectj": "#a957b0",
+  "assembly": "#6e4c13",
+  "asymptote": "#ff0000",
+  "ats": "#1ac620",
+  "autohotkey": "#6594b9",
+  "autoit": "#1c3552",
+  "ballerina": "#ff5000",
+  "batchfile": "#c1f12e",
+  "beef": "#a52f4e",
+  "bison": "#6a463f",
+  "blade": "#f7523f",
+  "blitzmax": "#cd6400",
+  "boo": "#d4bec1",
+  "boogie": "#c80fa0",
+  "brainfuck": "#2f2530",
+  "browserslist": "#ffd539",
+  "c": "#555555",
+  "c#": "#178600",
+  "c++": "#f34b7d",
+  "ceylon": "#dfa535",
+  "chapel": "#8dc63f",
+  "cirru": "#ccccff",
+  "clarion": "#db901e",
+  "classic asp": "#6a40fd",
+  "clean": "#3f85af",
+  "click": "#e4e6f3",
+  "clojure": "#db5855",
+  "closure templates": "#0d948f",
+  "coffeescript": "#244776",
+  "coldfusion": "#ed2cd6",
+  "coldfusion cfc": "#ed2cd6",
+  "common lisp": "#3fb68b",
+  "common workflow language": "#b5314c",
+  "component pascal": "#b0ce4e",
+  "crystal": "#000100",
+  "cson": "#244776",
+  "css": "#563d7c",
+  "cuda": "#3a4e3a",
+  "d": "#ba595e",
+  "dafny": "#ffec25",
+  "dart": "#00b4ab",
+  "dataweave": "#003a52",
+  "dhall": "#dfafff",
+  "dm": "#447265",
+  "dockerfile": "#384d54",
+  "dogescript": "#cca760",
+  "dylan": "#6c616e",
+  "e": "#ccce35",
+  "ec": "#913960",
+  "ecl": "#8a1267",
+  "eiffel": "#4d6977",
+  "ejs": "#a91e50",
+  "elixir": "#6e4a7e",
+  "elm": "#60b5cc",
+  "emacs lisp": "#c065db",
+  "emberscript": "#fff4f3",
+  "eq": "#a78649",
+  "erlang": "#b83998",
+  "f#": "#b845fc",
+  "f*": "#572e30",
+  "factor": "#636746",
+  "fancy": "#7b9db4",
+  "fantom": "#14253c",
+  "faust": "#c37240",
+  "flux": "#88ccff",
+  "forth": "#341708",
+  "fortran": "#4d41b1",
+  "freemarker": "#0050b2",
+  "frege": "#00cafe",
+  "futhark": "#5f021f",
+  "g-code": "#d08cf2",
+  "game maker language": "#71b417",
+  "gaml": "#ffc766",
+  "gdscript": "#355570",
+  "gemfile.lock": "#701516",
+  "genie": "#fb855d",
+  "gherkin": "#5b2063",
+  "glyph": "#c1ac7f",
+  "gnuplot": "#f0a9f0",
+  "go": "#00add8",
+  "golo": "#88562a",
+  "gosu": "#82937f",
+  "grammatical framework": "#ff0000",
+  "graphql": "#e10098",
+  "groovy": "#e69f56",
+  "hack": "#878787",
+  "haml": "#ece2a9",
+  "handlebars": "#f7931e",
+  "harbour": "#0e60e3",
+  "haskell": "#5e5086",
+  "haxe": "#df7900",
+  "hiveql": "#dce200",
+  "holyc": "#ffefaf",
+  "html": "#e34c26",
+  "hy": "#7790b2",
+  "idl": "#a3522f",
+  "idris": "#b30000",
+  "igor pro": "#0000cc",
+  "imagej macro": "#99aaff",
+  "io": "#a9188d",
+  "ioke": "#078193",
+  "isabelle": "#fefe00",
+  "j": "#9eedff",
+  "java": "#b07219",
+  "javascript": "#f1e05a",
+  "jflex": "#dbca00",
+  "jolie": "#843179",
+  "jq": "#c7254e",
+  "jsoniq": "#40d47e",
+  "jsonnet": "#0064bd",
+  "julia": "#a270ba",
+  "jupyter notebook": "#da5b0b",
+  "kaitai struct": "#773b37",
+  "kotlin": "#f18e33",
+  "krl": "#28430a",
+  "lark": "#2980b9",
+  "lasso": "#999999",
+  "latte": "#f2a542",
+  "less": "#1d365d",
+  "lex": "#dbca00",
+  "lfe": "#4c3023",
+  "liquid": "#67b8de",
+  "livescript": "#499886",
+  "llvm": "#185619",
+  "lolcode": "#cc9900",
+  "lookml": "#652b81",
+  "lsl": "#3d9970",
+  "lua": "#000080",
+  "macaulay2": "#d8ffff",
+  "makefile": "#427819",
+  "markdown": "#083fa1",
+  "marko": "#42bff2",
+  "mask": "#f97732",
+  "matlab": "#e16737",
+  "max": "#c4a79c",
+  "maxscript": "#00a6a6",
+  "mcfunction": "#e22837",
+  "mercury": "#ff2b2b",
+  "meson": "#007800",
+  "metal": "#8f14e9",
+  "mirah": "#c7a938",
+  "mirc script": "#3d57c3",
+  "mlir": "#5ec8db",
+  "modula-3": "#223388",
+  "mql4": "#62a8d6",
+  "mql5": "#4a76b8",
+  "mtml": "#b7e1f4",
+  "mustache": "#724b3b",
+  "ncl": "#28431f",
+  "nearley": "#990000",
+  "nemerle": "#3d3c6e",
+  "nesc": "#94b0c7",
+  "netlinx": "#0aa0ff",
+  "netlinx+erb": "#747faa",
+  "netlogo": "#ff6375",
+  "newlisp": "#87aed7",
+  "nextflow": "#3ac486",
+  "nim": "#ffc200",
+  "nit": "#009917",
+  "nix": "#7e7eff",
+  "nu": "#c9df40",
+  "numpy": "#9c8af9",
+  "nunjucks": "#3d8137",
+  "nwscript": "#111522",
+  "objective-c": "#438eff",
+  "objective-c++": "#6866fb",
+  "objective-j": "#ff0c5a",
+  "objectscript": "#424893",
+  "ocaml": "#3be133",
+  "odin": "#60affe",
+  "omgrofl": "#cabbff",
+  "ooc": "#b0b77e",
+  "opal": "#f7ede0",
+  "openqasm": "#aa70ff",
+  "org": "#77aa99",
+  "oxygene": "#cdd0e3",
+  "oz": "#fab738",
+  "p4": "#7055b5",
+  "pan": "#cc0000",
+  "papyrus": "#6600cc",
+  "parrot": "#f3ca0a",
+  "pascal": "#e3f171",
+  "pawn": "#dbb284",
+  "pep8": "#c76f5b",
+  "perl": "#0298c3",
+  "php": "#4f5d95",
+  "piglatin": "#fcd7de",
+  "pike": "#005390",
+  "plsql": "#dad8d8",
+  "pogoscript": "#d80074",
+  "postscript": "#da291c",
+  "powerbuilder": "#8f0f8d",
+  "powershell": "#012456",
+  "prisma": "#0c344b",
+  "processing": "#0096d8",
+  "prolog": "#74283c",
+  "propeller spin": "#7fa2a7",
+  "pug": "#a86454",
+  "puppet": "#302b6d",
+  "purebasic": "#5a6986",
+  "purescript": "#1d222d",
+  "python": "#3572a5",
+  "q": "#0040cd",
+  "q#": "#fed659",
+  "qml": "#44a51c",
+  "qt script": "#00b841",
+  "quake": "#882233",
+  "r": "#198ce7",
+  "racket": "#3c5caa",
+  "ragel": "#9d5200",
+  "raku": "#0000fb",
+  "raml": "#77d9fb",
+  "rascal": "#fffaa0",
+  "reason": "#ff5847",
+  "rebol": "#358a5b",
+  "record jar": "#0673ba",
+  "red": "#f50000",
+  "ren'py": "#ff7f7f",
+  "rescript": "#ed5051",
+  "ring": "#2d54cb",
+  "riot": "#a71e49",
+  "roff": "#ecdebe",
+  "rouge": "#cc0088",
+  "ruby": "#701516",
+  "runoff": "#665a4e",
+  "rust": "#dea584",
+  "saltstack": "#646464",
+  "sas": "#b34936",
+  "sass": "#a53b70",
+  "scala": "#c22d40",
+  "scaml": "#bd181a",
+  "scheme": "#1e4aec",
+  "scss": "#c6538c",
+  "sed": "#64b970",
+  "self": "#0579aa",
+  "shell": "#89e051",
+  "shen": "#120f14",
+  "slash": "#007eff",
+  "slice": "#003fa2",
+  "slim": "#2b2b2b",
+  "smalltalk": "#596706",
+  "smpl": "#c94949",
+  "solidity": "#aa6746",
+  "sourcepawn": "#f69e1d",
+  "sqf": "#3f3f3f",
+  "squirrel": "#800000",
+  "srecode template": "#348a34",
+  "stan": "#b2011d",
+  "standard ml": "#dc566d",
+  "starlark": "#76d275",
+  "stylus": "#ff6347",
+  "supercollider": "#46390b",
+  "svelte": "#ff3e00",
+  "svg": "#ff9900",
+  "swift": "#ffac45",
+  "systemverilog": "#dae1c2",
+  "tcl": "#e4cc98",
+  "terra": "#00004c",
+  "tex": "#3d6117",
+  "ti program": "#a0aa87",
+  "turing": "#cf142b",
+  "twig": "#c1d026",
+  "typescript": "#2b7489",
+  "unified parallel c": "#4e3617",
+  "uno": "#9933cc",
+  "unrealscript": "#a54c4d",
+  "v": "#4f87c4",
+  "vala": "#fbe5cd",
+  "vba": "#867db1",
+  "vbscript": "#15dcdc",
+  "vcl": "#148aa8",
+  "verilog": "#b2b7f8",
+  "vhdl": "#adb2cb",
+  "vim script": "#199f4b",
+  "visual basic .net": "#945db7",
+  "volt": "#1f1f1f",
+  "vue": "#2c3e50",
+  "wdl": "#42f1f4",
+  "webassembly": "#04133b",
+  "wisp": "#7582d1",
+  "wollok": "#a23738",
+  "x10": "#4b6bef",
+  "xbase": "#403a40",
+  "xc": "#99da07",
+  "xquery": "#5232e7",
+  "xslt": "#eb8ceb",
+  "yacc": "#4b6c4b",
+  "yaml": "#cb171e",
+  "yara": "#220000",
+  "yasnippet": "#32ab90",
+  "zap": "#0d665e",
+  "zenscript": "#00bcd1",
+  "zephir": "#118f9e",
+  "zig": "#ec915c",
+  "zil": "#dc75e5",
+}
\ No newline at end of file