Using GitHub to Sync 100 Projects on Dell’s Open Source Website
Companies like Docker, Google, and Facebook contribute to the open source community by showcasing noteworthy projects. Google’s Open Source website lists various open source projects, typically including a basic project overview, links to documentation and resources, and the main website and GitHub repository.
As part of our web presence overhaul for {code}, Open Source at Dell Technologies, we transformed the way open source projects were curated and showcased on their website.
Where we started
- Updates: Showcased projects were manually added with HTML/CSS, meaning a developer was required each time a new project was added. {code} showcases hundreds of projects, so this process created a significant bottleneck.
- Tiles/Images: Project images had to be manually generated by a graphic designer.
- Search/Explore: Projects weren’t searchable and filtering options were limited to tags.
- Landing Pages: Projects didn’t have landing pages. {code} wanted to help projects lacking a main website by providing them with a landing page.
The result
- Updates: Projects were now automatically imported and GitHub stats synchronized in real-time. Non-technical users could easily add projects from the WordPress dashboard.
- Tiles/Images: Project images were easily generated using CSS gradient backgrounds and the project logo, so a graphic designer wasn’t needed.
- Search/Explore: Users could now search projects and filter/sort with more options like GitHub stats.
- Landing Pages: Project landing pages were auto-generated and included real-time information and stat synchronization.
Since no Wordpress plugins existed with this functionality, we developed our own plugin integrating Github with Wordpress.
Synchronizing projects as Wordpress custom post types
We decided to import Wordpress projects as custom post types in order to display projects using Wordpress queries.
In order to add a project, the admin simply needed to enter a link to the GitHub repository:
All project information would be imported as custom fields, custom taxonomies, and content in the text editor:
Once projects are imported, the GitHub page readme file and stats are checked for changes every 15 minutes and then updated if there are any changes, thanks to the GitHub API:
This meant that each project always provided a real-time count of forks, contributors, and stars while importing readme file changes:
Project readme files were imported as markdown to the Wordpress text editor and we used filters to convert the markdown to HTML on the front-end. This meant the original format was maintained and didn’t require any manual formatting:
In some cases, project readme files were incomplete or lacked formatting. For these specific cases, the admin could simply override the readme import and use a manually created description instead:
The text editor content would not be overwritten when the project information was synchronized again.
Searching and filtering the custom post type
We utilized customized versions of FacetWP and SearchWP to create an Ajax-powered project page with searching and filtering based on the imported metadata.
Showcasing featured projects with an interactive 3D grid
A static image was originally used for the community projects banner on the home page. This meant that the banner needed to be updated every time a featured project was swapped out.
We decided to replace this banner image with an interactive 3d grid to make the website feel more unique and to simplify any changes to the featured projects in that section.
The {code} Community and its programs now have a better way to showcase noteworthy projects in the open source community. We continued with automating the site by creating another plugin that synchronized their entire Mobilize.io online community, automatically creating pages on their website for each user.
If you’d like to use the Github to Wordpress plugin mention in this article, contact us at hello@fullstackdigital.com
