Throughout the previous week, I was exploring Docusaurus and found that they have a feature to support static files. I find this feature very useful for any static site generator since images, favicons, stylesheets, etc. are very common parts of a webpage. Therefore, I decided to add this feature in my tool.
Planning
To add this feature, I sketched out a few tasks to finish:
- Add markdown support for image syntax
- Create a folder inside the output folder to store all assets
- Save all static files from user input to assets folder
- Parse the saved assets to the html file
Implementation
- While finding a way to parse image syntax, I decided to fully implement support for markdown. I used markdown-it and highlight for this task.
- I added a new module -
copyAssets
and imported fs-extra to easily copy the assets from users' folder to the defaultassets
in output folder. - Since the process of generating HTML file is getting more and more complicated, I separated a part of the logic into the
generateHTML
module. Apart from the existing logic, I also added code to replace old image path to the new one that I just create.
The actual implementation turned out to be more complicated that expected. In step 1, 2, 3, my original plan was to code them myself but then I had to look for libraries to simplify the process, otherwise it would take too much time and there might be unnecessary errors.
Next step
The feature is currently working but there are still rooms for improvement.
- For now, t he tool only accepts static files through the config json file. It should accept the assets as an option. For example, users should be able to use
mh-ssg -i file.md -a assets
. - Currently all files in user input folder are copied to the default
assets
folder. However, the tool should go through all the files and only filter out image files before copying so that the storage is not wasted.
Top comments (0)