Site Build - Part 2

News

Since the blog basically comes for free, I want to extend my website to also present my various projects as articles. Statiq.Web provides a set of pipelines to read both normal and meta data from a markdown file - metadata is in the common "FrontMatter" format where it is separated from the rest of the potential article by 3 hyphens. Anything above the hyphens is read in YAML format. Neat, I could just make the following construct in the FrontMatter:

link:
	[YouTube]: https://www.youtube.com
	[SoundCloud]: https://www.soundcloud.com
---
# Cool article text!

This is great! Except for how the YAML is interpreted into what the custom razor system can consume. I'm a bit hazy on how the @Model or @Document variable is composed, and a quick readthrough of the available source didn't give me too clear of an idea either. There's some methods to fetch the information, one of which seems at least somewhat useful: Model.GetList().

Nice! We'll use that. I was going to name the link on the page using the dictionary's key, but since we're using a list, we'll need to encode the link somehow. What immediately came to mind was how markdown represent links:

[Link Name](href)

Cool! We can just use this to represent links in our list. We'll just need some way to figure that out. Markdown can obviously handle it, but since we're working in YAML, I just looked around for some regex to check for markdown links and found a handy article here: https://davidwells.io/snippets/regex-match-markdown-links

It took just a little fiddling around and the addition of a character in the href capture group (-) which I quickly found out was present in my soundcloud link.

Here's the final regex:

 Regex fullLinkOnlyRegex = new Regex(@"^\[([\w\s\d]+)\]\((https?:\/\/[\w\d-./?=#]+)\)$");
 var split = fullLinkOnlyRegex.Match(link);
 <div class="card-text mb-2">
     <a href="@split.Groups[2]">@split.Groups[1]</a>
 </div>

Well, that was all exciting - now I have a functional link sub nav that I can populate programmatically for each project I put together.

I'll be continuing to record more post-mortem information which I'll release... whenever I finish the rest of my website!