OSD600-SSG with Docusaurus features

Docusaurus overview

Docusaurus is amazing with various useful features. It will help you to build a site that can include blog posts, documentation, and it also support markdown files. One of the features that impresses me a lot is that Docusaurus can even read your React code in the markdown files. On top of that, Docusaurus can help you write your app's docs quite easily with markdown support and some cool features such as adding a section to sidebar.

Installation and tutorial

To get familiar with Docusaurus, their is a 5-minute tutorial. This tutorial will make you build a page, and start putting features on it, it includes create regular page, markdown files, blog posts, and writing simple docs. Every thing is very handy and easy, all you need to do is creating a .md file or js file and put it into a folder that contain your options (docs, blog, /src/page), Docusaurus will auto generate a page for you.

Prototype Features

To improve my static-site generator, I copy 2 features of Docusaurus. Firstly, I upgrade my markdown feature, instead of using basic logic, I swapped out it with a library (markdown-it). Also, if the text is put inside 2 triple-backstick, my tool will render that text with a styled background (syntax highlighting). In order to make the changed, I filed 2 issues, created 2 branches and start working on them. First branch, I install markdown-it, and apply it to my code. This was quite easy because the syntax of markdown-it was simple and clear. To highlight the syntax, I add a class to an element, which is put inside triple-backstick and styled it with CSS. In the future, I will implement more features to my tool, and rendering React codes that inside markdown files into browser is one of my plans at the moment.