[{"_path":"/","_draft":false,"_partial":false,"_empty":false,"title":"Content Wind ","description":"A lightweight Nuxt template to build a Markdown driven website, based on Nuxt Content, WindiCSS 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 template to build a Markdown driven website, based on "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt Content"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://windicss.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WindiCSS"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://iconify.design","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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":"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":"Enjoy meta tag generation from Markdown files"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Switch between Light & Dark mode 🌔"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generated navigation based on your pages"}]},{"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","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Shiki"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create Vue components and use them in your 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 roiLeo/nuxt3-content\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx nuxi init my-website -t roiLeo/nuxt3-content\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/roiLeo/nuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github.com/roiLeo/nuxt3-content"}]},{"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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content/blob/main/components/MainNavbar.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<MainNavbar>"}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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":"navTitle"}]},{"type":"text","value":" property in the front-matter of your pages:"}]},{"type":"element","tag":"code","props":{"code":"---\nnavTitle: '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":"---\nnavTitle: '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","noopener","noreferrer"],"target":"_blank"},"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","noopener","noreferrer"],"target":"_blank"},"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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content/blob/main/components/content/Alert.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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","noopener","noreferrer"],"target":"_blank"},"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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content/blob/main/components/content/List.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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%2FroiLeo%2Fnuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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":"yarn generate\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn 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","noopener","noreferrer"],"target":"_blank"},"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":"yarn build\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn 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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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 to "},{"type":"element","tag":"a","props":{"href":"https://twitter.com/Atinux","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Atinux"}]},{"type":"text","value":" for this wonderful project 💚."}]}]},"navTitle":"Home","body":{"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 template to build a Markdown driven website, based on "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt Content"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://windicss.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WindiCSS"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://iconify.design","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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":"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":"Enjoy meta tag generation from Markdown files"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Switch between Light & Dark mode 🌔"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generated navigation based on your pages"}]},{"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","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Shiki"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create Vue components and use them in your 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 roiLeo/nuxt3-content\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"npx nuxi init my-website -t roiLeo/nuxt3-content"}]}]}]}]}]},{"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/roiLeo/nuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github.com/roiLeo/nuxt3-content"}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"# My title"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"This first paragraph will be treated as the page meta description."}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"---"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"head.title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Custom <title>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"head.description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Custom meta description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"head.image"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Custom image injected as `og:image`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"---"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"# My title"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"This first paragraph will be treated as the page meta description."}]}]}]}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content/blob/main/components/MainNavbar.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<MainNavbar>"}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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":"navTitle"}]},{"type":"text","value":" property in the front-matter of your pages:"}]},{"type":"element","tag":"code","props":{"code":"---\nnavTitle: '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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"---"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"navTitle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Home"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"---"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"# Welcome to my site"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"With a beautiful description"}]}]}]}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF5555"}},"children":[{"type":"text","value":"Icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"ph:music-notes-fill"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"{name=\"ph:music-notes-fill\"}"}]}]}]}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Hello Content Wind"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" { defineNuxtConfig } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"nuxt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    highlight"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      theme"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"one-dark-pro"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content/blob/main/components/content/Alert.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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","noopener","noreferrer"],"target":"_blank"},"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","noopener","noreferrer"],"target":"_blank"},"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"alert"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"{icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"ph:circle-wavy-warning-duotone"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"#title"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"This is an alert"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"#default"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"This is the default content of my alert!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"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/roiLeo/nuxt3-content/blob/main/components/content/List.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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%2FroiLeo%2Fnuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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":"yarn generate\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"yarn generate"}]}]}]}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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":"yarn build\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"yarn build"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"node .output/server/index.mjs"}]}]}]}]}]},{"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","noopener","noreferrer"],"target":"_blank"},"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/roiLeo/nuxt3-content","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"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 to "},{"type":"element","tag":"a","props":{"href":"https://twitter.com/Atinux","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Atinux"}]},{"type":"text","value":" for this wonderful project 💚."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"features","depth":2,"text":"Features"},{"id":"setup","depth":2,"text":"Setup"},{"id":"usage","depth":2,"text":"Usage","children":[{"id":"pages","depth":3,"text":"Pages"},{"id":"navigation","depth":3,"text":"Navigation"},{"id":"icons","depth":3,"text":"Icons"},{"id":"code-highlight","depth":3,"text":"Code Highlight"},{"id":"vue-components","depth":3,"text":"Vue Components"}]},{"id":"deployment","depth":2,"text":"Deployment","children":[{"id":"static-hosting","depth":3,"text":"Static Hosting"},{"id":"node-server","depth":3,"text":"Node server"}]}]}},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},{"_path":"/about","_draft":false,"_partial":false,"_empty":false,"title":"About","description":"This is the about page, with a custom description and image for SEO ✨","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"about"},"children":[{"type":"text","value":"About"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the about page, with a custom description and image for SEO ✨"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Content Wind","src":"https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA"},"children":[]}]}]},"navTitle":"About","head":{"description":"This is a custom description for Content Wind about page.","image":"https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA"},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"about"},"children":[{"type":"text","value":"About"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the about page, with a custom description and image for SEO ✨"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Content Wind","src":"https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:2.about.md","_source":"content","_file":"2.about.md","_extension":"md"}]