Web application to generate markdown posts for Jekyll based blogs.

The client had a bunch of Jekyll based blogs based on the same styles. Every blog needed to be written on markdown  and to be formatted in a specific way. Same applied to filenames, & overall folder structures. The client wanted a super sleek web application where writers could write blog posts with ease and the application would finally generate a zip file in specific format. The zip file would then be consumed by the Jekyll blog system.

The prime requirement was to build a customized wordpress-like blog editor completely on the browser(without server).

These were the core features:

1. Customized text Editor
2. Generate zip files on folders on specific format
3. Autosave data on browser (including uploaded images)
4. Compress uploaded images
5. Generate custom markdown from editor’s content
6. Form Validation
7. Instant preview of blog posts

Looking at the requirements VueJS was our goto choice. Vue 3 was still in its early stage i.e. there weren’t enough libraries supporting Vue 3. So we decided to implement the application without any 3rd party component libraries.

 

We analyzed the client’s requirements and decided to use the following javascript tools  & techniques.

Editorjs

It’s an awesome tool to build customized text editors. It allowed us to build custom tools and blocks to fulfill app requirements.

Json2md

Converting EditorJs’s json blocks to markdown was the toughest part. There were libraries to convert json to markdown, but they required data to be formatted in a specific way (which was very different from our’s). So we wrote a method to pre process EditorJS’s JSON to be suitable for json2md library. 

 

For each markdown element, json2md had its converter. Since our requirement involved a lot of custom markdown, those were all useless. But it had an interesting feature: custom-converters. We wrote custom-converters to transform json blocks to custom markdown.

Json2Html

There was no such library that would produce HTML in a way the application needed. So we wrote it ourselves.

Bootstrap  

Bootstrap is our goto framework when it comes to basic styling. We installed it as a npm package, changed its SCSS variables to match the application’s theme and it was ready.

 

Compressorjs

 The application had to  compress images on the browser. Compressorjs was the perfect choice.

File-saver

It allows you to save zip files  to the user’s computer with a specified file name. 

jszip 

It allowed us to generate zip files & folders in the easiest way possible.

Localforage

The application required to store its data to the browser including images. Our first implementation was localstorage; it  failed miserably due to its limitation on size. The application required IndexedDB for storage.

Then we migrated to pouchDB. It did its job but we found its documentation hard to read and its APIs were harder to use. Looking for a better alternative we found localforage. It worked exactly like pouchDB but it had super sleek APIs.

Yup

 The application had a medium size that needed very specific validation rules. Also, the input fields inside the text editor also needed validation. The best validation library for vue was Vee-validate. It would have worked well but we choose a simple solution: implement on your own. We used Yup for schema definition and implemented a very simple + lightweight validation mechanism. Sometimes a few lines of your code will do the job of massive libraries.