Github-automated-repos

Github-automated-repos is the lib that gives you the power to manage the view of your projects
on your website in one place!

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

Contributing Guidelines

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

Install

    npm install github-automated-repos

    yarn add github-automated-repos

Import

    import { useGithubAutomatedRepos, ProjectIcon, StackIcon } from 'github-automated-repos/index';

The package imports four elements:

ProjectIcon component that renders the icons of the projects that come from data returned from the dataGithubRepos function as the Topics property. Check the Project Icons tab!
StackIcon component that renders the icons of the stacks that come from data returned from the dataGithubRepos function as the Topics property. Check the Stack Icons tab!
IGithubRepos interface for the application in Typescript. Used to type the useState that will receive the array.
useGithubAutomatedRepos hook responsible for automating the repositories. It returns a function called dataGithubRepos, which takes two parameters: data (data that comes from the GitHub API) and the keyword (the latter responsible for showing the project on your website from the moment it is declared in the Topics field of the your Github repository). The dataGithubRepos returns, so optimized, an array of objects containing 6 properties: id, html_url, homepage, topics, name and description.

 const { dataReposGithub } = useGithubAutomatedRepos()

Fill in the fields in the github repository

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 Project Icons and Stack Icons. Used in both ProjectIcon and 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.

Code Example

❗❗ Don't forget to fill in the keyword fields (determined by you) and enter your github username.

 fetch('https://api.github.com/users/usernameGitHub/repos?sort=created&per_page=999')

 then(data => setRepository(dataReposGithub(data, 'keyword')))

  import './App.css';
  import { useEffect, useState } from 'react';
  import { useGithubAutomatedRepos, ProjectIcon, StackIcon } from 'github-automated-repos/index';
  function App() {
                              {/*useGithubAutomatedRepos hook*/ }
    const { dataReposGithub } = useGithubAutomatedRepos()
    const [repository, setRepository] = useState([])

    useEffect(() => {
                                  {/*Put here your github Name*/ }
      fetch('https://api.github.com/users/usernameGitHub/repos?sort=created&per_page=999')
      .then(response => response.json())
      .then(data => setRepository(dataReposGithub(data, 'deploy'))); {/*<-- keyWord*/}
  }, [])

    return (
      <div className="App">
        {
          repository.map((item) => {
            return (
              <div key={item.id}>

                {/*Project Icon*/}
                {item.topics.map((icon) => {
                  return (
                    <ProjectIcon key={icon} className="project_Icon" iconItem={icon} />
                  )
                })}
                {/*html Url*/}
                <a href={item.html_url}>
                    {/*Name Project*/}
                    <h1>{item.name}</h1>
                </a>
                {/*Description*/}
                <p>{item.description}</p>

                {/*Homepage*/}
                <a href={item.homepage}>
                    <h3>Homepage</h3>
                </a>
                {/*Stacks Icon*/}
                {item.topics.map((icon) => {
                  return (
                    <StackIcon key={icon} className="stack_Icon" iconItem={icon} />
                  )
                })}

              </div>

            )
          })
        }
      </div>
    );

  }
  export default App;

  import './App.css';
  import { useEffect, useState } from 'react';
  import { useGithubAutomatedRepos, ProjectIcon, StackIcon } from 'github-automated-repos/index';
  function App() {
                              {/*useGithubAutomatedRepos hook*/ }
    const { dataReposGithub } = useGithubAutomatedRepos()
    const [repository, setRepository] = useState<IGithubRepos[]>([])

    useEffect(() => {
                                  {/*Put here your github Name*/ }
      fetch('https://api.github.com/users/usernameGitHub/repos?sort=created&per_page=999')
      .then(response => response.json())
      .then(data => setRepository(dataReposGithub(data, 'deploy'))); {/*<-- keyWord*/}
  }, [])

    return (
      <div className="App">
        {
          repository.map((item) => {
            return (
              <div key={item.id}>

                {/*Project Icon*/}
                {item.topics.map((icon) => {
                  return (
                    <ProjectIcon key={icon} className="project_Icon" iconItem={icon} />
                  )
                })}

                {/*html Url*/}
                <a href={item.html_url}>
                    {/*Name Project*/}
                    <h1>{item.name}</h1>
                </a>

                {/*Description*/}
                <p>{item.description}</p>
    
                {/*Homepage*/}
                <a href={item.homepage}>
                    <h3>Homepage</h3>
                </a>

                {/*Stacks Icon*/}
                {item.topics.map((icon) => {
                  return (
                    <StackIcon key={icon} className="stack_Icon" iconItem={icon} />
                  )
                })}

              </div>

            )
          })
        }
      </div>
    );

  }
  export default App;

Framework Settings.

└── My-app
    ├── ...
    ├── next.config.js
    ├── ...

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['github-automated-repos'],
}

module.exports = nextConfig

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

based in: Api Github

by: @digoarthur

filipefranc0 / github-automated-repos Goto Github PK