I need navigation

I've struggled to decide how to group my content. For now, I've settled on Logs, Notes, and Guides:

• Logs: entries like this, where I record things while or soon after I'm learning or working
• Notes: a page of information on a particular topic - born from my existing collection of old college class notes
• Guides: 1 or more pages in sequence describing a process in detail (e.g. how-to guides)

At the moment, my content on disk is organized so that guides are a kind of note, e.g.

• Logs
  • entry
  • entry
  • entry
• Notes
  • some guide
    • page
    • page
  • some other guide
    • page
    • page
  • some note
  • another note

This may not be sustainable given how 11ty works, but I can't decide if the two should be completely independent categories, or if guides should be merged into notes.

Inspired by other personal websites, I will try to implement the following single pages:

• Home: about me, and links to other categories and pages
• Now: a "now page", see https://nownownow.com/about
• Contact: how to get in touch with me, including links to other web presences and keybase

My resume needs to go somewhere, not sure where yet.

I have implemented simple top level navigation now, with the following links:

• Home
• Notes
• Logs
• Now
• Contact

Today I started index pages for logs and notes. Home is still empty, while Now and Contact do not exist yet

Some simple index pages

For notes and guides

I started with a simple index for the "notes" tag collection. To include a link into a guide, I added the "notes" tag to the page that should serve as an entry point to the guide. I may look into splitting the two into two lists on the same page, or distinguishing guides in some other way?

Ran into some Nunjucks shortcomings. It doesn't seem to have a way of formatting dates into strings, or a filter for removing values from a list. The former is something that the Liquid engine seems to have, and the latter is something that Jinja2 (Nunjuck's inspiration) has, so these aren't things that don't show up in template engines.

I added an 11ty global filter that wraps this npm package, which in turn wraps this dateformat function by Steven Levithan. Worked like a charm.

For the second case, in this particular instance it was simple enough to nest an if block inside the for block, but what a bummer.

<ul class="tags">
    
</ul>

For log posts

For this one, I wanted to try break the page into sections for years and months, similarly to Zach Leatherman's current homepage. I based what I did off his Liquid templates.

Making use of the date formatting wrapper I made earlier, I'd say it's turned out rather well so far.

While writing this post I wanted to inlcude some screenshots - looks like I'll be getting to image styling and constraints sooner rather than later. For now, I wrote a nunjucks macro to create image elements that include Skeleton's "u-max-full-width" class, so images resize to fit the page container.