A Speedy Portfolio: Lydia Rose Eiche

By Paul on February 12, 2020

If Lydia’s last name sounds familiar, that’s because we share it. That’s right, she’s my sister. Don’t let that fool you, though; I approached her website with the same professionalism as I would with anyone. She’d had a WordPress-driven site for some time, but that’s really overkill for a single-page portfolio. So I said, “Leave it to me. I’ll send you a new design soon.”

Previews and Deployments

Using GitHub and Netlify for version control and hosting, respectfully, had worked so well with my own site that I decided to do the same thing for my sister’s. What was even nicer was that using this combination allowed me to generate preview links with pull requests. I published changes to a branch, say, testimonials-added, and submitting a pull request would trigger Netlify to generate a preview.

It was in this fashion that I incrementally developed Lydia’s site. I made some changes, then sent her a link. She’d respond with her comments, and when she was satisfied, I simply merged the PR and deleted the branch. This triggered a production build in Netlify, with no actual deployment necessary on my part, except for simply committing to the repository.

Custom Content

Lydia’s site is very static. Most of the markup is written right into the homepage (since it is a one-page site, at least for now). There is one exception to that, and that’s the Testimonials section.

If I can extol my sister for a moment, Lydia has quite a lot of experience as a singer and actress. As befits her, then, she’s been mentioned and praised in many reviews, both online and in print. Quotes and excerpts from those reviews are displayed on her website, but managing all those as static markup would be… tedious, at best. So instead, they are managed as Markdown files in a separate directory.

Outside of the /src directory, which contains the site structure and static content, there is a /content/testimonials directory. Each file in that directory is a separate testimonial, very simply structured:

---
author: Mike Fischer
source: _Milwaukee Journal Sentinel_
---
an exceptional Lydia Rose Eiche

The top section, fenced in by triple dashes, is commonly referred to as “frontmatter.” Simply put, it’s the metadata, in key-value pairs. The content below the frontmatter is the actual testimonial content. On the homepage, a GraphQL query pulls in the content:

query {
	allMarkdownRemark(sort: { order: ASC, fields: [id] }) {
		edges {
			node {
				id
				html
				frontmatter {
					author
					source
				}
			}
		}
	}
}

A couple notes on this query. First, these testimonial files are the only external content, so it doesn’t need to be picky. If other content sources are added, I will need to filter the origin. Second, the id used is internally assigned and arbitrary. The order of testimonials doesn’t matter, so however they appear is fine.

At the top of the index page, I’m pulling in the query results:

data: {
	allMarkdownRemark: { edges },
}

And then mapping them to a custom component.

const Testimonials = edges
		.filter(edge => !!edge.node.frontmatter.author)
		.map(edge => <Testimonial key={edge.node.id} testimonial={edge.node} />)

In the component, the Markdown body content is automatically converted to HTML for me.

<blockquote className="testimonial__quote" dangerouslySetInnerHTML={{__html: testimonial.html}} />

However, content inside the frontmatter is not. Recall that the source value (see above, in the Markdown example) was italicized, so unless I wanted to store HTML in the frontmatter (I didn’t), this wouldn’t work:

<span dangerouslySetInnerHTML={{__html: testimonial.frontmatter.source}} />

As is often the case with open source projects, I am not the first (nor, I’m sure, will I be the last) with this problem. I found this issue from a couple years ago where someone else had the same dilemma. Showdown is a Markdown to HTML converter, and its inclusion solved this particular problem.

import showdown from "showdown"
const converter = new showdown.Converter()
<span dangerouslySetInnerHTML={{__html: converter.makeHtml(testimonial.frontmatter.source)}} />

Project Credits

Aside from Gatsby, GitHub, and Netlify, there are a few other projects that helped with the development of Lydia’s website. For front-end assets, I’m using the CodyFrame CSS framework and a couple icons from Nucleo. It took me a little bit to decide on a carousel plugin I liked, but I eventually settled on react-id-swiper, a React port of Swiper.

© Copyright 2020 - Bold Oak Design LLC