Release 0.4 - Final
Tags: opensource, programming
Published: 2021-12-11 02:37:49

## Introduction
Hello everyone, this blog post will be about the difficulties I have encountered during the process working on open source project, and what is my solution for the question I have for myself.

## Process
### The First Issue
As we already have the IPC144 notes generated to PDF file, but there are still some pictures not showing properly, some of them are missing the bottom, some of them are on the left compared to others are in the middle of the page. Moreover, the web-only artifacts are still on the PDF page such as "On this page", and "Edit this page", which supposed to only have on the "website" version. For example, the picture is missing the bottom of it ![missing bottom picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwxazbncsvpex16ap18p.png)

And the picture is also on the left side of the page, its indentation is the same with the below paragraph ![picture has no indentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5jb3qyl1xc3ou2vvx2d.png)

When I first see those problems, I thought it was extra easy to fix, just need to spend less than an hour to figure out what is wrong with the code. In reality, it took me more than three days with the problem that I supposed it to be simple. I admit that I am a slow learner, but I would rather improve slowly than doing nothing. In order to keep going with this issue, I read the [`mr-pdf`](https://www.npmjs.com/package/mr-pdf) document to get the basic idea of how the package works, and what *CLI* options it provides. 

I am not patient enough to count how many time I generated PDF file from the notes. And I figured out that the default format for the PDF, which is A4, is not working when we generate the notes to PDF file. That is why some pictures are displayed on the left side of the page. Moreover, some pictures are missing the bottom is because of the *cssStyle* is not used before, so I come up with the CLI option `--cssStyle=".table {display: inline;}` to solve this.
 
And the reason why the web-only artifacts is still appear on the PDF page is because the `--excludeSelectors` option is not implemented enough. I have to add `.clean-btn` to the `--excludeSelectors`, the purpose of this is not to include the "On the page" artifact in side the PDF page. This is the final source code I have implement for this improvement and my [pull request](https://github.com/Seneca-ICTOER/IPC144/pull/148)
```
npx mr-pdf --initialDocURLs="http://localhost:3000" --contentSelector="article" --paginationSelector=".pagination-nav__item--next > a" --excludeSelectors=".margin-vert--xl a,.theme-edit-this-page,.tocCollapsible_1PrD theme-doc-toc-mobile tocMobile_3Hoh,.tocCollapsibleButton_2O1e,.clean-btn" --coverImage="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4MZq4LgLVTna9KUjCeRitC47xZo6nIOpaTFPndnu6sJp0yXmNKwtytiJfjki77VMntnc&usqp=CAU" --coverTitle="IPC144 Notes" --cssStyle=".table {display: inline;}" --outputPDFFilename "Seneca-IPC144.pdf" --pdfFormat="A4"
```

### The Second Issue
This is my [pull request](https://github.com/Seneca-ICTOER/IPC144/pull/149) for the second issue. Thanks to [docusaurus-lunr-search](https://github.com/lelouch77/docusaurus-lunr-search), I have implemented the search bar for the site and I need to modify `docusaurus.config.js` file a bit by adding to the `plugin` array.
```
[
   require.resolve('docusaurus-lunr-search'),
   {
      languages: ['en'],
      indexBaseUrl: true,
   },
],
```
And the `build` is not happy with me because it cannot make a validation for my plugin, I initially put my `require.resolve()` in the option part, which is not how it supposed to be. I think the reason why I encounter this is because I am too overthinking what I am doing, this is what I get after multiple tries ![validation error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy32u3d0fztz8720dcxr.png)

To figure out where I have to place my `require.resolve()`, I decide to collapse the `plugin` array, it is so much easier to see when doing this, and I finally get this work.
 
After receiving feed back, I was suggested to have some `margin-left` in between theme picker and search bar because they looks like stick together originally. 

## Conclusion
What a great experience during the process of fixing those two issues, I have touched the problem that I think I would never have in my student life, I was confused with the array part. I also have a chance to re-read the documents that I use to learn, as well as exploring the new concept in the past two weeks when I am doing this release. I was talking around with amazing people such as [Tue Nguyen](https://github.com/TueNguyen2911), and [Kevan Yang](https://github.com/Kevan-Y) to find the way to figure out what to do with my part, and also some of my friends back to my hometown. Thank you for spending your precious time reading this post.