feat: add several contact types

* chore: remove extraneous whitespace from Footer

* chore: remove commented-out style in Footer

* chore: add facebook contact to example

* chore: sort footer icon components

* feat: add gitlab, others to footer contact icons

Author: thesmiley1

components/Footer.vue

@@ -10,7 +10,7 @@
         </li>
       </ul>
     </div>
-    
+
     <div class="footer-right-wrap">
       <ul class="copyright" v-if="copyright">
         <li class="copyright-item" v-for="item in copyright">
@@ -23,41 +23,61 @@
 
 <script>
   import {
-    GithubIcon,
     FacebookIcon,
-    TwitterIcon,
+    GithubIcon,
+    GitlabIcon,
+    GlobeIcon,
     InstagramIcon,
-    LinkedinIcon
+    LinkedinIcon,
+    MailIcon,
+    MessageSquareIcon,
+    PhoneIcon,
+    TwitterIcon
   } from 'vue-feather-icons'
-  
+
   export default {
     components: {
-      GithubIcon,
       FacebookIcon,
-      TwitterIcon,
+      GithubIcon,
+      GitlabIcon,
+      GlobeIcon,
       InstagramIcon,
-      LinkedinIcon
+      LinkedinIcon,
+      MailIcon,
+      MessageSquareIcon,
+      PhoneIcon,
+      TwitterIcon
     },
-    
+
     methods: {
       getIconComponentName(contactType) {
         switch (contactType) {
-          case 'github':
-            return 'GithubIcon'
           case 'facebook':
             return 'FacebookIcon'
-          case 'twitter':
-            return 'TwitterIcon'
+          case 'github':
+            return 'GithubIcon'
+          case 'gitlab':
+            return 'GitlabIcon'
           case 'instagram':
             return 'InstagramIcon'
           case 'linkedin':
             return 'LinkedinIcon'
+          case 'mail':
+            return 'MailIcon'
+          case 'messenger':
+            return 'MessageSquareIcon'
+          case 'phone':
+            return 'PhoneIcon'
+          case 'twitter':
+            return 'TwitterIcon'
+          case 'web':
+            return 'GlobeIcon'
           default:
             return ''
         }
       },
     },
-    
+
     computed: {
       contact() {
         return (
@@ -71,7 +91,7 @@
           })
           .filter(({ iconComponent }) => iconComponent)
       },
-      
+
       copyright() {
         return (
           this.$themeConfig.footer && this.$themeConfig.footer.copyright || []
@@ -86,37 +106,36 @@
     list-style none
     margin 0
     padding 0
-  
+
   .footer
     height 60px
     box-sizing border-box
-    // background-color darken(#3eaf7c, 70%)
     background-color #000
     color #FFF
     display flex
     padding 15px 32px
-    
+
     .footer-left-wrap
       line-height 30px
       flex 1
       display flex
-      
+
       .contact
         display flex
-        
+
         .contact-item
           flex 1
           margin-right 10px
-          
+
           a
             font-size 12px
             color rgba(255, 255, 255, 0.45)
             text-decoration none
             transition color .3s
-            
+
             &:hover
               color #FFF
-    
+
     .footer-right-wrap
       flex 1
       display flex
@@ -125,35 +144,35 @@
 
       @media(min-width: $MQNarrow)
         justify-content flex-end
-      
+
       .copyright
         display flex
         justify-content flex-end
-        
+
         .copyright-item
           flex 0 0 auto
           padding 0 10px
           position relative
           line-height 12px
           border-right 1px solid rgba(255, 255, 255, 0.6)
-          
+
           &:last-child
             border-right none
-          
+
           a
             font-size 12px
             color rgba(255, 255, 255, 0.6)
             text-decoration none
             transition color .3s
-            
+
             &:hover
               color rgba(255, 255, 255, 0.9)
-  
+
   @media (max-width: $MQMobile)
     .footer
       height 100px
       flex-direction column
-      
+
       .footer-left-wrap
         align-items center
         justify-content center

docs/README.md

@@ -86,11 +86,16 @@ module.exports = {
 
 For now `ContactType` supports following enums:
 
-- github
 - facebook
-- twitter
+- github
+- gitlab
 - instagram
 - linkedin
+- mail
+- messenger
+- phone
+- twitter
+- web
 
 ::: tip
 Welcome contribution of adding more built-in contact type.

example/.vuepress/config.js

@@ -25,10 +25,18 @@ module.exports = {
      */
     footer: {
       contact: [
+        {
+          type: 'facebook',
+          link: '#',
+        },
         {
           type: 'github',
           link: 'https://github.com/ulivz',
         },
+        {
+          type: 'gitlab',
+          link: '#',
+        },
         {
           type: 'instagram',
           link: '#',
@@ -37,10 +45,26 @@ module.exports = {
           type: 'linkedin',
           link: '#',
         },
+        {
+          type: 'mail',
+          link: '#',
+        },
+        {
+          type: 'messenger',
+          link: '#',
+        },
+        {
+          type: 'phone',
+          link: '#',
+        },
         {
           type: 'twitter',
           link: 'https://twitter.com/_ulivz',
         },
+        {
+          type: 'web',
+          link: '#',
+        }
       ],
       copyright: [
         {