GMOT-SSG VS textToHTML_V2

Today I will talk about my first experience publishing a package to npm. Which means that now you can install it on your machine and use it! My project is here in case you want to check it. It is a Static Site Generator; it will take txt or md files as input and transform it in HTML!

I added some tests to Gustavo's SSG project. I added some e2e tests to his repo which reminded me to add e2e tests to my repo as well :D

This week lab’s goal is to test out our SSG. We were instructed to use a tester like Jest to test our code and check if everything is working as intended.

This time this lab is all about setting configuration files for our SSG project. mine. The configuration that we should add is:

For my SSG, I decided to go with the Full Markdown support. Issue #16 The Full Markdown support consists in making the SSG able to parse all markdown into HTML. As described in LAB 06, I could use a open source library to help me with that.

To be completely honest, I had refactored my code long time ago, when David made Issue #7 and Issue #6. So for this lab I had to make only a few changes to make it good to go.

For this week, the goal was to choose 2 features and add it to our SSG project. GMOT-SSG But each feature had to be in a different branch so we could have different merging experience.

In the other hand, Leyang Yu filled an issue in my repository. Issue #8. His issue goal was to add the Markdown feature to my project.

First, I filed an issue in the GMOT-SSG repository. For this issue, I wanted to add markdown support to the program. This involved several tasks including:

GMOT-SSG

As mentioned, I published a package as part of the course and the way to install it is via terminal. My tool is called textToHTML. You may type npx texttohtmlv2 in your command line. It will prompt you to install the package (say yes). Then, to see if it's working you can try the help command by typing npx texttohtmlv2 -h in the terminal. It should display a list of other things to try out.

Last week in class we added automated testing to our Static Site Generators (mine is called textToHTML). This included some tests for Jest which make sure the core functionality of our programs work as expected.

I pick Andre repo, I created an issue stating, to separate generate HTML into a function, then add test case for that function. After finishing my fix. I created a PR, I see that the workflow Andre setup is working correctly.

Jest is a testing framework used for writing unit tests for your application. It allows you to write tests and test suite files ending in .test.js or .spec.js. In these files, you are able to test individual pieces of your application. For example, in my textToHTML SSG I have a function that processes Markdown syntax, called... processMarkdown()... I know, super creative.

Having set up linting/formatting in my own SSG called textToHTML, commit link, I was curious what it would find.

I saw how DocuSaurus handled the Markdown features, and also accessibility on their HTML templates. As such I decided for my own SSG to improve the Markdown capabilities and also add tags to each of the generated pages.

Given that we were now allowed to use an open source library to implement these features instead of coding from scratch, I chose Markdown-it.

Down to brass tacks

Implementing the changes were fairly simple, as in my original method I used a function to take the content (excluding head, meta tags, body) and process the Markdown using regexp. Instead what I did now was pass my content to the markdown function which then calls the "md.render()" method and returns that content.

var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true
});

const processMarkdown = (data) => {
    return md.render(data);
};

Enter fullscreen mode Exit fullscreen mode

In terms of the Yargs code, I made a module and required it in my main file in order to get access to "argv" value. This helped me make my main textToHTML.js file much cleaner because the setup code for Yargs was put into it's own file and textToHTML.js just handles the file logic.

Links: My partner's SSG, Issue-14, Pull Request

This week in OSD600 we went back to contributing to our own Static Site Generators. We had to pick 2 additional features to implement. For my repository textToHTML_V2 I decided to pick:

Some of the pull requests on my own repository include one where my partner had to fix the name of the HTML file generated from .md inputs. Pull Request 11 . That was really the only thing I needed my partner to change because we both asked about the code we were writing along the way so the pull request merge was smooth.