✨Today I learned: Using Octokit! 🐙✨

A little reflection...

As important as it is to set goals, it is also important to measure progress along the way. I wanted to take a moment and see how far I have come in my first couple of months of open-source development journey and what more I want to achieve.

Part of the goal I set for my open-source development journey is to aim for continuous progression and development. Hacktoberfest was a great way for me to navigate the mysterious world of open-source projects. Well, a little less mysterious than before. I am more comfortable now with the process of forking, cloning, experimenting with a project, and following the contribution guideline rules to make a proper pull request. I also learned to be more professional in my communication with maintainers and make changes according to their requests. I am also better at reading contribution guidelines now and following them.

The Project

Along with a small team of incredible developers, I decided to work on the My Photohub project.

As stated in the README.md

My Photohub is a web app that makes it easy to share your photos on the web. My Photohub takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new GitHub Repository owned by you! Your photo web page is made available to the world via GitHub Pages. Best of all, everything is free, and you are in control of the end product.

As someone who loves photography and working with images, the moment I saw this project, I knew I had to contribute to it. I also liked the idea of using GitHub to upload images, it felt original and innovative.

Teamwork

Having a great team all sharing a common vision and being equally motivated and active is so important to making a project work. I was truly lucky to have worked on the My PhotoHub project with some brilliant developers who were ready to review my code, provide feedback and actively communicate on our team chat. Since the project was new, it took a lot of coordination and communication to figure out the conflicting parts of the code could be resolved and turned into one properly functioning whole.

My Contribution

Issue: "Figure out how to 'upload' resources to GitHub"

Most of the time, in order to make code contributions, we need to have some idea of what the entire codebase is doing or what the project is about. Unless, of course, the issue is very minor and won't affect the entire project. I had to look through the pull requests of two other members of the team to have an idea of how to approach 'uploading' resources to GitHub.

What is Octokit? 🐙

To contribute to this project, I first had to learn about Octokit. I never used it before for any of my projects so I had to read some articles about it first and go through the documentation.

Octokit is a lineup of GitHub-maintained client libraries for the GitHub API.
The Octokit client can be used to send requests to GitHub's REST API and make queries to GitHub's GraphQL API.

Example taken from the documentation: Get the username for the authenticated user.

// Create a personal access token at https://github.com/settings/tokens/new?scopes=repo
const octokit = new Octokit({ auth: `personal-access-token123` });

// Compare: https://docs.github.com/en/rest/reference/users#get-the-authenticated-user
const {
  data: { login },
} = await octokit.rest.users.getAuthenticated();
console.log("Hello, %s", login);

I came up with the code below to upload the resources following the pull requests for other issues for the project. To form the logic, the documentation was my main source of guidance. It had a lot of code examples for me to follow and work with.

import { Octokit } from "https://cdn.skypack.dev/octokit?dts";

const UPLOAD_DIRECTORY = 'raw'

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result.substring(reader.result.indexOf(",") + 1));
        reader.onerror = error => reject(error);
    });
}

export async function githubUpload(token, repository, file) {
    const octokit = new Octokit({ auth: token })
    const [owner, repo] = repository.split('/')
    return await octokit.request('PUT /repos/{owner}/{repo}/contents/{path}', {
        owner,
        repo,
        path: `${UPLOAD_DIRECTORY}/${file.name}`,
        message: `Upload File - ${file.name}`,
        content: await getBase64(file)
    })
}

Going forward... 🚀

For the next few weeks, I want to actively work on turning the My Photohub project into a functioning application. There are important bits and pieces of it still missing and I want to actively contribute to making it whole.

Comments

[Chirag Aggarwal]

Thats such a cute name for a Github API. I love it