├── .editorconfig ├── .env.sample ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo.png ├── manifest.json ├── opensource.png └── robots.txt ├── src ├── app │ ├── Router.js │ ├── assets │ │ ├── back.svg │ │ ├── computer.svg │ │ ├── details.svg │ │ ├── detailz.svg │ │ ├── example.svg │ │ ├── front.svg │ │ ├── icons │ │ │ ├── fork.svg │ │ │ ├── star.svg │ │ │ └── view.svg │ │ ├── index.js │ │ ├── issue.svg │ │ ├── issues.svg │ │ ├── langing.svg │ │ ├── logo.png │ │ └── search.svg │ ├── components │ │ ├── Button │ │ │ └── index.js │ │ ├── ChartLang │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── Footer │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── IssueList │ │ │ └── index.js │ │ ├── Navbar │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── Progressbar │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── ProjectCard │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── ProjectDetailsCard │ │ │ ├── index.js │ │ │ ├── style.css │ │ │ └── style.js │ │ ├── SearchBoxx │ │ │ ├── index.js │ │ │ └── style.js │ │ └── index.js │ ├── pages │ │ ├── Contact.js │ │ ├── LandingPage.js │ │ ├── Login.js │ │ ├── NotFoundPage.js │ │ ├── ProjectDetail.js │ │ ├── Projects.js │ │ ├── Start.js │ │ ├── index.js │ │ ├── style.css │ │ └── style.js │ └── redux │ │ ├── actions │ │ └── index.js │ │ ├── index.js │ │ ├── reducers │ │ ├── index.js │ │ └── projectReducer.js │ │ └── store │ │ └── index.js ├── index.js ├── reportWebVitals.js └── reset.css └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.env.sample: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL = 2 | REACT_APP_GH_CLIENT_ID = 3 | REACT_APP_ALGOLIA_KEY_ONE = 4 | REACT_APP_ALGOLIA_KEY_TWO = 5 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "plugin:react/recommended", 8 | "standard" 9 | ], 10 | "parserOptions": { 11 | "ecmaFeatures": { 12 | "jsx": true 13 | }, 14 | "ecmaVersion": 12, 15 | "sourceType": "module" 16 | }, 17 | "plugins": [ 18 | "react" 19 | ], 20 | "rules": { 21 | "react/prop-types": "off" 22 | }, 23 | "settings": { 24 | "react": { 25 | "version": "latest" 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .env 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | .eslintcache 27 | client/.eslintcache 28 | .vscode 29 | .idea/**/* 30 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "none", 4 | "tabWidth": 2, 5 | "semi": false, 6 | "singleQuote": true, 7 | "space-before-function-paren", 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 opensource-place 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 Place (React Front-end) 2 |

3 | 4 | 5 | 6 | ## Want to Contribute? 7 | 8 | You have 2 things you can do: 9 | 10 | 1. Either open an issue about a bug, feature request, page, or component, 11 | 2. __Or__ close an issue, by writing and/or implementing it in your own fork! 12 | 13 | 14 | 15 | ## A Little About Design 16 | 17 | [`Figma Design Sheet`](https://www.figma.com/file/qOFIkueP572MnHwaF7ey0a/Untitled?node-id=59%3A490) 18 | is here in case you want to take a look. 19 | Bear in mind that it's still in development! 20 | 21 | 22 | 23 | ## Development & Deploying Guide 24 | 25 | Firstly, install your dependencies! 26 | 27 | ```sh 28 | yarn install 29 | ``` 30 | 31 | Next up, create yourself a `.env` file! 32 | 33 | ```sh 34 | # .env 35 | REACT_APP_API_URL = {your backend api url here} 36 | ``` 37 | 38 | Then you can do: 39 | 40 | ```sh 41 | yarn start 42 | ``` 43 | 44 | for a development server, or 45 | 46 | ```sh 47 | yarn run build 48 | ``` 49 | 50 | for building the project into static, deployable files. 51 | 52 | 53 | 54 | ## Linting 55 | 56 | > Additionally, you can do `yarn run lint` to see formatting errors 57 | > and `yarn run lint:fix` to fix them. 58 | > Don't worry if you forgot to lint your code! 59 | > Someone will definitely fix it in another commit for you :smiley: 60 | 61 | 62 | ## .vscode settings.json 63 | ``` 64 | { 65 | "editor.codeActionsOnSave": { 66 | "source.fixAll.eslint": true 67 | }, 68 | "eslint.validate": ["js"], 69 | "editor.formatOnSave": true 70 | } 71 | ``` 72 | ## for disable eslint while coding 73 | ``` 74 | /* eslint-disable */ 75 | ``` 76 | 77 | 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@nivo/bar": "^0.67.0", 7 | "@nivo/core": "^0.67.0", 8 | "@reduxjs/toolkit": "^1.5.0", 9 | "@tailwindcss/postcss7-compat": "^2.0.2", 10 | "@testing-library/jest-dom": "^5.11.4", 11 | "@testing-library/react": "^11.1.0", 12 | "@testing-library/user-event": "^12.1.10", 13 | "algoliasearch": "^4.8.5", 14 | "axios": "^0.21.1", 15 | "bizcharts": "^4.1.5", 16 | "dotenv": "^8.2.0", 17 | "eslint": "^7.12.1", 18 | "eslint-config-standard": "^16.0.2", 19 | "eslint-plugin-import": "^2.22.1", 20 | "eslint-plugin-node": "^11.1.0", 21 | "eslint-plugin-promise": "^4.2.1", 22 | "eslint-plugin-react": "^7.22.0", 23 | "markdown-to-jsx": "^7.1.1", 24 | "react": "^17.0.1", 25 | "react-circular-progressbar": "^2.0.3", 26 | "react-dom": "^17.0.1", 27 | "react-instantsearch-dom": "^6.9.0", 28 | "react-redux": "^7.2.2", 29 | "react-router-dom": "^5.2.0", 30 | "react-scripts": "4.0.1", 31 | "react-search-input": "^0.11.3", 32 | "redux": "^4.0.5", 33 | "redux-logger": "^3.0.6", 34 | "redux-thunk": "^2.3.0", 35 | "styled-components": "^5.2.1", 36 | "web-vitals": "^0.2.4" 37 | }, 38 | "scripts": { 39 | "start": "react-scripts start", 40 | "build": "react-scripts build", 41 | "test": "react-scripts test", 42 | "eject": "react-scripts eject", 43 | "lint": "eslint .", 44 | "lint:fix": "eslint . --fix" 45 | }, 46 | "browserslist": { 47 | "production": [ 48 | ">0.2%", 49 | "not dead", 50 | "not op_mini all" 51 | ], 52 | "development": [ 53 | "last 1 chrome version", 54 | "last 1 firefox version", 55 | "last 1 safari version" 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-place/frontend/a5942eb705015823692f72b8df3c1f8111ae198b/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 34 | Open Source Place 35 | 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-place/frontend/a5942eb705015823692f72b8df3c1f8111ae198b/public/logo.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/opensource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-place/frontend/a5942eb705015823692f72b8df3c1f8111ae198b/public/opensource.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/app/Router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter as Routers, Route, Switch } from 'react-router-dom' 3 | import axios from 'axios' 4 | import { Projects, LandingPage, Start, Login, ProjectDetail, Contact, NotFoundPage } from './pages' 5 | import { Provider } from 'react-redux' 6 | import storex from './redux/store' 7 | 8 | const Router = () => { 9 | axios.defaults.baseURL = process.env.REACT_APP_API_URL 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ) 26 | } 27 | 28 | export default Router 29 | -------------------------------------------------------------------------------- /src/app/assets/computer.svg: -------------------------------------------------------------------------------- 1 | 3_Web development_isometric -------------------------------------------------------------------------------- /src/app/assets/details.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /src/app/assets/example.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/assets/icons/fork.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/assets/icons/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/assets/icons/view.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/app/assets/index.js: -------------------------------------------------------------------------------- 1 | import Star from './icons/star.svg' 2 | import Fork from './icons/fork.svg' 3 | import View from './icons/view.svg' 4 | import IssuesWarning from './issues.svg' 5 | import front from './front.svg' 6 | import landing from './langing.svg' 7 | import details from './details.svg' 8 | import issue from './issue.svg' 9 | import search from './search.svg' 10 | import computer from './computer.svg' 11 | 12 | export { Star, Fork, View, IssuesWarning, front, landing, details, search, issue, computer } 13 | -------------------------------------------------------------------------------- /src/app/assets/issues.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/assets/langing.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-place/frontend/a5942eb705015823692f72b8df3c1f8111ae198b/src/app/assets/logo.png -------------------------------------------------------------------------------- /src/app/components/Button/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const StyledButton = styled.button` 4 | border-radius: 8px; 5 | padding: 0.5rem; 6 | width: ${(props) => props.width}; 7 | height: ${(props) => props.height}; 8 | border: ${(props) => props.border}; 9 | margin-right: ${(props) => props.margin}; 10 | margin: ${(props) => props.marging}; 11 | color: ${(props) => props.color}; 12 | border-radius: ${(props) => props.radius}; 13 | font-weight: ${(props) => props.fontWeight}; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: ${(props) => props.fontSize}; 18 | background-color: ${(props) => props.bcolor}; 19 | 20 | background: ${(props) => 21 | props.dublicate 22 | ? '#FFC107' 23 | : props.bug 24 | ? '#B83239' 25 | : props.issue 26 | ? '#16B83F' 27 | : props.wanted 28 | ? '#109DEB' 29 | : props.hard 30 | ? '#00463A' 31 | : props.easy 32 | ? '#008622' 33 | : props.deneme 34 | ? '#1F8874' 35 | : props.landing 36 | ? '#63D0AB' 37 | : props.primary 38 | ? '#1F8874' 39 | : '#00000'}; 40 | padding: ${(props) => props.padding || '1rem'}; 41 | ` 42 | export default StyledButton 43 | -------------------------------------------------------------------------------- /src/app/components/ChartLang/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container } from './style' 3 | 4 | const ChartLang = ({ repository }) => { 5 | return 6 | } 7 | 8 | export default ChartLang 9 | -------------------------------------------------------------------------------- /src/app/components/ChartLang/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Container = styled.div` 4 | @media screen and (min-width: 1024px) { 5 | } 6 | 7 | @media screen and (min-width: 768px) { 8 | } 9 | 10 | @media screen and (min-width: 320px) { 11 | } 12 | ` 13 | 14 | export { Container } 15 | -------------------------------------------------------------------------------- /src/app/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { Container, Text } from './style' 4 | 5 | const year = new Date().getFullYear() 6 | 7 | const Footer = () => ( 8 | 9 |
10 | 11 | Documents 12 | 13 | 14 | Contacts 15 | 16 |
17 | © Copyright {year} - Open Source Place 18 | 19 | ) 20 | 21 | export default Footer 22 | -------------------------------------------------------------------------------- /src/app/components/Footer/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Container = styled.div` 4 | width: 100%; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | flex-direction: column; 9 | margin-top: auto; 10 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(139, 255, 234, 0.2) 100%); 11 | ` 12 | const Wrapper = styled.div` 13 | display: flex; 14 | align-items: flex-end; 15 | justify-content: center; 16 | font-family: Arial, Helvetica, sans-serif !important; 17 | color: '#21403A'; 18 | width: 1rem; 19 | ` 20 | const Link = styled.button` 21 | text-decoration: none; 22 | margin-left: 2%; 23 | font-size: 1.5rem; 24 | font-weight: 500; 25 | font-style: normal; 26 | color: rgb(75, 125, 116); 27 | padding: 1rem; 28 | &:hover { 29 | color: rgb(33, 64, 58); 30 | } 31 | ` 32 | const Menus = styled.div` 33 | display: flex; 34 | ` 35 | const Img = styled.img` 36 | width: 10em; 37 | height: 10em; 38 | ` 39 | const Text = styled.p` 40 | font-size: 1rem; 41 | font-weight: 300; 42 | color: #4b7d74; 43 | ` 44 | 45 | export { Container, Img, Wrapper, Link, Menus, Text } 46 | -------------------------------------------------------------------------------- /src/app/components/IssueList/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import axios from 'axios' 3 | 4 | const IssueList = (props) => { 5 | const [issues, setIssues] = useState([]) 6 | 7 | useEffect(() => { 8 | dataFetch() 9 | }, []) 10 | 11 | const dataFetch = async () => { 12 | const res = await axios.get(`/${props.repository_slug}/issues`) 13 | setIssues(res.data) 14 | } 15 | 16 | return issues.map((issue, index) => ( 17 |
  • 18 | 19 | {issue.title} 20 | 21 |
    • 22 | )) 23 | } 24 | 25 | export default IssueList 26 | -------------------------------------------------------------------------------- /src/app/components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import styled from 'styled-components' 4 | import { Wrapper, ItemsWrapper, LogoAndText, Menus, NavItem, NavTitle } from './style' 5 | 6 | const Navbar = styled.nav` 7 | padding: 0.5rem 10%; 8 | width: 100%; 9 | position: fixed; 10 | top: 0; 11 | z-index: 1; 12 | background-color: #f7f7f7; 13 | box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%), 0 6px 20px 2px rgb(0 0 0 / 3%); 14 | @media screen and (max-width: 768px) { 15 | padding: 0.5rem 5px; 16 | } 17 | ` 18 | const LogoImg = styled.img` 19 | width: 35px; 20 | 21 | @media screen and (max-width: 768px) { 22 | width: 38px; 23 | } 24 | ` 25 | 26 | export const NavBar = () => ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | Open Source Place 34 | 35 | 36 | 37 | 38 | 39 | Add Project 40 | 41 | 42 | 43 | 44 | Projects 45 | 46 | 47 | 48 | 49 | Documents 50 | 51 | 52 | 53 | 54 | Contact 55 | 56 | 57 | 58 | 59 | 60 | 61 | ) 62 | 63 | export default NavBar 64 | -------------------------------------------------------------------------------- /src/app/components/Navbar/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Container = styled.div` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | flex-direction: column; 8 | border-radius: 15px; 9 | position: fixed; 10 | bottom: 0; 11 | ` 12 | const Wrapper = styled.div` 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | width: 100%; 17 | background-color: #fff; 18 | ` 19 | const ItemsWrapper = styled.div` 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-between; 23 | width: 100%; 24 | 25 | @media screen and (max-width: 768px) { 26 | flex-direction: column; 27 | } 28 | ` 29 | const LogoAndText = styled.div` 30 | display: flex; 31 | align-items: center; 32 | font-weight: 600; 33 | font-size: 30px; 34 | ` 35 | const Menus = styled.div` 36 | margin-right: 5px; 37 | display: flex; 38 | margin-left: auto; 39 | 40 | @media screen and (max-width: 768px) { 41 | margin: 0 auto; 42 | padding-top: 1rem; 43 | justify-content: center; 44 | flex-wrap: wrap; 45 | } 46 | ` 47 | const NavItem = styled.div` 48 | margin-left: 25px; 49 | color: '#1FB79B' !important; 50 | font-weight: 600; 51 | 52 | @media screen and (max-width: 768px) { 53 | margin: 0.5rem; 54 | } 55 | ` 56 | const NavTitle = styled.div` 57 | margin-left: 10px; 58 | font-size: 18px; 59 | color: #1fb79b; 60 | 61 | @media screen and (max-width: 768px) { 62 | font-size: 22px; 63 | } 64 | ` 65 | 66 | export { Container, Wrapper, ItemsWrapper, LogoAndText, Menus, NavItem, NavTitle } 67 | -------------------------------------------------------------------------------- /src/app/components/Progressbar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, TopDiv, Text, LengthText } from './style' 3 | import { 4 | buildStyles, 5 | CircularProgressbarWithChildren 6 | } from 'react-circular-progressbar' 7 | 8 | const Progressbar = ({ issues }) => { 9 | const progress = issues.length 10 | return ( 11 | 12 | 13 |
    20 | 28 | 29 | {issues.length} 30 | issues 31 | 32 | 33 |
    34 |     35 |     36 | ) 37 | } 38 | 39 | export default Progressbar 40 | -------------------------------------------------------------------------------- /src/app/components/Progressbar/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Container = styled.div` 4 | @media screen and (min-width: 1024px) { 5 | } 6 | 7 | @media screen and (min-width: 768px) { 8 | } 9 | 10 | @media screen and (min-width: 320px) { 11 | } 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: flex-start; 16 | height: 100%; 17 | width: 100%; 18 | ` 19 | 20 | const Text = styled.div` 21 | height: 70%; 22 | width: 70%; 23 | text-align: center; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | font-size: 0.75rem; 28 | color: #333333; 29 | background: #f2f2f2; 30 | border-radius: 100%; 31 | ` 32 | const TopDiv = styled.div`` 33 | const LengthText = styled.strong` 34 | display: flex; 35 | justify-content: center; 36 | font-size: 24px; 37 | ` 38 | 39 | export { Container, Text, TopDiv, LengthText } 40 | -------------------------------------------------------------------------------- /src/app/components/ProjectCard/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { Container, Text, TopDiv, BottomDiv } from './style' 4 | import { StyledButton, Progressbar } from '../index' 5 | import { ResponsiveBar } from '@nivo/bar' 6 | 7 | const ProjectCard = ({ hit }) => { 8 | const data = [hit.languages] 9 | const path = `/project${hit.pathname}` 10 | const pathx = path.split('/') 11 | return ( 12 | 13 | 14 | 15 | {pathx[3]} 16 | 17 | 76 | {id} : {value} 77 | 78 | ) 79 | }} 80 | motionStiffness={90} 81 | motionDamping={15} 82 | /> 83 | 84 | 85 | 94 | Details 95 | 96 | 97 | 98 | 99 | ) 100 | } 101 | 102 | export default ProjectCard 103 | -------------------------------------------------------------------------------- /src/app/components/ProjectCard/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Container = styled.div` 4 | @media screen and (min-width: 1024px) { 5 | height: 28rem; 6 | width: 18rem; 7 | } 8 | 9 | @media screen and (min-width: 768px) { 10 | height: 28rem; 11 | width: 18rem; 12 | } 13 | 14 | @media screen and (min-width: 320px) { 15 | height: 29rem; 16 | width: 18rem; 17 | top: 1rem; 18 | } 19 | display: flex; 20 | flex-direction: column; 21 | border: 2px solid #4b7d74; 22 | border-radius: 30px; 23 | justify-content: space-between; 24 | margin: 2rem 0.6rem; 25 | transition: all 0.18s ease; 26 | box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.25); 27 | &:hover { 28 | transform: translateY(-10px); 29 | } 30 | ` 31 | 32 | const Text = styled.h1` 33 | font-size: 1rem; 34 | color: #000; 35 | margin-top: 10px; 36 | ` 37 | const BottomDiv = styled.div` 38 | display: flex; 39 | align-items: center; 40 | flex-direction: column; 41 | height: 100px; 42 | width: 100%; 43 | ` 44 | const TopDiv = styled.div` 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | flex-direction: column; 49 | width: 100%; 50 | margin-top: 25px; 51 | ` 52 | 53 | export { Container, Text, TopDiv, BottomDiv } 54 | -------------------------------------------------------------------------------- /src/app/components/ProjectDetailsCard/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import React, { useEffect, useState } from 'react' 3 | import { 4 | Container, 5 | Issues, 6 | Details, 7 | IssuesDetail, 8 | IssuesFull, 9 | IssuesDetailRigth, 10 | IssuesDetailLeft, 11 | DetailsRight, 12 | DetailsRightRow, 13 | DetailsRightText, 14 | DetailsMiddle, 15 | DetailsLeft, 16 | Language, 17 | BottomDiv, 18 | Readme, 19 | Text, 20 | TextB, 21 | Label, 22 | GithubDirecting, 23 | UserDirecting 24 | } from './style' 25 | import './style.css' 26 | import { useParams } from 'react-router-dom' 27 | import { Progressbar, StyledButton } from '../index' 28 | import axios from 'axios' 29 | import { Fork, View, Star, IssuesWarning } from '../../assets' 30 | import Markdown from 'markdown-to-jsx' 31 | 32 | const ProjectDetail = () => { 33 | const { projectname, reponame } = useParams() 34 | const [issues, setIssues] = useState([]) 35 | const [repo, setRepo] = useState([]) 36 | const [content, setContent] = useState('') 37 | 38 | useEffect(() => { 39 | projectFetch() 40 | getMarkdown() 41 | }, []) 42 | 43 | const findDate = (datex) => { 44 | if (!datex) return 'invalid time error' 45 | const dayConvert = 1000 * 3600 * 24 46 | const milisaniye = new Date(datex).getTime() 47 | const sonuc = Date.now() - milisaniye 48 | const gunHesapla = Math.ceil(sonuc / dayConvert) 49 | return gunHesapla 50 | } 51 | 52 | const projectFetch = async () => { 53 | const query = `{ 54 | issues(pathname:"/${projectname}/${reponame}") { 55 | html_url 56 | title 57 | created_at 58 | number 59 | user{ 60 | login 61 | avatar_url 62 | } 63 | labels{ 64 | name 65 | color 66 | } 67 | } 68 | }` 69 | 70 | const repos = `{ 71 | repository(pathname:"/${projectname}/${reponame}"){ 72 | pathname 73 | forks_count 74 | stargazers_count 75 | contributors{ 76 | avatar_url 77 | } 78 | } 79 | }` 80 | 81 | const res = await axios.get(`${process.env.REACT_APP_API_URL}/graphql?query=${query}`) 82 | setIssues(res.data.data.issues) 83 | 84 | const repox = await axios.get(`${process.env.REACT_APP_API_URL}/graphql?query=${repos}`) 85 | setRepo(repox.data.data.repository) 86 | } 87 | 88 | const getMarkdown = async () => { 89 | const res = await axios.get( 90 | `https://raw.githubusercontent.com/${projectname}/${reponame}/master/README.md` 91 | ) 92 | setContent(await res.data) 93 | } 94 | 95 | const GithubUrl = `https://www.github.com/${projectname}/${reponame}` 96 | // const avatar = [ 97 | // repo.contributors[0].avatar_url, 98 | // repo.contributors[1].avatar_url, 99 | // repo.contributors[2].avatar_url 100 | // ] 101 | 102 | // console.log(repo.contributors[0]) 103 | 104 | return ( 105 | 106 |
    107 | 108 | {reponame} 109 | 110 | {projectname} 111 | 112 | 113 | 114 | 115 | 116 | 117 | {/* JavaScript */} 118 | {/* 119 | 120 | 78 121 | */} 122 | 123 | 124 | {repo.stargazers_count} 125 | 126 | 127 | 128 | {repo.forks_count} 129 | 130 | 131 |
    132 | 133 | {issues.map((item, i) => ( 134 | 135 | 153 | 154 | {item.title} 155 | 156 | 157 | #{item.number}, {findDate(item.created_at)} days, by {item.user.login}{' '} 158 | 159 | warning 160 | 161 | ))} 162 | 163 | 164 | 165 | README.md 166 | 177 | {content} 178 | 179 | 180 | 181 | ISSUES 182 | {issues.map((item, i) => ( 183 | 184 | 185 | warning 190 | 191 | 192 | 193 | {item.title} 194 | 195 | 196 | #{item.number}, {findDate(item.created_at)} days, by {item.user.login}{' '} 197 | 198 | 199 | 200 | ))} 201 | 202 | 203 |     204 | ) 205 | } 206 | 207 | export default ProjectDetail 208 | -------------------------------------------------------------------------------- /src/app/components/ProjectDetailsCard/style.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | max-width:100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/components/ProjectDetailsCard/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Container = styled.div` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | flex-direction: column; 8 | flex-wrap: wrap; 9 | ` 10 | 11 | const Details = styled.div` 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | border: 1px solid #4b7d74; 16 | border-radius: 30px; 17 | color: white; 18 | padding: 1rem; 19 | margin: 2.5rem 0 5rem; 20 | width: auto; 21 | min-width: 40%; 22 | height: 12rem; 23 | border: 2px solid rgba(60, 176, 155, 20%); 24 | ` 25 | const Issues = styled.div` 26 | display: flex; 27 | width: 80%; 28 | justify-content: center; 29 | align-items: center; 30 | flex-direction: row; 31 | flex-wrap: wrap; 32 | ` 33 | 34 | const IssuesFull = styled.div` 35 | display: flex; 36 | justify-content: flex-start; 37 | align-items: start; 38 | padding: 20px; 39 | margin-right: 10px; 40 | ` 41 | const IssuesDetail = styled.div` 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | flex-direction: column; 46 | flex-wrap: wrap; 47 | width: 40%; 48 | margin: 5.5px; 49 | border-radius: 30px; 50 | border: 2px solid rgba(60, 176, 155, 20%); 51 | padding: 0 1rem; 52 | ` 53 | 54 | const IssuesDetailRigth = styled.div` 55 | display: flex; 56 | justify-content: flex-start; 57 | align-items: start; 58 | flex-direction: column; 59 | ` 60 | const IssuesDetailLeft = styled.div` 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | ` 65 | 66 | const DetailsLeft = styled.div` 67 | text-align: center; 68 | display: flex; 69 | flex-direction: column; 70 | justify-content: center; 71 | align-items: center; 72 | margin-right: 1rem; 73 | ` 74 | const DetailsMiddle = styled.div` 75 | margin: 0 15px; 76 | ` 77 | const DetailsRight = styled.div` 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | flex-direction: column; 82 | width: 125px; 83 | ` 84 | const DetailsRightRow = styled.div` 85 | display: flex; 86 | justify-content: center; 87 | align-items: center; 88 | font-height: 12px; 89 | margin-bottom: 6px; 90 | ` 91 | const DetailsRightText = styled.p` 92 | display: flex; 93 | margin: 0 0 0 6px; 94 | color: #4b7d74; 95 | ` 96 | const Language = styled.h6` 97 | color: #4b7d74; 98 | ` 99 | 100 | const BottomDiv = styled.div` 101 | display: flex; 102 | justify-content: center; 103 | width: 100%; 104 | margin-top: 1rem; 105 | margin-bottom: 2rem; 106 | ` 107 | const Readme = styled.div` 108 | padding: 1rem; 109 | width: 40%; 110 | min-width: 500px; 111 | border: 2px solid rgba(60, 176, 155, 20%); 112 | border-radius: 30px; 113 | font-size: 12px; 114 | margin: 0.2rem; 115 | height: 100%; 116 | ` 117 | const TextB = styled.h4` 118 | display: flex; 119 | justify-content: center; 120 | align-items: center; 121 | font-size: 12px; 122 | color: #9f9f9f; 123 | ` 124 | 125 | const Text = styled.h4` 126 | display: flex; 127 | justify-content: center; 128 | text-align: center; 129 | align-items: center; 130 | font-size: 0.75rem; 131 | font-weight: medium !important; 132 | color: #000; 133 | ` 134 | 135 | const Label = styled.div` 136 | display: flex; 137 | align-items: center; 138 | justify-content: center; 139 | flex-wrap: wrap; 140 | margin: 24px 0 8px 0; 141 | ` 142 | 143 | const GithubDirecting = styled.a` 144 | color: #4b7d74; 145 | font-size: 2rem; 146 | &:hover { 147 | color: #4b7d74; 148 | } 149 | ` 150 | const UserDirecting = styled.a` 151 | color: rgba(0, 0, 0, 0.35); 152 | font-weight: 600; 153 | &:hover { 154 | color: #4b7d74; 155 | cursor: pointer; 156 | } 157 | ` 158 | 159 | export { 160 | Container, 161 | Issues, 162 | Details, 163 | IssuesFull, 164 | IssuesDetail, 165 | IssuesDetailRigth, 166 | IssuesDetailLeft, 167 | DetailsRight, 168 | DetailsRightRow, 169 | DetailsRightText, 170 | DetailsMiddle, 171 | DetailsLeft, 172 | BottomDiv, 173 | Language, 174 | Readme, 175 | Text, 176 | TextB, 177 | Label, 178 | GithubDirecting, 179 | UserDirecting 180 | } 181 | -------------------------------------------------------------------------------- /src/app/components/SearchBoxx/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import algoliasearch from 'algoliasearch/lite' 4 | import { SearchBox, InstantSearch } from 'react-instantsearch-dom' 5 | 6 | const Search = styled.div` 7 | display: flex; 8 | width: 400px; 9 | height: 480px; 10 | border: 1px solid black; 11 | margin: 0 48px 0 0; 12 | ` 13 | 14 | const searchClient = algoliasearch( 15 | process.env.REACT_APP_ALGOLIA_KEY_ONE, 16 | process.env.REACT_APP_ALGOLIA_KEY_TWO 17 | ) 18 | 19 | const SearchBoxx = () => { 20 | return ( 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | export default SearchBoxx 29 | -------------------------------------------------------------------------------- /src/app/components/SearchBoxx/style.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | /** 4 | * const Input = styled.input` 5 | margin: 5px 0px; 6 | padding: 10px; 7 | width: 100%; 8 | border-radius: 5px; 9 | ` 10 | *type='search' 11 | placeholder={placeholder} 12 | onChange={handleChange} 13 | */ 14 | export const Container = styled.input` 15 | width: ${(props) => props.width}; 16 | height: ${(props) => props.height}; 17 | border: ${(props) => props.border}; 18 | color: ${(props) => props.color}; 19 | border-radius: 15px; 20 | 21 | ` 22 | -------------------------------------------------------------------------------- /src/app/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Footer } from './Footer' 2 | export { default as IssueList } from './IssueList' 3 | export { default as NavBar } from './Navbar' 4 | export { default as ProjectCard } from './ProjectCard' 5 | export { default as SearchBoxx } from './SearchBoxx' 6 | export { default as StyledButton } from './Button' 7 | export { default as ChartLang } from './ChartLang' 8 | export { default as ProjectDetailsCard } from './ProjectDetailsCard' 9 | export { default as Progressbar } from './Progressbar' 10 | -------------------------------------------------------------------------------- /src/app/pages/Contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavBar } from '../components' 3 | import styled from 'styled-components' 4 | import Footer from '../components/Footer' 5 | 6 | const Container = styled.div` 7 | display: flex; 8 | align-items: center; 9 | justify: center; 10 | width: 100%; 11 | min-height: 90vh; 12 | margin-top: 90px; 13 | ` 14 | 15 | const HeroTitle = styled.h1` 16 | text-align: center; 17 | font-size: 2.6rem; 18 | font-weight: 700; 19 | background: -webkit-linear-gradient( 20 | 331deg, 21 | rgba(114, 137, 218, 1) 0%, 22 | rgba(84, 172, 152, 1) 73%, 23 | rgba(99, 208, 171, 1) 100% 24 | ); 25 | -webkit-background-clip: text; 26 | -webkit-text-fill-color: transparent; 27 | ` 28 | const HeroTitleContent = styled.p` 29 | font-size: 1.2rem; 30 | text-align: center; 31 | line-height: 1.4; 32 | width: 50%; 33 | color-opaticy: 10%; 34 | color: #72aea3; 35 | margin-bottom: 0.2rem; 36 | @media screen and (max-width: 768px) { 37 | width: 100%; 38 | padding: 1rem 1rem 0; 39 | } 40 | ` 41 | 42 | const Soon = styled.div` 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | flex-direction: column; 47 | width: 100%; 48 | @media screen and (max-width: 768px) { 49 | margin-top: 3rem; 50 | } 51 | ` 52 | const Button = styled.div` 53 | display: flex; 54 | margin: 2rem 1rem; 55 | ` 56 | 57 | const Go = styled.a` 58 | background-color: #0d0a0b; 59 | background-image: linear-gradient( 60 | 331deg, 61 | rgba(114, 137, 218, 1) 0%, 62 | rgba(84, 172, 152, 1) 73%, 63 | rgba(99, 208, 171, 1) 100% 64 | ); 65 | color: white; 66 | font-size: 1.2rem; 67 | padding: 10px 15px; 68 | border-radius: 1rem; 69 | text-decoration: none; 70 | cursor: pointer; 71 | box-shadow: 0px 1px 1px #ccc; 72 | ::hover { 73 | color: white !important; 74 | } 75 | ` 76 | 77 | const Start = () => { 78 | return ( 79 | <> 80 | 81 | 82 | 83 | 84 | You can join this channel
    85 | to communicate with each other. 86 |     87 | 88 | Do you want to be a mentor & mentee while creating projects or contributing?
    89 | So you gotta jump on our discord channel 90 |     91 | 94 |