├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .npmrc
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── public
    ├── _redirects
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── global.scss
    │   └── img
    │   │   └── logo.svg
    ├── components
    │   ├── DeveloperCard.vue
    │   ├── FloatingActionButton.vue
    │   ├── HelloWorld.vue
    │   ├── InputSearch.vue
    │   ├── Languages.vue
    │   ├── Nav.vue
    │   ├── PopularLanguages.vue
    │   ├── RepositoryCard.vue
    │   ├── Statistics.vue
    │   └── SubNav.vue
    ├── composable
    │   └── useSearchDeveloper.js
    ├── config
    │   ├── composition-api.js
    │   ├── index.js
    │   └── materialize.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   ├── About.js
    │   ├── App.js
    │   ├── Developers.js
    │   ├── Repositories.js
    │   ├── index.js
    │   └── store.js
    ├── util
    │   ├── Searcher.js
    │   ├── api.js
    │   ├── colors.js
    │   └── colors.json
    └── views
    │   ├── About.vue
    │   ├── Developers.vue
    │   ├── Home.vue
    │   ├── NewRepositories.vue
    │   ├── PopularDevelopers.vue
    │   ├── PopularRepositories.vue
    │   ├── RecentlyJoinedDevelopers.vue
    │   └── Repositories.vue
└── tests
    └── unit
        └── example.spec.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | end_of_line = lf
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
 7 |   parserOptions: {
 8 |     parser: "babel-eslint"
 9 |   },
10 |   rules: {
11 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
12 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
13 |     semi: "error",
14 |     "prefer-const": "error",
15 |     "comma-dangle": "error",
16 |     "comma-spacing": "error",
17 |     "comma-style": "error",
18 |     curly: ["error", "all"],
19 |     "no-return-assign": 0,
20 |     "no-undef": 0,
21 |     indent: [2, 2, { SwitchCase: 1 }],
22 |     quotes: [
23 |       "error",
24 |       "double",
25 |       {
26 |         avoidEscape: true,
27 |         allowTemplateLiterals: true
28 |       }
29 |     ],
30 |     "space-infix-ops": "error",
31 |     "no-multi-spaces": ["error", { exceptions: { Property: false } }],
32 |     "space-before-blocks": "error",
33 |     "keyword-spacing": "error",
34 |     "space-before-function-paren": ["error", "never"],
35 |     "space-in-parens": "error",
36 |     "object-curly-spacing": ["error", "always"],
37 |     "arrow-spacing": 0
38 |   },
39 |   overrides: [
40 |     {
41 |       files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
42 |       env: {
43 |         jest: true
44 |       }
45 |     }
46 |   ]
47 | };
48 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | ignore all differences in line endings
2 | *        -crlf
3 | 
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | package-lock.json
23 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false,
4 |   "printWidth": 120,
5 |   "trailingComma": "none",
6 |   "arrowParens": "avoid"
7 | }
8 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to open-source
 2 | We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
 3 | 
 4 | - Reporting a bug
 5 | - Discussing the current state of the code
 6 | - Submitting a fix
 7 | - Proposing new features
 8 | - Becoming a maintainer
 9 | 
10 | ## We Develop with Github
11 | We use github to host code, to track issues and feature requests, as well as accept pull requests.
12 | 
13 | ## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests
14 | Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests:
15 | 
16 | 1. Fork the repo and create your branch from `master`.
17 | 2. Make sure your code lints.
18 | 3. Issue that pull request!
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Vue Dominicana
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # open-source [![Netlify Status](https://api.netlify.com/api/v1/badges/6172ee72-5dd4-42d6-9463-47bbbc5c007e/deploy-status)](https://app.netlify.com/sites/opensourcevue/deploys)
 2 | 
 3 | > 🔦 Discover the open source ecosystem related to the Dominican Republic!
 4 | > This project is inpired on [opensource](https://github.com/developersdo/opensource/) project developed by [rmariuzzo](https://github.com/rmariuzzo)
 5 | 
 6 | ## Motivation
 7 | 
 8 | We just want to replicate all the features that [opensource](https://github.com/developersdo/opensource/) has just for fun and at the same time to introduce more people to the open-source community. This is an excellent project for someone who wants to learn Vue.
 9 | The data source in order to make this work will be:
10 | 
11 | 1. https://developersdo.github.io/opensource/data/repos.json
12 | 2. https://developersdo.github.io/opensource/data/users.json
13 | 
14 | 
15 | ## How to contribute 
16 | 
17 | > :thought_balloon: If you are new in Open Source world feel free to check our [How to contribute guidelines](https://github.com/VueDominicana/open-source/blob/master/CONTRIBUTING.md)
18 | 
19 | ## Notes
20 | 
21 | We're using [Materialize](https://materializecss.com/) to bootstrap the project.
22 | 
23 | ## Project setup
24 | 
25 | ```
26 | npm install
27 | ```
28 | 
29 | ### Compiles and hot-reloads for development
30 | 
31 | ```
32 | npm run serve
33 | ```
34 | 
35 | ### Compiles and minifies for production
36 | 
37 | ```
38 | npm run build
39 | ```
40 | 
41 | ### Run your unit tests
42 | 
43 | ```
44 | npm run test:unit
45 | ```
46 | 
47 | ### Lints and fixes files
48 | 
49 | ```
50 | npm run lint
51 | ```
52 | 
53 | ### Customize configuration
54 | 
55 | See [Configuration Reference](https://cli.vuejs.org/config/).
56 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest"
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "open-source",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "@vue/composition-api": "^0.6.1",
13 |     "axios": "^0.19.2",
14 |     "core-js": "^3.6.5",
15 |     "lodash": "^4.17.15",
16 |     "materialize-css": "^1.0.0-rc.2",
17 |     "node-emoji": "^1.10.0",
18 |     "vue": "^2.6.11",
19 |     "vue-loading-overlay": "^3.3.2",
20 |     "vue-router": "^3.1.6",
21 |     "vuex": "^3.3.0"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "~4.3.1",
25 |     "@vue/cli-plugin-eslint": "~4.3.1",
26 |     "@vue/cli-plugin-router": "~4.3.1",
27 |     "@vue/cli-plugin-unit-jest": "~4.3.1",
28 |     "@vue/cli-service": "~4.3.1",
29 |     "@vue/eslint-config-prettier": "^6.0.0",
30 |     "@vue/test-utils": "1.0.0-beta.33",
31 |     "babel-eslint": "^10.1.0",
32 |     "eslint": "^6.8.0",
33 |     "eslint-plugin-prettier": "^3.1.3",
34 |     "eslint-plugin-vue": "^6.2.2",
35 |     "husky": "^4.2.5",
36 |     "lint-staged": "^10.2.2",
37 |     "prettier": "^2.0.5",
38 |     "sass": "^1.26.5",
39 |     "sass-loader": "^8.0.2",
40 |     "vue-template-compiler": "^2.6.11"
41 |   },
42 |   "husky": {
43 |     "hooks": {
44 |       "pre-commit": "lint-staged"
45 |     }
46 |   },
47 |   "lint-staged": {
48 |     "*.(vue|js)": "npm run lint"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VueDominicana/open-source/1a81ddf7298e5257be99e3c5f1241377f2698e10/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons" />
 9 |     <title><%= htmlWebpackPlugin.options.title %></title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong
14 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
15 |         enable it to continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app">
19 |       <!-- Page Content goes here -->
20 |     </div>
21 |     <!-- built files will be auto injected -->
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <loading :active="isLoading" :opacity="0.9">
 4 |       <div class="loading-content">
 5 |         <span>Loading...</span>
 6 |         <p>Please wait until we get all the data.</p>
 7 |       </div>
 8 |     </loading>
 9 |     <AppNav />
10 |     <div class="container">
11 |       <router-view />
12 |     </div>
13 |     <FloatingActionButton />
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import AppNav from "@/components/Nav";
19 | import FloatingActionButton from "@/components/FloatingActionButton";
20 | import Loading from "vue-loading-overlay";
21 | import "vue-loading-overlay/dist/vue-loading.css";
22 | 
23 | export default {
24 |   name: "App",
25 |   components: {
26 |     Loading,
27 |     AppNav,
28 |     FloatingActionButton
29 |   },
30 |   computed: {
31 |     isLoading() {
32 |       return this.$store.getters["App/isLoading"];
33 |     }
34 |   },
35 |   async mounted() {
36 |     await this.$store.dispatch("App/setLoading", true);
37 | 
38 |     await Promise.all([
39 |       this.$store.dispatch("Developers/getDevelopers"),
40 |       this.$store.dispatch("Repositories/getRepositories")
41 |     ]);
42 | 
43 |     this.$store.dispatch("Developers/calculateStatistics");
44 | 
45 |     this.$store.dispatch("About/developersWithMoreThanTenRepos");
46 |     this.$store.dispatch("About/reposWithMoreThanOneStar");
47 |     this.$store.dispatch("About/reposContributionAvg");
48 |     this.$store.dispatch("About/reposLanguagesTotals");
49 |     this.$store.dispatch("About/reposLanguages");
50 |     this.$store.dispatch("About/mostPopularLanguages");
51 |     this.$store.dispatch("About/lessUsedLanguages");
52 | 
53 |     await this.$store.dispatch("App/setLoading", false);
54 |   }
55 | };
56 | </script>
57 | 
58 | <style lang="scss" scoped>
59 | @import "./assets/global";
60 | 
61 | .loading-content {
62 |   display: flex;
63 |   flex-direction: column;
64 |   align-items: center;
65 | }
66 | .md-content {
67 |   padding: 16px;
68 |   height: 100%;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/assets/global.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 |   height: 100%;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/img/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="logo_logo" viewBox="0 0 48 48">
2 |   <path d="M39.13,39V26.18l0,0H32l0,0V43.74l0,0A21.15,21.15,0,0,1,27.57,45a0,0,0,0,1,0,0V32.2l0,0H20.47l0,0V45.29l0,0H16l0,0V35.75l0,0H8.88l0,0v9.54l0,0H2.71l0,0V2.71l0,0h21A21.47,21.47,0,0,1,45.29,24.9,21.24,21.24,0,0,1,39.16,39,0,0,0,0,1,39.13,39Z"></path>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/components/DeveloperCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col s12 m6 l4 developer__col">
 3 |     <div class="card hoverable developer__card">
 4 |       <div class="card-content center-align">
 5 |         <span class="developer__rank">#{{ developer.position }}</span>
 6 |         <a :href="`https://github.com/${developer.login}`" target="_blank">
 7 |           <img :src="developer.avatarUrl" :alt="`${developer.name}`" class="developer__photo circle responsive-img" />
 8 |           <h3 class="card-title developer__name">{{ developer.name || developer.login }}</h3>
 9 |         </a>
10 |         <p>Followed by: {{ developer.followers }}</p>
11 |       </div>
12 |       <div class="card-action">
13 |         <ul class="developer__statistics">
14 |           <li>{{ developer.sources }} repositories</li>
15 |           <li>{{ developer.forked }} forks</li>
16 |         </ul>
17 |       </div>
18 |       <div class="card-action">
19 |         <a :href="developer.url" target="_blank" class="developer__url">{{ developer.url }}</a>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   name: "DeveloperCard",
28 |   props: {
29 |     developer: {
30 |       type: Object,
31 |       required: true
32 |     }
33 |   }
34 | };
35 | </script>
36 | 
37 | <style lang="scss" scoped>
38 | .developer {
39 |   &__col {
40 |     margin-left: 0 !important;
41 |   }
42 | 
43 |   &__card {
44 |     height: 95%;
45 |   }
46 | 
47 |   &__rank {
48 |     position: absolute;
49 |     right: 20px;
50 |     top: 20px;
51 |     font-size: 16px;
52 |     font-weight: bold;
53 |   }
54 | 
55 |   &__photo {
56 |     width: 64px;
57 |     height: 64px;
58 |   }
59 | 
60 |   &__name {
61 |     margin-top: -5px;
62 |   }
63 | 
64 |   &__statistics {
65 |     margin: 0;
66 |   }
67 | 
68 |   &__url {
69 |     text-transform: lowercase !important;
70 |     word-break: break-all;
71 |   }
72 | }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/components/FloatingActionButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="fixed-action-btn direction-top">
 3 |     <a class="btn-floating btn-large red darken-2">
 4 |       <i class="large material-icons">more_vert</i>
 5 |     </a>
 6 |     <ul>
 7 |       <li>
 8 |         <a
 9 |           class="btn-floating red darken-2 tooltipped"
10 |           target="_blank"
11 |           data-position="left"
12 |           data-tooltip="Report an issue"
13 |           href="https://github.com/vuedominicana/open-source/issues/new"
14 |         >
15 |           <i class="material-icons">bug_report</i>
16 |         </a>
17 |       </li>
18 |       <li>
19 |         <a
20 |           class="btn-floating red darken-2 tooltipped"
21 |           target="_blank"
22 |           data-position="left"
23 |           data-tooltip="View project on GitHub"
24 |           href="https://github.com/vuedominicana/open-source"
25 |         >
26 |           <i class="material-icons">code</i>
27 |         </a>
28 |       </li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | import M from "materialize-css";
35 | 
36 | export default {
37 |   name: "FloatingActionButton",
38 |   mounted() {
39 |     M.AutoInit();
40 |   }
41 | };
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "HelloWorld",
10 |   props: {
11 |     msg: String
12 |   }
13 | };
14 | </script>
15 | 
16 | <style scoped lang="scss">
17 | h3 {
18 |   margin: 40px 0 0;
19 | }
20 | ul {
21 |   list-style-type: none;
22 |   padding: 0;
23 | }
24 | li {
25 |   display: inline-block;
26 |   margin: 0 10px;
27 | }
28 | a {
29 |   color: #42b983;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/components/InputSearch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row input-search">
 3 |     <div class="input-field col s12">
 4 |       <i class="material-icons prefix">search</i>
 5 |       <input id="search" type="search" v-model="searchTerm" autocomplete="off" />
 6 |       <label for="search">{{ label }}</label>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "InputSearch",
14 |   props: {
15 |     label: {
16 |       type: String,
17 |       required: true
18 |     }
19 |   },
20 |   data() {
21 |     return {
22 |       searchTerm: ""
23 |     };
24 |   },
25 |   watch: {
26 |     searchTerm(newVal) {
27 |       this.$emit("input", newVal.trim());
28 |     }
29 |   }
30 | };
31 | </script>
32 | 
33 | <style lang="scss" scoped>
34 | .input-search {
35 |   margin-bottom: 0 !important;
36 |   .input-field {
37 |     label {
38 |       color: #039be5 !important;
39 |     }
40 | 
41 |     input {
42 |       &:focus {
43 |         + label {
44 |           color: #039be5 !important;
45 |         }
46 | 
47 |         border-bottom: 1px solid #039be5 !important;
48 |         box-shadow: 0 1px 0 0 #039be5 !important;
49 |       }
50 |     }
51 | 
52 |     .prefix.active {
53 |       color: #039be5 !important;
54 |     }
55 |   }
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/components/Languages.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span v-if="!languages.trim()">(no languages)</span>
 4 |     <router-link
 5 |       v-else
 6 |       class="chip"
 7 |       v-for="(language, index) in languagesWithColors"
 8 |       :key="index"
 9 |       :style="{ backgroundColor: language.backgroundColor, color: language.textColor }"
10 |       :to="'/repositories/' + language.text"
11 |     >
12 |       {{ language.text }}
13 |     </router-link>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import colors from "@/util/colors.json";
19 | import { hexToRgb, setContrast } from "@/util/colors";
20 | 
21 | export default {
22 |   name: "Language",
23 |   props: {
24 |     languages: {
25 |       type: String,
26 |       required: true
27 |     }
28 |   },
29 |   computed: {
30 |     languagesWithColors() {
31 |       return this.languages
32 |         .trim()
33 |         .split(" ")
34 |         .map(language => {
35 |           const backgroundColor = colors[language] || "#e4e4e4";
36 |           const textColor = setContrast(hexToRgb(backgroundColor));
37 |           return {
38 |             text: language,
39 |             backgroundColor,
40 |             textColor
41 |           };
42 |         });
43 |     }
44 |   }
45 | };
46 | </script>
47 | 
48 | <style lang="scss" scoped>
49 | a {
50 |   margin-right: 12px !important;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header-wrapper">
 3 |     <nav class="blue darken-1">
 4 |       <div class="nav-wrapper container">
 5 |         <div class="logo">
 6 |           <router-link :to="{ name: 'PopularRepositories' }" class="brand-logo">
 7 |             <svg viewBox="0 0 48 48">
 8 |               <path
 9 |                 d="M39.13,39V26.18l0,0H32l0,0V43.74l0,0A21.15,21.15,0,0,1,27.57,45a0,0,0,0,1,0,0V32.2l0,0H20.47l0,0V45.29l0,0H16l0,0V35.75l0,0H8.88l0,0v9.54l0,0H2.71l0,0V2.71l0,0h21A21.47,21.47,0,0,1,45.29,24.9,21.24,21.24,0,0,1,39.16,39,0,0,0,0,1,39.13,39Z"
10 |               />
11 |             </svg>
12 |             <span class="hide-on-small-only">Dominican Open Source</span>
13 |           </router-link>
14 |         </div>
15 |         <a href="#" data-target="mobile-nav" class="sidenav-trigger">
16 |           <i class="material-icons">menu</i>
17 |         </a>
18 |         <ul class="sections right hide-on-med-and-down">
19 |           <li :class="{ active: ['PopularRepositories', 'NewRepositories'].includes($route.name) }">
20 |             <router-link to="/repositories/popular">Repositories</router-link>
21 |           </li>
22 |           <li :class="{ active: ['PopularDevelopers', 'RecentlyJoinedDevelopers'].includes($route.name) }">
23 |             <router-link to="/developers/popular">Developers</router-link>
24 |           </li>
25 |           <li :class="{ active: $route.name == 'About' }">
26 |             <router-link to="/about">About</router-link>
27 |           </li>
28 |         </ul>
29 |       </div>
30 |     </nav>
31 |     <ul class="sections sidenav sidenav-close" id="mobile-nav">
32 |       <li :class="{ active: ['PopularRepositories', 'NewRepositories'].includes($route.name) }">
33 |         <router-link to="/repositories/popular">Repositories</router-link>
34 |       </li>
35 |       <li :class="{ active: ['PopularDevelopers', 'RecentlyJoinedDevelopers'].includes($route.name) }">
36 |         <router-link to="/developers/popular">Developers</router-link>
37 |       </li>
38 |       <li :class="{ active: $route.name == 'About' }">
39 |         <router-link to="/about">About</router-link>
40 |       </li>
41 |     </ul>
42 |   </div>
43 | </template>
44 | 
45 | <script>
46 | export default {
47 |   name: "Nav",
48 |   mounted() {
49 |     M.AutoInit();
50 |   }
51 | };
52 | </script>
53 | 
54 | <style lang="scss" scoped>
55 | .brand-logo {
56 |   color: #fff;
57 |   font-size: 1.9rem;
58 |   svg {
59 |     fill: currentcolor;
60 |     width: 1.5em;
61 |     vertical-align: middle;
62 |     margin-right: 8px;
63 |     margin-top: -5px;
64 |   }
65 |   span {
66 |     font-size: 2.1rem;
67 |   }
68 | }
69 | @media screen and (max-width: 768px) {
70 |   .brand-logo {
71 |     span {
72 |       font-size: 1.6rem;
73 |     }
74 |   }
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/components/PopularLanguages.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col m12 l6">
 3 |     <div>
 4 |       <h4>Popular Languages</h4>
 5 |       <span v-if="!popularLanguages.length">No languages :'(</span>
 6 |       <div v-else v-for="(language, index) in popularLanguages" :key="index">
 7 |         <span class="grey-text text-darken-3 rank-position"># {{ index + 1 }}</span>
 8 |         <span class="language-text">{{ language.name }}</span>
 9 |         <strong class="grey-text text-darken-2">{{ language.percentage }} %</strong>
10 |         <div class="progress blue lighten-4" style="height: 10px;">
11 |           <div class="determinate blue darken-2" :style="{ width: `${language.percentage}%` }"></div>
12 |         </div>
13 |       </div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import { mapState } from "vuex";
20 | export default {
21 |   name: "PopularLanguages",
22 |   computed: {
23 |     ...mapState({
24 |       popularLanguages: state => state.About.mostPopularLanguages
25 |     })
26 |   }
27 | };
28 | </script>
29 | 
30 | <style lang="scss" scoped>
31 | .rank-position {
32 |   width: 40px;
33 |   display: inline-block;
34 |   font-size: 18px;
35 | }
36 | 
37 | .language-text {
38 |   font-size: 22px;
39 |   margin-right: 10px;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/RepositoryCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row">
  3 |     <div class="col s12 m12">
  4 |       <div class="card">
  5 |         <div class="card-content black-text">
  6 |           <header>
  7 |             <strong>#{{ repository.position }}</strong>
  8 |             <span>
  9 |               <a :href="repository.url" target="_blank">{{ repository.name }}</a>
 10 |             </span>
 11 |             <div class="star">
 12 |               <a :href="`${repository.url}/stargazers`" target="_blank">
 13 |                 <i class="material-icons">star</i>
 14 |                 <span>{{ repository.stargazers }}</span>
 15 |               </a>
 16 |             </div>
 17 |           </header>
 18 |           <p>
 19 |             {{ repository.description | parseEmoji }}
 20 |           </p>
 21 |         </div>
 22 |         <div class="card-action languages">
 23 |           <languages :languages="repository.languages" />
 24 |         </div>
 25 |         <div class="card-action user">
 26 |           <a :href="`https://github.com/${developer.login}`" target="_blank" class="center-items">
 27 |             <img
 28 |               class="responsive-img circle"
 29 |               :alt="`${developer.name} profile image`"
 30 |               width="32"
 31 |               :src="developer.avatarUrl"
 32 |             />
 33 |             <span>{{ developer.name }}</span>
 34 |           </a>
 35 |           <a :href="repository.url" class="center-items" target="_blank">
 36 |             <i class="material-icons">link</i>
 37 |             <span>Github Project</span>
 38 |           </a>
 39 |         </div>
 40 |       </div>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import emoji from "node-emoji";
 47 | import { mapActions } from "vuex";
 48 | import languages from "@/components/Languages";
 49 | 
 50 | export default {
 51 |   name: "Repository",
 52 |   components: {
 53 |     languages
 54 |   },
 55 |   props: {
 56 |     repository: {
 57 |       type: Object,
 58 |       required: true
 59 |     }
 60 |   },
 61 |   data() {
 62 |     return {
 63 |       developer: {}
 64 |     };
 65 |   },
 66 |   filters: {
 67 |     parseEmoji(text) {
 68 |       if (!text) {
 69 |         return text;
 70 |       }
 71 |       return emoji.emojify(text);
 72 |     }
 73 |   },
 74 |   watch: {
 75 |     repository: {
 76 |       async handler() {
 77 |         const username = this.repository.name.split("/")[0];
 78 |         this.developer = await this.getDeveloperByUsername(username);
 79 |       },
 80 |       immediate: true
 81 |     }
 82 |   },
 83 |   methods: {
 84 |     ...mapActions({
 85 |       getDeveloperByUsername: "Developers/getDeveloperByUsername"
 86 |     })
 87 |   }
 88 | };
 89 | </script>
 90 | 
 91 | <style lang="scss" scoped>
 92 | header {
 93 |   display: flex;
 94 |   font-size: 24px;
 95 |   margin-bottom: 10px;
 96 |   justify-content: center;
 97 |   strong {
 98 |     margin-right: 20px;
 99 |   }
100 |   span {
101 |     flex: 1;
102 |   }
103 |   .star {
104 |     a {
105 |       color: black;
106 |       display: flex;
107 |       align-items: center;
108 |       i {
109 |         margin-right: 3px;
110 |       }
111 |     }
112 |   }
113 | }
114 | 
115 | .user {
116 |   display: flex;
117 |   align-items: center;
118 | 
119 |   img,
120 |   i {
121 |     margin-right: 10px;
122 |   }
123 | 
124 |   a,
125 |   i {
126 |     color: #039be5 !important;
127 |   }
128 | 
129 |   .center-items {
130 |     display: flex;
131 |     align-items: center;
132 |   }
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/components/Statistics.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col m12 l6">
 3 |     <div>
 4 |       <h4>Statistics</h4>
 5 |       <ul class="collection">
 6 |         <li class="collection-item">
 7 |           <h4>
 8 |             <i class="material-icons">perm_identity</i>{{ developers.length.toLocaleString() }} developers
 9 |             <small>are contributing to open source.</small>
10 |           </h4>
11 |           <p>(organizations are not counted)</p>
12 |           <p>
13 |             Among that number of developers,
14 |             <strong>{{ developersWithMoreThanTenRepos.toLocaleString() }} have more 10 repos</strong>.
15 |           </p>
16 |         </li>
17 |         <li class="collection-item">
18 |           <h4>
19 |             <i class="material-icons">code</i>{{ repositories.length.toLocaleString() }} repos
20 |             <small
21 |               >created on GitHub. In average, each user contribute with
22 |               {{ reposContributionAvg.toLocaleString() }} repos.</small
23 |             >
24 |           </h4>
25 |           <p>(excluding forks)</p>
26 |           <p>
27 |             Interesting, the fact that there are
28 |             <strong>{{ reposWithMoreThanOneStar.toLocaleString() }} repos with more than one star</strong>.
29 |           </p>
30 |         </li>
31 |         <li class="collection-item">
32 |           <h4>
33 |             <i class="material-icons">assessment</i>{{ reposLanguages.length.toLocaleString() }} programming languages
34 |             <small>in use across {{ repositories.length.toLocaleString() }} repos.</small>
35 |           </h4>
36 |           <p>
37 |             The
38 |             <strong>less used languages</strong> among dominican developers in open source via GitHub are:
39 |             {{ lessUsedLanguages }}.
40 |           </p>
41 |         </li>
42 |       </ul>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | import { mapState } from "vuex";
49 | 
50 | export default {
51 |   name: "Statistics",
52 |   computed: {
53 |     ...mapState({
54 |       developers: state => state.Developers.developers,
55 |       repositories: state => state.Repositories.repositories,
56 |       developersWithMoreThanTenRepos: state => state.About.developersWithMoreThanTenRepos,
57 |       reposWithMoreThanOneStar: state => state.About.reposWithMoreThanOneStar,
58 |       reposContributionAvg: state => state.About.reposContributionAvg,
59 |       reposLanguages: state => state.About.reposLanguages,
60 |       lessUsedLanguages: state => state.About.lessUsedLanguages
61 |     })
62 |   }
63 | };
64 | </script>
65 | 
66 | <style lang="scss" scoped></style>
67 | 


--------------------------------------------------------------------------------
/src/components/SubNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <router-link v-for="section in sections" :to="{ name: section.name }" :key="section.name">
 4 |       {{ section.label }}
 5 |     </router-link>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "SubHeader",
12 |   props: {
13 |     sections: {
14 |       type: Array,
15 |       required: true
16 |     }
17 |   }
18 | };
19 | </script>
20 | 
21 | <style lang="scss" scoped>
22 | div {
23 |   display: flex;
24 |   justify-content: center;
25 |   a {
26 |     margin: 40px;
27 |     font-size: 20px;
28 |     color: black;
29 |   }
30 |   .router-link-active {
31 |     font-weight: bold;
32 |     text-decoration: underline;
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/composable/useSearchDeveloper.js:
--------------------------------------------------------------------------------
 1 | import sortBy from "lodash/sortBy";
 2 | import Searcher from "@/util/Searcher";
 3 | import store from "../store/store";
 4 | 
 5 | const developerSearcher = new Searcher().setField("name").setField("login");
 6 | 
 7 | export function useSearchDeveloper() {
 8 |   function searchPopular(searchTerm) {
 9 |     let developers = store.state.Developers.developers;
10 |     developerSearcher.setData(developers);
11 | 
12 |     if (searchTerm) {
13 |       developers = developerSearcher.findAll(searchTerm);
14 |     }
15 | 
16 |     return developers.slice(0, 10);
17 |   }
18 | 
19 |   function searchNewDevelopers(searchTerm) {
20 |     let developers = store.getters["Developers/newDevelopers"];
21 |     developerSearcher.setData(developers);
22 | 
23 |     if (searchTerm) {
24 |       developers = sortBy(developerSearcher.findAll(searchTerm), dev => -Number(new Date(dev.createdAt)));
25 |     }
26 | 
27 |     return developers.slice(0, 10);
28 |   }
29 | 
30 |   return { searchPopular, searchNewDevelopers };
31 | }
32 | 


--------------------------------------------------------------------------------
/src/config/composition-api.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import VueCompositionApi from "@vue/composition-api";
3 | 
4 | Vue.use(VueCompositionApi);
5 | 


--------------------------------------------------------------------------------
/src/config/index.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import "@/config/materialize";
3 | import "@/config/composition-api";
4 | 
5 | Vue.config.productionTip = false;
6 | 


--------------------------------------------------------------------------------
/src/config/materialize.js:
--------------------------------------------------------------------------------
1 | import "materialize-css/dist/css/materialize.min.css";
2 | import "materialize-css/dist/js/materialize.min.js";
3 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "@/App.vue";
 3 | import router from "@/router";
 4 | import "@/config";
 5 | import store from "@/store/store";
 6 | 
 7 | new Vue({
 8 |   router,
 9 |   store,
10 |   render: h => h(App)
11 | }).$mount("#app");
12 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import PopularRepositories from "../views/PopularRepositories.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     redirect: {
11 |       name: "PopularRepositories"
12 |     }
13 |   },
14 |   {
15 |     path: "/repositories",
16 |     redirect: {
17 |       name: "PopularRepositories"
18 |     },
19 |     component: () => import(/* webpackChunkName: "new-repositories" */ "../views/Repositories.vue"),
20 |     children: [
21 |       {
22 |         path: "popular",
23 |         name: "PopularRepositories",
24 |         component: PopularRepositories
25 |       },
26 |       {
27 |         path: ":language",
28 |         name: "PopularRepositoriesByLanguages",
29 |         component: PopularRepositories
30 |       },
31 |       {
32 |         path: "new",
33 |         name: "NewRepositories",
34 |         component: () => import(/* webpackChunkName: "new-repositories" */ "../views/NewRepositories.vue")
35 |       }
36 |     ]
37 |   },
38 |   {
39 |     path: "/developers",
40 |     component: () => import(/* webpackChunkName: "developers" */ "../views/Developers.vue"),
41 |     redirect: {
42 |       name: "PopularDevelopers"
43 |     },
44 |     children: [
45 |       {
46 |         path: "popular",
47 |         name: "PopularDevelopers",
48 |         component: () => import(/* webpackChunkName: "popular-developers" */ "../views/PopularDevelopers.vue")
49 |       },
50 |       {
51 |         path: "recently-joined",
52 |         name: "RecentlyJoinedDevelopers",
53 |         component: () =>
54 |           import(/* webpackChunkName: "recently-joined-developers" */ "../views/RecentlyJoinedDevelopers.vue")
55 |       }
56 |     ]
57 |   },
58 |   {
59 |     path: "/about",
60 |     name: "About",
61 |     component: () => import(/* webpackChunkName: "about" */ "../views/About.vue")
62 |   }
63 | ];
64 | 
65 | const router = new VueRouter({
66 |   mode: "history",
67 |   base: process.env.BASE_URL,
68 |   routes
69 | });
70 | 
71 | export default router;
72 | 


--------------------------------------------------------------------------------
/src/store/About.js:
--------------------------------------------------------------------------------
  1 | import map from "lodash/map";
  2 | 
  3 | const state = {
  4 |   mostPopularLanguages: [],
  5 |   developersWithMoreThanTenRepos: 0,
  6 |   reposWithMoreThanOneStar: 0,
  7 |   reposContributionAvg: 0,
  8 |   reposLanguagesTotals: {},
  9 |   reposLanguages: [],
 10 |   lessUsedLanguages: ""
 11 | };
 12 | 
 13 | const mutations = {
 14 |   SET_MOST_POPULAR_LANGUAGES(state, languages) {
 15 |     state.mostPopularLanguages = languages;
 16 |   },
 17 |   SET_DEVELOPERS_WITH_MORE_THAN_TEN_REPOS(state, developers) {
 18 |     state.developersWithMoreThanTenRepos = developers;
 19 |   },
 20 |   REPOS_WITH_MORE_THAN_ONE_STAR(state, repositories) {
 21 |     state.reposWithMoreThanOneStar = repositories;
 22 |   },
 23 |   SET_REPOS_WITH_CONTRIBUTION_AVG(state, repositories) {
 24 |     state.reposContributionAvg = repositories;
 25 |   },
 26 |   SET_LANGUAGE_TOTAL(state, languages) {
 27 |     state.reposLanguagesTotals = languages;
 28 |   },
 29 |   SET_REPOS_LANGUAGES(state, languages) {
 30 |     state.reposLanguages = languages;
 31 |   },
 32 |   SET_LESS_USED_LANGUAGES(state, languages) {
 33 |     state.lessUsedLanguages = languages;
 34 |   }
 35 | };
 36 | 
 37 | const actions = {
 38 |   mostPopularLanguages({ commit }) {
 39 |     const mostPopularLanguages = state.reposLanguages.slice(0, 10);
 40 |     commit("SET_MOST_POPULAR_LANGUAGES", mostPopularLanguages);
 41 |   },
 42 |   developersWithMoreThanTenRepos({ commit, rootState }) {
 43 |     const developersWithMoreThanTenRepos = rootState.Developers.developers.filter(developer => developer.sources > 10)
 44 |       .length;
 45 |     commit("SET_DEVELOPERS_WITH_MORE_THAN_TEN_REPOS", developersWithMoreThanTenRepos);
 46 |   },
 47 |   reposWithMoreThanOneStar({ commit, rootState }) {
 48 |     const reposWithMoreThanOneStar = rootState.Repositories.repositories.filter(repo => repo.stargazers > 1).length;
 49 | 
 50 |     commit("REPOS_WITH_MORE_THAN_ONE_STAR", reposWithMoreThanOneStar);
 51 |   },
 52 |   reposContributionAvg({ commit, rootState }) {
 53 |     const reposWithContributionsAvg = (
 54 |       rootState.Repositories.repositories.length / rootState.Developers.developers.length
 55 |     ).toFixed(1);
 56 | 
 57 |     commit("SET_REPOS_WITH_CONTRIBUTION_AVG", reposWithContributionsAvg);
 58 |   },
 59 |   reposLanguagesTotals({ commit, rootState }) {
 60 |     const languagesTotals = rootState.Repositories.repositories.reduce((total, repo) => {
 61 |       if (!repo.languages.length) {
 62 |         return total;
 63 |       }
 64 | 
 65 |       return repo.languages.split(" ").reduce((sum, language) => {
 66 |         let languageTotal = sum[language] || 0;
 67 | 
 68 |         languageTotal++;
 69 | 
 70 |         return { ...sum, [language]: languageTotal };
 71 |       }, total);
 72 |     }, {});
 73 | 
 74 |     commit("SET_LANGUAGE_TOTAL", languagesTotals);
 75 |   },
 76 |   reposLanguages({ commit, rootState }) {
 77 |     const reposLanguages = map(state.reposLanguagesTotals, (total, name) => ({
 78 |       name,
 79 |       total,
 80 |       percentage: ((total / rootState.Repositories.repositories.length) * 100).toFixed(2)
 81 |     })).sort((a, b) => b.total - a.total);
 82 |     commit("SET_REPOS_LANGUAGES", reposLanguages);
 83 |   },
 84 |   lessUsedLanguages({ commit }) {
 85 |     const lessUsedLanguages = state.reposLanguages
 86 |       .slice(-10)
 87 |       .map(lang => lang.name)
 88 |       .join(", ");
 89 | 
 90 |     commit("SET_LESS_USED_LANGUAGES", lessUsedLanguages);
 91 |   }
 92 | };
 93 | 
 94 | const getters = {};
 95 | 
 96 | export default {
 97 |   namespaced: true,
 98 |   state,
 99 |   mutations,
100 |   actions,
101 |   getters
102 | };
103 | 


--------------------------------------------------------------------------------
/src/store/App.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   isLoading: false
 3 | };
 4 | 
 5 | const getters = {
 6 |   isLoading() {
 7 |     return state.isLoading;
 8 |   }
 9 | };
10 | 
11 | const actions = {
12 |   setLoading({ commit }, isLoading) {
13 |     commit("SET_LOADING", isLoading);
14 |   }
15 | };
16 | 
17 | const mutations = {
18 |   SET_LOADING(state, isLoading) {
19 |     state.isLoading = !!isLoading;
20 |   }
21 | };
22 | 
23 | export default {
24 |   namespaced: true,
25 |   state,
26 |   mutations,
27 |   actions,
28 |   getters
29 | };
30 | 


--------------------------------------------------------------------------------
/src/store/Developers.js:
--------------------------------------------------------------------------------
 1 | import clone from "lodash/cloneDeep";
 2 | import sortBy from "lodash/sortBy";
 3 | import API from "@/util/api";
 4 | 
 5 | const state = {
 6 |   developers: []
 7 | };
 8 | 
 9 | const mutations = {
10 |   SET_DEVELOPERS(state, developers) {
11 |     state.developers = developers;
12 |   }
13 | };
14 | 
15 | const actions = {
16 |   async getDevelopers({ commit }) {
17 |     const developers = await API.getDevelopers().catch(e => {
18 |       console.error(e);
19 | 
20 |       return [];
21 |     });
22 | 
23 |     commit("SET_DEVELOPERS", developers);
24 |   },
25 |   getDeveloperByUsername(context, username) {
26 |     let developer = state.developers.find(developer => developer.login === username);
27 |     if (!developer) {
28 |       developer = {};
29 |       console.warn(
30 |         `Could not find user by login: ${developer}, probably the user changed his login. ` +
31 |           `More details at: https://github.com/developersdo/opensource/issues/89`
32 |       );
33 |     }
34 | 
35 |     return developer;
36 |   },
37 |   calculateStatistics({ commit, state, rootState }) {
38 |     const developersCopy = clone(state.developers);
39 | 
40 |     rootState.Repositories.repositories.forEach(repository => {
41 |       const developer = developersCopy.find(dev => dev.login === repository.name.split("/")[0]);
42 | 
43 |       if (developer) {
44 |         developer.sources += 1;
45 |         developer.forked += repository.forks;
46 |       }
47 |     });
48 | 
49 |     commit("SET_DEVELOPERS", developersCopy);
50 |   }
51 | };
52 | 
53 | const getters = {
54 |   newDevelopers(state) {
55 |     const lastMonthDate = new Date();
56 |     const ONE_MONTH = 30;
57 |     lastMonthDate.setDate(lastMonthDate.getDate() - ONE_MONTH);
58 | 
59 |     const newDevs = state.developers.filter(dev => {
60 |       return new Date(dev.createdAt) >= lastMonthDate;
61 |     });
62 | 
63 |     const sortedDevs = sortBy(newDevs, dev => -Number(new Date(dev.createdAt)));
64 |     return clone(sortedDevs).map((dev, index) => {
65 |       dev.position = index + 1;
66 | 
67 |       return dev;
68 |     });
69 |   }
70 | };
71 | 
72 | export default {
73 |   namespaced: true,
74 |   state,
75 |   mutations,
76 |   actions,
77 |   getters
78 | };
79 | 


--------------------------------------------------------------------------------
/src/store/Repositories.js:
--------------------------------------------------------------------------------
 1 | import API from "@/util/api";
 2 | 
 3 | const state = {
 4 |   repositories: []
 5 | };
 6 | 
 7 | const mutations = {
 8 |   SET_REPOSITORIES(state, repositories) {
 9 |     state.repositories = repositories;
10 |   }
11 | };
12 | 
13 | const actions = {
14 |   async getRepositories({ commit }) {
15 |     const repositories = await API.getRepositories().catch(e => {
16 |       console.error(e);
17 | 
18 |       return [];
19 |     });
20 | 
21 |     commit("SET_REPOSITORIES", repositories);
22 |   }
23 | };
24 | 
25 | const getters = {};
26 | 
27 | export default {
28 |   namespaced: true,
29 |   state,
30 |   mutations,
31 |   actions,
32 |   getters
33 | };
34 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Import store modules dynamically.
 3 |  */
 4 | const files = require.context(".", false, /\.js$/);
 5 | const store = {};
 6 | 
 7 | files.keys().forEach(key => {
 8 |   if (!["./index.js", "./store.js"].includes(key)) {
 9 |     store[key.replace(/(\.\/|\.js)/g, "")] = files(key).default;
10 |   }
11 | });
12 | 
13 | export default store;
14 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Create all modules dynamically.
 3 |  */
 4 | import Vue from "vue";
 5 | import Vuex from "vuex";
 6 | import modules from "@/store";
 7 | 
 8 | Vue.use(Vuex);
 9 | 
10 | export default new Vuex.Store({
11 |   modules,
12 |   strict: process.env.NODE_ENV !== "production"
13 | });
14 | 


--------------------------------------------------------------------------------
/src/util/Searcher.js:
--------------------------------------------------------------------------------
 1 | import deburr from "lodash/deburr";
 2 | 
 3 | export default class Searcher {
 4 |   /**
 5 |    * @param {Array}
 6 |    */
 7 |   fields = [];
 8 | 
 9 |   /**
10 |    *
11 |    * @param {string} field
12 |    */
13 |   setField(field) {
14 |     this.fields.push(field);
15 |     return this;
16 |   }
17 | 
18 |   /**
19 |    *
20 |    * @param {Array} data
21 |    */
22 |   setData(data) {
23 |     this.data = data;
24 |     return this;
25 |   }
26 | 
27 |   /**
28 |    *
29 |    * @param {string} searchTerm
30 |    * @returns {Array}
31 |    */
32 |   findAll(searchTerm) {
33 |     const matcher = new RegExp(deburr(searchTerm), "i");
34 |     const result = this.data.filter(item => {
35 |       return this.fields.some(field => matcher.test(deburr(item[field])));
36 |     });
37 | 
38 |     return result;
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/util/api.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import sortBy from "lodash/sortBy";
 3 | 
 4 | axios.defaults.baseURL = "https://developersdo.github.io/opensource-data";
 5 | 
 6 | export default {
 7 |   async getDevelopers() {
 8 |     const { data: developers } = await axios.get("/users.json");
 9 |     const sortedDevelopers = sortBy(developers, dev => -dev.followers);
10 |     return sortedDevelopers.map((dev, position) => {
11 |       dev.position = position + 1;
12 |       dev.sources = 0;
13 |       dev.forked = 0;
14 |       return dev;
15 |     });
16 |   },
17 |   async getRepositories() {
18 |     const { data: repositories } = await axios.get("/repos.json");
19 |     const sortedRepositories = sortBy(repositories, repo => -repo.stargazers);
20 |     return sortedRepositories.map((repo, position) => {
21 |       repo.position = position + 1;
22 |       return repo;
23 |     });
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/src/util/colors.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | /** Convert hex color to rgb
 3 |  * @param {string} hex
 4 |  * @returns {(object|null)}
 5 |  * @see https://stackoverflow.com/a/5624139/3367568
 6 |  */
 7 | export function hexToRgb(hex) {
 8 |   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
 9 |   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
10 |   hex = hex.replace(shorthandRegex, (m, r, g, b) => {
11 |     return r + r + g + g + b + b;
12 |   });
13 | 
14 |   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
15 |   if (result) {
16 |     return {
17 |       r: parseInt(result[1], 16),
18 |       g: parseInt(result[2], 16),
19 |       b: parseInt(result[3], 16)
20 |     };
21 |   }
22 | 
23 |   return null;
24 | }
25 | 
26 | /** Set the contrast based on brightness of a rgb color
27 |  * @param {Object} rgb
28 |  * @returns {string}
29 |  * @see https://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area#comment80648498_11868159
30 |  */
31 | export function setContrast(rgb) {
32 |   return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? "black" : "white";
33 | }
34 | 


--------------------------------------------------------------------------------
/src/util/colors.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "1c enterprise": "#814CCC",
  3 |   "4d": null,
  4 |   "abap": "#E8274B",
  5 |   "actionscript": "#882B0F",
  6 |   "ada": "#02f88c",
  7 |   "agda": "#315665",
  8 |   "ags script": "#B9D9FF",
  9 |   "alloy": "#64C800",
 10 |   "alpine abuild": null,
 11 |   "ampl": "#E6EFBB",
 12 |   "angelscript": "#C7D7DC",
 13 |   "antlr": "#9DC3FF",
 14 |   "apex": null,
 15 |   "api blueprint": "#2ACCA8",
 16 |   "apl": "#5A8164",
 17 |   "apollo guidance computer": null,
 18 |   "applescript": "#101F1F",
 19 |   "arc": "#aa2afe",
 20 |   "asp": "#6a40fd",
 21 |   "aspectj": "#a957b0",
 22 |   "assembly": "#6E4C13",
 23 |   "asymptote": "#4a0c0c",
 24 |   "ats": "#1ac620",
 25 |   "augeas": null,
 26 |   "autohotkey": "#6594b9",
 27 |   "autoit": "#1C3552",
 28 |   "awk": null,
 29 |   "ballerina": "#FF5000",
 30 |   "batchfile": "#C1F12E",
 31 |   "befunge": null,
 32 |   "bison": null,
 33 |   "bitbake": null,
 34 |   "blitzbasic": null,
 35 |   "blitzmax": "#cd6400",
 36 |   "bluespec": null,
 37 |   "boo": "#d4bec1",
 38 |   "brainfuck": "#2F2530",
 39 |   "brightscript": null,
 40 |   "c": "#555555",
 41 |   "c#": "#178600",
 42 |   "c++": "#f34b7d",
 43 |   "c2hs haskell": null,
 44 |   "cap'n proto": null,
 45 |   "cartocss": null,
 46 |   "ceylon": "#dfa535",
 47 |   "chapel": "#8dc63f",
 48 |   "charity": null,
 49 |   "chuck": null,
 50 |   "cirru": "#ccccff",
 51 |   "clarion": "#db901e",
 52 |   "clean": "#3F85AF",
 53 |   "click": "#E4E6F3",
 54 |   "clips": null,
 55 |   "clojure": "#db5855",
 56 |   "cmake": null,
 57 |   "cobol": null,
 58 |   "codeql": null,
 59 |   "coffeescript": "#244776",
 60 |   "coldfusion": "#ed2cd6",
 61 |   "coldfusion cfc": null,
 62 |   "common lisp": "#3fb68b",
 63 |   "common workflow language": "#B5314C",
 64 |   "component pascal": "#B0CE4E",
 65 |   "cool": null,
 66 |   "coq": null,
 67 |   "crystal": "#000100",
 68 |   "csound": null,
 69 |   "csound document": null,
 70 |   "csound score": null,
 71 |   "css": "#563d7c",
 72 |   "cuda": "#3A4E3A",
 73 |   "cweb": null,
 74 |   "cycript": null,
 75 |   "cython": null,
 76 |   "d": "#ba595e",
 77 |   "dart": "#00B4AB",
 78 |   "dataweave": "#003a52",
 79 |   "dhall": "#dfafff",
 80 |   "digital command language": null,
 81 |   "dm": "#447265",
 82 |   "dockerfile": "#384d54",
 83 |   "dogescript": "#cca760",
 84 |   "dtrace": null,
 85 |   "dylan": "#6c616e",
 86 |   "e": "#ccce35",
 87 |   "ec": "#913960",
 88 |   "ecl": "#8a1267",
 89 |   "eclipse": null,
 90 |   "eiffel": "#946d57",
 91 |   "elixir": "#6e4a7e",
 92 |   "elm": "#60B5CC",
 93 |   "emacs lisp": "#c065db",
 94 |   "emberscript": "#FFF4F3",
 95 |   "eq": "#a78649",
 96 |   "erlang": "#B83998",
 97 |   "f#": "#b845fc",
 98 |   "f*": "#572e30",
 99 |   "factor": "#636746",
100 |   "fancy": "#7b9db4",
101 |   "fantom": "#14253c",
102 |   "faust": "#c37240",
103 |   "filebench wml": null,
104 |   "filterscript": null,
105 |   "fish": null,
106 |   "flux": "#88ccff",
107 |   "forth": "#341708",
108 |   "fortran": "#4d41b1",
109 |   "freemarker": "#0050b2",
110 |   "frege": "#00cafe",
111 |   "g-code": "#D08CF2",
112 |   "game maker language": "#71b417",
113 |   "gaml": "#FFC766",
114 |   "gams": null,
115 |   "gap": null,
116 |   "gcc machine description": null,
117 |   "gdb": null,
118 |   "gdscript": "#355570",
119 |   "genie": "#fb855d",
120 |   "genshi": null,
121 |   "gentoo ebuild": null,
122 |   "gentoo eclass": null,
123 |   "gherkin": "#5B2063",
124 |   "glsl": null,
125 |   "glyph": "#c1ac7f",
126 |   "gnuplot": "#f0a9f0",
127 |   "go": "#00ADD8",
128 |   "golo": "#88562A",
129 |   "gosu": "#82937f",
130 |   "grace": null,
131 |   "grammatical framework": "#79aa7a",
132 |   "groovy": "#e69f56",
133 |   "groovy server pages": null,
134 |   "hack": "#878787",
135 |   "harbour": "#0e60e3",
136 |   "haskell": "#5e5086",
137 |   "haxe": "#df7900",
138 |   "hcl": null,
139 |   "hiveql": "#dce200",
140 |   "hlsl": null,
141 |   "holyc": "#ffefaf",
142 |   "html": "#e34c26",
143 |   "hy": "#7790B2",
144 |   "hyphy": null,
145 |   "idl": "#a3522f",
146 |   "idris": "#b30000",
147 |   "igor pro": "#0000cc",
148 |   "inform 7": null,
149 |   "inno setup": null,
150 |   "io": "#a9188d",
151 |   "ioke": "#078193",
152 |   "isabelle": "#FEFE00",
153 |   "isabelle root": null,
154 |   "j": "#9EEDFF",
155 |   "jasmin": null,
156 |   "java": "#b07219",
157 |   "java server pages": null,
158 |   "javascript": "#f1e05a",
159 |   "javascript+erb": null,
160 |   "jflex": null,
161 |   "jison": null,
162 |   "jison lex": null,
163 |   "jolie": "#843179",
164 |   "jsoniq": "#40d47e",
165 |   "jsonnet": "#0064bd",
166 |   "jsx": null,
167 |   "julia": "#a270ba",
168 |   "jupyter notebook": "#DA5B0B",
169 |   "kotlin": "#F18E33",
170 |   "krl": "#28430A",
171 |   "labview": null,
172 |   "lasso": "#999999",
173 |   "lean": null,
174 |   "lex": "#DBCA00",
175 |   "lfe": "#4C3023",
176 |   "lilypond": null,
177 |   "limbo": null,
178 |   "literate agda": null,
179 |   "literate coffeescript": null,
180 |   "literate haskell": null,
181 |   "livescript": "#499886",
182 |   "llvm": "#185619",
183 |   "logos": null,
184 |   "logtalk": null,
185 |   "lolcode": "#cc9900",
186 |   "lookml": "#652B81",
187 |   "loomscript": null,
188 |   "lsl": "#3d9970",
189 |   "lua": "#000080",
190 |   "m": null,
191 |   "m4": null,
192 |   "m4sugar": null,
193 |   "makefile": "#427819",
194 |   "mako": null,
195 |   "mask": "#f97732",
196 |   "mathematica": null,
197 |   "matlab": "#e16737",
198 |   "max": "#c4a79c",
199 |   "maxscript": "#00a6a6",
200 |   "mcfunction": "#E22837",
201 |   "mercury": "#ff2b2b",
202 |   "meson": "#007800",
203 |   "metal": "#8f14e9",
204 |   "minid": null,
205 |   "mirah": "#c7a938",
206 |   "mirc script": "#926059",
207 |   "mlir": "#5EC8DB",
208 |   "modelica": null,
209 |   "modula-2": null,
210 |   "modula-3": "#223388",
211 |   "module management system": null,
212 |   "monkey": null,
213 |   "moocode": null,
214 |   "moonscript": null,
215 |   "motorola 68k assembly": null,
216 |   "mql4": "#62A8D6",
217 |   "mql5": "#4A76B8",
218 |   "mtml": "#b7e1f4",
219 |   "muf": null,
220 |   "mupad": null,
221 |   "myghty": null,
222 |   "nasl": null,
223 |   "ncl": "#28431f",
224 |   "nearley": "#990000",
225 |   "nemerle": "#3d3c6e",
226 |   "nesc": "#94B0C7",
227 |   "netlinx": "#0aa0ff",
228 |   "netlinx+erb": "#747faa",
229 |   "netlogo": "#ff6375",
230 |   "newlisp": "#87AED7",
231 |   "nextflow": "#3ac486",
232 |   "nim": "#37775b",
233 |   "nit": "#009917",
234 |   "nix": "#7e7eff",
235 |   "nsis": null,
236 |   "nu": "#c9df40",
237 |   "numpy": null,
238 |   "objective-c": "#438eff",
239 |   "objective-c++": "#6866fb",
240 |   "objective-j": "#ff0c5a",
241 |   "objectscript": "#424893",
242 |   "ocaml": "#3be133",
243 |   "odin": "#60AFFE",
244 |   "omgrofl": "#cabbff",
245 |   "ooc": "#b0b77e",
246 |   "opa": null,
247 |   "opal": "#f7ede0",
248 |   "open policy agent": null,
249 |   "opencl": null,
250 |   "openedge abl": null,
251 |   "openqasm": "#AA70FF",
252 |   "openrc runscript": null,
253 |   "openscad": null,
254 |   "ox": null,
255 |   "oxygene": "#cdd0e3",
256 |   "oz": "#fab738",
257 |   "p4": "#7055b5",
258 |   "pan": "#cc0000",
259 |   "papyrus": "#6600cc",
260 |   "parrot": "#f3ca0a",
261 |   "parrot assembly": null,
262 |   "parrot internal representation": null,
263 |   "pascal": "#E3F171",
264 |   "pawn": "#dbb284",
265 |   "pep8": "#C76F5B",
266 |   "perl": "#0298c3",
267 |   "php": "#4F5D95",
268 |   "picolisp": null,
269 |   "piglatin": "#fcd7de",
270 |   "pike": "#005390",
271 |   "plpgsql": null,
272 |   "plsql": "#dad8d8",
273 |   "pogoscript": "#d80074",
274 |   "pony": null,
275 |   "postscript": "#da291c",
276 |   "pov-ray sdl": null,
277 |   "powerbuilder": "#8f0f8d",
278 |   "powershell": "#012456",
279 |   "processing": "#0096D8",
280 |   "prolog": "#74283c",
281 |   "propeller spin": "#7fa2a7",
282 |   "puppet": "#302B6D",
283 |   "purebasic": "#5a6986",
284 |   "purescript": "#1D222D",
285 |   "python": "#3572A5",
286 |   "python console": null,
287 |   "q": "#0040cd",
288 |   "qmake": null,
289 |   "qml": "#44a51c",
290 |   "quake": "#882233",
291 |   "r": "#198CE7",
292 |   "racket": "#3c5caa",
293 |   "ragel": "#9d5200",
294 |   "raku": "#0000fb",
295 |   "raml": "#77d9fb",
296 |   "rascal": "#fffaa0",
297 |   "realbasic": null,
298 |   "reason": "#ff5847",
299 |   "rebol": "#358a5b",
300 |   "red": "#f50000",
301 |   "redcode": null,
302 |   "ren'py": "#ff7f7f",
303 |   "renderscript": null,
304 |   "rexx": null,
305 |   "ring": "#2D54CB",
306 |   "riot": "#A71E49",
307 |   "robotframework": null,
308 |   "roff": "#ecdebe",
309 |   "rouge": "#cc0088",
310 |   "rpc": null,
311 |   "ruby": "#701516",
312 |   "runoff": "#665a4e",
313 |   "rust": "#dea584",
314 |   "sage": null,
315 |   "saltstack": "#646464",
316 |   "sas": "#B34936",
317 |   "scala": "#c22d40",
318 |   "scheme": "#1e4aec",
319 |   "scilab": null,
320 |   "sed": "#64b970",
321 |   "self": "#0579aa",
322 |   "shaderlab": null,
323 |   "shell": "#89e051",
324 |   "shellsession": null,
325 |   "shen": "#120F14",
326 |   "slash": "#007eff",
327 |   "slice": "#003fa2",
328 |   "smali": null,
329 |   "smalltalk": "#596706",
330 |   "smarty": null,
331 |   "smpl": "#c94949",
332 |   "smt": null,
333 |   "solidity": "#AA6746",
334 |   "sourcepawn": "#5c7611",
335 |   "sqf": "#3F3F3F",
336 |   "sqlpl": null,
337 |   "squirrel": "#800000",
338 |   "srecode template": "#348a34",
339 |   "stan": "#b2011d",
340 |   "standard ml": "#dc566d",
341 |   "starlark": "#76d275",
342 |   "stata": null,
343 |   "supercollider": "#46390b",
344 |   "swift": "#ffac45",
345 |   "swig": null,
346 |   "systemverilog": "#DAE1C2",
347 |   "tcl": "#e4cc98",
348 |   "tcsh": null,
349 |   "terra": "#00004c",
350 |   "tex": "#3D6117",
351 |   "thrift": null,
352 |   "ti program": "#A0AA87",
353 |   "tla": null,
354 |   "tsql": null,
355 |   "tsx": null,
356 |   "turing": "#cf142b",
357 |   "txl": null,
358 |   "typescript": "#2b7489",
359 |   "unified parallel c": null,
360 |   "unix assembly": null,
361 |   "uno": null,
362 |   "unrealscript": "#a54c4d",
363 |   "urweb": null,
364 |   "v": "#5d87bd",
365 |   "vala": "#fbe5cd",
366 |   "vba": "#867db1",
367 |   "vbscript": "#15dcdc",
368 |   "vcl": "#148AA8",
369 |   "verilog": "#b2b7f8",
370 |   "vhdl": "#adb2cb",
371 |   "vim script": "#199f4b",
372 |   "visual basic .net": "#945db7",
373 |   "volt": "#1F1F1F",
374 |   "vue": "#2c3e50",
375 |   "wdl": "#42f1f4",
376 |   "webassembly": "#04133b",
377 |   "webidl": null,
378 |   "wisp": "#7582D1",
379 |   "wollok": "#a23738",
380 |   "x10": "#4B6BEF",
381 |   "xbase": "#403a40",
382 |   "xc": "#99DA07",
383 |   "xojo": null,
384 |   "xproc": null,
385 |   "xquery": "#5232e7",
386 |   "xs": null,
387 |   "xslt": "#EB8CEB",
388 |   "xtend": null,
389 |   "yacc": "#4B6C4B",
390 |   "yara": "#220000",
391 |   "yasnippet": "#32AB90",
392 |   "zap": "#0d665e",
393 |   "zeek": null,
394 |   "zenscript": "#00BCD1",
395 |   "zephir": "#118f9e",
396 |   "zig": "#ec915c",
397 |   "zil": "#dc75e5",
398 |   "zimpl": null
399 | }
400 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h5>About this website</h5>
 4 |     <p>
 5 |       <strong>Dominican Open Source</strong>
 6 |       is an initiative to gather all possible public data about projects in GitHub from developers of the
 7 |       <strong>Dominican Republic</strong>
 8 |       using the
 9 |       <strong> <a target="_blank" href="https://developer.github.com/v4/">GitHub GraphQL API</a>. </strong>
10 |     </p>
11 |     <p>
12 |       The main purpose of this website is to show local efforts that
13 |       <strong>Dominicans</strong>
14 |       are contributing toward open source communities.
15 |     </p>
16 |     <p>
17 |       <strong>VueDominicana</strong>
18 |       is an initiative to replicate all the features that
19 |       <a target="_blank" href="https://github.com/developersdo/opensource/">opensource</a> has, just for fun and at the
20 |       same time to introduce more people to the open-source community. This is an excellent project for someone who
21 |       wants to learn Vue.
22 |     </p>
23 |     <div class="row">
24 |       <PopularLanguages />
25 |       <Statistics />
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import Statistics from "@/components/Statistics";
32 | import PopularLanguages from "@/components/PopularLanguages";
33 | 
34 | export default {
35 |   name: "About",
36 |   components: {
37 |     PopularLanguages,
38 |     Statistics
39 |   }
40 | };
41 | </script>
42 | 
43 | <style lang="scss" scoped>
44 | .about {
45 |   .row {
46 |     margin-left: -0.75rem;
47 |     margin-right: -0.75rem;
48 |   }
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/views/Developers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <SubNav :sections="sections" />
 4 |     <router-view />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import SubNav from "@/components/SubNav";
10 | 
11 | export default {
12 |   name: "Deveopers",
13 |   components: {
14 |     SubNav
15 |   },
16 |   data() {
17 |     return {
18 |       sections: [
19 |         {
20 |           name: "PopularDevelopers",
21 |           label: "Popular"
22 |         },
23 |         {
24 |           name: "RecentlyJoinedDevelopers",
25 |           label: "Recently joined"
26 |         }
27 |       ]
28 |     };
29 |   }
30 | };
31 | </script>
32 | 
33 | <style lang="scss" scoped></style>
34 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <HelloWorld msg="Hello Open Source Comunity (:" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | import HelloWorld from "@/components/HelloWorld.vue";
10 | 
11 | export default {
12 |   name: "Home",
13 |   components: {
14 |     HelloWorld
15 |   }
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/views/NewRepositories.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3 class="center-align">New Repositories</h3>
 4 |     <slot />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {};
10 | </script>
11 | 
12 | <style lang="scss" scoped></style>
13 | 


--------------------------------------------------------------------------------
/src/views/PopularDevelopers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3 class="center-align">Popular Developers</h3>
 4 |     <p class="center">
 5 |       Showing
 6 |       <strong>{{ developers.length.toLocaleString() }}</strong> developers
 7 |       <span>sorted by followers.</span>
 8 |     </p>
 9 |     <InputSearch label="Filter developer by name or username..." v-model="searchTerm" />
10 |     <div class="row flex">
11 |       <DeveloperCard v-for="dev in filteredDevelopers" :developer="dev" :key="dev.id" />
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { mapState } from "vuex";
18 | import DeveloperCard from "@/components/DeveloperCard";
19 | import InputSearch from "@/components/InputSearch";
20 | import { useSearchDeveloper } from "@/composable/useSearchDeveloper";
21 | 
22 | export default {
23 |   name: "PopularDevelopers",
24 |   components: {
25 |     DeveloperCard,
26 |     InputSearch
27 |   },
28 |   data() {
29 |     return {
30 |       searchTerm: "",
31 |       search: () => {}
32 |     };
33 |   },
34 |   computed: {
35 |     ...mapState({
36 |       developers: state => state.Developers.developers
37 |     }),
38 |     filteredDevelopers() {
39 |       return this.search(this.searchTerm);
40 |     }
41 |   },
42 |   watch: {
43 |     developers: {
44 |       handler() {
45 |         const { searchPopular } = useSearchDeveloper();
46 |         this.search = searchPopular;
47 |       },
48 |       immediate: true
49 |     }
50 |   }
51 | };
52 | </script>
53 | 
54 | <style lang="scss" scoped>
55 | span {
56 |   font-style: italic;
57 |   font-weight: 600;
58 | }
59 | .flex {
60 |   display: flex;
61 |   flex-wrap: wrap;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/views/PopularRepositories.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3 class="center-align">
 4 |       Popular <span>{{ language }}</span> Repositories
 5 |     </h3>
 6 |     <p class="center">
 7 |       Showing <strong>{{ filteredLanguageRepositories.length.toLocaleString() }}</strong> repositories
 8 |       <span>sorted by stars.</span>
 9 |     </p>
10 |     <InputSearch label="Filter repository by name or description..." v-model="searchTerm" />
11 |     <Repositories v-for="repository in filteredRepositories" :repository="repository" :key="repository.id" />
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapState } from "vuex";
17 | import sortBy from "lodash/sortBy";
18 | import Repositories from "@/components/RepositoryCard";
19 | import InputSearch from "@/components/InputSearch";
20 | import Searcher from "@/util/Searcher";
21 | 
22 | const repoSearcher = new Searcher().setField("name").setField("description");
23 | 
24 | export default {
25 |   name: "PopularRepositories",
26 |   components: {
27 |     Repositories,
28 |     InputSearch
29 |   },
30 |   data() {
31 |     return {
32 |       searchTerm: ""
33 |     };
34 |   },
35 |   computed: {
36 |     ...mapState({
37 |       repositories: state => state.Repositories.repositories
38 |     }),
39 |     filteredLanguageRepositories() {
40 |       if (this.language) {
41 |         return this.repositories.filter(item => item.languages.includes(this.language));
42 |       }
43 | 
44 |       return this.repositories;
45 |     },
46 |     filteredRepositories() {
47 |       if (!this.searchTerm) {
48 |         return this.filteredLanguageRepositories.slice(0, 10);
49 |       }
50 | 
51 |       return sortBy(repoSearcher.findAll(this.searchTerm), repo => -repo.stargazers).slice(0, 10);
52 |     },
53 |     language() {
54 |       return this.$route.params.language || null;
55 |     }
56 |   },
57 |   watch: {
58 |     repositories: {
59 |       handler() {
60 |         repoSearcher.setData(this.filteredLanguageRepositories);
61 |       },
62 |       immediate: true
63 |     }
64 |   }
65 | };
66 | </script>
67 | 
68 | <style lang="scss" scoped>
69 | span {
70 |   font-style: italic;
71 |   font-weight: 600;
72 | }
73 | h3 span {
74 |   text-decoration: underline;
75 |   font-size: 2.92rem;
76 |   line-height: 110%;
77 |   margin: 1.9466666667rem 0 1.168rem 0;
78 |   font-style: inherit;
79 |   font-weight: inherit;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/views/RecentlyJoinedDevelopers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3 class="center-align">New Developers</h3>
 4 |     <p class="center">
 5 |       Showing
 6 |       <strong>{{ newDevelopers.length.toLocaleString() }}</strong> developers
 7 |       <span>that has joined in the last 30 days.</span>
 8 |     </p>
 9 |     <InputSearch label="Filter developer by name or username..." v-model="searchTerm" />
10 |     <div class="row flex">
11 |       <DeveloperCard v-for="dev in filteredDevelopers" :developer="dev" :key="dev.id" />
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { mapGetters } from "vuex";
18 | import DeveloperCard from "@/components/DeveloperCard";
19 | import InputSearch from "@/components/InputSearch";
20 | import { useSearchDeveloper } from "@/composable/useSearchDeveloper";
21 | 
22 | export default {
23 |   name: "RecentlyJoinedDevelopers",
24 |   components: {
25 |     DeveloperCard,
26 |     InputSearch
27 |   },
28 |   data() {
29 |     return {
30 |       searchTerm: "",
31 |       search: () => {}
32 |     };
33 |   },
34 |   computed: {
35 |     ...mapGetters({
36 |       newDevelopers: "Developers/newDevelopers"
37 |     }),
38 |     filteredDevelopers() {
39 |       return this.search(this.searchTerm);
40 |     }
41 |   },
42 |   watch: {
43 |     newDevelopers: {
44 |       handler() {
45 |         const { searchNewDevelopers } = useSearchDeveloper();
46 |         this.search = searchNewDevelopers;
47 |       },
48 |       immediate: true
49 |     }
50 |   }
51 | };
52 | </script>
53 | 
54 | <style lang="scss" scoped>
55 | span {
56 |   font-style: italic;
57 |   font-weight: 600;
58 | }
59 | .flex {
60 |   display: flex;
61 |   flex-wrap: wrap;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/views/Repositories.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <SubNav :sections="sections" />
 4 |     <router-view />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import SubNav from "@/components/SubNav";
10 | 
11 | export default {
12 |   name: "Repositories",
13 |   components: {
14 |     SubNav
15 |   },
16 |   data() {
17 |     return {
18 |       sections: [
19 |         {
20 |           name: "PopularRepositories",
21 |           label: "Popular"
22 |         },
23 |         {
24 |           name: "NewRepositories",
25 |           label: "New"
26 |         }
27 |       ]
28 |     };
29 |   }
30 | };
31 | </script>
32 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from "@vue/test-utils";
 2 | import HelloWorld from "@/components/HelloWorld.vue";
 3 | 
 4 | describe("HelloWorld.vue", () => {
 5 |   it("renders props.msg when passed", () => {
 6 |     const msg = "new message";
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg }
 9 |     });
10 |     expect(wrapper.text()).toMatch(msg);
11 |   });
12 | });
13 | 


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