Skip to content

Commit 216802c

Browse files
digoarthurdigoarthur
authored
docs: update ReadmePT
1 parent f2fdf2b commit 216802c

File tree

1 file changed

+75
-47
lines changed

1 file changed

+75
-47
lines changed

‎README_PT.md‎

Lines changed: 75 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!--Commit changes
2-
docs: update Readme
2+
docs: update ReadmePT
33
-->
44

55
<!-- VISUALIZAR NO VSCODE CTRL + K V -->
@@ -46,8 +46,8 @@ EXEMPLO
4646
<!---------------------PROJECT ICON-->
4747
<img src="https://user-images.githubusercontent.com/59892368/219479919-5e84de50-6b7d-4d42-bb6d-a466b450db84.svg" alt="angular-logo" width="150px" height="150px"/>
4848
<br>
49-
<i>Github-automated-repos é a biblioteca que te dá o poder de gerenciar a visualização dos seus projetos
50-
<br> no seu website em um só lugar!</i>
49+
<i>Github-automated-repos é a biblioteca que te dá o poder de gerenciar a visualização de seus projetos no site,
50+
<br>em seu próprio GitHub em um só lugar!</i>
5151
<br>
5252
</p>
5353

@@ -88,7 +88,22 @@ EXEMPLO
8888
</div>
8989
9090

91+
## Installation
9192

93+
```shell
94+
npm install github-automated-repos
95+
# or
96+
yarn add github-automated-repos
97+
```
98+
99+
hook config.
100+
101+
```typescript
102+
import {useGithubAutomatedRepos} from "github-automated-repos";
103+
104+
const data = useGithubAutomatedRepos("GitHubUsername", "KeyWord");
105+
106+
```
92107

93108

94109
---
@@ -163,36 +178,44 @@ EXEMPLO
163178

164179

165180
# <img alt="skills" width="80" height="30" src="https://user-images.githubusercontent.com/59892368/216092858-a64d3a99-1b90-4946-b917-76eadefffb54.svg"> Biblioteca <!---write here : demonstration of the application layout. -->
166-
167-
## Instalação
168-
169-
```shell
170-
npm install github-automated-repos
171181

172-
```
173-
174-
```shell
175-
yarn add github-automated-repos
176-
177-
```
178182

179183
## Importação
180184
```javascript
181185
import { useGithubAutomatedRepos, ProjectIcon, StackIcon, IGithubRepos} from 'github-automated-repos';
182186
```
183187
### O pacote importa quatro recursos:
184188

185-
- `ProjectIcon` componente que renderiza os ícones dos projetos que vêm dos dados retornados da função dataGithubRepos como a propriedade Topics. Verifica a aba [Project Icons](https://github-automated-repos.vercel.app/documentation/projectIcons) !
186189

187-
- `StackIcon` componente que renderiza os ícones das pilhas que vêm dos dados retornados da função dataGithubRepos como a propriedade Topics. Verifica a aba [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) !
190+
- `useGithubAutomatedRepos` hook responsável por automatizar os repositórios. Ele retorna uma função chamada dataGithubRepos, que leva dois parâmetros: data (dados que vêm da API do GitHub) e a palavra-chave (esta última responsável por mostrar o projeto no seu site a partir do momento em que ele é declarado no campo Tópicos do seu Github repositório). O dataGithubRepos retorna, assim otimizado, um array de objetos contendo 6 propriedades: id, html_url, página inicial, tópicos, nome e descrição.
188191

189-
- `IGithubRepos` interface para o aplicativo em Typescript. Usado para digitar o useState que receberá o array.
192+
```tsx
193+
const data = useGithubAutomatedRepos("GitHubUsername", "KeyWord");
194+
```
195+
<br>
190196

191-
- `useGithubAutomatedRepos` hook responsável por automatizar os repositórios. Ele retorna uma função chamada dataGithubRepos, que recebe dois parâmetros: data (dados que vêm da API do GitHub) e a palavra-chave (esta última responsável por mostrar o projeto em seu site a partir do momento em que é declarado no campo Topics do seu GitHub repositório). O dataGithubRepos retorna, de forma otimizada, um array de objetos contendo 6 propriedades: id, html_url, homepage, topics, name e description.
197+
- `StackIcons` O componente retorna, com base na iteração do array topics, ícones das stacks utilizadas em seu projeto. Insira as stacks utilizadas no campo Topics do seu repositório. Verifique a aba [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) !
192198

193-
```javascript
194-
const { dataReposGithub } = useGithubAutomatedRepos()
195-
```
199+
```tsx
200+
<StackIcons key={ } itemTopics={ } className={ } />
201+
```
202+
<br>
203+
204+
- `StackLabels` O componente retorna, com base na iteração do array topics, labels das stacks utilizadas em seu projeto. Insira as stacks utilizadas no campo Topics do seu repositório. Verifique a aba [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) !
205+
206+
```tsx
207+
<StackLabes key={ } itemTopics={ } className={ } />
208+
```
209+
<br>
210+
211+
- `ProjectIcons` O componente retorna, com base na iteração do array topics, ícones para representar seu projeto. A tag Project deve ser inserida no campo Topics do seu repositório. Verifique a aba [Project Icons](https://github-automated-repos.vercel.app/documentation/projectIcons) !
212+
213+
```tsx
214+
<ProjectIcons key={ } itemTopics={ } className={ } />
215+
```
216+
217+
<br>
218+
<br>
196219

197220
## Preencha os campos no repositório github
198221

@@ -202,78 +225,82 @@ EXEMPLO
202225

203226
![image](https://user-images.githubusercontent.com/59892368/219116735-a026d9b9-f5b9-4389-b8f1-619db2488368.png)
204227

228+
<br>
229+
205230
- `topics`: array que traz informações sobre os ícones em [Project Icons](https://github-automated-repos.vercel.app/documentation/projectIcons) e [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons).
206231
Usado nos componentes ProjectIcon e StackIcon. É neste campo que é passada a chave configurada no hook. Refere-se ao campo About / Topics of your GitHub.
207232

208233
![image](https://user-images.githubusercontent.com/59892368/219117029-d693ee8f-4289-4ac0-85ed-674091508510.png)
209234

210-
`name`: Este é o nome do repositório. Refere-se ao campo Settings / General / Repository name of your GitHub.
235+
<br>
236+
237+
- `name`: Este é o nome do repositório. Refere-se ao campo Settings / General / Repository name of your GitHub.
211238

212239
![image](https://user-images.githubusercontent.com/59892368/219117097-43db2497-7f62-428e-85c6-ef3656da4cd2.png)
213240

214-
`description`: Esta é a descrição dada ao seu repositório. Refere-se ao campo About /Description field of your GitHub.
241+
<br>
242+
243+
- `description`: Esta é a descrição dada ao seu repositório. Refere-se ao campo About /Description field of your GitHub.
215244

216245
![image](https://user-images.githubusercontent.com/59892368/219117260-5bdb1fbb-c58b-4ad9-938a-068b58c72f27.png)
217246

247+
<br>
248+
<br>
249+
218250

219251
## Exemplo de Código
220252

221-
:exclamation::exclamation: Não se esqueça de preencher os campos de palavras-chave (determinados por você) e inserir seu nome de usuário do github.
253+
:exclamation::exclamation: Não se esqueça de preencher os campos:
254+
seu nome de usuário do github e a palavra-chave (determinados por você).
222255

223256
```javascript
224-
fetch('https://api.github.com/users/usernameGitHub/repos?sort=created&per_page=999')
257+
const data = useGithubAutomatedRepos("GitHubUsername", "KeyWord");
225258
```
226259

227-
```javascript
228-
then(data => setRepository(dataReposGithub(data, 'keyword')))
229-
```
260+
#### <a href="https://typicode.github.io/husky/#/"><img alt="Javascript" width="35" height="35" src="https://user-images.githubusercontent.com/59892368/210762527-ae3afe1f-fe36-46a9-98ad-35dbae4d1adf.svg"><a/> <a href="https://typicode.github.io/husky/#/"><img alt="Javascript" width="35" height="35" src="https://user-images.githubusercontent.com/59892368/219095611-551d532a-30fc-4873-b00e-0a8bbf8bb5ec.svg"><a/>
230261

231-
#### <a href="https://typicode.github.io/husky/#/"><img alt="Javascript" width="35" height="35" src="https://user-images.githubusercontent.com/59892368/219095611-551d532a-30fc-4873-b00e-0a8bbf8bb5ec.svg"><a/>
232-
```javascript
262+
```typescript
233263
import './App.css';
234-
import { useEffect, useState } from 'react';
235-
import { useGithubAutomatedRepos, ProjectIcon, StackIcon} from 'github-automated-repos';
264+
import { useGitHubAutomatedRepos, ProjectIcons, StackIcons, StackLabels, } from 'github-automated-repos';
236265
function App() {
237266
{/*useGithubAutomatedRepos hook*/ }
238-
const { dataReposGithub } = useGithubAutomatedRepos()
239-
const [repository, setRepository] = useState([])
240-
241-
useEffect(() => {
242-
{/*Put here your github Name*/ }
243-
fetch('https://api.github.com/users/usernameGitHub/repos?sort=created&per_page=999')
244-
.then(response => response.json())
245-
.then(data => setRepository(dataReposGithub(data, 'deploy'))); {/*<-- keyWord*/}
246-
}, [])
267+
const data = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
247268

248269
return (
249270
<div className="App">
250271
{
251-
repository.map((item) => {
272+
data.map((item) => {
252273
return (
253274
<div key={item.id}>
254275

255-
{/*Project Icon*/}
276+
{/*Project Icons*/}
256277
{item.topics.map((icon) => {
257278
return (
258-
<ProjectIcon key={icon} className="project_Icon" iconItem={icon} />
279+
<ProjectIcons key={icon} className="project_Icon" iconItem={icon} />
259280
)
260281
})}
282+
261283
{/*html Url*/}
262284
<a href={item.html_url}>
263285
{/*Name Project*/}
264286
<h1>{item.name}</h1>
265287
</a>
288+
266289
{/*Description*/}
267290
<p>{item.description}</p>
268-
291+
269292
{/*Homepage*/}
270293
<a href={item.homepage}>
271294
<h3>Homepage</h3>
272295
</a>
273-
{/*Stacks Icon*/}
296+
297+
{/*Stacks Icon and Stacks Label*/}
274298
{item.topics.map((icon) => {
275299
return (
276-
<StackIcon key={icon} className="stack_Icon" iconItem={icon} />
300+
<div key={icon} style={{display:'flex', justifyContent:'center'}}>
301+
<StackIcons key={icon} className="stack_Icon" itemTopics={icon} />
302+
<StackLabels key={icon} itemTopics={icon} />
303+
</div>
277304
)
278305
})}
279306

@@ -288,6 +315,7 @@ Usado nos componentes ProjectIcon e StackIcon. É neste campo que é passada a c
288315
}
289316
export default App;
290317
```
318+
291319

292320
#### <a href="https://typicode.github.io/husky/#/"><img alt="Javascript" width="35" height="35" src="https://user-images.githubusercontent.com/59892368/219095850-0a4e6f54-d524-4deb-be2c-fda358aba84d.svg"><a/>
293321

0 commit comments

Comments
 (0)