[{"_path":"/","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Content Wind ","description":"A lightweight Nuxt theme to build a Markdown driven website, based on Nuxt Content, TailwindCSS and Iconify ✨","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"content-wind-"},"children":[{"type":"text","value":"Content Wind "},{"type":"element","tag":"icon","props":{"name":"carbon:sailboat-coastal","class":"text-indigo-400"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A lightweight Nuxt theme to build a Markdown driven website, based on "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com","rel":["nofollow"]},"children":[{"type":"text","value":"TailwindCSS"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://iconify.design","rel":["nofollow"]},"children":[{"type":"text","value":"Iconify"}]},{"type":"text","value":" ✨"}]},{"type":"element","tag":"h2","props":{"id":"features"},"children":[{"type":"text","value":"Features"}]},{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/document-driven","rel":["nofollow"]},"children":[{"type":"text","value":"Document-Driven Mode"}]},{"type":"element","tag":"list","props":{"icon":"ph:check-circle-light"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create pages in Markdown in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"content/"}]},{"type":"text","value":" directory"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use Nuxt layouts in your Markdown pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Enjoy meta tag generation from Markdown files"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generated navigation based on your pages"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Switch between Light & Dark mode 🌔"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Access 100,000 icons from 100+ icon sets with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Icon>"}]},{"type":"text","value":" component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight code blocks with "},{"type":"element","tag":"a","props":{"href":"https://shiki.matsu.io","rel":["nofollow"]},"children":[{"type":"text","value":"Shiki"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create Vue components and use them in Markdown"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc."}]}]}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open a terminal and run the following command:"}]},{"type":"element","tag":"code","props":{"code":"npx nuxi init my-website -t atinux/content-wind\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx nuxi init my-website -t atinux/content-wind\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or start by clicking on "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Use this template"}]},{"type":"text","value":" on "},{"type":"element","tag":"a","props":{"href":"https://github.com/Atinux/content-wind","rel":["nofollow"]},"children":[{"type":"text","value":"github.com/Atinux/content-wind"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This template has some built-in features to make it as easy as possible to create a content-driven website."}]},{"type":"element","tag":"h3","props":{"id":"pages"},"children":[{"type":"text","value":"Pages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create your Markdown pages in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"content/"}]},{"type":"text","value":" directory:"}]},{"type":"element","tag":"code","props":{"code":"# My title\n\nThis first paragraph will be treated as the page meta description.\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# My title\n\nThis first paragraph will be treated as the page meta description.\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can overwrite meta tags by using front-matter:"}]},{"type":"element","tag":"code","props":{"code":"---\nhead.title: 'Custom <title>'\nhead.description: 'Custom meta description'\nhead.image: 'Custom image injected as `og:image`'\n---\n\n# My title\n\nThis first paragraph will be treated as the page meta description.\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"---\nhead.title: 'Custom <title>'\nhead.description: 'Custom meta description'\nhead.image: 'Custom image injected as `og:image`'\n---\n\n# My title\n\nThis first paragraph will be treated as the page meta description.\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is done thanks to the "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/content-doc","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ContentDoc>"}]}]},{"type":"text","value":" component of Nuxt Content."}]},{"type":"element","tag":"h3","props":{"id":"navigation"},"children":[{"type":"text","value":"Navigation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The navigation is generated from your pages, you can take a look at the "},{"type":"element","tag":"a","props":{"href":"https://github.com/Atinux/content-wind/blob/main/components/Navbar.vue","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Navbar>"}]}]},{"type":"text","value":" component to see how it works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/content-navigation","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ContentNavigation>"}]}]},{"type":"text","value":" component from Nuxt Content to fetch the navigation object."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To customize the title displayed in the navigation, you can set the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"navigation.title"}]},{"type":"text","value":" property in the front-matter of your pages:"}]},{"type":"element","tag":"code","props":{"code":"---\nnavigation.title: 'Home'\n---\n\n# Welcome to my site\n\nWith a beautiful description\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"---\nnavigation.title: 'Home'\n---\n\n# Welcome to my site\n\nWith a beautiful description\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"icons"},"children":[{"type":"text","value":"Icons"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use any icon from "},{"type":"element","tag":"a","props":{"href":"https://icones.js.org","rel":["nofollow"]},"children":[{"type":"text","value":"icones.js.org"}]},{"type":"text","value":" with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Icon>"}]},{"type":"text","value":" component:"}]},{"type":"element","tag":"code","props":{"code":"<Icon name=\"ph:music-notes-fill\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<Icon name=\"ph:music-notes-fill\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also use it in your Markdown:"}]},{"type":"element","tag":"code","props":{"code":":icon{name=\"ph:music-notes-fill\"}\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":":icon{name=\"ph:music-notes-fill\"}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in "},{"type":"element","tag":"icon","props":{"name":"ph:music-notes-fill"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"code-highlight"},"children":[{"type":"text","value":"Code Highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It supports code highlighting with Shiki and as well as different "},{"type":"element","tag":"a","props":{"href":"https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes","rel":["nofollow"]},"children":[{"type":"text","value":"VS Code themes"}]},{"type":"text","value":"."}]},{"type":"element","tag":"markdown-block","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"```ts\nexport default () => 'Hello Content Wind'\n```"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in:"}]},{"type":"element","tag":"code","props":{"code":"export default () => 'Hello Content Wind'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default () => 'Hello Content Wind'\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Updating the theme is as simple as editing your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  content: {\n    highlight: {\n      theme: 'one-dark-pro',\n    }\n  }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  content: {\n    highlight: {\n      theme: 'one-dark-pro',\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more in the "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/configuration#highlight","rel":["nofollow"]},"children":[{"type":"text","value":"Content Code Highlight section"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"vue-components"},"children":[{"type":"text","value":"Vue Components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add Vue components into the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/"}]},{"type":"text","value":" directory and start using them in Markdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Alert>"}]},{"type":"text","value":" component in "},{"type":"element","tag":"a","props":{"href":"https://github.com/Atinux/content-wind/blob/main/components/content/Alert.vue","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/Alert.vue"}]}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By leveraging the "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/markdown","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Markdown>"}]}]},{"type":"text","value":" component from Nuxt Content, you can use both slots and props in Markdown thanks to the "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/mdc","rel":["nofollow"]},"children":[{"type":"text","value":"MDC syntax"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"::alert{icon=\"ph:circle-wavy-warning-duotone\"}\n#title\nThis is an alert\n#default\nThis is the default content of my alert!\n::\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"::alert{icon=\"ph:circle-wavy-warning-duotone\"}\n#title\nThis is an alert\n#default\nThis is the default content of my alert!\n::\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in:"}]},{"type":"element","tag":"alert","props":{"icon":"ph:circle-wavy-warning-duotone"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is an alert"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the default content of my alert!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to go deeper, take a look at the "},{"type":"element","tag":"a","props":{"href":"https://github.com/Atinux/content-wind/blob/main/components/content/List.vue","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<List>"}]}]},{"type":"text","value":" component to see some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useUnwrap()"}]},{"type":"text","value":" magic 🪄"}]},{"type":"element","tag":"h2","props":{"id":"deployment"},"children":[{"type":"text","value":"Deployment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAtinux%2Fcontent-wind","rel":["nofollow"]},"children":[{"type":"element","tag":"img","props":{"alt":"Deploy with Vercel","src":"https://vercel.com/button"},"children":[]}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/Atinux/content-wind","rel":["nofollow"]},"children":[{"type":"element","tag":"img","props":{"alt":"Deploy to Netlify","src":"https://www.netlify.com/img/deploy/button.svg"},"children":[]}]}]},{"type":"element","tag":"h3","props":{"id":"static-hosting"},"children":[{"type":"text","value":"Static Hosting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pre-render the website to be deployed on any static hosting:"}]},{"type":"element","tag":"code","props":{"code":"npm run generate\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm run generate\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dist/"}]},{"type":"text","value":" directory is ready to be deployed (symlink to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".output/public"}]},{"type":"text","value":"), "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/deploy/static-hosting","rel":["nofollow"]},"children":[{"type":"text","value":"learn more on Nuxt docs"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"node-server"},"children":[{"type":"text","value":"Node server"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Build the application for production:"}]},{"type":"element","tag":"code","props":{"code":"npm run build\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm run build\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Start the server in production:"}]},{"type":"element","tag":"code","props":{"code":"node .output/server/index.mjs\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"node .output/server/index.mjs\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more on "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/deploy/node-server","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt docs"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You are at the end of the page, you can checkout the "},{"type":"element","tag":"a","props":{"href":"/about"},"children":[{"type":"text","value":"about page"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://github.com/Atinux/content-wind","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub repository"}]},{"type":"text","value":" and give a "},{"type":"element","tag":"icon","props":{"name":"ph:star-duotone"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Thanks for reading and happy writing, "},{"type":"element","tag":"a","props":{"href":"https://twitter.com/Atinux","rel":["nofollow"]},"children":[{"type":"text","value":"Atinux"}]},{"type":"text","value":"."}]}]},"navigation":{"title":"Home"},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},null]