├── GithubProfile.vue
├── README.md
└── package.json


/GithubProfile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="widget-user-github" v-bind:style="{ width: width }">
  3 |         <header>
  4 |             <a :href="dataUser.url">
  5 |                 <img id="user-image" :src="dataUser.avatar_url" alt="">
  6 |             </a>
  7 |             <div id="about-user">
  8 |                 <strong id="user-name">{{ dataUser.name }}</strong>
  9 |                 <span id="user-desc">{{ dataUser.bio }}</span>
 10 |             </div>
 11 |         </header>
 12 |         <ul >
 13 |             <li v-for="repo in repos">
 14 |                 <a :href="repo.html_url" target="__blank">
 15 |                     {{ repo.name }}
 16 |                 </a>
 17 |                 <span id="box-star">
 18 |                     <span class="star-number">
 19 |                         {{ repo.stargazers_count }}
 20 |                     </span>
 21 |                     <svg aria-hidden="true" class="star" height="16" version="1.1" viewBox="0 0 14 16" width="14">
 22 |                         <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path>
 23 |                     </svg>
 24 |                 </span>
 25 |             </li>
 26 |         </ul>
 27 |     </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |     import axios from 'axios'
 32 |     
 33 |     const api = axios.create({
 34 |         baseURL: 'https://api.github.com/users'
 35 |     });
 36 |     
 37 |     export default {
 38 |         props: ["width", 'user'],
 39 |         data(){
 40 |             return{
 41 |                 dataUser: {},
 42 |                 repos: {},
 43 |             }
 44 |         },
 45 |         mounted(){
 46 |             this.getUser(this.user)
 47 |             this.getRepos(this.user)
 48 |         },
 49 |         methods: {
 50 |             getUser(user){
 51 |                 api.get(`/${user}`)
 52 |                 .then((response) => {
 53 |                     this.dataUser = response.data;
 54 |                 })
 55 |                 .catch((error) => {
 56 |                     console.log(error);
 57 |                 });
 58 |             },
 59 |             getRepos(user){
 60 |                 api.get(`/${user}/repos`)
 61 |                 .then((response) => {
 62 |                     this.repos = response.data;
 63 |                 })
 64 |                 .catch((error) => {
 65 |                     console.log(error);
 66 |                 });
 67 |             }
 68 |         }
 69 |     }
 70 | </script>
 71 | <style>
 72 |     #widget-user-github{
 73 |         min-width: 15em;
 74 |         min-height: 20em;
 75 |         background-color: #353535;
 76 |         overflow: auto;
 77 |         margin: 0;
 78 |         max-height: 33em;
 79 |         box-shadow: 0 18px 35px rgba(50,50,93,.1), 0 8px 15px rgba(0,0,0,.07);
 80 |     }
 81 |     #widget-user-github header{
 82 |         clear: both;
 83 |         align-items: center;
 84 |         padding: 10px 0px 10px 0px;
 85 |         justify-content: center;
 86 |     }    
 87 |     #about-user{
 88 |         display: flex;
 89 |         padding: 10px 0px 0px;
 90 |         flex-wrap: wrap;
 91 |         color: white;
 92 |     }
 93 |     #user-image{
 94 |         width: 5em;
 95 |         height: 5em;
 96 |         border-radius: 100px;
 97 |     }
 98 |     #user-image:hover{
 99 |         transition: 0.3s;
100 |         transform: translateY(-3px);
101 |         box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
102 |         transition-timing-function: ease-in;
103 |     }
104 |     #user-name{
105 |         flex-basis: 100%;
106 |         color: #42b983;
107 |     }
108 |     #user-desc{
109 |         font-size: 10px;
110 |         flex-basis: 100%;
111 |         color: #b9c1be;
112 |         font-size: 12px;
113 |     }
114 |     ul{
115 |         background-color: #232323;
116 |         margin: 0;
117 |         padding: 15px;
118 |     }
119 |     #widget-user-github li{
120 |         display: block;
121 |         font-size: 14px;
122 |         text-align: left;
123 |         padding: 7px 10px;
124 |         border-bottom: 1px solid #42b983;
125 |     }
126 |     #widget-user-github li:last-child{
127 |         border-bottom: none;
128 |     }
129 |     #widget-user-github li a{
130 |         text-decoration: none;
131 |         color: #e0e0e0;
132 |     }
133 |     #box-star{
134 |         float: right;
135 |         color: white;
136 |     }
137 |     .star{
138 |         fill: white;
139 |         vertical-align: top;
140 |         margin-top: -1px;
141 |     }
142 |     .star-number{
143 |         margin-top:-2px;
144 |     }
145 |     body ::-webkit-scrollbar-track {
146 |         background-color: #F5F5F5;
147 |     }
148 | 
149 |     body ::-webkit-scrollbar{
150 |         width: 7px;
151 |         background-color: #F5F5F5;
152 |     }
153 | 
154 |     body ::-webkit-scrollbar-thumb{
155 |         background-color: #555;
156 |     }
157 | </style>
158 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-github-profile
 2 | A vue component to view the profile and repos of determined user
 3 | 
 4 | <img src="http://i.imgur.com/Dj7gfFd.png" alt="Demonstração economist">
 5 | 
 6 | ## Instalation
 7 | ```sh
 8 | $ npm install --save vue-github-profile
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | ```HTML
14 | <GithubProfile width="width" user="github-user"></GithubProfile>
15 | ```
16 | 
17 | ```javascript
18 | <script>
19 | import GithubProfile from 'vue-github-profile'
20 | 
21 | export default {
22 |   name: 'app',
23 |   data () {
24 |     return {
25 |     }
26 |   },
27 |   components: {
28 |     GithubProfile
29 |   }
30 | }
31 | </script>
32 | ```
33 | 
34 | ## Example
35 | 
36 | ```HTML
37 | <GithubProfile width="20em" user="gabrielbibiano"></GithubProfile>
38 | ```
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-github-profile",
 3 |   "version": "1.0.3",
 4 |   "description": "A vue component to view the profile and repos of determined user",
 5 |   "main": "GithubProfile.vue",
 6 |   "scripts": {
 7 |     "test": ""
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/GabrielBibiano/vue-github-profile.git"
12 |   },
13 |   "keywords": [
14 |     "VueJs",
15 |     "github",
16 |     "profile",
17 |     "user",
18 |     "repositories",
19 |     "vue"
20 |   ],
21 |   "author": "Gabriel Bibiano",
22 |   "license": "ISC",
23 |   "dependencies": {
24 |     "axios": "^0.16.2"    
25 |   },
26 |   "bugs": {
27 |     "url": "https://github.com/GabrielBibiano/vue-github-profile/issues"
28 |   },
29 |   "homepage": "https://github.com/GabrielBibiano/vue-github-profile#readme"
30 | }
31 | 


--------------------------------------------------------------------------------