Adiciona página junte-se com renderização de arquivo MarkDown

package.json

@@ -33,6 +33,7 @@
         "eslint-plugin-import": "^2.14.0",
         "eslint-plugin-jsx-a11y": "^6.1.2",
         "eslint-plugin-react": "^7.11.1",
+        "file-loader": "^4.2.0",
         "flow-bin": "^0.85.0",
         "html-webpack-plugin": "^3.2.0",
         "husky": "^1.1.3",
@@ -48,8 +49,10 @@
     "dependencies": {
         "axios": "^0.18.0",
         "blueprint-css": "^3.0.0-beta.0",
+        "prop-types": "^15.7.2",
         "react": "^16.6.0",
         "react-dom": "^16.6.0",
+        "react-markdown": "^4.2.2",
         "react-router-dom": "^4.3.1",
         "react-tooltip": "^3.11.1"
     }

src/components/app/App.js

@@ -18,6 +18,7 @@ const AppHeader = () => (
 
         <HeaderWrapperNavLinks>
             <HeaderNavLink to="/quem-somos">Quem Somos?</HeaderNavLink>
+            <HeaderNavLink to="/junte-se">Junte-se!</HeaderNavLink>
             <HeaderNavLink to="/contribuir">Contribuir</HeaderNavLink>
         </HeaderWrapperNavLinks>
     </Header>

src/components/app/Routes.js

@@ -2,11 +2,13 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import ProjectsPage from '../projects/ProjectsPage';
+import JoinUsPage from '../joinus/JoinUsPage';
 
 const Routes = () => (
     <Switch>
         <Route exact path="/" component={ProjectsPage} />
         <Route path="/quem-somos" render={() => <div />} />
+        <Route path="/junte-se" component={JoinUsPage} />
         <Route path="/contribuir" render={() => <div />} />
     </Switch>
 );

src/components/commons/header/Header.css

@@ -46,7 +46,7 @@
  */
 
 .nav-option {
-    margin: 0;
+    margin: 10px;
     width: fit-content;
 }
 

src/components/commons/renderer/MarkDownRenderer.css

@@ -0,0 +1,9 @@
+.markdown a {
+    color: #0366d6;
+}
+
+.markdown code {
+    background-color: rgba(27, 31, 35, 0.05);
+    border-radius: 20%;
+    padding: 0.2em 0.4em;
+}

src/components/commons/renderer/MarkDownRenderer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import PropTypes from 'prop-types';
+import './MarkDownRenderer.css';
+
+const MarkDownRenderer = ({ markDownText }) => (
+    <ReactMarkdown source={markDownText} className="markdown" />
+);
+
+MarkDownRenderer.propTypes = {
+    markDownText: PropTypes.string.isRequired,
+};
+
+export default MarkDownRenderer;

src/components/joinus/JoinUs.md

@@ -0,0 +1,23 @@
+# Junte-se a nós!
+
+Um dos objetivos principais do OpenDevUFCG é ajudar os projetos open source feitos e apoiados por estudantes de Ciência da Computação da UFCG a atrair contribuições.
+
+### Tem um projeto open source e deseja impulsioná-lo?
+
+O **IssueAi** tem o intuito de ser um espaço que promove a ajuda e colaboração de alunos para alunos através da exposição dos seus respectivos projetos para a comunidade da UFCG, fazendo crescer o espírito open source dentro do nosso ambiente acadêmico.
+
+Para ajudar ainda mais a atingir tal objetivo, orientamos que todo projeto tenha:
+
+-   Um bom README. É importante tentar fazer as pessoas não terem medo da primeira contribuição que é a mais importante de todas, por isso seja claro, simples e amigável, é a chave para atrair contribuições.
+
+-   Uma [licença](https://choosealicense.com/) Open Source.
+
+-   Código de conduta. É preciso garantir um ambiente acolhedor e respeitável para todos.
+
+-   Guia de contribuição. Uma boa documentação dos passos a serem seguidores para o uso do projeto tem que ser prioridade. Tente ser claro e direto, use o auxílio de outras documentações como hyperlinks.
+
+Para se aprofundar ainda mais no assunto, recomenda-se a leitura do [open source guide](https://opensource.guide/starting-a-project/).
+
+### Para adicionar um projeto
+
+Os dados dos repositórios usados para mostrar são recuperados a partir dos arquivos contidos no diretório `data/`. Para adicionar seu repositório aos nossos projetos apoiados, abra uma Pull Request com os dados do seu repositório em `data/repositories.js`, você pode acessá-lo [clicando aqui](https://github.com/OpenDevUFCG/IssueAi/blob/master/data/repositories.js).

src/components/joinus/JoinUsPage.js

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import MarkDownRenderer from '../commons/renderer/MarkDownRenderer';
+import joinUsFile from './JoinUs.md';
+
+const JoinUsPage = () => {
+    const [markDownText, setMarkDownText] = useState('');
+
+    useEffect(() => {
+        async function fetchFileAndSetState() {
+            const response = await fetch(joinUsFile);
+            const text = await response.text();
+            setMarkDownText(text);
+        }
+
+        fetchFileAndSetState();
+    }, []);
+
+    return (
+        <section>
+            <MarkDownRenderer markDownText={markDownText} />
+            <br />
+        </section>
+    );
+};
+
+export default JoinUsPage;

webpack.config.js

@@ -34,6 +34,15 @@ const config = {
                     'css-loader',
                 ],
             },
+            {
+                test: /\.(eot|md|svg|ttf|woff|woff2)$/,
+                use: {
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].[ext]',
+                    },
+                },
+            },
         ],
     },
     plugins: [