Adding a Table of Contents Feature to my Project

Hi everyone, as mentioned in my last blog post. I mentioned that I wanted to add in a sidebar feature to my txt to html convertor project. Well, I did just that, the new feature is up and running in my program, and while it is still more in its prototype phase. It's still working. However, instead of a sidebar it's a table of contents, for now.

What is the Sidebar Feature?

The sidebar feature in my program works very similarly to the same feature offered by Docusaurus. However, instead of generating a sidebar it just makes table of contents, as mentioned above. This works in my program, by reading the contents of a dictionary stored in a file called sidebar.py that exists within the root of the txt to html convertor's folder. The dictionary looks like this:

table_of_contents = [
    {'label' : 'TIL How to Get Command Line Arguments in Python', 'url' : 'TIL How to Get Command Line Arguments in Python.html'},
    {'label' : 'TIL rmtree and os Library', 'url' : 'TIL rmtree and os Library.html'}
]

It works by taking in the URL or path of a file and writing that path to an HTML <a> tag while also giving it a label based on the user's choice. In this case, I chose to name it after the files I wanted to include in the table of contents. This feature basically aims to save the user some time from creating a table of contents, as for example if they wanted to process a folder made up of txt or md files, they can not only process them but also link them all together with the use of the sidebar feature.

How did I Make it?

To implement this feature, I first added in a new optional argument to be entered from the command line. This argument being --sidebar and -sb. When invoked, the user provides the path of their sidebar.py file (which is something that I don't want them to do. I just want them to be able to use the optional argument without having to provide the file path. So I would need to fix this in a future commit). After they provide the file, the program begins creation of the HTML file. But before that, it starts by processing the content from the dictionary in the sidebar.py file into a table of contents to be used in the body of the HTML file. I tested this out and found it was working, but noticed a issue existing in my code that I have found before. When processing a Markdown file with the bold (**) syntax, the code was supposed to convert the text in the syntax to the <strong> HTML tag. However, this wasn't working anymore. So I left a comment for myself and created a new issue identifying which branches and issues to look at when I decide to tackle the bug.

How did Docusaurus Inspire my Feature?

When using Docusaurus, I liked the sidebar feature. As mentioned above, this feature is meant to be a little bit of the time saver for the user when generating a website with several pages. That's exactly how I saw this feature in Docusaurus, so that's the feature I wanted to implement in my project.

Comparison with Docusaurus' Sidebar and txt to HTML Convertor Sidebar

There are some similarities and differences between my implementation of the sidebar and Docusaurus' version. Similarly with both implementations, they read a dictionary from a sidebar file and get the information from the dictionary by importing it to a function that handles the generation of the sidebar. They both rely on keys from the dictionary when creating certain parts of sidebar. The differences are, that at the moment my sidebar implementation only makes a table of contents, and I don't need a config file that requires the path of the sidebar file in order to generate it.

Next Steps for the Feature

As you might be able to tell, my next big step for the feature is to make an actual sidebar. I think I might be able to just use some CSS to get this done, but I may have to look into it more as web development is not my strong suit, so I could be underestimating this. If you're good with web development and might have an idea of how I can implement this idea, feel free to leave a comment on the issue I made for it. There is one other thing I want to figure out. I mentioned earlier that when using the sidebar argument I don't want the code to require a file path input from the user. Since right now I have the code hardcoded to read the dictionary from the sidebar file, and I think that it's fine to read it like that. I might just leave this problem on the backburner for now as I just see the problem as more of a minor inconvenience to the user. So my main next step to tackle to creating an actual sidebar.

That about sums up my feature and what I plan to do improve it in the future. As always, thank you for reading and I'll catch you in the next post.