Demo of a GitHub Info Cards Grid Showing Several GitHub Repos
Plugin Info Card 6.1.0 is out, showcasing GitHub with its GitHub Info Cards feature. I’ve created a demo page for you to review, and a sample is provided below. This allows you to show off GitHub repos with ease.
Let’s go over what’s new in this release.
New admin panel options to enable GitHub Info Cards
Admin Screen for GitHub Info Cards in the Disabled State
If you ping GitHub’s API too frequently, you’ll receive a rate-limiting error, which is no fun. This means cards are disabled by default. You’ll need to enter a GitHub personal access token to enable the cards. This token increases your rate limit to 5,000 per day.
An Admin Prompt for Adding a GitHub Personal Access Token
You'll need a GitHub Personal Access Token
Thankfully, these are free and easy to create. I’ve written an article on how to retrieve your token; you can find it in the button below.
Once you’ve entered your token, it’ll show you your current rate. The default is 5,000, and it resets every day, so the chances of you hitting your limit are very low.
GitHub Rates Limit Shown in the Admin Settings
Once enabled, both the block and shortcode will begin showing GitHub Info Cards. If you ever need to revoke and change your token, you can do so in the admin settings. Please note that a revoked token will prevent any GitHub Info Cards from showing.
Block and Shortcode support is included
GitHub Info Cards Block Demo
The block included is fully featured and is well-suited for grids. There is also a robust shortcode included, which allows you to use this with your page builder. More on the block later.
The plugin works by connecting to GitHub’s repo API behind the scenes, gathering information about the repo, any sponsorships, and releases. This takes three requests and a bit to load, so the cards are lazy-loaded behind the scenes during the initial render.
Lazy Loading in the GitHub Info Cards
Since the results are cached, subsequent loads will not display the lazy-loading effect. Cards are cached by default for one week.
Two new card formats – Large and Card
SweetAlert2 Repository in Large Card Format
You have a large layout, with:
A top bar with language, license, and quick links to home, GitHub repo, sponsors page, and stargazers page.
An author bar with avatar, repo name, and author.
A stats bar with quick links to stars, forks, watchers, and current release.
A description.
A last updated bar and a call-to-action.
In addition to the large format shown above, you can also show the repository in a card format.
VS Code GitHub Card Shown in a Card Format
The card layout is center-aligned and features a prominent stats bar and call-to-action. With the block, you can format these into grids, as shown on my GitHub page.
Block Grid Demonstration
Five themes are available with custom colors as an option
The block allows you to insert any public repository and display it in a beautiful layout.
First is finding the block, which I recommend using a / command for.
Insert Slash Command for GitHub Info Cards
Just type in /git to pull up the block.
You’ll then be prompted for the username and repository information. You can paste a repository’s GitHub URL in, and it’ll parse it for you.
Animated Gif of Adding a GitHub Repo
The main toolbar offers quick options for card customization.
Main Block Toolbar of the Grid Block
Easily change the theme or choose custom colors.
Change between the Large and Card layouts.
Add additional cards to the grid.
You can also change between themes by selecting a sidebar style option.
Sidebar Theme Options of the Grid Block
Custom colors are available should none of the themes be suitable for your site.
If multiple cards are in one grid, the grid layout settings will be displayed.
Block Sidebar Grid Layout Options
You can also control the visibility settings of certain sections by toggling them on or off. This applies to all cards within the grid.
Visibility Controls of the Parent Grid Block
The child block, or GitHub Info Card item, offers more control.
Child Block Toolbar Options
From the toolbar, you can:
Edit the GitHub repo’s username and repo name.
Refresh the repo in the block editor.
Change the theme of all child blocks.
Change the appearance of all child blocks.
Child Block Overrides of GitHub Defaults
For the child block, the block controls allow you to override various sections of the card, including:
Repo name
Repo author
Homepage URL
Sponsors URL
The avatar (you can upload a custom one)
You can also customize the button and its target as shown in the screenshot below.
Button Overrides in the Child Block
Conclusion
The release of GitHub Info Cards is a significant enhancement for developers and site owners alike! With its user-friendly features, robust customizations, and support for both blocks and shortcodes, you can effortlessly showcase your GitHub repositories in stunning layouts. The easy integration of personal access tokens and various card formats means you can tailor the experience perfectly to your site’s style. Dive in, explore the possibilities, and elevate your site’s GitHub presence with this exciting update! You can get WP Plugin Info Card below.
