Do-it-yourself online book with javascript

So, it was required: to publish a book with illustrations online so that it could be written on and rewritten, and notify the readers about it. Quick and elegant solution under the cut.

It was originally planned to write a full-fledged admin panel with a WYSIWYG editor, which must have a good spell checker, a user-friendly interface, and the ability to attach animation to the recording. The plans were to animate the drawing of pencil sketches in the margins. Running a little ahead, I will say that they did the very drawing with the help of vivus .

In general, we bought a domain, but the development of the server part did not go at all: we got some cumbersome freaks who had too much more than useful stuff. Maybe it would have remained so, if I didn’t come across a description of a single product (jekyll), where, among other things, in the advantages, the absence of a database was noted. It was then that it dawned on me that the book does not need a database like a saddle for a cow .
')
And it started to happen: it was decided to host the book on github, and mark markdown pages, good for the author’s favorite word, a plug-in for saving in this format ( Writage ) was quickly found. Well, to convert it to html, the ShowDown library turned up

Pretty quickly conceived was implemented. The book consists of files-pages in .md format and a .json file, which lists what is going on, what animation to load and whether it is necessary at all.

Here is the configuration file:

[{ "file": ".md", "hash": "", "animation": { "svg": ".svg", "duration": 2000,//    "style": "width:400px;height:300px;opacity:0.5;float:right;margin-right:20px;"//   ,       }, { "file": "2.md", "hash": "2" }] 

Actually, the pages themselves are loaded asynchronously when scrolling and on the hashtag, so that the user can continue to read from the same place where he stopped. When the page loads on the hashtag, the previous entry is also loaded, if there is one, so that it does not seem that this is the beginning of the book.

Synchronous Ajax browser did not give me use, but maybe it is for the better. I did this: first, blocks are created with id = hashtag, then requests are sent to the immediate pages. Thus, all the requested pages fall into place, no matter which of the requests is executed faster.

Here is the function of loading the page , which accepts the page object from the configuration file and optionally the parameters: whether to change the hash of the page, to add this page after the current one or before and whether to scroll to the new page after loading. Parameters enable background page loading.

 function loadPage(page, options = {}) { if (options.changeHash === undefined) { options.changeHash = true; } if (options.next === undefined) { options.next = true; } if (options.scroll === undefined) { options.scroll = true; } if (options.changeHash) { document.location.hash = "#" + page.hash; } if ($("#" + page.hash).size() == 0) { if (options.next) { $("#content").append('<div id="' + page.hash + '"></div>'); } else { $("#content").prepend('<div id="' + page.hash + '"></div>'); } $("#loader").show(); jQuery.ajax({ url: "/book/" + page.file, success: function(result) { // markdown  html var converter = new showdown.Converter(); var html = converter.makeHtml(result); $("#" + page.hash).html(html); if(page.animation!==undefined){ // ,    $("#" + page.hash).prepend('<div id="animation-'+page.hash+'" style="'+page.animation.style+'"></div>'); var vivus=new Vivus('animation-'+page.hash, {duration: page.animation.duration, file: '/svg/'+page.animation.svg, type:'oneByOne'}, finishedDrawing); } $("#loader").fadeOut(); if (options.scroll) { //   ,   $('html,body').animate({ scrollTop: $("#" + page.hash).offset().top }, 300, 'swing'); } } }); } } 

Actually, that's all the magic. The author quietly writes himself a book and publishes it in a couple of clicks (he also managed to edit the json file himself).

The finished book (it is in English) can be read here , and the insides can be viewed in more detail in the code on github .

Thank you for your time, I hope you did not find it wasted!