Use GitHub API for Projects

I was looking for a way to highlight projects from GitHub,¹ and while those are not expansive or complex, my plan is to use this year as a springboard for more. The API provides a way to grab publicly available information for display, and I figured I would see if I could make that work for my situation.

The API

The GitHub API is extensive, but all I needed was a way to grab my own projects. To grab a list of my own repos with Nuxt--or your own--you can call it in asyncData at the page level to pass down and replace {{USERNAME}} with your own name like so:

 async asyncData({ $content, app, error }) {
    let projects
    try {
        projects = await fetch('https://api.github.com/users/{{USERNAME}}/repos', {
                headers: {
                Accept: 'application/vnd.github.v3+json',
                },
            }).then((res) => res.json())
    } catch (e) {
        return error({ statusCode: 404, message: 'Content not found' })
    }
}

I tested out the call (https://api.github.com/users/{{USERNAME}}/repos) in Postman to see what it returned, and it was a bit more than I needed. To whittle it down in my ProjectList component, I filtered and mapped the array as follows:

sortProjects() {
    this.projectList = this.projects
    .filter((item) => {
        return this.targetProjects.some((f) => {
            return f.name === item.name
        })
    })
    .map((proj) => {
        const title = this.targetProjects
            .filter((item) => item.name === proj.name)
            .map((item) => {
                return item.title
            })
            .toString()
        const obj = {
            name: title,
            description: proj.description,
            url: proj.html_url,
            topics: proj.topics,
            stars: proj.stargazers_count,
            watchers: proj.watchers_count,
            year: new Date(proj.pushed_at),
        }
        return obj
    })
    .sort((a, b) => b.year - a.year)
},

You'll also notice I reference a targetProjects object. This object contains more readable names than my original GitHub titles, so I'm able to use a slightly better option to title the project and to consequently filter the full array to target those same projects.

targetProjects: [
    {
        name: 'mikemattner.com',
        title: 'This Site!',
    },
]

I've also sorted the project by the pushed_at value returned from the call assuming it probably signifies the recency of my contributions to it and will give it a display order based on that value.

Conclusion

This simple approach could be adapted to do more for a developer portfolio if desired. Highlight a single repo with this simple call: https://api.github.com/repos/{{USERNAME}}/{{REPO_NAME}} or grab every repo and display it all without my restrictions. Anything more extensive might require something more complex, but this was a simple way to pull in a few items I work on.