✅github-automated-repos é a biblioteca,ReactJS, que dá o poder de controlar os seus dados GitHub nos seus projetos de portfolio / website, no seu próprio GitHub em um só lugar!

❌ arquivos projeto.js (ficar atualizando código) ❌ GitHub API (sem controle dos dados)

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

Vamos Começar! [ 6 passos ]

1. Instalação

npm install github-automated-repos

yarn add github-automated-repos

2. Config. ReactQuery (ViteJS)

Important

Não esqueça de configurar o ReactQuery!!! Veja o exemplo para o NextJS. Code Example

 import { ReactQueryProvider } from 'github-automated-repos'
 createRoot(document.getElementById('root')!).render(
   <ReactQueryProvider >
     <StrictMode>
       <App />
     </StrictMode>
   </ReactQueryProvider>
   ,
  )

3. Utilizando o Hook ( useGitHubAutomatedRepos() )

Caution

❗❗ Não esqueça de preencher os campos: seu GitHubUsername e keyWord (escolhido por você).

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

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

4. Banner

Insira Banners, imagens do layout para representar seu projeto. Os tipos das imgs são .PNG e .SVG. Para fazer isso o nome do arquivo de imagem deve conter banner no nome. Insira as imagens seguindo o caminho: Ex.:

└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...

5. Escolha os repositórios e preencha o campo Topics com a palavra chave escolhida por você.

Important

Insira o nome das StackIcons no campo Topics do repositório, confira a lista no website ou abaixo. > Stack Icons

Tabela de StackIcons

Stack Name	Stack Name	Stack Name	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`

6. ✅Pronto! JSON - Dados dos repositórios escolhidos por você!

Tip

Construa seus Cards do seu jeito.

JSON - DATA

Exemplo dos dados ~ console.log(data) ~

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)

Na página Web

[!TIP] Construa seus Cards do seu jeito!

About Library

Essa biblioteca automatiza a visualização dos seus projetos GitHub no seu portfólio / website em um só lugar. Mas como? Configure a biblioteca github-automated-repos apenas uma única vez, e administre a visualização dos seus projetos no seu próprio GitHub no campo Topics. Escolha qual será o projeto, e ainda customize seus cards com ícones das stacks utilizadas para o desenvolvimento dele. Tudo isso em um só lugar!

Controle seus Projetos

Customize e represente por meios de ícones e banners

Em um só lugar

Importando Biblioteca

A biblioteca github-automated-repos importa 4 recursos: o hook useGitHubAutomatedRepos, ReactQueryProvider , o componente StackIcons e o componente StackLabels.

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

The package imports 4 elements:

ReactQueryProvider ferramenta usada para otimizar as requições da API. Não esqueça de configurá-lo! Code Example

useGitHubAutomatedRepos hook responsável por automatizar o retorno de dados do repositório. Ele que faz com que o controle de visualização seja feita no seu GitHub. Esse hook recebe dois parâmetros: GitHubUsername & KeyWord. O retorno é uma array de objetos contendo 7 propriedades: id, banner, html_url, homepage, topics, name and description.

const { data, isLoading, isLoadingError} = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");

exemplo retorno data:

[
{
    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: enquanto o data nao é carregado, o isLoading retorna TRUE.

    if (isLoading) {
       return <div> loading...</div>
     }

isLoadingError: será TRUE se a consulta falhou durante a busca pela primeira vez.

StackIcons O componente retorna, baseado na iteração da array topics contida no data, icones das stacks usadas no seu projeto. Insira as stacks usadas no seu projeto no campo topics do seu repositório. Veja Stack Icons !

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

- #### Render component StackIcons example:

StackLabels O componente retorna, baseado na iteração da array topics contida no data, icones das stacks usadas no seu projeto. Insira as stacks usadas no seu projeto no campo topics do seu repositório. Veja Stack Icons !

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

Render component StackLabels example:

Preencha os campos do repositório GitHub

Important

Atenção ao preencher cada campo do seu repositório!

banner: insira Banners, imagens do layout para representar seu projeto. Os tipos das imgs são .PNG e .SVG. Para fazer isso o nome do arquivo de imagem deve conter banner no nome. Insira as imagens seguindo o caminho: Ex.:

└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...

id: número de identificação do repositório. Use-o como parâmetro na tag key = {}. ( Este campo nao precisa ser preenchido )
html_url: link do repositório. Usado para acessar o repositório. ( Este campo nao precisa ser preenchido )
homepage: link de acesso a página web do projeto. About / Website of your GitHub.

topics: array que traz informações sobre os icones em Stack Icons. Usado em ambos componentes StackLabels e StackIcon . Este é o campo que é inserido a KeyWord configurado no hook. Rerefe-se ao campo About / Topics of your GitHub.

name: este é o nome do repositório. Refere-se ao campo Settings / General / Repository name of your GitHub.

description: essa é a descrição dado ao seu projeto. Refere-se ao About /Description field of your GitHub.

Exemplo Código

React Query Config.

ViteJS `main{.tsx/.jsx}`

  {/*------------------------------*/ }
  {/*TOP OF THE CODE < main.tsx > */ }
  {/*------------------------------*/ }

  import { ReactQueryProvider } from 'github-automated-repos'

  {/*------------------------------*/ }
  {/*FUNCTION < main.tsx > */ }
  {/*------------------------------*/ }

createRoot(document.getElementById('root')!).render(

  <ReactQueryProvider>
    <StrictMode>
      <App />
    </StrictMode>
  </ReactQueryProvider>

  ,
)

NextJS `layout{.tsx/.jsx}`

Important

Caso a aplicação nao funcione, digite 'use client;' no topo do arquivo page.tsx e no layout.tsx.

  {/*------------------------------*/ }
  {/* LIBRARY IMPORT < layout.tsx > */ }
  {/*------------------------------*/ }

  'use client';
  import { ReactQueryProvider } from "github-automated-repos";

  {/*------------------------------*/ }
  {/*FUNCTION < layout.tsx > */ }
  {/*------------------------------*/ }

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {


  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ReactQueryProvider>
          {children}
        </ReactQueryProvider>
      </body>
    </html>
  );
}

`App{.tsx/.jsx}` or `Page{.tsx/.jsx}`

Caution

❗❗ Não esqueça de preencher os campos: seu GitHubUsername e keyWord (escolhido por você).

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

Important

Se o app NextJS der erro, digite 'use client;' no topo do arquivo page.tsx e layout.tsx. .

 {/*------------------------------*/ }
  {/*TOP OF THE CODE >*/ }
  {/*------------------------------*/ }
  //'use client';
  import { StackIcons, StackLabels, useGitHubAutomatedRepos } from "github-automated-repos";

 {/*------------------------------*/ }
  {/*INSIDE IN FUNCTION>*/ }
  {/*------------------------------*/ }

  {/*CSS STYLE <can be remove after>*/ }

  const styleCSS: { [key: string]: React.CSSProperties } = {
    div: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column'
    },
    logo: {
      width: '60rem',
    },
    section: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
      marginBottom: '100px',

    },
    name: {
      fontSize: '30px',
      fontFamily: 'cursive'
    },
    bannerDiv: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      gap: "2px",

    },
    banner: {
      width: "250px"
    },
    componentsDiv: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      gap: "10px"
    },

    description: {
      width: '700px'
    },
    LinksDiv: {
      display: 'flex',
      gap: '10px',
      fontWeight: '500',
      color: '#646cff',
      textDecoration: 'inherit',
    }

  }



  {/* ---------- HOOK ------ */ }


  const { data, isLoading } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");

  if (isLoading) {
    return <div> loading...</div>
  }


  return (
    <div style={styleCSS.div}>
      <img style={styleCSS.logo} src='https://github.com/user-attachments/assets/bb8f5688-6896-4e42-ac91-81f93fbeece0'></img>
      {
        data?.map((item, index) => {

          return (
            <section style={styleCSS.section} key={index}>

              {/*Name / Title*/}
              <h2 style={styleCSS.name}>{item.name}</h2>

              {/*Banner*/}
              <div style={styleCSS.bannerDiv}>
                {
                  item.banner.map((item, index) => {
                    return (
                      <img style={styleCSS.banner} key={index} src={item}></img>
                    )
                  })
                }
              </div>

              {/*Topics - Components StackIcons & StackLabels*/}
              <div style={styleCSS.componentsDiv}>
                {item.topics.map((icon, index) => {
                  return (
                    <div key={index}>
                      <StackIcons className="stack_Icon" itemTopics={icon} />
                      <StackLabels className="stack_Label" itemTopics={icon} />
                    </div>
                  )
                })}
              </div>

              {/*Description*/}
              <p style={styleCSS.description} >{item.description}</p>


              <div style={styleCSS.LinksDiv}>
                {/*Homepage*/}
                <a href={item.homepage}>
                  <h3>🔗Homepage</h3>
                </a>

                {/*html_url*/}
                <a href={item.html_url}>
                  <h3>🔗Repository</h3>
                </a>

              </div>

            </section>

          )
        })
      }
    </div>
  );

Gostou do github-automated-repos? Dê uma estrela no repositório ⭐ ⬆️.

based in: Api Github

by: @digoarthur

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README_PT.md

README_PT.md

Vamos Começar! [ 6 passos ]

1. Instalação

2. Config. ReactQuery (ViteJS)

3. Utilizando o Hook ( useGitHubAutomatedRepos() )

4. Banner

5. Escolha os repositórios e preencha o campo Topics com a palavra chave escolhida por você.

Tabela de StackIcons

6. ✅Pronto! JSON - Dados dos repositórios escolhidos por você!

Exemplo dos dados ~ console.log(data) ~

About Library

Importando Biblioteca

The package imports 4 elements:

exemplo retorno data:

isLoading: enquanto o data nao é carregado, o isLoading retorna TRUE.

isLoadingError: será TRUE se a consulta falhou durante a busca pela primeira vez.

Render component StackLabels example:

Preencha os campos do repositório GitHub

Exemplo Código

React Query Config.

ViteJS `main{.tsx/.jsx}`

NextJS `layout{.tsx/.jsx}`

`App{.tsx/.jsx}` or `Page{.tsx/.jsx}`

Files

README_PT.md

Latest commit

History

README_PT.md

File metadata and controls

Vamos Começar! [ 6 passos ]

1. Instalação

2. Config. ReactQuery (ViteJS)

3. Utilizando o Hook ( useGitHubAutomatedRepos() )

4. Banner

5. Escolha os repositórios e preencha o campo Topics com a palavra chave escolhida por você.

Tabela de StackIcons

6. ✅Pronto! JSON - Dados dos repositórios escolhidos por você!

Exemplo dos dados ~ console.log(data) ~

About Library

Importando Biblioteca

The package imports 4 elements:

exemplo retorno data:

isLoading: enquanto o data nao é carregado, o isLoading retorna TRUE.

isLoadingError: será TRUE se a consulta falhou durante a busca pela primeira vez.

Render component StackLabels example:

Preencha os campos do repositório GitHub

Exemplo Código

React Query Config.

ViteJS main{.tsx/.jsx}

NextJS layout{.tsx/.jsx}

App{.tsx/.jsx} or Page{.tsx/.jsx}

ViteJS `main{.tsx/.jsx}`

NextJS `layout{.tsx/.jsx}`

`App{.tsx/.jsx}` or `Page{.tsx/.jsx}`