Zum Inhalt springen

Automate the visualization of your GitHub projects in your portfolio. 🌟


✅ 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 )

banner_logo_github-automated-repos

Check Repository 🌟.

Getting Start

1. Installation

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

2. hook config.

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.

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

Repository > Edit repository details > Topics
Image description

Render icons

Image description

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

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

Ex.:
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

Image description

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

based in: Api Github

by: @digoarthur

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert