Skip to content
/ github-automated-repos Public

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!

github-automated-repos.vercel.app/stackicons

License

MIT license
994 stars 16 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

DIGOARTHUR/github-automated-repos

BranchesTags

Repository files navigation

English   Português

logo_github-automated-repos

GitHub NPM Paackage CodeFactor PRs Welcome


✅ 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 (keep updating code) ❌ GitHub API (no data control)

github-automated-repos library

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

Contributing Guidelines



About Library    Hook Import    Fill the fields of the repository (GitHub)    Code Example   

Getting Start [ 6 steps ]

1. Installation

npm

npm install github-automated-repos

yarn

yarn add github-automated-repos

dots-horizontal-svgrepo-com (2)

2. Config. ReactQuery (ViteJS)

Important

Don’t forget to configure the React Query!!! See NextJS code example. Code Example

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

dots-horizontal-svgrepo-com (2)

3. Using hook ( useGitHubAutomatedRepos() )

Caution

❗❗ Don't forget to fill in the fields: your GitHubUsername and keyWord (chosen by you).

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

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

dots-horizontal-svgrepo-com (2)

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 bannerin the name. Insert your images in the following path: Ex.:

└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...
dashgo_layout dashfincaneiro_layout proffy_layout

dots-horizontal-svgrepo-com (2)

5. Choose the repositories and fill in the Topics field with the keyword you determined.

image

Important

To insert stack names in the topics field, see web documentation or the table below. > Stack Icons

react-icons NET_Core_Logo mysql-logo-svgrepo-com mongo-svgrepo-com (1) linux-svgrepo-com vue Vitejs-logo typescript tailwind-svgrepo-com swift swagger-svgrepo-com (1) storybook sqlite-svgrepo-com (1) spring-svgrepo-com scala-svgrepo-com sass-svgrepo-com ruby-svgrepo-com Ruby_On_Rails_Logo react-query-seeklogo com python-svgrepo-com prisma prettier

StackIcons Table



Logo Stack Name Logo Stack Name Logo Stack Name Logo Stack Name
androidstudio androidstudio angular angular arduino arduino aws aws
babel babel bash bash bitbucket bitbucket blender blender
bootstrap bootstrap c c canva canva clion clion
cpp cpp csharp csharp css3 css3 dart dart
denojs denojs django django docker docker dotnetcore dotnetcore
eclipse eclipse elixir elixir eslint eslint expo expo
express express figma figma firebase firebase flask flask
flutter flutter gatsby gatsby gimp gimp git git
go go googlecloud googlecloud graphql graphql grunt grunt
gulpjs gulpjs haskell haskell heroku heroku html5 html5
husky husky inkscape inkscape java java javascript javascript
jenkins jenkins jest jest jira jira jquery jquery
jupyter jupyter kotlin kotlin kubernetes kubernetes laravel laravel
linux linux lua lua markdown markdown materialui materialui
mongodb mongodb mysql mysql nestjs nestjs netcore netcore
nextjs nextjs nodejs nodejs npm npm objectc objectc
pearl pearl php php postgresql postgresql prettier prettier
prisma prisma pycharm pycharm python python r r
rails rails raspberrypi raspberrypi react react reacticons reacticons
redux redux ruby ruby rust rust salesforce salesforce
sass sass scala scala sequelize sequelize spring spring
sqlite sqlite storybook storybook styledcomponents styledcomponents swagger swagger
switch switch tailwind tailwind typescript typescript visualstudio visualstudio
visualstudiocode visualstudiocode vitejs vitejs vuejs vuejs yarn yarn

dots-horizontal-svgrepo-com (2)

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

Tip

Customize your cards your way

JSON - DATA

Data Example ~ 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)
IN PAGE WEB

[!TIP] Customize your cards your way!

portfolio_page



skills 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!

Control your projects
Control your Projects
Customize and represent through icons.
Customize and represent through icons
In one place
In one place


Hook Import Import Library   

The github-automated-repos library imports 4 resources: hook useGitHubAutomatedRepos, ReactQueryProvider , StackIcons component and StackLabels component.

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


The package imports 4 elements:

  • ReactQueryProvider tool used to optimize the requirements of the API. Don’t forget to set it up! Code Example

  • 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, isLoading, isLoadingError} = 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', '
}
]

    • isLoading: while the data is not loaded, isLoading returns TRUE.

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

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

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

    • Render component StackIcons example:

react-iconsNET_Core_Logo mysql-logo-svgrepo-com mongo-svgrepo-com (1) linux-svgrepo-com vue Vitejs-logo typescript tailwind-svgrepo-com swift swagger-svgrepo-com (1) storybook sqlite-svgrepo-com (1) spring-svgrepo-com scala-svgrepo-com sass-svgrepo-com ruby-svgrepo-com Ruby_On_Rails_Logo react-query-seeklogo com python-svgrepo-com prisma prettier



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

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

    • Render component StackLabels example:





skills Fill in the fields in the github repository

Important

Pay attention to filling in each field of your repository on GitHub.

Cards Porftolio github-automated-repos


  • banner: This property returns a .PNG e .SVG image. For this to be possible, the name of the image file must contain bannerin the name. Insert your images in the following path: Ex.:
└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...
dashgo_layout dashfincaneiro_layout proffy_layout

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

homepage_Props

  • topics: array that brings information about the icons in Stack Icons. 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.
topics_Props

  • name: This is the name of the repository. Refers to the field Settings / General / Repository name of your GitHub.
name_Props

  • description: This is the description given to your repository. Refers to the About /Description field of your GitHub.
description_Props


Code Example

NextJS React Query Config.

ViteJS 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 NextJS layout{.tsx/.jsx}

Important

If the app does not work, type the 'use client;' at the top of the page.tsx file and 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>
  );
}

dots-horizontal-svgrepo-com (2)

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

Caution

❗❗ Don't forget to fill in the fields: your GitHubUsername and keyWord (determined by you).

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

Javascript Javascript

Important

If the NextJS app does not work, type the 'use client;' at the top of the page.tsx file and 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>
  );


Love github-automated-repos? Give our repo a star ⭐ ⬆️.

based in: Api Github

by: @digoarthur

About

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!

github-automated-repos.vercel.app/stackicons

Topics

github-api portfolio javascript-library typescript-library project-management web-development-tools github-projects developer-portfolio github-portfolio react-libraries github-automation npm-library typescript-react frontend-developers open-source-tools

Resources

Readme

License

MIT license
Activity

Stars

994 stars

Watchers

4 watching

Forks

16 forks
Report repository

Releases 4

v1.2.2 Latest
Apr 20, 2024
+ 3 releases

Packages

No packages published

Contributors 2

  •  
  •  

Languages