How to (Automatically) Show Your Pinned GitHub Repositories on Your Site

It's never simple

GitHub has a great API, but retrieving a list of your currently pinned repositories is not one of its strengths. You might be able to do it with GraphQL somehow, but it requires you being authenticated and unnecessarily complicates things.

Luckily, there are other solutions

I researched a bit and found this great repository by egoist on GitHub. It inspired me to not use GitHub's API, but to scrape the data from GitHub.

I know there are already tons of services that do that, and quite frankly, my project wouldn't really do much differently than egoist's project. Still, I like trying out new things and I wanted to build a similar microservice which would instead be hosted on Cloudflare Workers and use HonoJS.

There are hundreds of thousands of bird houses out there, but if you're interested in woodworking, you still want to make your own, right?

Let's start coding

I started with the Hono boilerplate, which is really tiny. I love Hono so much, because it really reminds me of FastAPI, which I also love using, but it's sadly not supported on Cloudflare Workers.

import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app

For my project, I used cheerio for HTML parsing (I've just now seen that egoist's project also uses cheerio, so... oops). I then started by requesting the user's repository from GitHub and searching for the pinned repositories section. Then, I can retrieve and return the data of each repository, like author, name, description, language, stars, and forks.

Some error handling later, and I have my own pinned repository REST API. As easy as that. You can view my code here:

GitHub - berrysauce/pinned: 📌 A REST API to easily get pinned repositories from a GitHub user

📌 A REST API to easily get pinned repositories from a GitHub user - GitHub - berrysauce/pinned: 📌 A REST API to easily get pinned repositories from a GitHub user

GitHubberrysauce

Using it on your website

To use my (or another) service on your website, you need to fetch the data and add it to your site. I coded up a little JavaScript for my website:

<div id="gh-pinned-loading" class="row gx-3 gy-3 row-cols-1">
    <div class="col-12 col-xl-12 text-center d-flex justify-content-center align-items-center" style="height: 200px;">
      Loading...
    </div>
</div>

<div id="gh-pinned" class="row gx-3 gy-3" style="display: none;"></div>

<script>
    async function loadPinned() {
        // get elements
        const loading = document.getElementById("gh-pinned-loading");
        const pinned = document.getElementById("gh-pinned");
        
        // show loading
        loading.style.display = "flex";
        pinned.style.display = "none";
        
        // get pinned repositories
        const result = await fetch("https://pinned.berrysauce.me/get/berrysauce");
        const json = await result.json();
        
        // loop through pinned repositories
        for (let repo of json) {
            var newElement = document.createElement("div");
            newElement.className = "col-12 col-md-6";
            newElement.innerHTML = `
            <a href="https://github.com${repo.author}}${repo.name}}" target="_blank">
                <div class="gh-repo-card">
                    <p>${repo["name"]}</p>
                    <p>${repo.description}</p>
                </div>
            </a>
            `;
            pinned.appendChild(newElement);
        };
        
        // show pinned repositories
        loading.style.display = "none";
        pinned.style.display = "flex";
    };
    
    loadPinned();

</script>

This requests the data from my API every time you load the page. Thanks to the 5-minute cache I added and to Cloudflare's network, once you've loaded the data once, it's blazingly fast. Otherwise, it displays the loading indicator.

Once the snipped received the data, it will create a child element in the row div for every pinned repository in the array.

You can see it in action on my site (with modified styling). Feel free to copy out the code and modify it for your use! Don’t forget to change the fetch URL to use your GitHub username.

But to be honest, I recommend you try to make this yourself. It's not that hard and actually pretty fun! It's also a great exercise!

That's it! I hope you enjoyed this quick endeavor into adding a "pinned repository" section to your website. Have a great day!