update header

Signed-off-by: liuboaibc <kukudehero@gmail.com>

assets/scss/header.scss

@@ -66,8 +66,8 @@
 
   .nav {
     height:100%;
-    margin-left: 300px;
-    margin-right: 340px;
+    margin-left: 280px;
+    margin-right: 360px;
     line-height: 93px;
 
     @media only screen and (max-width: $mobile-max-width) {
@@ -184,8 +184,11 @@
     transform: translateY(-50%);
     right: 0;
 
-    & > ul {
+    @media only screen and (max-width: $mobile-max-width) {
+      height: 21px;
+    }
 
+    & > ul {
       @media only screen and (max-width: $mobile-max-width) {
         display: flex;
         flex-wrap: wrap ;
@@ -300,6 +303,58 @@
 
     }
 
+    .github-li {
+      position: relative;
+      top: 3px;
+    }
+
+    .github-star {      
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #FFFFFF;
+      border: 1px solid #CCD3DB;
+      box-shadow: 0px 8px 16px rgba(76, 169, 134, 0.1), 0px 10px 50px rgba(76, 169, 134, 0.05);
+      border-radius: 4px;
+      overflow: hidden;
+      @media only screen and (max-width: $mobile-max-width) {
+        display: none;
+      }
+      a {
+        color: #3E464C;
+        font-size: 16px;
+        line-height: 16px;
+        &:hover {
+          color: #4CA986;
+        }
+      }
+
+      .star-btn {
+        padding: 7px 8px;
+        display: flex;
+        align-items: center;
+
+        .star-img {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          background-repeat: no-repeat;
+          background-size: contain;
+          background-image: url('/images/header/github-star.png');
+        }
+        &:hover {
+          .star-img {
+            background-image: url('/images/header/github-star-hover.png');
+          }
+        }
+      }
+
+      .social-count {
+        padding: 7px 14px;
+        border-left: 1px solid rgba(204, 211, 219, 0.5);
+      }
+    }
+
     .menu-icon {
       display: none;
       margin-left: 12px;

config/_default/config.toml

@@ -26,6 +26,8 @@ mailchimpSubscribeUrl = "https://kubesphere.us10.list-manage.com/subscribe/post?
 gcs_engine_id = "018068616810858123755%3Apb1pt8sx6ve"
 
 githubLink = "https://github.com/kubesphere/kubesphere"
+githubApiLink = "https://api.github.com/repos/kubesphere/kubesphere"
+githubStarLink = "https://github.com/kubesphere/kubesphere/stargazers"
 slackLink = "https://join.slack.com/t/kubesphere/shared_invite/enQtNTE3MDIxNzUxNzQ0LTZkNTdkYWNiYTVkMTM5ZThhODY1MjAyZmVlYWEwZmQ3ODQ1NmM1MGVkNWEzZTRhNzk0MzM5MmY4NDc3ZWVhMjE"
 facebookLink = "https://www.facebook.com/kubesphere"
 twitterLink = "https://twitter.com/KubeSphere"

layouts/partials/header.html

@@ -86,10 +86,18 @@
                             <li>{{ i18n "demo content 3" }}</li>
                         </ol>
                     </li>
-                    <li class='link-li'>
+                    <!-- <li class='link-li'>
                         <a class='link-slack' href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer"></a>
                         <a class='link-twitter' href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer"></a>
                         <a class='link-github' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
+                    </li> -->
+                    <li class="github-li">
+                        <div class="github-star">
+                            <a class="star-btn" href="{{ .Site.Params.githubLink }}" rel="noopener noreferrer" target="_blank">
+                                <span class="star-img"></span>&nbsp;<span>Star</span>
+                            </a>
+                            <a class="social-count" href="{{ .Site.Params.githubStarLink }}" rel="noopener noreferrer" target="_blank"></a>
+                        </div>
                     </li>
                     <li class="menu-icon">
                         <img src="/images/header/menu.svg" alt="">
@@ -148,6 +156,17 @@
     </div>
 </header>
 <script>
+var githubApiLink = "{{ .Site.Params.githubApiLink }}"
+
+var getStar = function() {
+    $('.social-count').hide()
+    $.getJSON(githubApiLink, function(data) {
+        $('.social-count').show().html(data.stargazers_count)
+    })
+}
+
+getStar()
+
 var bindNavMouseEvent = function(selector, element) {
     if (!element) {
         element = $(selector)