Repository: LarissaAbreu/contrata-se-dev
Branch: master
Commit: 8180650b44aa
Files: 14
Total size: 15.9 KB

Directory structure:
gitextract_5xcr95ty/

├── .gitignore
├── CNAME
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
├── src/
│   ├── assets/
│   │   ├── scripts/
│   │   │   ├── App.js
│   │   │   ├── components/
│   │   │   │   ├── Card.js
│   │   │   │   ├── Label.js
│   │   │   │   └── SelectLabel.js
│   │   │   └── index.js
│   │   └── styles/
│   │       └── style.css
│   └── index.html
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.DS_Store
desktop.ini
icon

npm-debug.log
node_modules/
dist/

yarn-error.log
.out/


================================================
FILE: CNAME
================================================
contrata-se.dev

================================================
FILE: CONTRIBUTING.md
================================================
# Contribuição

1. Fork o projeto!
2. Crie sua feature branch: `git checkout -b my-new-feature`
3. Commit suas alterações: `git commit -m 'Add some feature'`
4. Suba sua branch: `git push origin my-new-feature`
5. Envie um pull request

**Depois que seu pull requeste for mergeado**

Depois que seu pull request for mergeado você pode deletar sua branch.

## Atenção:
É importante tentar manter o padrão de desenvolvimento que está sendo seguido no projeto e sempre tentar fazer o seu código de uma maneira que seja escalável e manutenível.

### [<-- Voltar](https://github.com/LarissaAbreu/contrata-se-dev)


================================================
FILE: LICENSE.md
================================================
Copyright (c) 2019 Larissa Abreu, [afonsopacifer.com](http://afonsopacifer.com/)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


================================================
FILE: README.md
================================================
# Contrata-se.dev

> Agregador de vagas para pessoas desenvolvedoras :)

## Rodando o projeto localmente

**1 -** Clone o projeto e instale as dependêcias:

```sh
$ git clone https://github.com/LarissaAbreu/contrata-se-dev.git
$ cd contrata-se-dev
$ yarn
```

**3 -** Rode o servidor estático com livereload:

```sh
$ yarn start
```

## Versionamento

Para manter uma melhor organização, seguiremos as diretrizes do [Versionamento Semântico 2.0.0](http://semver.org/).

## Contribuição

Veja no [guia](https://github.com/LarissaAbreu/contrata-se-dev/issues) os próximos passos do projeto ;)
<br>
Quer contrinuir? [Siga essas recomendações](https://github.com/LarissaAbreu/contrata-se-dev/blob/master/CONTRIBUTING.md).

## Licença

[Licença MIT](https://github.com/LarissaAbreu/contrata-se-dev/blob/master/LICENSE.md) © [Larissa Abreu](http://larissaabreu.github.io/), [Afonso Pacifer](https://afonsopacifer.github.io/)


================================================
FILE: package.json
================================================
{
  "name": "contrata-se-dev",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/webpack-dev-server",
    "build": "./node_modules/.bin/webpack",
    "deploy": "gh-pages-deploy"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/LarissaAbreu/contrata-se-dev.git"
  },
  "author": "Larissa Abreu, Afonso Pacifer",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/LarissaAbreu/contrata-se-dev/issues"
  },
  "homepage": "https://github.com/LarissaAbreu/contrata-se-dev#readme",
  "dependencies": {
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-select": "^3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "svg-react-loader": "^0.4.6",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },
  "gh-pages-deploy": {
    "staticpath": "dist",
    "cname": "contrata-se.dev"
  }
}


================================================
FILE: src/assets/scripts/App.js
================================================
import React, { useState, useEffect } from 'react';
import '../styles/style.css';

import Card from './components/Card';
import Label from './components/Label';
import SelectLabel from './components/SelectLabel';

const App = () => {
  const [issues, setIssues] = useState([]);
  const [pages, setPages] = useState(1);
  const [filteredLabels, setFilteredLabels] = useState([]);

  useEffect(() => {
    fetch(`https://api.github.com/repos/frontendbr/vagas/issues?state=open&page=1&labels=${_formateLabelsQuery(filteredLabels)}`)
      .then((res) => res.json())
      .then((json) => setIssues(json));
  }, [filteredLabels]);

  const formateDate = (date) => {
    const dateSplit = date.split('T');
    const ymd = dateSplit[0].split('-');

    return `${ymd[2]}/${ymd[1]}/${ymd[0]}`;
  };

  const _formateLabelsQuery = (labels) => {
    const valueLabel = (Array.isArray(labels) ? labels : []).map((label) => label.value);
    return valueLabel.join(',');
  };

  const _showMore = () => {
    fetch(`https://api.github.com/repos/frontendbr/vagas/issues?state=open&page=${pages + 1}&labels=${_formateLabelsQuery(filteredLabels)}`)
      .then((res) => res.json())
      .then((json) => {
        setIssues([...issues, ...json]);
        setPages(pages + 1);
      });
  };

  const $issues = issues.map((issue, i) => {
    if (!issue.pull_request) {
      const date = formateDate(issue.created_at);

      const $labels = issue.labels.map((label, i) => {
        return (
          <Label
            key={i}
            name={label.name}
            color={label.color}/>
        );
      });

      return (
        <Card 
          key={i}
          url={issue.html_url}
          title={issue.title}
          labels={$labels}
          date={date} />
      );
    };
  });

  return (
    <div>
      <div className="topo">
        <h1 className="topo__titulo">Contrata-se.dev</h1>
        <p className="topo__texto">Agregador de vagas para pessoas desenvolvedoras :)</p>
        <div className="social">
          <a href="https://github.com/frontendbr/vagas/issues/new?template=adicionar-nova-vaga.md&title=%5BCidade%5D+Front-end+Developer+na+Nome+da+Empresa" target="_blank" rel="noopener noreferrer" className="nova-vaga">Postar uma nova vaga</a>
          <iframe title="Star on github" src="https://ghbtns.com/github-btn.html?user=LarissaAbreu&repo=contrata-se-dev&type=star&size=large" frameborder="0" scrolling="0" width="75.43px" height="30px"></iframe>
        </div>
      </div>
      <div className="main">
        <div className="filter-container">
          <SelectLabel setFilteredLabels={(filteredLabels) => setFilteredLabels(filteredLabels)}/>
        </div>
        <div className="lista-vagas">{$issues}</div>
        <button className="mais" onClick={() => _showMore()}>Mostrar mais</button>
      </div>
      <div className="rodape">
        <span>Feito com</span><span className="rodape__heart"></span>
      </div>
    </div>
  );
};

export default App;


================================================
FILE: src/assets/scripts/components/Card.js
================================================
import React from 'react';

const Card = ({url, title, labels, date}) => {
  return (
    <div className="card-vaga">
      <a href={url} target="_blank">
        <h2 className="titulo">{title}</h2>
        <ul className="lista-labels">{labels}</ul>
        <span className="data">Publicada em: {date}</span>
      </a>
    </div>
  )
}

export default Card;


================================================
FILE: src/assets/scripts/components/Label.js
================================================
import React from 'react';
import tinyColor from 'tinycolor2';

const Label = ({color, name}) => {

  const resolveColor = hex => {
    const color = tinyColor(hex);

    return color.isLight() ? '000' : 'fff';
  };

  return (
    <li
      className="label"
      style={{"--background-label": "#" + color, "--color-label": "#" + resolveColor(color)}}
    >
      {name}
    </li>
  );
};

export default Label;


================================================
FILE: src/assets/scripts/components/SelectLabel.js
================================================
import React, { useState, useEffect } from 'react';
import Select from 'react-select';

const SelectLabel = ({ setFilteredLabels }) => {

  const [labels, setLabels] = useState([]);

  useEffect(() => {
    fetch('https://api.github.com/repos/frontendbr/vagas/labels?per_page=100')
      .then((res) => res.json())
      .then((json) => setLabels(json));
  }, []);

  const options = labels.map((label) => {
    return {
      value: label.name,
      label: label.name,
    };
  });

  return (
    <Select placeholder="Filtrar por labels" options={options} isMulti onChange={(option) => setFilteredLabels(option)} />
  );
};

export default SelectLabel;


================================================
FILE: src/assets/scripts/index.js
================================================
import React from 'react';
import ReactDom from 'react-dom';
import App from './App.js';

const app = document.getElementById('app');

ReactDom.render(
  <App />,
  app
);


================================================
FILE: src/assets/styles/style.css
================================================
* {
  font-family: 'Muli', sans-serif;
}

.topo {
  box-sizing: border-box;
  width: 100%;
  background: rgb(24, 132, 132);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
}

.topo__titulo {
  color: #fff;
  font-size: 60px;
  padding: 0;
  margin: 0;
  font-family: 'Fugaz One', cursive;
  letter-spacing: 5px;
}

@media (max-width: 600px) {
  .topo__titulo {
    font-size: 40px;
  }
}

.topo__texto {
  color: #b5d4b5;
  font-size: 24px;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  padding: 32px 0;
}

.social {
  display: flex;
  align-items: center;
}

.nova-vaga {
  box-sizing: border-box;
  background-color: #21e0a0;
  color: #00333a;
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 3px;
  transition: opacity .2s;
  margin-right: 8px;
}

.nova-vaga:hover {
  opacity: .8;
}

.main {
  box-sizing: border-box;
  padding: 32px;
  background-color: #efefef;
}

.filter-container {
  box-sizing: border-box;
  margin: 16px auto;
  margin-top: 0;
  max-width: 1200px;
  padding: 0 8px;
}

.lista-vagas {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 16px auto;
  max-width: 1200px;
}

.card-vaga {
  box-sizing: border-box;
  width: 100%;
  --cols: 3;
  max-width: calc(100% / var(--cols) - 20px);
  margin: 0 10px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: #fbfffc;
  border-radius: 5px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 1px 5px 0 rgba(0, 0, 0, 0.12),
              0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 900px) {
  .card-vaga {
    --cols: 2;
  }
}

@media (max-width: 600px) {
  .card-vaga {
    --cols: 1;
  }
}

.card-vaga a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.titulo {
  color: #4e7355;
  margin: 0;
  font-size: 18px;
}

.lista-labels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}

.label {
  color: var(--color-label, #fff);
  background-color: var(--background-label, #374047);
  border-radius: 3px;
  padding: 5px;
  font-size: 14px;
  margin-bottom: 3px;
}

.label:not(:last-child) {
  margin-right: 3px;
}

.data {
  color: #4e7355;
}

.mais {
  box-sizing: border-box;
  padding: 10px 16px;
  color: #ffffff;
  background-color: #3c8585;
  margin: 0 auto;
  display: block;
  border-radius: 3px;
  transition: opacity .2s;
  box-shadow: none;
  border: none;
}

.mais:hover {
  cursor: pointer;
  opacity: .8;
}

.rodape {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: rgb(24, 132, 132);
  color: #b5d4b5;
}

.rodape__heart {
  animation: pulse .5s infinite alternate ease-in;
  background-color: #b5d4b5;
  display: inline-block;
  height: 10px;
  margin: 0 15px;
  position: relative;
  width: 10px;
}

.rodape__heart:before {
  background-color: #b5d4b5;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 50%;
  position: absolute;
  top: 0;
  width: 10px;
}

.rodape__heart:after {
  background-color: #b5d4b5;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 10px;
}

@keyframes pulse {
  from {
    transform: rotate(-135deg) scale(1);
  }
  to {
    transform: rotate(-135deg) scale(1.2);
  }
}


================================================
FILE: src/index.html
================================================
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <title>Contrata-se dev</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Agregador de vagas para pessoas desenvolvedoras.">

  <link rel="icon" href="favicon.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Fugaz+One" rel="stylesheet">

  <meta property="og:type" content="website">
  <meta property="og:title" content="Contrata-se.dev">
  <meta property="og:description" content="Agregador de vagas para pessoas desenvolvedoras.">
  <meta property="og:url" content="https://contrata-se.dev">
  <meta property="og:image" content="https://contrata-se.dev/assets/icons/open-graph.png">

  <meta name="twitter:card" content="sumary_large_image">
  <meta name="twitter:title" content="Contrata-se.dev">
  <meta name="twitter:description" content="Agregador de vagas para pessoas desenvolvedoras.">
  <meta name="twitter:url" content="https://contrata-se.dev">
  <meta name="twitter:image" content="https://contrata-se.dev/assets/icons/open-graph.png">
</head>
<body>
    <a href="https://github.com/LarissaAbreu/contrata-se-dev" class="github-corner" aria-label="Veja o código desse site no Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#21e0a0; color:rgb(24, 132, 132); position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>


================================================
FILE: webpack.config.js
================================================
const webpack = require('webpack');
const path = require('path');
const copyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/assets/scripts/index.js',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.svg$/,
      exclude: /node_modules/,
      loader: ['svg-react-loader']
    }]
  },
  plugins: [
    new copyWebpackPlugin([
      {from: './src/index.html', to: './'},
      {from: './src/favicon.png', to: './'},
      {from: './src/assets/icons/open-graph.png', to: './assets/icons/'},
      {from: './CNAME', to: './'}
    ]),
    new webpack.HotModuleReplacementPlugin(),
  ],
  mode: 'development',
  devServer: {
    contentBase: './dist/',
    port: '8000',
    historyApiFallback: true,
    hot: true,
    open: true
  },
  watch: true,
  output: {
    path: path.resolve(__dirname, './dist/'),
    filename: 'bundle.js'
  }
}