Data driven pages

Posted on 6th February 2020

In an effort to reduce the amount of rework and copy and paste shenanigans that go on with the creation of this blog, I've started moving the data for things like my useful links, my book collection and my games backlog into their own js files.

Splitting them up like this means I can more easily update the pages in future, by writing a couple of components for the pages that render out the content from the arrays, grouped by a common factor (usually the status - in progress, complete, etc)

const shortid = require('shortid');
const status = {
BACKLOG: 'Backlog',
STARTED: 'Started',
COMPLETE: 'Complete'
const books = [
id: shortid.generate(),
author: `Neil Gaiman`,
title: `The Sandman #2: The Doll's House`,
status: status.COMPLETE,
completedDate: '2020-01-11'
export default books;

When I come to making a nicer looking page, maybe some sort of card-based view with the game/book covers, it means all I have to do is update one component and possibly add a tiny bit more data to the arrays.

If this ever gets too big to manage in the confines of a single JS file, then I can always look at moving it into a database and hooking up an API to get the data, but that's a step for another day!

Enjoyed this post? Feel free to share it with your audience using the links below:

Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.


©2022 Pursuit of Loot. All rights reserved.