GitHubEmbed is a JavaScript library that allows you to easily embed GitHub repository information, including contributors and repository stats, into your web application.
You can include the library in your project using a CDN:
<script src="https://cdn.jsdelivr.net/gh/akromicc/GithubEmbed@v1.0/GithubEmbed.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akromicc/GithubEmbed@v1.0/GithubEmbed.css">Alternatively, you can download the GithubEmbed.js and GithubEmbed.css files and include them in your project.
To use the GitHubEmbed library, create an instance of the GithubEmbed class, passing the GitHub user and repository name as arguments. Then, call the render() method to display the repository information.
// Create an instance of the GitHubEmbed class
const githubEmbed = new GithubEmbed('user', 'repository');
// Render the repository information
githubEmbed.render();Here is a full example demonstrating how to use the library in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Embed Example</title>
<script src="https://cdn.jsdelivr.net/gh/akromicc/GithubEmbed@v1.0/GithubEmbed.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akromicc/GithubEmbed@v1.0/GithubEmbed.css">
</head>
<body>
<div id="github-container"></div>
<script>
// Create an instance of the GitHubEmbed class
const githubEmbed = new GithubEmbed('facebook', 'react');
// Render the repository information into the specified container
githubEmbed.render(document.getElementById('github-container'));
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Embed Example</title>
<script src="https://cdn.jsdelivr.net/gh/akromicc/GithubEmbed@v1.0/GithubEmbed.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akromicc/GithubEmbed@v1.0/GithubEmbed.css">
</head>
<body>
<script>
const githubEmbed = new GithubEmbed('facebook', 'react');
githubEmbed.render();
</script>
</body>
</html>You can also customize where the GitHubEmbed component is rendered by specifying a container element:
const container = document.getElementById('github-container');
const githubEmbed = new GithubEmbed('vuejs', 'vue');
githubEmbed.render(container);<div id="github-container"></div>
This image illustrates how the embedded GitHub repository card will appear, including the repository title, stats (stars, forks, issues), and contributor avatars.
Creates a new instance of the GithubEmbed class.
- Parameters
user(string): The GitHub user name.repo(string): The GitHub repository name.
Fetches the repository and contributor data asynchronously.
Fetches data for the specified repository.
Fetches the contributors for the specified repository.
Renders the repository information in a newly created container element.
Renders the contributors' avatars.
You can see a sample page using the GitHubEmbed library here.
Thanks to Drak0Blu3 for ideas and creativity 🤗.
This project is licensed under the MIT License.