├── .editorconfig
├── .gitignore
├── README.md
├── components
    ├── Account.vue
    ├── Footer.vue
    ├── Nav.vue
    ├── Rating.vue
    └── Repo.vue
├── jsconfig.json
├── meta.js
├── nuxt.config.js
├── package.json
├── pages
    ├── index.vue
    └── u
    │   └── _user.vue
├── static
    └── favicon.ico
└── store
    └── README.md


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Github Profile Viewer
 2 | Made with Nuxtjs and WindiCSS.
 3 | 
 4 | # Features
 5 | - See profiles repos with most of details.
 6 | - Access to profiles Twitter account and websites.
 7 | - Get basic ratings about profile (like bio etc.).
 8 | 
 9 | # Hosting
10 | You can use all package managers.
11 | 
12 | For install modules:
13 | on yarn : ```yarn```
14 | on npm: ```npm install```
15 | on pnpm: ```pnpm install```
16 | 
17 | For development server:
18 | on yarn : ```yarn dev```
19 | on npm: ```npm run dev```
20 | on pnpm: ```pnpm  dev```
21 | 
22 | # Thanks to 
23 | [NuxtJS](https://nuxtjs.org) and [Windi CSS](https://windicss.org) for awesome libaries and tools.
24 | 
25 | [Arda Soyturk's Twitter Profile Viewer](https://github.com/ardasoyturk/twitter-profile-viewer)
26 | [Eggsy's Lanyard Visualizer](https://github.com/eggsy/lanyard-visualizer)
27 | Because they're insipired me to make tools like this.
28 | 


--------------------------------------------------------------------------------
/components/Account.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="px-2 text-gray-50 py-4 bg-gray-800 rounded-xl">
 3 |     <img :src="data.avatar_url" class="rounded-full mb-2" :alt="data.login" />
 4 |     <div class="flex flex-col space-y-2 justify-center mx-4">
 5 |       <h1 class="text-xl font-bold">{{ data.login }}</h1>
 6 |       <p class="w-64">{{ data.bio }}</p>
 7 |       <div class="py-1 px-2 bg-gray-700 w-max rounded-md">{{ getLocation }}</div>
 8 |       <div class="flex space-x-3">
 9 |         <div class="py-1 px-2 bg-gray-700 w-max rounded-md">Followers: {{ data.followers }}</div>
10 |         <div class="py-1 px-2 bg-gray-700 w-max rounded-md">Following: {{ data.following }}</div>
11 |       </div>
12 |       <div class="flex justify-center bg-red-800 rounded-md p-4 font-bold" v-if="getTwitter">
13 |         <svg
14 |           xmlns="http://www.w3.org/2000/svg"
15 |           width="24"
16 |           height="24"
17 |           class="mr-2"
18 |           viewBox="0 0 24 24"
19 |           fill="#1DA1F2"
20 |         >
21 |           <path
22 |             d="M24 4.37a9.6 9.6 0 0 1-2.83.8 5.04 5.04 0 0 0 2.17-2.8c-.95.58-2 1-3.13 1.22A4.86 4.86 0 0 0 16.61 2a4.99 4.99 0 0 0-4.79 6.2A13.87 13.87 0 0 1 1.67 2.92 5.12 5.12 0 0 0 3.2 9.67a4.82 4.82 0 0 1-2.23-.64v.07c0 2.44 1.7 4.48 3.95 4.95a4.84 4.84 0 0 1-2.22.08c.63 2.01 2.45 3.47 4.6 3.51A9.72 9.72 0 0 1 0 19.74 13.68 13.68 0 0 0 7.55 22c9.06 0 14-7.7 14-14.37v-.65c.96-.71 1.79-1.6 2.45-2.61z"
23 |           />
24 |         </svg>
25 |         <a :href="`https://twitter.com/${data.twitter_username}`" target="_blank" rel="noopener noreferrer">{{data.twitter_username}}</a>
26 |       </div>
27 |       <a
28 |         v-if="data.blog"
29 |         target="_blank"
30 |         rel="noopener noreferrer"
31 |         class="flex items-center justify-center font-bold p-4 bg-red-800 rounded-md"
32 |         :href="getWebsite"
33 |         title="See user's website"
34 |       >
35 |         <img
36 |           :src="`https://s2.googleusercontent.com/s2/favicons?domain=${getWebsite}`"
37 |           class="w-5 h-5 rounded-md mr-2"
38 |         />
39 |         {{ getWebsite }}
40 |       </a>
41 |     </div>
42 |     <Rating :data="data" class="m-4" />
43 |   </div>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 |   props: {
49 |     data: {
50 |       type: Object,
51 |       required: true,
52 |       default: () => { },
53 |     },
54 |   },
55 |   computed: {
56 |     getLocation() {
57 |       if (this.data.location === null) {
58 |         return "Anywhere in the Universe"
59 |       }
60 |       else {
61 |         return this.data.location
62 |       }
63 |     },
64 |     getTwitter() {
65 |       if (this.data.twitter_username === null) {
66 |         return false;
67 |       }
68 |       else {
69 |         return true;
70 |       }
71 |     },
72 |     getWebsite() {
73 |       if (this.data.blog.includes("https://")) {
74 |         return this.data.blog
75 |       }
76 |       else if (this.data.blog.includes("www.")) {
77 |         return `https://${this.data.blog}`
78 |       }
79 |       else {
80 |         return `https://${this.data.blog}`
81 |       }
82 |     },
83 |   },
84 | }
85 | </script>
86 | 
87 | <style>
88 | @media screen and (max-device-width: 950px) {
89 |   .card {
90 |     @apply block;
91 |   }
92 | }
93 | .ratings {
94 |   @apply font-bold text-lg;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-4 bg-gray-800 w-full text-gray-50 flex justify-center">
 3 |     <div class="w-8/12 flex justify-center">
 4 |       <a
 5 |         href="https://mehmetali345.xyz"
 6 |         title="Developer"
 7 |         class="hover:(transition ease-in-out duration-300 text-red-600) text-lg text-center md:text-xl font-bold"
 8 |       >Made by Mehmetali345Dev with Love</a>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 | 
16 | }
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-4 bg-gray-800 w-full text-gray-50 flex justify-center">
 3 |     <div class="w-8/12 flex items-center space-x-3 flex-wrap justify-center">
 4 |       <a
 5 |         href="https://github.com/mehmetali345dev/github-profile-viewer"
 6 |         title="Developer"
 7 |         class="hover:(transition ease-in-out duration-300 text-red-600) md:text-xl text-lg font-bold"
 8 |       >Github Profile Viewer</a>
 9 |       <nuxt-link to="/" class="bg-gray-700 p-2 rounded-md font-bold" v-if="$route.params.user">Go back</nuxt-link>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 | 
17 | }
18 | </script>
19 | 
20 | <style>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/components/Rating.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <details>
 3 |     <summary class="font-bold text-xl">
 4 |       Basic Rating
 5 |     </summary>
 6 |     <div class="grid w-64 items-center space-y-2">
 7 |       <h1 class="ratings bg-red-800 rounded-md p-2">Total: {{ rateUser().total }}</h1>
 8 | 
 9 |       <div>
10 |         <h1 class="ratings">Twitter: {{ rateUser().twitterp }}</h1>
11 |         <p>If you have a Twitter link in your Github account you will receive a 10 points.</p>
12 |       </div>
13 |       <div>
14 |         <h1 class="ratings">Bio: {{ rateUser().biop }}</h1>
15 |         <p>If your bio is longer than 100 characters you will receive a 50 points.</p>
16 |       </div>
17 |       <div>
18 |         <h1 class="ratings">Website: {{ rateUser().websitep }}</h1>
19 |         <p>If you have a website link in your Github account you will receive a 40 points.</p>
20 |       </div>
21 |     </div>
22 |   </details>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   props: {
28 |     data: {
29 |       type: Object,
30 |       required: true,
31 |       default: () => { },
32 |     },
33 |   },
34 |   methods: {
35 |     rateUser() {
36 |       var twitterp = 10
37 |       var biop = 50
38 |       var websitep = 40
39 |       if (this.data.bio.length < 100) {
40 |         biop = -50
41 |       }
42 |       if (this.data.twitter_username === null) {
43 |         twitterp = -10
44 |       }
45 |       if (this.data.blog === null) {
46 |         websitep = -40
47 |       }
48 |       var total = biop + websitep + twitterp
49 | 
50 |       return {
51 |         total,
52 |         biop,
53 |         websitep,
54 |         twitterp,
55 |       }
56 |     }
57 |   }
58 | }
59 | </script>
60 | 
61 | <style>
62 | </style>
63 | 


--------------------------------------------------------------------------------
/components/Repo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a :href="data.html_url" target="_blank" :title="data.description" rel="noopener noreferrer">
 3 |     <div class="grid p-4 bg-gray-800 shadow shadow-md shadow-gray-400 h-full rounded-md">
 4 |       <div class="flex justify-between">
 5 |         <div class="grid">
 6 |           <h1 class="font-bold text-lg">{{ data.name }}</h1>
 7 |           <p>{{ data.description }}</p>
 8 |         </div>
 9 |         <div class="flex space-x-1">
10 |           <h1>{{ data.stargazers_count }}</h1>
11 |           <svg
12 |             class="w-6 h-6 fill-current text-yellow-500"
13 |             xmlns="http://www.w3.org/2000/svg"
14 |             viewBox="0 0 20 20"
15 |             fill="currentColor"
16 |           >
17 |             <path
18 |               d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
19 |             />
20 |           </svg>
21 |           <h1>{{ data.language }}</h1>
22 |         </div>
23 |       </div>
24 |       <div class="md:flex items-center space-x-2 mt-1">
25 |         <h1 class="flex items-end">
26 |           <svg
27 |             height="490pt"
28 |             viewBox="0 -35 490.91 490"
29 |             width="490pt"
30 |             class="w-6 h-6 mr-2 fill-current text-gray-50"
31 |             fill="currentColor"
32 |             xmlns="http://www.w3.org/2000/svg"
33 |           >
34 |             <path
35 |               d="m483.621094 253.070312-55.996094-119.9375 24.171875 6.933594c5.308594 1.523438 10.847656-1.542968 12.367187-6.855468 1.523438-5.308594-1.542968-10.84375-6.851562-12.367188l-168.070312-48.230469c.035156-.71875.054687-1.4375.054687-2.160156.003906-19.957031-13.46875-37.398437-32.78125-42.425781-19.3125-5.03125-39.582031 3.621094-49.3125 21.042968l-168.085937-48.226562c-5.308594-1.523438-10.847657 1.546875-12.371094 6.855469-1.519532 5.308593 1.546875 10.84375 6.855468 12.367187l33.171876 9.519532-60.074219 128.671874c-4.007813 1.402344-6.69531275 5.183594-6.699219 9.433594-.0117188 32.464844 19.554688 61.730469 49.558594 74.125 30.003906 12.398438 64.523437 5.476563 87.429687-17.527344 15.261719-14.878906 23.882813-35.28125 23.921875-56.597656 0-4.476562-2.980468-8.40625-7.289062-9.621094l-55.832032-119.582031 103.882813 29.804688c-.035156.71875-.054687 1.4375-.054687 2.164062.03125 20.347657 14.035156 38.007813 33.839843 42.671875v198.082032h-27.601562c-22.054688 0-40.398438 17.699218-40.398438 39.757812v5.804688c-18.558593 3.90625-31.882812 20.226562-32 39.195312v14c.167969 5.644531 4.75 10.160156 10.398438 10.242188h199.203125c5.648437-.082032 10.230468-4.597657 10.398437-10.242188v-14c-.117187-18.96875-13.441406-35.289062-32-39.195312v-5.804688c0-22.058594-18.347656-39.757812-40.398437-39.757812h-27.601563v-198.082032c11.984375-2.832031 22.230469-10.558594 28.253907-21.296875l113.1875 32.480469-60.199219 128.945312c-4.011719 1.402344-6.699219 5.183594-6.703125 9.429688-.007813 32.464844 19.558594 61.730469 49.5625 74.125 30.003906 12.398438 64.519531 5.480469 87.425781-17.523438 15.261719-14.882812 23.886719-35.285156 23.925781-56.601562-.003906-4.476562-2.980468-8.402344-7.289062-9.617188zm-403.417969-205.457031 51.167969 109.597657h-102.332032zm0 179.796875c-29.453125.171875-54.644531-21.125-59.371094-50.199218h119.199219c-5.089844 29.050781-30.332031 50.234374-59.828125 50.199218zm255.253906 168.558594v4.242188h-180v-4.242188c0-11.027344 9.375-19.757812 20.398438-19.757812h139.203125c11.023437 0 20.398437 8.730468 20.398437 19.757812zm-32-45v5.242188h-116v-5.242188c0-11.027344 9.375-19.757812 20.398438-19.757812h75.203125c11.023437 0 20.398437 8.730468 20.398437 19.757812zm-58-256.675781c-10.167969.007812-19.222656-6.429688-22.554687-16.035157-3.332032-9.605468-.210938-20.265624 7.773437-26.558593 7.988281-6.292969 19.085938-6.832031 27.644531-1.339844 8.558594 5.488281 12.695313 15.796875 10.308594 25.679687-.253906.632813-.441406 1.285157-.5625 1.953126-3.253906 9.726562-12.355468 16.289062-22.609375 16.300781zm215.914063 157.917969h-102.332032l51.164063-109.597657zm-51.167969 70.199218c-29.453125.171875-54.644531-21.125-59.371094-50.199218h119.199219c-5.089844 29.050781-30.332031 50.234374-59.828125 50.199218zm0 0"
36 |             />
37 |           </svg>
38 |           {{ getLicense }}
39 |         </h1>
40 |         <h1 v-if="data.fork" class="text-sm font-bold">Forked</h1>
41 |       </div>
42 |     </div>
43 |   </a>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 |   props: {
49 |     data: {
50 |       type: Object,
51 |       required: true,
52 |       default: () => { },
53 |     },
54 |   },
55 |   computed: {
56 |     getLicense() {
57 |       if (this.data.license === null) {
58 |         return "None"
59 |       }
60 |       else {
61 |         return this.data.license.name;
62 |       }
63 |     }
64 |   }
65 | }
66 | </script>
67 | 
68 | <style>
69 | </style>
70 | 
71 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/meta.js:
--------------------------------------------------------------------------------
 1 | const description =
 2 |   "See short information about github users."
 3 | 
 4 | export default {
 5 |   title: "Github Profile Viewer",
 6 |   meta: [
 7 |     { charset: "utf-8" },
 8 |     { name: "viewport", content: "width=device-width, initial-scale=1" },
 9 |     {
10 |       hid: "description",
11 |       name: "description",
12 |       content: description,
13 |     },
14 |     /* Twitter */
15 |     {
16 |       hid: "twitter:card",
17 |       name: "twitter:card",
18 |       content: "summary",
19 |     },
20 |     {
21 |       hid: "twitter:site",
22 |       name: "twitter:site",
23 |       content: "@AnakinS07677978",
24 |     },
25 |     {
26 |       hid: "twitter:creator",
27 |       name: "twitter:creator",
28 |       content: "@AnakinS07677978",
29 |     },
30 |     {
31 |       hid: "twitter:title",
32 |       name: "twitter:title",
33 |       content: "github-profile-viewer-six.vercel.app",
34 |     },
35 |     {
36 |       hid: "twitter:description",
37 |       name: "twitter:description",
38 |       content: description,
39 |     },
40 |     {
41 |       hid: "twitter:image",
42 |       name: "twitter:image",
43 |       content: "/icon.png",
44 |     },
45 |     /* Open-Graph */
46 |     {
47 |       hid: "og:title",
48 |       name:"og:title",
49 |       content:"Github Profile Viewer",
50 |     },
51 |     {
52 |       hid: "og:type",
53 |       name: "og:type",
54 |       content: "website",
55 |     },
56 |     {
57 |       hid: "og:site_name",
58 |       name: "og:site_name",
59 |       content: "github-profile-viewer-six.vercel.app",
60 |     },
61 |     {
62 |       hid: "og:description",
63 |       name: "og:description",
64 |       content: description,
65 |     },
66 |     {
67 |       hid: "og:image",
68 |       name: "og:image",
69 |       content: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
70 |     },
71 |     /* Others */
72 |     {
73 |       hid: "theme-color",
74 |       name: "theme-color",
75 |       content: "#991b1b",
76 |     },
77 |   ].map((i) => {
78 |     if (i.name && !i.property) i.property = i.name
79 |     return i
80 |   }),
81 |   link: [
82 |     {
83 |       rel: "icon",
84 |       type: "image/x-icon",
85 |       href: "/favicon.ico",
86 |     },
87 |   ],
88 | }
89 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import head from './meta.js'
 2 | 
 3 | export default {
 4 |   // Target: https://go.nuxtjs.dev/config-target
 5 |   target: 'static',
 6 | 
 7 |   // Global page headers: https://go.nuxtjs.dev/config-head
 8 |   head,
 9 | 
10 |   // Global CSS: https://go.nuxtjs.dev/config-css
11 |   css: [
12 |   ],
13 | 
14 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
15 |   plugins: [
16 |   ],
17 | 
18 |   // Auto import components: https://go.nuxtjs.dev/config-components
19 |   components: true,
20 | 
21 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
22 |   buildModules: [
23 |     'nuxt-windicss',
24 |   ],
25 | 
26 |   // Modules: https://go.nuxtjs.dev/config-modules
27 |   modules: [
28 |     // https://go.nuxtjs.dev/axios
29 |     '@nuxtjs/axios',
30 |   ],
31 | 
32 |   // Axios module configuration: https://go.nuxtjs.dev/config-axios
33 |   axios: {},
34 | 
35 |   // Build Configuration: https://go.nuxtjs.dev/config-build
36 |   build: {
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "github-profile-viewer",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@nuxtjs/axios": "^5.13.6",
13 |     "core-js": "^3.15.1",
14 |     "nuxt": "^2.15.7"
15 |   },
16 |   "devDependencies": {
17 |     "nuxt-windicss": "^1.1.1"
18 |   }
19 | }


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-gray-900 flex flex-col items-center h-[100vh]">
 3 |     <Nav />
 4 |     <div class="w-full h-full flex justify-center items-center">
 5 |       <div class="gap-4 grid m-4">
 6 |         <div class="justify-center flex flex-col space-y-3 items-start">
 7 |           <h1 class="text-gray-50 font-bold text-xl">Search user</h1>
 8 |           <input
 9 |             v-model="user"
10 |             placeholder="Search an user"
11 |             type="text"
12 |             class="bg-gray-800 p-4 w-full text-gray-50 rounded-md"
13 |           />
14 |           <nuxt-link
15 |             :to="{ name: 'u-user', params: { user: user } }"
16 |             class="bg-red-600 flex justify-center p-4 rounded-md font-bold text-gray-50 w-full"
17 |           >Go!</nuxt-link>
18 |         </div>
19 |       </div>
20 |     </div>
21 |     <Footer />
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   data() {
28 |     return {
29 |       user: ""
30 |     }
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/pages/u/_user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-gray-900 text-gray-50 flex flex-col justify-between items-center min-h-[100vh]">
 3 |     <Nav />
 4 |     <div class="w-full h-full flex items-center" v-if="$fetchState.pending">Fetching...</div>
 5 |     <div
 6 |       class="w-full h-full flex items-center justify-center"
 7 |       v-else-if="data.login === undefined"
 8 |     >User not found or api blocked</div>
 9 | 
10 |     <div v-else class="w-full h-full md:flex">
11 |       <div class="m-8">
12 |         <Account :data="data" />
13 |       </div>
14 |       <div class="mt-8 mb-8 md:ml-0 ml-8 mr-8 flex-grow">
15 |         <h1 class="mb-2 text-left w-full font-bold text-xl">Repositories</h1>
16 |         <div class="grid w-full repos gap-4 md:grid-cols-2 justify-center">
17 |           <Repo v-for="(repo, index) in repos" :key="`repo${index}`" :data="repo" />
18 |         </div>
19 |       </div>
20 |     </div>
21 |     <Footer />
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   data() {
28 |     return {
29 |       data: [],
30 |       repos: []
31 |     }
32 |   },
33 |   fetchOnServer: false,
34 |   async fetch() {
35 | 
36 |     const { data: user } = await this.$axios.get(
37 |       "https://api.github.com/users/" + this.$route.params.user
38 |     );
39 |     this.data = user
40 | 
41 |     var username = this.$route.params.user
42 |     const filter = [username.toLowerCase()]
43 |     const { data: repos } = await this.$axios.get(
44 |       `https://api.github.com/users/${this.$route.params.user}/repos?per_page=100`);
45 |     this.repos = repos
46 |       ?.filter(repo => !filter.includes(repo.name))
47 |       ?.sort((a, b) => b?.stargazers_count - a?.stargazers_count);
48 |   },
49 | }
50 | </script>
51 | 
52 | <style>
53 | @media screen and (max-device-width: 950px) {
54 |   .card {
55 |     @apply block w-11/12;
56 |   }
57 |   .repos {
58 |     @apply grid-cols-1;
59 |   }
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mehmetali345Dev/github-profile-viewer/77ca3dfd374841547581e05cf5af571e5261108c/static/favicon.ico


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


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