DEV Community

Ririio
Ririio

Posted on

Implementing a Docusaurus Feature for my SSG

Docusaurus

I've never used docusaurus before, nor have I ever heard of it. However, setting up a docusaurus website actually made me realize how easy it is to build a website when using it compared to making one your own. The simplicity of the code, and how easy it is to learn makes me want to recommend it to people who doesn't want to spend too much time starting up a documentation website.

Adding Feature for my SSG

When I was setting up a docusaurus project, I never realized how I took having a "sidebar" for granted. Creating it was simple, you already have a template given to you by the developers when you establish your project. This template already helps you in terms of having you view what a sidebar would look like for the website. Learning how to add new sections for the sidebar wasn't all that hard either, and by the end I finally understood how all of it works.

I thought to myself "I don't think it'll be that hard to implement a 'simple' sidebar." How wrong I was.
I first thought of creating an index file that will be used for cycling through each website. It did work, and I had
a basic, but functional sidebar for my dist directory. However, that's when I realized that when clicking one of the links, the sidebar disappears. When I noticed the problem I decided to create a new function in my project called createNavBarDiv, which will be inserted into the string when create a new .html file. There are also some css and one script that were used, but they only play in terms of the looks of the sidebar so I won't go through with them. Now that all of the files are connected via a sidebar, I can now go back to the index file and make it as the "home" file that contains all the links for all files as a card.

Next Step

The sidebar works perfectly as I intended, but it still isn't perfect in terms of the appearance, and the code still needs some condensing. The appearance of the index.html is just not that great (it's functional, but not amazing), and the sidebar isn't too much of a problem, but I think it can look much cleaner that it currently does.

Top comments (0)