Reading From Configuration

As discussed in my review of the last year of blogging, the theme for this third year is to reduce the friction in the writing process. An area that requires time and effort is managing the site. There is difficulty in maintaining the shell of the site. Copied markup in a handful of locations throughout the project became a chore to maintain. Taking the fun out of the writing process due to the necessary maintenance.

The first step in reducing this amount of maintenance was to update some components to read from a YML configuration file. Which are the first two components to be updated? The header and footer.

The header configuration file looks something like this. The title is the text presented in the top left corner of the header. Nav items are the list of navigation elements in the header. Each nav item has a name to be presented and a path to the corresponding page.

title: Andrew
navItems:
  - name: About
    path: /about
  - name: Blog
    path: /blog

Next, consuming the configuration within the component is bringing in an import and consuming the data similar to that of data from a graphql result.

import headerSettings from "{relative path to configuration directory}/header.yml"

const Header = () => (
	...
		<div>{headerSettings.title}</div>
	...
	{headerSettings.navItems.map((navItem, idx) => (
		<Link to={navItem.path}>{navItem.name}</Link>
	))}
	...
)

export default Header;

Now to update the header and footer data, the only work is to update a configuration file. On to the next item to reduce the friction.