DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Inspired to improve Octo!
Luigi Zaccagnini
Luigi Zaccagnini

Posted on

Inspired to improve Octo!

Hello! In this blog post I am going to go over how it was to work with Docusaurus and adding an upgrade to Octo inspired by Docusaurus! Working with Docusaurus was a lot of fun and I hope you learn a lot from this post so you can use it for your open source projects too!

Docuwhatus?

Docusaurus is a tool that allows anyone to build a static website with a text format called Markdown! This tool has many purposes but, I think I would mostly use this for writing documentation for my projects!

Starting with Docusaurus

Making a base static site with Docusaurus is super easy and fun to learn! To start you need a Node.jsΒ version >= 12.13.0 or YarnΒ version >= 1.5 . You can check both of these versions by using node -v or yarn β€”version. I personally had trouble with this as I was using another version of node for another project I was working on. To fix this I ended up using Node Version Manager (nvm) to help with switching between versions of node. After making sure npm or yarn are their correct versions run:

npx create-docusaurus@latest project-name classic

and a basic package will be created for you. Once the package is downloaded cd project-name and run npm run start and you will have your awesome basic project running! There is so much more features you can do with Docusaurus and I highly encourage you to check out the docs and play around with it! Here is my Docusaurus demo and here is the project repo!

Adding a new Feature to Octo

After playing around with Octo I got inspired to add something cool to Octo that would make it more fun to use! To start I think the most important feature that needed to be added as soon as possible was full Markdown support. This was a very needed feature because only having one Markdown feature was annoying and made Octo a less desirable tool. So to start I had to research a package that could translate text into markdown. Eventually I found Showdown and adding this feature was 100 times easier! Adding the full Markdown support for me was very easy, I just had one bug I had to fix regarding how it processed multiline Markdown.

So if I had:

\```


Hello


```\
Enter fullscreen mode Exit fullscreen mode

It would not process this correctly because my code was processing the Markdown by line and not by the entire document. So I had to feed Showdown the entire file opposed to line by line.

Future for Octo

Now that I have Markdown finished for Octo I have filed some issues for the next steps of what I would like to be down for the tool.
Some of the features I want are:

Search Engine Optimization
Liquid tags support
More code refactoring

If you are interested to tackle these issues, just follow the link and ask to take on the feature! Thanks for reading another one of my blogs!

Octo
Octo Feature PR
Docusaurus Demo
Docusaurus Repo

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await