├── public ├── cover.jpg └── favicon.ico ├── nuxt.config.ts ├── tsconfig.json ├── app.config.ts ├── package.json ├── content ├── 2.about.md └── 1.index.md ├── README.md └── .github └── workflows └── pages.yml /public/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antfu/content-wind/main/public/cover.jpg -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | extends: 'content-wind' 3 | }) 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antfu/content-wind/main/public/favicon.ico -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://v3.nuxtjs.org/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /app.config.ts: -------------------------------------------------------------------------------- 1 | export default defineAppConfig({ 2 | // Configure Content Wind here 3 | socials: { 4 | twitter: 'Atinux', 5 | github: 'Atinux/content-wind' 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "nuxi dev", 5 | "build": "nuxi build", 6 | "generate": "nuxi generate", 7 | "preview": "nuxi preview" 8 | }, 9 | "devDependencies": { 10 | "content-wind": "latest", 11 | "nuxt": "^3.0.0-rc.12" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /content/2.about.md: -------------------------------------------------------------------------------- 1 | --- 2 | navigation.title: 'About' 3 | layout: 'full-width' 4 | # Custom og:image 5 | head.description: 'This is a custom description for Content Wind about page.' 6 | head.image: 'https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA' 7 | --- 8 | 9 | # About 10 | 11 | This is the about page, with a custom description and image for SEO :sparkles: 12 | 13 | ![Content Wind](https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA) 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Website 2 | 3 | Beautiful website propulsed by [content-wind](https://github.com/Atinux/content-wind) theme. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | ``` 16 | 17 | ## Development Server 18 | 19 | Start the development server on http://localhost:3000 20 | 21 | ```bash 22 | npm run dev 23 | ``` 24 | 25 | ## Deployment 26 | 27 | Head over the [Nuxt 3 Deployment](https://v3.nuxtjs.org/getting-started/deployment) documentation. -------------------------------------------------------------------------------- /.github/workflows/pages.yml: -------------------------------------------------------------------------------- 1 | 2 | name: Deploy Nuxt to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Allow one concurrent deployment 13 | concurrency: 14 | group: "pages" 15 | cancel-in-progress: true 16 | 17 | jobs: 18 | # Build job 19 | build-and-deploy: 20 | runs-on: ${{ matrix.os }} 21 | defaults: 22 | run: 23 | working-directory: . 24 | 25 | strategy: 26 | matrix: 27 | os: [ubuntu-latest] 28 | node: [16] 29 | 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v3 33 | 34 | - name: Setup Node 35 | uses: actions/setup-node@v3 36 | with: 37 | node-version: ${{ matrix.node }} 38 | 39 | - name: Cache node modules 40 | id: cache-nodemodules 41 | uses: actions/cache@v2 42 | env: 43 | cache-name: cache-node-modules 44 | with: 45 | path: node_modules 46 | key: ${{ matrix.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} 47 | 48 | - name: Install dependencies 49 | if: steps.cache-nodemodules.outputs.cache-hit != 'true' 50 | run: yarn 51 | 52 | - name: Install @nuxthq/studio 53 | run: yarn add --dev @nuxthq/studio nuxt@npm:nuxt3@latest 54 | 55 | - name: Create .nuxtrc 56 | run: echo 'modules[]=@nuxthq/studio' > .nuxtrc 57 | 58 | - name: Generate 59 | run: yarn generate 60 | env: 61 | NUXT_PUBLIC_STUDIO_API_URL: http://localhost:1337 62 | NUXT_APP_BASE_URL: /${{ github.event.repository.name }} 63 | 64 | - name: Add .nojekyll file 65 | run: touch .output/public/.nojekyll 66 | 67 | # Deployment job 68 | - name: Deploy 🚀 69 | uses: JamesIves/github-pages-deploy-action@v4 70 | with: 71 | folder: ./.output/public 72 | -------------------------------------------------------------------------------- /content/1.index.md: -------------------------------------------------------------------------------- 1 | --- 2 | navigation.title: 'Home' 3 | --- 4 | 5 | # Content Wind :icon{name="carbon:sailboat-coastal" color="#818cf8" size="2rem"} 6 | 7 | A lightweight Nuxt theme to build a Markdown driven website, based on [Nuxt Content](https://content.nuxtjs.org), [TailwindCSS](https://tailwindcss.com) and [Iconify](https://iconify.design) :sparkles: 8 | 9 | [Play online on Stackblitz](https://stackblitz.com/edit/nuxt-content-wind?file=content%2F1.index.md) 10 | 11 | ## Features 12 | 13 | ::list 14 | - Create pages in Markdown in the `content/` directory 15 | - Use Nuxt layouts in your Markdown pages 16 | - Enjoy meta tag generation from Markdown files 17 | - Generated navigation based on your pages 18 | - Switch between Light & Dark mode :moon: 19 | - Access 100,000 icons from 100+ icon sets with the `` component 20 | - Highlight code blocks with [Shiki](https://shiki.matsu.io) 21 | - Create Vue components and use them in Markdown 22 | - Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc. 23 | :: 24 | 25 | ## Setup 26 | 27 | Open a terminal and run the following command: 28 | 29 | ```bash 30 | npx nuxi@latest init -t themes/content-wind my-website 31 | ``` 32 | 33 | Follow the instructions in the terminal and you are ready to go :rocket: 34 | 35 | ## Usage 36 | 37 | This template has some built-in features to make it as easy as possible to create a content-driven website. 38 | 39 | ### Pages 40 | 41 | Create your Markdown pages in the `content/` directory: 42 | 43 | ```md 44 | # My title 45 | 46 | This first paragraph will be treated as the page meta description. 47 | ``` 48 | 49 | You can overwrite meta tags by using front-matter: 50 | 51 | ```md 52 | --- 53 | head.title: 'Custom ' 54 | head.description: 'Custom meta description' 55 | head.image: 'Custom image injected as `og:image`' 56 | --- 57 | 58 | # My title 59 | 60 | This first paragraph will be treated as the page meta description. 61 | ``` 62 | 63 | This is done thanks to the [`<ContentDoc>`](https://content.nuxtjs.org/api/components/content-doc) component of Nuxt Content. 64 | 65 | ### Navigation 66 | 67 | The navigation is generated from your pages, you can take a look at the [`<Navbar>`](https://github.com/Atinux/content-wind/blob/main/theme/components/Navbar.vue) component to see how it works. 68 | 69 | It uses the [`<ContentNavigation>`](https://content.nuxtjs.org/api/components/content-navigation) component from Nuxt Content to fetch the navigation object. 70 | 71 | To customize the title displayed in the navigation, you can set the `navigation.title` property in the front-matter of your pages: 72 | 73 | ```md 74 | --- 75 | navigation.title: 'Home' 76 | --- 77 | 78 | # Welcome to my site 79 | 80 | With a beautiful description 81 | ``` 82 | 83 | ### Icons 84 | 85 | Use any icon from [icones.js.org](https://icones.js.org) with the `<Icon>` component: 86 | 87 | ```html 88 | <Icon name="ph:music-notes-fill" /> 89 | ``` 90 | 91 | You can also use it in your Markdown: 92 | 93 | ```md 94 | :icon{name="ph:music-notes-fill"} 95 | ``` 96 | 97 | Will result in :icon{name="ph:music-notes-fill"} 98 | 99 | Learn more on [nuxt-icon](https://github.com/Atinux/nuxt-icon) documentation. 100 | 101 | ### Code Highlight 102 | 103 | It supports code highlighting with Shiki and as well as different [VS Code themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes). 104 | 105 | ::markdown-block 106 | \```ts 107 | export default () => 'Hello Content Wind' 108 | \``` 109 | :: 110 | 111 | Will result in: 112 | 113 | ```ts 114 | export default () => 'Hello Content Wind' 115 | ``` 116 | 117 | Updating the theme is as simple as editing your `nuxt.config`: 118 | 119 | ```ts 120 | import { defineNuxtConfig } from 'nuxt' 121 | 122 | export default defineNuxtConfig({ 123 | content: { 124 | highlight: { 125 | theme: 'one-dark-pro', 126 | } 127 | } 128 | }) 129 | ``` 130 | 131 | Learn more in the [Content Code Highlight section](https://content.nuxtjs.org/api/configuration#highlight). 132 | 133 | ### Vue Components 134 | 135 | Add Vue components into the `components/content/` directory and start using them in Markdown. 136 | 137 | See the `<Alert>` component in [`components/content/Alert.vue`](https://github.com/Atinux/content-wind/blob/main/theme/components/content/Alert.vue). 138 | 139 | By leveraging the [`<ContentSlot>`](https://content.nuxtjs.org/api/components/markdown) component from Nuxt Content, you can use both slots and props in Markdown thanks to the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). 140 | 141 | ```md 142 | ::alert{icon="ph:circle-wavy-warning-duotone"} 143 | #title 144 | This is an alert 145 | #default 146 | This is the default content of my alert! 147 | :: 148 | ``` 149 | 150 | Will result in: 151 | 152 | ::alert{icon="ph:circle-wavy-warning-duotone"} 153 | #title 154 | This is an alert 155 | #default 156 | This is the default content of my alert! 157 | :: 158 | 159 | If you want to go deeper, take a look at the [`<List>`](https://github.com/Atinux/content-wind/blob/main/theme/components/content/List.vue) component to see some `useUnwrap()` magic :magic_wand: 160 | 161 | 162 | ## Deployment 163 | 164 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAtinux%2Fcontent-wind) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Atinux/content-wind) 165 | 166 | 167 | ### Static Hosting 168 | 169 | Pre-render the website to be deployed on any static hosting: 170 | 171 | ```bash 172 | npm run generate 173 | ``` 174 | 175 | The `dist/` directory is ready to be deployed (symlink to `.output/public`), [learn more on Nuxt docs](https://v3.nuxtjs.org/guide/deploy/static-hosting). 176 | 177 | ### Node server 178 | 179 | Build the application for production: 180 | 181 | ```bash 182 | npm run build 183 | ``` 184 | 185 | Start the server in production: 186 | 187 | ```bash 188 | node .output/server/index.mjs 189 | ``` 190 | 191 | Learn more on [Nuxt docs](https://v3.nuxtjs.org/guide/deploy/node-server) for more information. 192 | 193 | --- 194 | 195 | You are at the end of the page, you can checkout the [about page](/about) or the [GitHub repository](https://github.com/Atinux/content-wind) and give a :icon{name="ph:star-duotone"} 196 | 197 | Thanks for reading and happy writing, [Atinux](https://twitter.com/Atinux). 198 | --------------------------------------------------------------------------------