ghuser

_config.yml

@@ -42,6 +42,11 @@ sidebar:
       min_depth: 2
       max_depth: 5
       fallback: recent # Use a backup widget when toc does not exist.
+    # github user info
+    ghuser:
+      layout: ghuser
+      api: https://api.github.com
+      username: # your github login username
     # welcome
     welcome:
       layout: markdown

layout/404.ejs

@@ -2,7 +2,7 @@
 page.menu_id = '404';
 page.layout = '404';
 page.comment_title = '';
-page.header = false;
+page.header = 'auto';
 page.robots = 'none';
 %>
 <article class='md error-page'>

layout/_partial/main/header/index.ejs

@@ -1,3 +1,3 @@
-<% if (page.header != false) { %>
+<% if (page.header != 'auto' && page.header != false) { %>
   <%- partial('../../sidebar/header', {where: 'main'}) %>
 <% } %>

layout/_partial/sidebar/index.ejs

@@ -69,6 +69,8 @@ function layoutFooterDiv() {
   }
 }
 %>
+<% if (page.header == undefined || page.header == 'left' || page.header == 'auto') { %>
   <%- partial('header', {where: 'sidebar'}) %>
+<% } %>
 <%- layoutWidgets() %>
 <%- layoutFooterDiv() %>

layout/_partial/sidebar/widgets/ghuser.ejs

@@ -0,0 +1,49 @@
+<%
+var btns = [];
+btns.push({
+  key: 'followers',
+  desc: 'followers'
+});
+btns.push({
+  key: 'following',
+  desc: 'following'
+});
+btns.push({
+  key: 'public_repos',
+  desc: 'repos'
+});
+
+function layoutDiv() {
+  var el = '';
+  if (item.username == undefined || item.username.length == 0) {
+    return el;
+  }
+  
+  el += '<div class="widget-wrap" id="github-user">';
+  el += '<div class="widget-body fs14 github-info-wrap" id="ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
+    el += '<img no-lazy class="avatar" type="img" id="avatar_url" src="' + config.avatar + '">';
+    // username
+    el += '<div class="username" type="text" id="name" href="https://github.com/' + item.username + '">';
+    el += item.username;
+    el += '</div>';
+    el += '<p type="text" id="bio"></p>';
+    
+    el += '<div class="buttons">';
+      btns.forEach((btn, i) => {
+        el += '<a class="btn" href="#">';
+        el += '<span class="title" type="text" id="' + btn.key + '"></span>';
+        el += '<span class="desc">' + btn.desc + '</span>';
+        el += '</a>';
+      });
+    el += '</div>';
+    // follow
+    el += '<a class="follow" href="https://github.com/' + item.username + '">';
+    el += '<svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1rem" height="1rem" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>';
+    el += 'Follow';
+    el += '</a>';
+  el += '</div>';
+  el += '</div>';
+  return el;
+}
+%>
+<%- layoutDiv() %>

layout/post.ejs

@@ -3,7 +3,7 @@ if (page.menu_id == undefined) {
   page.menu_id = 'post';
 }
 if (page.header == undefined) {
-  page.header = false;
+  page.header = 'auto';
 }
 function layoutTitle() {
   const title = page.h1 || page.title;

layout/wiki.ejs

@@ -26,7 +26,7 @@ function layoutTitle() {
 <% } else { %>
   <%
   if (page.header == undefined) {
-    page.header = false;
+    page.header = 'auto';
   }
   %>
   <%- partial('_partial/main/navbar/breadcrumb') %>

source/css/_common/base.styl

@@ -34,8 +34,6 @@ p:not([class]), li:not([class])
       color: $color-link
       // color: darken($color-hover, 10)
       // background: alpha($color-hover, 0.08)
-      &:before 
-        opacity: 0
       &:after
         height: 100%
         opacity: 0.2

source/css/_common/button.styl

@@ -14,7 +14,7 @@ a.button
   font-size: $fs-15
   &.theme
     background: $color-theme
-    color: var(--site-bg)
+    color: var(--card)
     &:hover
       background: $color-hover
 

source/css/_layout/partial/related.styl

@@ -131,6 +131,8 @@
         text-decoration: underline
         &:hover
           color: $color-hover
+        &:after
+          display: none
   div.cmt-body
     min-height: 150px
     position: relative

source/css/_layout/sidebar/ghuser.styl

@@ -0,0 +1,71 @@
+.widget-wrap#github-user .widget-body
+  display: flex
+  flex-direction: column
+  align-items: center
+  background: var(--card)
+  border-radius: $border-card
+  padding: 1rem
+  margin: 'calc(%s + 1.25rem)' % var(--gap-p) 0
+
+.widget-wrap#github-user .widget-body .avatar
+  display: block
+  border-radius: 100%
+  max-width: 80%
+  margin-top: 1.5rem
+
+.widget-wrap#github-user .widget-body .username
+  font-weight: 900
+  font-size: $fs-h2
+  margin-top: 1.5rem
+  color: var(--text-p0)
+
+.widget-wrap#github-user .widget-body .follow 
+  font-weight: 500
+  border-radius: 64px
+  padding: 0.5rem 1rem
+  background: $color-theme
+  color: var(--card)
+  font-size: 1rem
+  align-self: stretch
+  text-align: center
+  line-height: 1.5
+  display: flex
+  align-items: center
+  justify-content: center
+  trans1: background
+  svg
+    margin-right: 4px
+  &:hover
+    background: $color-hover
+
+  
+
+.widget-wrap#github-user .widget-body .buttons
+  margin: 0.75rem 0
+  align-self: stretch
+  display: grid
+  grid-gap: 2px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
+
+.widget-wrap#github-user .widget-body .btn
+  display: flex 
+  flex-direction: column
+  align-items: center
+  color: inherit
+  border: 1px solid transparent
+  border-radius: 4px
+  padding: 0.25rem 0
+  trans1: background
+  &:hover
+    background: var(--block)
+
+
+.widget-wrap#github-user .widget-body .buttons .btn .title
+  font-size: 1rem
+  font-weight: 700
+
+
+.widget-wrap#github-user .widget-body .buttons .btn .desc
+  font-size: $fs-12
+  color: var(--text-p3)
+  font-weight: 500

source/css/_layout/sidebar/repo_info.styl

@@ -24,5 +24,8 @@
         width: 1em
         height: 1em
         margin-left: 4px
+      div 
+        display: flex 
+        align-items: center
     a:hover
       background: var(--block-hover)

source/css/_layout/tag-plugins/about.styl

@@ -1,10 +1,9 @@
 .tag-plugin.about
   background: var(--block)
   border-radius: $border-block
-  padding: 2rem
+  padding: 3rem 2rem 2rem
   .about-header
     display flex
-    flex-direction: row-reverse
     justify-content: space-between
     flex-wrap: wrap
     img

source/css/_layout/tag-plugins/common.styl

@@ -81,7 +81,7 @@ if hexo-config('style.darkmode') == 'auto'
     .tag-plugin[color='light']
       --theme-border: white
       --theme-bg: #ddd
-      color: var(--site-bg) !important
+      color: var(--card) !important
 
     .tag-plugin[color='dark']
       --theme-border: black

source/js/plugins/ghinfo.js

@@ -49,6 +49,7 @@ const GitHubInfo = {
       for (let key of Object.keys(data)) {
         $(el).find("[type=text]#" + key).text(data[key]);
         $(el).find("[type=link]#" + key).attr("href", data[key]);
+        $(el).find("[type=img]#" + key).attr("src", data[key]);
       }
     }, function() {
     });