I had the feeling that it was hard to navigate through the site as it was, so I added navigation links at the end of the posts. I followed this simple example.

The ideal situation would be that the previous/next link takes you to the previous/next post in the same category. There are some hacky ways to achieve it with Liquid (which I want to avoid - I’ve decided to keep Liquid snippets simple), and also some plugins (might be better, but I would prefer if I control the logic).

I will consider in the future if I want to build my script, or if a plugin could be the answer. For now, it is good to have chronological navigation links.

Keyboard Shortcuts

Inspired by the hatch web page, I added keyboard shortcuts to navigate to the next/previous page. Find the snippet below.

<script>
  document.addEventListener('keydown', function(event) {
      // Check if the key pressed is "."
      if (event.key === '.') {
          window.location.href = '{{page.next.url}}';
      }

      // Check if the key pressed is ","
      if (event.key === ',') {
          window.location.href = '{{page.previous.url}}';
      }
  });
</script>

Since now I have keyboard shortcuts, I will have to find a visible place to explain how they work (maybe on the home page). The idea is to display something like the table below:

Key Action
, (comma) Go to previous page
. (period) Go to next page