Note: Was used on the old blog version
This blog is build with Hugo as a static application. Each page is similar in terms of layout, images and style with only the content differing. Still, when navigating to a new page, the complete browser window fully refreshes - even showing a blank page in the middle of the rendering process. It’s 2019, even static page blogs shouldn’t face this issue anymore.
While turning the whole page into a single application or switching the theme just for this feature seemed too high of a price, I found the library turbolinks. The library is created by the project management software team of basecamp and solves this issue nicely. Essentially, the library hooks into the links of a website, loads a requested page in the background and then replaces the content in the current window when it is ready.
Requirements and features that are relevant to me include:
- Easy integration
- Minimal to none change in existing theme, layout structure
- No server-side support required
- Support for mobile browsers
- Loading indication (solved via the top loading bar as known for example at youtube)
- Proven to work
For me, integration was easy as it just requires an additional javascript library without any extra setup. Though I had to move all static resources (css and some javascript that should be executed only once) to the websites <head>.
Turbolink provides its own document ready method, which is executed on each page load, not just the initial one. The typical JQuery on ready handler $(document).ready(function() {alert("hello")}); is replaced by document.addEventListener("turbolinks:load", function() {alert("hello")});.
Also, I had to verify that all links to folders ended with a slash as otherwise turbolink didn’t match the correct page.
All in all, the library was quickly integrated without much of hassle. Although it did not turn this static page into a real single page application, it does come close from the feel. Check the extensive documentation for all features. I hope you as a reader do enjoy browsing this site more than before.