- 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.