How to Populate metadata using JSON when converting Markdown to HTML in ASP.NET
In a previous blog post, I explained how I used a Markdown to HTML conversion tool to turn our markdown files into HTML webpages for the Aireforge documentation. In summary, all Markdown files were routed through a single dynamic action method with the markdown filename passed as an input parameter. The action method then extracted the content of the markdown file, converted it to HTML and used a single view to generate each file’s content as and when it was called.
Typically, action methods represent one page, and as such any metadata for a given page (title, metadescription, request path) is entered manually within the action method:
Given that all of our markdown files are being converted to HTML from one dynamic action method, this called for a different technique.
Creating a JSON Metadata file
There are only a few metadata properties for each page, so a database call seemed unnecessary. In accordance of Microsoft’s progressions within the .NET Core architecture, I opted for an embedded JSON file to hold this data. After considering the data required, I structured the JSON file in the following way:
This covered all properties I wanted to pass into my view. As we also intend to use the Markdown conversion process for blog posts, I prearranged the JSON to allow separation of these markdown types to speed up metadata selection and readability. This hierarchy also allowed a unified Document class for both Blog and Documentation properties in the MarkdownLookup Model:
Extracting the JSON Property Values
With the JSON file in place, I needed a way to extract the values and pass these into the view for every markdown file. The PopulateMDLookup method takes the filename (element) and the document type (in this case either Blog or Documentation). This then reads the JSON file and deserializes it into the MarkdownLookup model we created. A Linq query is then used to refine the full list of each document's metadata to those that are of the same type (Documentation) and then isolates the single document by the filename:
The PopulateMDLookup method is then called by the dynamic action method by using the filename that was already being passed in, along with the type of Markdown file we are looking for. A Document object is returned with all the metadata values we require.
To check the process worked, I inspected the header elements in the browser while running the web app from my local environment:
Here’s what we've been up to recently.