Day 13: List Pages on Next.js
Another notes catchup day: started by including the day12 notes to cover my contributions for yesterday. I didn't post the notes at the time (though I did at least post to twitter about what I did yesterday). Then today: I didn't post my notes or onto twitter (though there was progress on the repo). I'm trying to keep it casual: there's progress day over day (and I'm definitely recording it eventually) so I think that's enough for now.
Wanting a little bit of a break I've decided to scope the new project for today as small as possible. I want to look at what it takes to add directory lists or pull in post data from more than just a single post at a time.
Directory Listings
When you start loading files directly via the next.js pages api, it can be tempting to think about putting all of your posts into some sort of big array and then handle rendering markdown remotely. This is a useful approach when you need to render mdx from potential remote sources (where enabling imports is potentially not feasible) but for a local website or digital garden, this is definitely overkill.
Babel Import Glob to the rescue
As much as it might sound like reading a directory list manually is necessary, we can actually use babel to shortcut the process and simply import a glob of files.
This didn't end up working great...
For various reasons, it had it's limitations. I didn't actually get as far as importing content because I spent some time troubleshooting. My first attempt involved trying to list the content via a component, but my babel transforms weren't working as I expected. (this ended up being pebkac.)
I partially decided not to overwork myself and make sure I spent some time with my partner, so I left it there... picked up again tomorrow.
List of pages
Today's Clippings
- Filled in my notes from the day prior
- Started to scratch away at figuring out how to load directory or list data from different mdx components.
- Looking at options surrounding babel and glob imports