Explore Writing Content in Markdown Files using Nuxt Content
To build our notes site, we need to have notes to display. In the content directory, we will create a notes` directory where we will store all of our notes in markdown files.
Instructor: [0:00] Of course, the first question you might have is, "Well, if we're using Nuxt Content, where does the content live?" If we look inside of the docs, you'll see that under the Writing Content section, it'll tell us that we need to create a content directory inside of our project, aptly named for where our content is going to live.
[0:17] Since we're building a digital garden, we'll be focusing on Markdown files for this course. Just know, there are other formats that are available to you, such as YAML, JSON, CSV and other things that you can check out in the docs.
[0:27] In addition to supporting a lot of standard Markdown syntax, here are some features you might want to know about. The headings, for example, where we have our H1, H2s, are automatically appended with IDs, so that it's easy to link to the different parts of the document.
[0:40] Then, when it comes to the links directly, you'll see that there are different ways that we can reference links inside of the Markdown files, using the actual NuxtLink component. If we're doing client-side navigation, you also have regular anchor tags that you can use. Of course, you always have the standard Markdown links and tags with the square brackets and parentheses.
[0:56] Another feature that you probably would like to know about is the fact that it also supports code blocks. As you can see here with the triple back tick and doing things such as the language. You can also do line syntax highlighting, as well as even saying the name of the file.
[1:08] It will allow you to render out a pretty version of your code block so that in the event you're taking notes that have code and whatnot, you can ensure that you have syntax highlighting built right into your renderer. As a bonus, you can even include Vue components inside of your Markdown files to make it interactive and do a lot of really cool things.
[1:26] With that, let's quickly create some notes for our digital garden. We'll start by creating that content folder inside of our directory. Then we'll create the notes folder so that in the future if you want to reference other content, you can be separated from our notes. Let's start.
[1:40] We're going to create a Nuxt Content file, explain what is Nuxt Content, which we'll go ahead and copy and paste from the website. Then we can format our tags using Markdown syntax such as using the inline code and then bolding our text. Then we can even grab this whole list right here.
[1:54] Then using VS code, we can go ahead and split our cursor with things like Command-Shift-L to allow us to add a list. Then let's add a heading for what features it has.
[2:04] All right. Great. Let's go ahead and now create just a couple more. We'll create one for Vue components, so how they structured. As Vue developers, we know that typically it has three parts. It has a script block, JavaScript HTML, CSS.
[2:16] Then just to show how the code blocks works, we'll go ahead and add a couple examples here with JavaScript. Then we'll go ahead and add an HTML block with some basic HTML.
[2:25] Then finally, let's add one more note to finish it off. We'll create a note for Egghead and that that Egghead is this awesome platform for developers to enhance their skills. We'll use the Markdown syntax here to create a link.
[2:37] To review, we've learned in this lesson that Nuxt Content utilizes the content folder to store all the files that it's going to use. In addition, we've learned about some of the features that Nuxt Content supports out of the box, for Markdown syntax as well as additional functionality.