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:
- Customized text Editor
- Generate zip files on folders on specific format
- Autosave data on browser (including uploaded images)
- Compress uploaded images
- Generate custom markdown from editor’s content
- Form Validation
- 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.
It’s an awesome tool to build customized text editors. It allowed us to build custom tools and blocks to fulfill app requirements.
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.
There was no such library that would produce HTML in a way the application needed. So we wrote it ourselves.
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.
The application had to compress images on the browser. Compressorjs was the perfect choice.
It allows you to save zip files to the user’s computer with a specified file name.
It allowed us to generate zip files & folders in the easiest way possible.
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.
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.