Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?

✨Today I learned: Using Octokit! 🐙✨

Somewhat reflection…

As essential as it’s to set objectives, it’s also essential to measure progress alongside the way in which. I needed to take a second and see how far I’ve are available in my first couple of months of open-source growth journey and what extra I need to obtain.

A part of the objective I set for my open-source growth journey is to goal for steady development and growth. Hacktoberfest was a good way for me to navigate the mysterious world of open-source initiatives. Nicely, rather less mysterious than earlier than. I’m extra snug now with the method of forking, cloning, experimenting with a mission, and following the contribution guideline guidelines to make a correct pull request. I additionally realized to be extra skilled in my communication with maintainers and make modifications in line with their requests. I’m additionally higher at studying contribution tips now and following them.

The Challenge

Together with a small workforce of unimaginable builders, I made a decision to work on the My Photohub mission.

As acknowledged within the README.md

My Photohub is an internet app that makes it simple to share your photographs on the net. My Photohub takes your photos and optimizes them for the net, creates a lovely HTML web page to point out them, and hosts all the things in a brand new GitHub Repository owned by you! Your picture net web page is made obtainable to the world through GitHub Pages. Better of all, all the things is free, and you are accountable for the top product.

As somebody who loves pictures and dealing with photos, the second I noticed this mission, I knew I needed to contribute to it. I additionally appreciated the concept of utilizing GitHub to add photos, it felt unique and progressive.


Having an awesome workforce all sharing a typical imaginative and prescient and being equally motivated and lively is so essential to creating a mission work. I used to be actually fortunate to have labored on the My PhotoHub mission with some sensible builders who have been able to assessment my code, present suggestions and actively talk on our workforce chat. Because the mission was new, it took lots of coordination and communication to determine the conflicting elements of the code may very well be resolved and became one correctly functioning complete.

My Contribution

Challenge: “Figure out how to ‘upload’ resources to GitHub”

More often than not, in an effort to make code contributions, we have to have some concept of what all the codebase is doing or what the mission is about. Except, in fact, the problem may be very minor and will not have an effect on all the mission. I needed to look via the pull requests of two different members of the workforce to have an concept of methods to strategy ‘importing’ assets to GitHub.

What’s Octokit? 🐙

To contribute to this mission, I first needed to study Octokit. I by no means used it earlier than for any of my initiatives so I needed to learn some articles about it first and undergo the documentation.

Octokit is a lineup of GitHub-maintained shopper libraries for the GitHub API.
The Octokit shopper can be utilized to ship requests to GitHub’s REST API and make queries to GitHub’s GraphQL API.

Instance taken from the documentation: Get the username for the authenticated consumer.

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

// Examine: https://docs.github.com/en/relaxation/reference/customers#get-the-authenticated-user
const {
  information: { login },
} = await octokit.relaxation.customers.getAuthenticated();
console.log("Whats up, %s", login);

Enter fullscreen mode

Exit fullscreen mode

I got here up with the code under to add the assets following the pull requests for different points for the mission. To type the logic, the documentation was my foremost supply of steering. It had lots of code examples for me to comply with and work with.

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

const UPLOAD_DIRECTORY = 'uncooked'

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

export async perform githubUpload(token, repository, file) {
    const octokit = new Octokit({ auth: token })
    const [owner, repo] = repository.break up('/')
    return await octokit.request('PUT /repos/{proprietor}/{repo}/contents/{path}', {
        path: `${UPLOAD_DIRECTORY}/${file.identify}`,
        message: `Add File - ${file.identify}`,
        content material: await getBase64(file)

Enter fullscreen mode

Exit fullscreen mode

Going ahead… 🚀

For the following few weeks, I need to actively work on turning the My Photohub mission right into a functioning software. There are essential bits and items of it nonetheless lacking and I need to actively contribute to creating it complete.

Add a Comment

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?