feat(vuepress-theme-reco): add social links

ISSUES CLOSED: #252

Author: reco_luan

example/.vuepress/config.js

@@ -50,7 +50,11 @@ module.exports = {
       tag: {
         location: 3, // 在导航栏菜单中所占的位置，默认3
         text: 'Tag' // 默认 “标签”
-      }
+      },
+      socialLinks: [
+        { icon: 'reco-github', link: 'https://github.com/recoluan' },
+        { icon: 'reco-npm', link: 'https://www.npmjs.com/~reco_luan' }
+      ]
     },
     logo: '/head.png',
     authorAvatar: '/head.png',

packages/@vuepress-reco/core/src/components/RecoIcon.tsx

@@ -8,6 +8,10 @@ const RecoIconProps = Vue.extend({
     icon: {
       type: String,
       default: ''
+    },
+    link: {
+      type: String,
+      default: ''
     }
   }
 })
@@ -22,9 +26,18 @@ class RecoIcon extends RecoIconProps {
     }
     return ''
   }
+
+  go (link) {
+    if (link === '') return
+    window.open(link)
+  }
+
   render () {
     return (
-      <i class={this.getClass(this.icon)}>
+      <i {...{
+        class: this.getClass(this.icon),
+        on: { click: this.go.bind(this, this.link) }
+      }}>
         {this.$slots.default}
       </i>
     )

packages/vuepress-theme-reco/components/PersonalInfo.vue

@@ -22,15 +22,36 @@
       <h6>{{homeBlogCfg.tag}}</h6>
     </div>
   </div>
+  <ul class="social-links">
+    <li
+      class="social-item"
+      v-for="(item, index) in socialLinks"
+      :key="index"
+    >
+      <reco-icon :icon="item.icon" :link="item.link" :style="{ color: item.color }" />
+    </li>
+  </ul>
   <hr>
 </div>
 </template>
 
 <script>
+import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import { getOneColor } from '@theme/helpers/other'
+
 export default {
+  components: { RecoIcon },
   computed: {
     homeBlogCfg () {
       return this.$recoLocales.homeBlog
+    },
+    socialLinks () {
+      return this.$themeConfig.blogConfig.socialLinks.map(item => {
+        if (!item.color) {
+          item.color = getOneColor()
+        }
+        return item
+      })
     }
   }
 }
@@ -72,5 +93,26 @@ export default {
       }
     }
   }
+  .social-links {
+    box-sizing border-box
+    display flex
+    flex-wrap wrap
+    padding 10px
+    .social-item {
+      width 39px
+      height 36px
+      line-height 36px
+      text-align center
+      list-style none
+      transition transform .3s
+      &:hover {
+        transform scale(1.08)
+      }
+      .iconfont {
+        cursor pointer
+        font-size 22px
+      }
+    }
+  }
 }
 </style>