Content Wind

A lightweight Nuxt theme to build a Markdown driven website, based on Nuxt Content, TailwindCSS and Iconify ✨

Features

• Document-Driven Mode
  • Create pages in Markdown in the content/ directory
  • Use Nuxt layouts in your Markdown pages
  • Enjoy meta tag generation from Markdown files
  • Generated navigation based on your pages
• Switch between Light & Dark mode 🌔
• Access 100,000 icons from 100+ icon sets with the <Icon> component
• Highlight code blocks with Shiki
• Create Vue components and use them in Markdown
• Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.

Setup

Open a terminal and run the following command:

npx nuxi init my-website -t atinux/content-wind

Or start by clicking on Use this template on github.com/Atinux/content-wind.

Usage

This template has some built-in features to make it as easy as possible to create a content-driven website.

Pages

Create your Markdown pages in the content/ directory:

# My titleThis first paragraph will be treated as the page meta description.

You can overwrite meta tags by using front-matter:

---head.title: 'Custom <title>'head.description: 'Custom meta description'head.image: 'Custom image injected as `og:image`'---# My titleThis first paragraph will be treated as the page meta description.

This is done thanks to the <ContentDoc> component of Nuxt Content.

Navigation

The navigation is generated from your pages, you can take a look at the <Navbar> component to see how it works.

It uses the <ContentNavigation> component from Nuxt Content to fetch the navigation object.

To customize the title displayed in the navigation, you can set the navigation.title property in the front-matter of your pages:

---navigation.title: 'Home'---# Welcome to my siteWith a beautiful description

Icons

Use any icon from icones.js.org with the <Icon> component:

<Icon name="ph:music-notes-fill" />

You can also use it in your Markdown:

:icon{name="ph:music-notes-fill"}

Will result in

Code Highlight

It supports code highlighting with Shiki and as well as different VS Code themes.

```ts
export default () => 'Hello Content Wind'
```

Will result in:

export default () => 'Hello Content Wind'

Updating the theme is as simple as editing your nuxt.config:

import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  content: {    highlight: {      theme: 'one-dark-pro',    }  }})

Learn more in the Content Code Highlight section.

Vue Components

Add Vue components into the components/content/ directory and start using them in Markdown.

See the <Alert> component in components/content/Alert.vue.

By leveraging the <Markdown> component from Nuxt Content, you can use both slots and props in Markdown thanks to the MDC syntax.

::alert{icon="ph:circle-wavy-warning-duotone"}#titleThis is an alert#defaultThis is the default content of my alert!::

Will result in:

If you want to go deeper, take a look at the <List> component to see some useUnwrap() magic 🪄

Deployment

Static Hosting

Pre-render the website to be deployed on any static hosting:

npm run generate

The dist/ directory is ready to be deployed (symlink to .output/public), learn more on Nuxt docs.

Node server

Build the application for production:

npm run build

Start the server in production:

node .output/server/index.mjs

Learn more on Nuxt docs for more information.

You are at the end of the page, you can checkout the about page or the GitHub repository and give a

Thanks for reading and happy writing, Atinux.