Release 0.4 - Final

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

And the picture is also on the left side of the page, its indentation is the same with the below paragraph

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 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

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 for the second issue. Thanks to 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

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, and Kevan Yang 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.