- Sobre
- Como adaptar um 4noobs?
- Adicionando um novo 4noobs ao site
- Adicionando uma nova categoria ao site
- Estilos em code snippets
- Problemas / em andamento
Este projeto é uma página web feita com React como objetivo exibir todos os 4noobs em apenas um lugar e com um dark theme padrão.
Este projeto está sendo hospedado em: https://4noobs.netlify.app/
Para que um 4noobs seja renderizado corretamente na plataforma é necessário fazer algumas alterações no repositório, e também existem algumas recomendações para melhorar a experiência do usuário.
- O nome do arquivo do readme deve ser
README.md, pois o projeto busca especificamente por esse arquivo. - O readme deve conter um roadmap com os links para os arquivos, senão fica impossível de navegar pelos arquivos no site.
- Os outros arquivos de markdown devem estar dentro da pasta 4noobsDocs, e as imagens devem ficar dentro da pasta 4noobsAssets. As pastas devem possuir esse nome específico pois é a partir dele que serão feitas alterações no arquivo, logo se possuísse um nome genérico poderiam ocorrer alterações indesejadas.
- Siga o modelo do 4noobs-model.
- Não coloque espaço e nem acentuação nos nomes dos arquivos.
- Crie arquivos com nomes ordenados.
- Coloque links nos arquivos para voltar, avançar e retornar ao roadmap.
- Use imagens locais, imagens com origens externas também irão funcionar, porém existe a possibilidade delas serem alteradas, removidas, ou não serem exibidas por outros motivos, então use imagens locais de preferência.
- Tome cuidado com imagens com fundo transparente, lembre-se que o site possui temas claro e escuro.
- Não utilize tabelas, elas não funcionam muito bem de forma responsiva, e as tabelas que ultrapassam a largura da tela possuem uma barra lateral própria, porém seria melhor não utilizar tabelas.
Dentro da pasta src existe um arquivo chamado 4noobs.json, que contém as informações dos 4noobs que serão exibidos. Esse arquivo é separado por categoria, então basta escolher uma categoria e adicionar um json dentro do array da categoria escolhida, contendo o nome que será exibido na SideBar, o nome do usuário e nome do repositório do github.
Na SideBar as categorias não são dinâmicas, então será necessário alterar o código do component SideBar. Existe um componente chamado Category que recebe 2 props, um desses props é o title que será usado para exibir na SideBar, e o outro é um array que contém a chave corresponde no 4noobs.json, então basta criar uma nova instância do component Category na SideBar com os devidos props.
No site os code snippets possuem estilização para facilitar o entendimento do código, porém nem todas as linguagens serão estilizadas, abaixo possui a lista de linguagens e siglas que são aceitas.
| Linguagens Registradas | Classes |
|---|---|
| Bash | bash, sh |
| C | c |
| C++ | cpp, c++ |
| C# | csharp, cs |
| Elixir | elixir |
| GO | golang, go |
| HTML | html |
| Java | java |
| JavaScript | javascript, js, jsx |
| Markdown | markdown, md |
| PHP | php |
| Python | python, py |
| Ruby | ruby, rb |
| Rust | rust, rs |
- Fazer as alterações necessárias nos repositórios originais dos 4noobs restantes e adicioná-los no site.
- No momento somente links em markdown estão sendo convertidos para o component Link do React Router Dom, ou seja, links em HTML irão recarregar a página. Esse não é um erro crítico, porém é um comportamento que não deveria acontecer em uma aplicação feita em React.
- Muitas imagens só são exibidas de forma clara com fundo branco, agora com o tema dark será necessário editar algumas imagens.
- Existem alguns links que redirecionam para uma parte específica de uma página, geralmente até um h1 ou h2. Esses links na plataforma redirecionam apenas para o topo da página no momento.