https://github-automated-repos.vercel.app

Contributing Guidelines

1. Installation

[!TIP] Use the code example in this documentation. Code Example

    npm install github-automated-repos
    # or
    yarn add github-automated-repos

2. Using hook

    import {useGitHubAutomatedRepos} from "github-automated-repos";

    const data = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");

3. 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 > Stack Icons

4. ✅Ready! JSON - Data from repositories chosen by you!

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)

• About Library

• Library

  • Import

  • Fill in the fields in the github repository

  • Code Example

  • Framework Settings

About Library

This library automates the view your GitHub projects on your 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 on your website, and you can even customize your project card, for example, with a representative icon and show which stacks were used. All in one place!

Control your projects

Customize and represent through icons.

In one place

Library

Import

import { useGitHubAutomatedRepos, ProjectIcons, StackIcons, StackLabels } from 'github-automated-repos';

The package imports four elements:

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

  const data = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
  

  • return data example:

  [
  {
      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', '
  }
  ]
  

• 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 tab!

   data.map((item) => {
       return (
      ...
      {item.topics.map((icon, index) => {
           return (
             <StackIcons key={index} itemTopics={ icon } className={ } />
      }
      ...
  

  • Render component StackIcons example: