Content Wind

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

Features

Write pages in Markdown
Use layouts in Markdown pages
Enjoy meta tag generation
Configurable prose components
Generated navigation from pages
Switch between light & dark mode
Access 100,000 icons from 100+ icon sets
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.
Live edit on Nuxt Studio

Setup

Open a terminal and run the following command:

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

Follow the instructions in the terminal and you are ready to go 🚀

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:

content/index.md

# My title

This first paragraph will be treated as the page meta description.

You can overwrite meta tags by using front-matter:

content/index.md

---
title: 'Custom title'
description: 'Custom meta description'
image: 'Custom image injected as `og:image`'
---

# My title

This first paragraph will be treated as the page meta description.

This is done thanks to Nuxt Content's document-driven mode of Nuxt Content.

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 site

With a beautiful description

Theme configuration

You can configure Content Wind global configuration in the app.config.ts file:

signature

interface AppConfigInput {
  cover?: string, // default: '/cover.jpg'
  socials?: {
    twitter?: string
    github?: string
  }
}

Example of settings Twitter and GitHub icons in the navbar:

app.config.ts

export default defineAppConfig({
  socials: {
    twitter: 'Atinux',
    github: 'Atinux/content-wind'
  }
})

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

Learn more on nuxt-icon documentation.

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 <MarkdownBlock> component in components/content/MarkdownBlock.vue.

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

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.