My Journey into Open Source: Contributing to Text-To-HTML on GitHub

Hello Everyone!!

I'm excited to share with you the GitHub repository that I've contributed to for Lab 2: Text-To-HTML.

My journey with this repository began by initiating an issue, addressing the need for converting .md files into .html files and implementing the bold feature for Markdown files.

Taking the next step, I decided to fork the repository. This was an entirely new experience for me, as it marked my inaugural contribution to an open-source project. After successfully forking the repository, I proceeded to clone it to my local machine. I started reviewing the code that my partner had carefully written after the repository was installed on my computer.

The JavaScript-based code created by my collaborator, however, proved to be a bit challenging to comprehend and integrate. It took me some time to become used to his writing style and successfully add the previously mentioned functionality to his codebase even though we were both using JavaScript. This learning curve was both enlightening and rewarding, as it marked my entry into the world of open-source development.

The code that I have added to the file index.js are:
1.

  const fileExt = path.extname(filePath);
  const fileName = path.basename(filePath, fileExt);
  const outputFilePath = path.join(outputDir, `${fileName}.html`);

1. Update code for Bold feature

  const [title, ...paragraphs] = fileContent.split(/\n{1,}/); // Split by one
  const titleHtml = title ? `<title>${title}</title><h1>${title}</h1>` : "";
  const paragraphsHtml = paragraphs
    .map((paragraph) => {
      // Support for bold text using double asterisks
      paragraph = paragraph.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
      return `<p>${paragraph}</p>`;
    })
    .join("\n");

1. In function processDirectory

    const filePath = path.join(dirPath, file);
    if (fs.lstatSync(filePath).isDirectory()) {
      processDirectory(filePath, outputDir);
    } else if (file.match(/\.(txt|md)$/)) {
      // Process only .txt and .md files
      processFile(filePath, outputDir);
      console.log(`Converted ${filePath} to HTML.`);

1. In .yargs for the directory consisting of .md or .txt file

      // If it's a directory, process all .txt and .md files within
      if (fs.lstatSync(inputPath).isDirectory()) {
        processDirectory(inputPath, outputDir);
      } else if (inputPath.match(/\.(txt|md)$/)) {
        // Process only .txt and .md files
        processFile(inputPath, outputDir);
        console.log(`Converted ${inputPath} to HTML.`);
      } else {
        console.error(
          "Invalid input. Please provide a valid .txt or .md file or folder."
        );
      }

Here is the code I've contributed to his repository. By incorporating these changes into his repository, users will be empowered to effortlessly transform .txt or .md files, as well as entire directories containing .txt or .md files, into .html format.

Then, I began by committing the changes under a fresh branch named issue-5, and subsequently, I pushed the code using this newly created branch. After that I have created a pull request and talk to him about the code that I have added. Later, he review the code. Then he accept the pull request and merge the code to the main branch.

About The Pull Request that I receive for my repository

In my case, it was Hyunjeong Choi who sent over a pull request for my repository.

The changes were focused on the src/utils.js file. As I dove into the code, I was pleasantly surprised. It was not only easy to run but also incredibly understandable. That's always a good sign!

Without hesitation, I decided to accept the pull request and merged Hyunjeong Choi's code into the main branch.