Posts

Showing posts with the label localstorage

Building a Personal Reading Dashboard in Jekyll

What Is a Reading Dashboard? A reading dashboard offers users a personalized overview of their reading history, progress through post series, and suggestions on what to read next. This feature is common in large content platforms but rarely seen on static blogs — especially those built with Jekyll. In this guide, you'll learn how to build one from scratch using only client-side tools. Why It Matters for Static Blogs Since Jekyll is a static site generator, implementing user-specific features like dashboards can seem out of scope. But with creative use of localStorage , JavaScript, and well-structured front matter, we can simulate dynamic, personalized behavior entirely in the browser. Design Goals for the Dashboard No backend or server-side database Lightweight and privacy-respecting Client-only logic using localStorage Data pulled from existing Jekyll collections or posts Easy to integrate into any Jekyll theme (especially Mediumish) Step 1: Recording Re...

Tracking Post Series Engagement in Jekyll Without a Backend

Why Track Post Series Navigation? After building contextual navigation between posts in a series, the next step is understanding how readers engage with that flow: Are they completing the entire series? Do they drop off at a particular part? Which parts are revisited? Traditional analytics tools like Google Analytics may feel like overkill or may not offer fine-grained, privacy-friendly insights. Let's explore a lightweight, backend-free approach tailored for Jekyll sites. Step 1: Use localStorage to Track Progress The simplest method is to record which parts a user has read using localStorage . Here’s a JavaScript snippet you can include in your layout: <script> (function() { const key = 'jekyll_series_progress'; const series = "{{ page.series.name | escape }}"; const part = "{{ page.series.part }}"; if (series && part) { let progress = JSON.parse(localStorage.getItem(key) || '{}'); if (!progr...

Archives / All Content


© HypeLeakDance . All rights reserved.