Quick @nuxt/content reference
This Blog
This Blog was created using @nuxt/content, but that was not the only element that magically created it. Multiple plugins and tutorials were used for the fine touches that makes it functional, beatiful and awesome.
@nuxt/content
First, the documentation itself is the base of all the blog.
The tutorial helps a lot to understand the docs and takes you step by step for creating your blog.
At the end of it, they give us more tutorials for some specific and so important elements to add to our blog.
- Adding a Sitemap Using Nuxt Content
- Adding Social Media & SEO Meta Data Using Nuxt Content
- Adding Pagination With Nuxt Content
@nuxt/sitemap
Now, the sitemap is created after the nuxt generate command is executed. So, for this sitemap, we use the generated directories as the routes of the site itself:
export default {
// ...
sitemap: {
hostname: 'host_of_the_blog',
// Returns an array with all the routes of our site
routes() {
const { getRoutes } = require('./utils/sitemap');
// The "./dist" directory is where all the Nuxt generated files are saved
return getRoutes('./dist');
},
gzip: true
}
};
const { readdirSync, lstatSync } = require('fs');
const path = require('path');
const getRoutes = directory => {
let routes = [];
const recursiveRoutes = rootPath => {
readdirSync(rootPath)
// We only need the directories and no the one that is named "_nuxt"
.filter(dir => lstatSync(`${rootPath}/${dir}`).isDirectory() && dir !== '_nuxt')
.map(dir => `${rootPath}/${dir}`)
.forEach(dirPath => {
// The directory "./dist" is removed from the route; this way we get
// the route from the root (/) of the site.
routes.push(dirPath.replace(directory, ''));
});
};
recursiveRoutes(directory);
return routes;
};
module.exports = {
getRoutes
};
@nuxt/feed
Next, for the feed, this site does not use something special. Just the Example 1 of the documentation and minor tweaks to adapt it to the Blog needs.
Copying the copy button
Something beautiful about @nuxt/content is that it highlights the code using PrismJS. But, what about an easy way to copy the code?
Well, we are not first people asking that, so this GitHub Issue gives us the answer we need and the code directly from the docs.
Conclusion
This is just the basics for creating a Blog using @nuxt/content. From here, we just need to add the content and keep improving it.