About

This is the about page, with a custom description and image for SEO ✨

Content Wind

---navTitle: 'About'# Custom og:imagehead.description: 'This is a custom description for Content Wind about page.'head.image: 'https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA'---

A few highlighted features are below.

Icon(ify) Component

You can use any icon from the Iconify Project with the included <Icon /> component.

What's this mean? Access to 100,000 icons in 100 collections! See iconify.design for info -›

The Icon component is ready-to-use, without the need for importing it, in either MDC format or in the standard Vue syntax.

Examples

Here's a simple example of how to render the BMW logo from the Simple Icons collection.

<Icon name="simple-icons:bmw" />
:icon{name="simple-icons:bmw"}

Shiki Code Highlighting

It supports code highlighting with Shiki and as well as different VSCode themes. Updating the theme is as simple as editing your nuxt.config.[js|ts]! Learn more in the Content Code Highlight section.

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

Nested Code Blocks

Markdown has a not-so-well-known feature for syntax highlighting, allowing us to render a fenced code-block inside of... a fenced code-block. This is quite useful for development tutorials, allowing you to display fenced code blocks without using any complicated escape sequences or backslashes.

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

WindiCSS Analysis

WindiCSS Analysis Screenshot

Available during development at port 3001 (configurable with $ANALYSIS_PORT), or by running npm run dev:analysis. Also available as a static, single-page application (SPA) by running npm run build:analysis.