feat: add several contact types (close #69)(#72)

Author: billyyyyy3320

components/Footer.vue

@@ -28,6 +28,7 @@
 <script>
 import {
   CodepenIcon,
+  CodesandboxIcon,
   FacebookIcon,
   GithubIcon,
   GitlabIcon,
@@ -36,13 +37,17 @@ import {
   LinkedinIcon,
   MailIcon,
   MessageSquareIcon,
+  MusicIcon,
   PhoneIcon,
   TwitterIcon,
+  VideoIcon,
+  YoutubeIcon,
 } from 'vue-feather-icons'
 
 export default {
   components: {
     CodepenIcon,
+    CodesandboxIcon,
     FacebookIcon,
     GithubIcon,
     GitlabIcon,
@@ -51,8 +56,11 @@ export default {
     LinkedinIcon,
     MailIcon,
     MessageSquareIcon,
+    MusicIcon,
     PhoneIcon,
     TwitterIcon,
+    VideoIcon,
+    YoutubeIcon,
   },
 
   computed: {
@@ -80,6 +88,10 @@ export default {
   methods: {
     getIconComponentName(contactType) {
       switch (contactType) {
+        case 'codepen':
+          return 'CodepenIcon'
+        case 'codesandbox':
+          return 'CodesandboxIcon'
         case 'facebook':
           return 'FacebookIcon'
         case 'github':
@@ -94,14 +106,18 @@ export default {
           return 'MailIcon'
         case 'messenger':
           return 'MessageSquareIcon'
+        case 'music':
+          return 'MusicIcon'
         case 'phone':
           return 'PhoneIcon'
         case 'twitter':
           return 'TwitterIcon'
+        case 'video':
+          return 'VideoIcon'
         case 'web':
           return 'GlobeIcon'
-        case 'codepen':
-          return 'CodepenIcon'
+        case 'youtube':
+          return 'YoutubeIcon'
         default:
           return ''
       }

docs/config/README.md

@@ -79,17 +79,21 @@ module.exports = {
 
 For now `ContactType` supports following enums:
 
+- codepen
+- codesandbox
 - facebook
 - github
 - gitlab
 - instagram
 - linkedin
 - mail
 - messenger
+- music
 - phone
 - twitter
+- video
 - web
-- codepen
+- youtube
 
 ::: tip
 Welcome contribution of adding more built-in contact type.

example/.vuepress/config.js

@@ -35,47 +35,63 @@ module.exports = {
       contact: [
         {
           type: 'codepen',
-          link: '#',
+          link: '/',
+        },
+        {
+          type: 'codesandbox',
+          link: '/',
         },
         {
           type: 'facebook',
-          link: '#',
+          link: '/',
         },
         {
           type: 'github',
-          link: 'https://github.com/ulivz',
+          link: 'https://github.com/vuepressjs/vuepress-theme-blog',
         },
         {
           type: 'gitlab',
-          link: '#',
+          link: '/',
         },
         {
           type: 'instagram',
-          link: '#',
+          link: '/',
         },
         {
           type: 'linkedin',
-          link: '#',
+          link: '/',
         },
         {
           type: 'mail',
-          link: '#',
+          link: '/',
         },
         {
           type: 'messenger',
-          link: '#',
+          link: '/',
+        },
+        {
+          type:'music',
+          link:'/'
         },
         {
           type: 'phone',
-          link: '#',
+          link: '/',
         },
         {
           type: 'twitter',
-          link: 'https://twitter.com/_ulivz',
+          link: 'https://twitter.com/vuepressjs',
+        },
+        {
+          type:'video',
+          link:'/'
         },
         {
           type: 'web',
-          link: '#',
+          link: '/',
+        },
+        {
+          type: 'youtube',
+          link: '/'
         }
       ],
       copyright: [