Things My Blog Should Do

10/21/2020

Journal

This is gonna be a rough blog post - I don't know that you'd even call it a blog post. I just want to explore some of the things markdown and Nuxt Content can do, some of the things I'd like to be able to display and... just show them off a bit, and plan for the future. So this is going to be of a disjointed list, as I cover some Markdown and explore some of Nuxt Content's features...

Markdown Basics

Typography

Right off the bat, Markdown can add titles. I've done that above - you'll see it says, "Typography". Markdown also supports some other basic typography markup by default, including italicised text and bold text. There's nothing to it:

## Markdown Basics

### Typography

_italicised text_ and **bold text**.

Showing Code

The above section ended with a code block, allowing me to show off the markdown I wrote. I can also add inline code like so: function() { doSomething(); }.

function() {
  doSomething();
}
I can also add inline code like so: `function() { doSomething(); }`.

```javascript
function() {
  doSomething();
}
```

Blockquotes

Blockquotes are kinda similar to code blocks. They're a block apart from the rest of the text.

-- Thom Bruce, 2020
> Blockquotes are kinda similar to code blocks. They're a block apart from the rest of the text.
>
> <footer>-- <cite>Thom Bruce</cite>, 2020</footer>

Unfortunately, Markdown doesn't feature a friendly syntax for footer and cite markup, so these are added with raw HTML.

Lists

  • Lists are interesting.
  • There are unordered lists.
  1. Then there are ordered lists.
  2. They're cool too.
  • And ideally checklists would be supported too
  • At the time of writing, I'm pretty sure they're not... but I can fix that.
- Lists are interesting.
- There are unordered lists.

1. Then there are ordered lists.
2. They're cool too.

- [x] And ideally checklists would be supported too
- [ ] At the time of writing, I'm pretty sure they're not... but I can fix that.

Checklists aren't a default feature of Markdown but are supported in what is known as GitHub Flavoured Markdown. There're a couple of ways I can go about adding that to Nuxt.

...actually, at the time of writing... that's not that bad - they are almost rendered correctly. The leading unordered list bullet point isn't omitted (but that's a CSS issue, not a renderer one - easily fixed).

Other Basics

A few other things worth mentioning are obviously links and images, and the fact that you can add any arbitrary HTML to a Markdown document that you like to be rendered as HTML - we use that trick with <footer><cite></cite></footer> above. But I don't want to pollute the document with all of that right now, so they're getting an honorary mention.

Nuxt Content

Nuxt Content also supports rendering of Vue components within the body of a Markdown document, provided we use the <nuxt-content> component in our Nuxt templates to render the content. For example, here's a map component I've made:

Now, if I switch to a different strategy for rendering my Markdown, that's gonna break... and I was considering it as a fix for checklists above. I'll have to give that some thought. Being able to insert components like the map above into Markdown is a very powerful feature I'd rather not give up.

Future Features

Like the map above, I'd like to be able to feature more interactive components in my blog posts. Graphs and charts are an obvious must-have... maybe image galleries with a lot of interactivity.

<nuxt-content> is a powerful tool to have in my arsenal... so if I can modify the flavour of the Markdown interpreter and still have access to all of its power, that's an ultimate win.

Expect to see a lot of beautiful interactivity in the future.