├── .gitignore
├── .npmignore
├── .travis.yml
├── components
├── category.js
├── filter-button.js
├── footer.js
├── list-item.js
├── list.js
├── meta.js
└── page-title.js
├── contributing.md
├── license
├── package.json
├── pages
└── index.js
├── readme.md
├── services
└── get-languages.js
├── static
├── analytics.js
└── oss.png
├── utils
└── language.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # nyc test coverage
18 | .nyc_output
19 |
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 |
23 | # node-waf configuration
24 | .lock-wscript
25 |
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 |
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 |
33 | # Optional npm cache directory
34 | .npm
35 |
36 | # Optional REPL history
37 | .node_repl_history
38 |
39 | # Others
40 | .next
41 | env.js
42 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # include secrets when deploying to now
2 | !.env
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - '6'
4 |
--------------------------------------------------------------------------------
/components/category.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const {
4 | string
5 | } = React.PropTypes
6 |
7 | const Category = props => (
8 |
9 | {props.language}
10 |
11 |
24 |
25 | )
26 |
27 | Category.propTypes = {
28 | language: string
29 | }
30 |
31 | export default Category
32 |
--------------------------------------------------------------------------------
/components/filter-button.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const {
4 | string,
5 | number,
6 | func,
7 | oneOfType
8 | } = React.PropTypes
9 |
10 | const FilterButton = props => {
11 | const filterBtnSelected = props.currentFilter === props.value ? 'filter__btn--selected' : ''
12 |
13 | return (
14 |
71 | )
72 | }
73 |
74 | FilterButton.propTypes = {
75 | value: string,
76 | secondaryText: oneOfType([string, number]),
77 | onFilter: func,
78 | currentFilter: string
79 | }
80 |
81 | export default FilterButton
82 |
--------------------------------------------------------------------------------
/components/footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Footer = () => {
4 | return (
5 |
54 | )
55 | }
56 |
57 | export default Footer
58 |
--------------------------------------------------------------------------------
/components/list-item.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Category from './category'
3 |
4 | const {
5 | string,
6 | arrayOf
7 | } = React.PropTypes
8 |
9 | const ListItem = props => {
10 | const categories = props.languages.map((language, index) => (
11 |
12 |
13 |
14 | ))
15 |
16 | return (
17 |
18 |
19 | {props.title}
20 |
21 |
22 |
23 |
24 |
74 |
75 | )
76 | }
77 |
78 | ListItem.propTypes = {
79 | title: string,
80 | html_url: string,
81 | languages: arrayOf(string)
82 | }
83 |
84 | export default ListItem
85 |
--------------------------------------------------------------------------------
/components/list.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ListItem from './list-item'
3 |
4 | const {
5 | arrayOf,
6 | object
7 | } = React.PropTypes
8 |
9 | const List = props => {
10 | const list = props.list.map(issue => (
11 | this.setState({languageFilter})}/>
12 | ))
13 |
14 | return (
15 |
16 | {list}
17 |
18 |
19 |
20 |
21 |
34 |
35 | )
36 | }
37 |
38 | List.propTypes = {
39 | list: arrayOf(object)
40 | }
41 |
42 | export default List
43 |
--------------------------------------------------------------------------------
/components/meta.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Head from 'next/head'
3 |
4 | export default () => (
5 |
6 |
7 |
Open Source — It's never too late to join the party 🎉🎉
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
50 |
51 | )
52 |
--------------------------------------------------------------------------------
/components/page-title.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const PageTitle = () => (
4 |
5 |
Embrace Open Source
6 | A list of GitHub issues to help beginners make their first pull request.
7 |
8 |
27 |
28 | )
29 |
30 | export default PageTitle
31 |
--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Thanks for being willing to contribute!
4 |
5 | ## Project setup
6 |
7 | 1. Fork and clone the repo
8 | 2. `$ npm install` to install dependencies
9 | 3. `$ npm run dev` to run the project
10 |
11 | ## Choose an issue
12 |
13 | You can search for an issue [here](https://github.com/bukinoshita/open-source/issues).
14 |
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Bu Kinoshita
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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "open-source",
3 | "version": "1.2.0",
4 | "description": "A list of GitHub issues to help beginners make their first pull request",
5 | "repository": {
6 | "url": "git@github.com:bukinoshita/open-source.git",
7 | "type": "git"
8 | },
9 | "scripts": {
10 | "dev": "next",
11 | "build": "next build",
12 | "start": "next start",
13 | "test": "xo"
14 | },
15 | "dependencies": {
16 | "isomorphic-fetch": "^2.2.1",
17 | "lodash": "4.17.4",
18 | "next": "2.0.0-beta.20",
19 | "react": "^15.4.2"
20 | },
21 | "author": "Bu Kinoshita ",
22 | "license": "MIT",
23 | "devDependencies": {
24 | "eslint-config-xo-react": "^0.10.0",
25 | "eslint-plugin-react": "^6.10.0",
26 | "xo": "^0.17.1"
27 | },
28 | "xo": {
29 | "extends": "xo-react",
30 | "semicolon": false,
31 | "space": true,
32 | "ignores": [
33 | "static/*.js"
34 | ],
35 | "rules": {
36 | "react/no-unescaped-entities": 0,
37 | "react/jsx-no-bind": 0,
38 | "camelcase": 0,
39 | "no-return-assign": 0,
40 | "no-unused-vars": 0
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import fetch from 'isomorphic-fetch'
3 | import { flatten, uniq, set } from 'lodash'
4 | import Meta from './../components/meta'
5 | import PageTitle from './../components/page-title'
6 | import List from './../components/list'
7 | import FilterButton from './../components/filter-button'
8 | import Footer from './../components/footer'
9 | import getLanguages from './../services/get-languages'
10 |
11 | const clearLanguageFilterButtonText = 'All languages'
12 | const { arrayOf, object, shape, number } = React.PropTypes
13 |
14 | export default class OpenSource extends Component {
15 | static async getInitialProps() {
16 | const getIssuesRes = await fetch(
17 | `https://api.github.com/search/issues?q=state:open+label:first-timers-only&sort=created&order=desc&per_page=100&access_token=${
18 | process.env.GITHUB_TOKEN
19 | }`,
20 | { cache: 'default' }
21 | )
22 | const issuesResJson = await getIssuesRes.json()
23 | const issues = issuesResJson.items
24 | const repoLanguagesStore = await getLanguages(issues)
25 | const languages = uniq(flatten(Object.values(repoLanguagesStore)))
26 | const languageCountStore = languages.reduce(
27 | (languageCountStore, language) => set(languageCountStore, language, 0),
28 | { [clearLanguageFilterButtonText]: issues.length }
29 | )
30 |
31 | issues.forEach(issue => {
32 | issue.languages = repoLanguagesStore[issue.repository_url]
33 | issue.languages.forEach(language => (languageCountStore[language] += 1))
34 | })
35 |
36 | return { issues, languageCountStore }
37 | }
38 |
39 | constructor(props) {
40 | super(props)
41 |
42 | this.handleCollapseFilter = this.handleCollapseFilter.bind(this)
43 | this.state = {
44 | languageFilter: clearLanguageFilterButtonText,
45 | collapsed: false
46 | }
47 | }
48 |
49 | handleCollapseFilter() {
50 | this.setState({
51 | collapsed: !this.state.collapsed
52 | })
53 | }
54 |
55 | render() {
56 | const { issues, languageCountStore } = this.props
57 | const { languageFilter, collapsed } = this.state
58 | const isCollapsed = collapsed ? 'is-open' : ''
59 | const expanded = collapsed ? 'Close filter' : 'Expand filter'
60 | let issueList
61 |
62 | if (languageFilter === clearLanguageFilterButtonText) {
63 | issueList = issues
64 | } else {
65 | issueList = issues.filter(issue =>
66 | issue.languages.includes(languageFilter)
67 | )
68 | }
69 |
70 | const languageFilterButtons = Object.keys(languageCountStore)
71 | .sort(
72 | (languageA, languageB) =>
73 | languageCountStore[languageB] - languageCountStore[languageA]
74 | )
75 | .map(language => (
76 | this.setState({ languageFilter })}
81 | currentFilter={this.state.languageFilter}
82 | />
83 | ))
84 |
85 | return (
86 |
87 |
88 |
91 |
92 |
93 |
94 |
95 |
99 | {expanded}
100 |
110 |
111 |
112 | {languageFilterButtons}
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
183 |