[]( )
✅ github-automated-repos is the library,ReactJS, that gives you the power to control your GitHub data, your projects on the portfolio / website,
in your own GitHub in one place!
❌ project.js files ( edit code )
❌ GitHub API ( no data control )
https://github-automated-repos.vercel.app
Contributing Guidelines
# 
About Library
> This library automates the view your GitHub projects on your porfolio / website in one place. But how? Make the code configuration only once in your application with github-automated-repos, and manage the view of your projects on GitHub in the Topics field. Choose which project will be seen, and you can even customize your project card, for example, with a representative icon and show which stacks were used. All in one place!
Details
| Control your projects |
| :-------------------------------------------------------------------: |
|  |
| Customize and represent through icons. |
| :--------------------------------------------------------------: |
| |
| In one place |
| :-------------------------------------------------------------------: |
| |
----
# init - CLI
## 1. Run Command
```yaml
npx github-automated-repos-cli init
```
## 2. Enter data
#### 🦑 GitHub Username
You will be prompted to enter your GitHub username.
> This is used to fetch your public repositories directly from GitHub.
```yaml
✔ GitHub username: xxxxxx
```
#### 🔑 Keyword (Repository Filter)
Next, you’ll choose a keyword (for example: attached , portfolio , featured ).
> This keyword will be used to filter repositories via the GitHub Topics field.
```yaml
✔ Keyword to filter (e.g. 'attached'): attached
```
> [!IMPORTANT]
> Don't forget to enter your Keyword in the Topics field of each project so it appears on the generated page.
## 3. Terminal Result
```yaml
√ Target file already exists:
C:\Users\Leveling IT\Desktop\Person-Page\testenext\app\projects\page.tsx
What would you like to do? » Overwrite
✔ GitHub username: digoarthur
✔ Keyword to filter (e.g. 'attached'): attached
✔ Template ready.
✔ File created at: C:\Users\Leveling IT\Desktop\Person-Page\testenext\app\projects\page.tsx
✨ Your project page is ready!
🔗 http://localhost:3000/projects
Init finished successfully.
```
## 4. Banner
> Insert banner, layout images to represent your project. Types are `.PNG` and `.SVG`. For this to be possible, the name of the image file must contain `banner`in the name. Insert your images in the following path: Ex.:
```
└── public
└── `bannerXYZ.png`
└── `bannerABC.svg`
├── ...
```
## 5. Choose the repositories and fill in the Topics field with the keyword you determined.
> [!IMPORTANT]
> To insert stack names in the topics field, see web documentation or the table below. > [Stack Icons](https://github.com/digoarthur/github-automated-repos?tab=readme-ov-file#--stack-icons)
## 6. ✅Ready! JSON - Data from repositories chosen by you!
> [!TIP]
> Customize your cards your way
JSON - DATA
### Data Example ~ console.log(data) ~
```javascript
Array(4)
0
:
{id: 517152367, name: 'Dashgo', html_url: 'https://github.com/DIGOARTHUR/Dashgo', description: 'IGNITE - Trilha ReactJS/ - Neste projeto é aplicad…ate, Components, Props. Recursos do JS como: Map.', topics: Array(7), …}
1
:
{id: 482667387, name: 'DashBoard-Financeiro', html_url: 'https://github.com/DIGOARTHUR/DashBoard-Financeiro', description: 'IGNITE - Trilha ReactJS/ Chapter II - Esta aplicaç…mpanhamento de valores de entrada, saída e total.', topics: Array(6), …}
2
:
{id: 412849316, name: 'Task.TODO', html_url: 'https://github.com/DIGOARTHUR/Task.TODO', description: 'IGNITE - Trilha ReactJS/ - Este projeto aborda con…Filter e Math, Spread. E para estilização o SASS.', topics: Array(7), …}
3
:
{id: 355616217, name: 'Move.it', html_url: 'https://github.com/DIGOARTHUR/Move.it', description: 'NLW#04 - Rocketseat - Utilizando a técnica Pomodor… o objetivo é executar a tarefa do seu interesse.', topics: Array(8), …}
length
:
4
[[Prototype]]
:
Array(0)
```
IN PAGE WEB
> [!TIP]
> Customize your cards your way!
---
# 
Stack Icons
> Stack icons for you to customize your cards; insert the labels in the Topics field of your repository.
| Logo | Stack Name | Logo | Stack Name | Logo | Stack Name | Logo | Stack Name |
| :---: | --- | :---: | --- | :---: | --- | :---: | --- |
|  | `androidstudio` |  | `angular` |  | `arduino` |  | `aws` |
|  | `babel` |  | `bash` |  | `bitbucket` |  | `blender` |
|  | `bootstrap` |  | `c` |  | `canva` |  | `clion` |
|  | `cpp` |  | `csharp` |  | `css3` |  | `dart` |
|  | `denojs` |  | `django` |  | `docker` |  | `dotnetcore` |
|  | `eclipse` |  | `elixir` |  | `eslint` |  | `expo` |
|  | `express` |  | `figma` |  | `firebase` |  | `flask` |
|  | `flutter` |  | `gatsby` |  | `gimp` |  | `git` |
|  | `go` |  | `googlecloud` |  | `graphql` |  | `grunt` |
|  | `gulpjs` |  | `haskell` |  | `heroku` |  | `html5` |
|  | `husky` |  | `inkscape` |  | `java` |  | `javascript` |
|  | `jenkins` |  | `jest` |  | `jira` |  | `jquery` |
|  | `jupyter` |  | `kotlin` |  | `kubernetes` |  | `laravel` |
|  | `linux` |  | `lua` |  | `markdown` |  | `materialui` |
|  | `mongodb` |  | `mysql` |  | `nestjs` |  | `netcore` |
|  | `nextjs` |  | `nodejs` |  | `npm` |  | `objectc` |
|  | `pearl` |  | `php` |  | `postgresql` |  | `prettier` |
|  | `prisma` |  | `pycharm` |  | `python` |  | `r` |
|  | `rails` |  | `raspberrypi` |  | `react` |  | `reacticons` |
|  | `redux` |  | `ruby` |  | `rust` |  | `salesforce` |
|  | `sass` |  | `scala` |  | `sequelize` |  | `spring` |
|  | `sqlite` |  | `storybook` |  | `styledcomponents` |  | `swagger` |
|  | `switch` |  | `tailwind` |  | `typescript` |  | `visualstudio` |
|  | `visualstudiocode` |  | `vitejs` |  | `vuejs` |  | `yarn` |
# 
Hook & Components
> Learn more about the Hook and Components that render the Stack icons.
- `useGitHubAutomatedRepos` hook responsible for automating the return of data from repositories. This hook takes two parameters: GitHubUsername & keyword. The return is an array of objects containing 7 properties: id, banner, html_url, homepage, topics, name and description.
```tsx
const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
```
- #### return data example:
``` javascript
[
{
banner:"https://raw.githubusercontent.com/DIGOARTHUR/github-automated-repos/main/src/assets/images/banner.png"
description: "The library that automates, in one place, the administration of your github projects on your website."
homepage: "https://github-automated-repos.vercel.app"
html_url: "https://github.com/DIGOARTHUR/github-automated-repos"
id: 585693873
name: "github-automated-repos"
topics: (8) ['automated', 'deploy', 'github', 'library', '
}
]
```
- #### isLoading: while the data is not loaded, isLoading returns TRUE.
```jsx
if (isLoading) {
return loading...
}
```
- #### isLoadingError: will be true if the query failed while fetching for the first time.
- `StackIcons` The component returns, based on the iteration of the topic array that is contained in data, icons of the stacks used in your project. Enter the stacks used in your repository's topic field.. Check the [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) tab!
```jsx
data?.map((item) => {
return (
...
{item.topics.map((icon, index) => {
return (
}
...
```
- #### Render component StackIcons example:
- `StackLabels` component returns, based on the iteration of the topics array that is contained in data, labels of the stacks used in your project. Insert the stacks used in the topics field of your repository. Check the [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) tab!
```jsx
data.map((item) => {
return (
...
{item.topics.map((icon, index) => {
return (
}
...
```
- #### Render component StackLabels example:
     
# 
Fill in the fields in the github repository
> [!IMPORTANT]
> Pay attention to filling in each field of your repository on GitHub.
- `banner`: this property returns a .PNG e .SVG image. For this to be possible, the name of the image file must contain `banner`in the name. Insert your images in the following path: Ex.:
```
└── public
└── `bannerXYZ.png`
└── `bannerABC.svg`
├── ...
```
- `id`: repository identification number. Used as parameter in the key tag. ( *This field does not need to be filled in.* )
- `html_url`: repository link. Used as the link of access. ( *This field does not need to be filled in.* )
- `homepage`: it's the access link to the built page, page deploy. About / Website of your GitHub.
- `topics`: array that brings information about the icons in [Stack Icons](https://github-automated-repos.vercel.app/stackicons). Used in both StackLabels e StackIcon components. It is in this field that is passed the key configured in the hook. Refers to the field About / Topics of your GitHub.
- `name`: this is the name of the repository. Refers to the field Settings / General / Repository name of your GitHub.
- `description`: this is the description given to your repository. Refers to the About /Description field of your GitHub.
# 
React Query Config.
> [!NOTE]
> Follow the official standard React Query installation instructions.
```tsx
import { useGitHubAutomatedRepos, StackIcons, StackLabels } from "github-automated-repos/react-query";
```
#### Hook Example:
```tsx
// Usage Example + [ React Query ]
const { data, isLoading } = useGitHubAutomatedRepos('digoarthur', 'attached', {
refetchInterval: 300000, // 5 minutes
refetchOnWindowFocus: false,
staleTime: 10 * 60 * 1000, // 10 minutes
});
```
---
**Love github-automated-repos? Give our repo a star ⭐ [⬆️](https://github.com/DIGOARTHUR/github-automated-repos) .**
`based in:` [Api Github](https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#get-a-repository)
`by`: [@digoarthur](https://www.linkedin.com/in/digoarthur/) 
**[github-automated-repos-cli](https://github.com/digoarthur/github-automated-repos-cli)**
