Today, In this blog post we are going to give the source code of Github Repositories Extractor & Embedder Tool. This tool/project is officially made(code) by @SH20RAJ on Github-cards-sh20raj.vercel.app. You can check the live version of this project on Github-cards.sh20raj.repl.co(hosted on Replit.com), Github-cards-sh20raj.vercel.app(hosted on Vercel) or Sh20raj.github.io/GitHub-Cards(hosted on Github Pages). You can also find the source code of this project on GitHub.com, made by @SH20RAJ as @SH20RAJ/Github-Cards repo.
This project is completely a static project and made using HTML, CSS and JavaScript coding languages. This project don't require any kind of server as there is no server side code in this project. So, first we need to make a 3 files naming - "index.html" file, "style.css" file, and "main.js" file. After making these files in your code editor, you need to open and edit index.html file first of all -
Editing "index.html" file
In "index.html" file we will just write simple, basic HTML boilerplate code, input form to input username with 2 buttons to "embed" and "extract" the repo and import our "style.css" file and "main.js" file. You can copy-paste the below complete "index.html" file code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Cards</title>
<link rel="stylesheet" href="style.css">
</head>
<body><div style="text-align:center;" class="form">
<img width="250px" src="logo.png" alt="logo">
<form action="embed.html" method="get">
<input class="btnn-sponge" id="user" type="text" name="user" placeholder="Enter GitHub Username">
<button type="submit" class="bg-green btnn-sponge">Preview</button>
</form><br><button class="btnn-sponge" onclick="embed()">Embed</button>
</div><div id="repos" class="github-cards"></div>
<script src="main.js"></script>
</body>
</html>
Editing "style.css" file
Now, lets move towards the "style.css" file. This will be a CSS file which will give style to our project. You can copy-paste the below complete "style.css" file code -
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.github-cards {
display: flex;
flex-flow: row;
flex-wrap: wrap;
padding: 5px;
}
.github-card img {
width: 100%;
}
.github-card:hover {
scale: 2;
opacity: .9;
}
.github-card {
display: block;
box-sizing: border-box;
border: 1px solid #ccc;
margin: 10px;
color: #555;
text-decoration: none;
flex: 1;
min-width: 500px;
}
.bounce-bottom{animation:bounce-bottom 1s both}
@keyframes bounce-bottom{0%{transform:translateY(45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(24px);animation-timing-function:ease-in}65%{transform:translateY(12px);animation-timing-function:ease-in}82%{transform:translateY(6px);animation-timing-function:ease-in}93%{transform:translateY(4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}
.btnn-sponge {
background: #FBCA1F;
font-family: inherit;
padding: 0.6em 1.3em;
font-weight: 900;
font-size: 18px;
border: 3px solid black;
border-radius: 0.4em;
box-shadow: 0.1em 0.1em;
}
.btnn-sponge:hover{
transform: translate(-0.05em, -0.05em);
box-shadow: 0.15em 0.15em;
}
.btnn-sponge:active{
transform: translate(0.05em, 0.05em);
box-shadow: 0.05em 0.05em;
}
.bg-green{
background: rgb(81, 228, 81);
}
Editing "main.js" file
Lets, now edit the "main.js" file. This is a JavaScript file and the main file in our project. We will use GitHub.com REST API to extract repositories from the user GitHub profile. You can get more information about GitHub REST API in this documentation by GitHub - Docs.github.com/en/rest. All API access is over HTTPS, and accessed from "https://api.github.com". All data is sent and received in JASON format. So, In order to receive the data of GitHub repositories of a specific user we will write the following JavaScript code -
var url = 'https://api.github.com/users/' + user + '/repos';
var field = document.getElementById('repos');
fetch(url)
.then(response => response.json())
.then(data => showrepos(data));
Here, we have used the GitHub REST API URL - "https://api.github.com/users/' + user + '/repos" with the "user"(which is the username of the GitHub user whose repository we want to extract). The "user" is the which was assigned in the input tag in "index.html" file.
Now, after extracting and receiving the JSON data from GitHub, we need to convert that JSON data into readable and presentable format. In order to that we will use a service called Gh-card.dev. This is a web app which converts any GitHub repository into GitHub Repository Card. So, to convert the JSON data, received from GitHub REST API into GitHub Repository Card and show it into our website/web app, we will write following JS code in "main.js" file -
function showrepos(data) {
for (let i = 0; i < data.length; i++) {
field.insertAdjacentHTML('beforeend', `
<div class="github-card bounce-bottom">
<a href="https://github.com/${data[i].full_name}" target="_blank">
<img src="https://gh-card.dev/repos/${data[i].full_name}.svg"/></a>
</div>
`)
}
}
We also need to generate the embed code of the GitHub repository page, to do that we will add following JS code in our "main.js" file -
function embed(){
window.prompt('Copy the iframe code.','<iframe src="https://github-cards.sh20raj.repl.co/embed.html?user='+ document.getElementById('user').value+'" height="1000px" width="100%"></iframe>');
}
Here, we are using IFrame Tag to embed the GitHub repository page. You can modify this code however you want too, you can change height, width of the embedded page. This tool uses "Github-cards.sh20raj.repl.co/embed.html" URL syntax to extract and store GitHub repositories. To extract the GitHub repositories of a specific person, you just need to add "?user=yourgithubusername" at the end of the above URL syntax, like - Github-cards.sh20raj.repl.co/embed.html?user=yourgithubusername, and this will fetch all the repositories of that user from GitHub and display it on the page. In order to embed those repositories you just need to use the IFrame tag(iframe) and embed the whole page(Github-cards.sh20raj.repl.co/embed.html?user=yourgithubusername) onto your own website or web app, where you wanted to embed those repositories.
Heres the full JavaScript code for "main.js" file-
var user = 'sh20raj';
if(getparam('user')){
user = getparam('user');
}
function embed(){
window.prompt('Copy the iframe code.','<iframe src="https://github-cards.sh20raj.repl.co/embed.html?user='+ document.getElementById('user').value+'" height="1000px" width="100%"></iframe>');
}
var url = 'https://api.github.com/users/' + user + '/repos';
var field = document.getElementById('repos');
fetch(url)
.then(response => response.json())
.then(data => showrepos(data));
function showrepos(data) {
for (let i = 0; i < data.length; i++) {
field.insertAdjacentHTML('beforeend', `
<div class="github-card bounce-bottom">
<a href="https://github.com/${data[i].full_name}" target="_blank">
<img src="https://gh-card.dev/repos/${data[i].full_name}.svg"/></a>
</div>
`)
}
}
function getparam(a,e){return e||(e=window.location.href),new URL(e).searchParams.get(a)}
By default the user will be "@sh20raj", you can change it with you own username if you want to.
Thats it, By following all these steps your tool will be ready to use.
