Skip to content

Commit 039872a

Browse files
FerdinandCoumauFerdinandCoumau
committed
chore(app): initial commit by Nuxt Studio
0 parents  commit 039872a

12 files changed

+301
-0
lines changed

Diff for: ‎.gitignore

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
node_modules
2+
*.log*
3+
.nuxt
4+
.nitro
5+
.cache
6+
.output
7+
.env
8+
dist
9+
.DS_Store
10+
11+
# Yarn
12+
.yarn/cache
13+
.yarn/*state*
14+
15+
# Local History
16+
.history

Diff for: ‎.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false

Diff for: ‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# My Website
2+
3+
My website made by [Content Wind](https://content-wind.nuxt.space) theme.
4+
5+
## Setup
6+
7+
```bash
8+
npm install
9+
```
10+
11+
## Development
12+
13+
```bash
14+
npm run dev
15+
```
16+
17+
Then open [http://localhost:3000](http://localhost:3000) to see your app.
18+
19+
## Deployment
20+
21+
Learn more how to deploy on [Nuxt docs](https://nuxt.com/docs/getting-started/deployment).

Diff for: ‎app.config.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default defineAppConfig({
2+
// Configure Content Wind here
3+
cover: '/cover.jpg',
4+
socials: {
5+
twitter: 'Atinux',
6+
github: 'Atinux/content-wind'
7+
},
8+
prose: {
9+
h1: {
10+
icon: 'carbon:sailboat-coastal'
11+
}
12+
}
13+
})

Diff for: ‎content/1.index.md

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
navigation.title: 'Home'
3+
---
4+
5+
# Content Wind
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+
## Features
10+
11+
::list{icon=ph:check-circle-duotone}
12+
- Write pages in Markdown
13+
- Use [layouts](https://nuxt.com/docs/guide/directory-structure/layouts) in Markdown pages
14+
- Enjoy meta tag generation
15+
- Configurable [prose components](https://typography.nuxt.space)
16+
- Generated navigation from pages
17+
- Switch between light & dark mode
18+
- Access 100,000 icons from 100+ icon sets
19+
- Highlight code blocks with [Shiki](https://shiki.matsu.io)
20+
- Create Vue components and use them in Markdown
21+
- Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.
22+
- Live edit on [Nuxt Studio](https://nuxt.studio)
23+
::
24+
25+
## Setup
26+
27+
::button-link{icon="simple-icons:stackblitz" href="https://stackblitz.com/edit/nuxt-content-wind?file=content%2F1.index.md" blank}
28+
Play online on Stackblitz
29+
::
30+
31+
Open a terminal and run the following command:
32+
33+
```bash
34+
npx nuxi init -t themes/content-wind my-website
35+
```
36+
37+
Follow the instructions in the terminal and you are ready to go :rocket:
38+
39+
## Usage
40+
41+
This template has some built-in features to make it as easy as possible to create a content-driven website.
42+
43+
### Pages
44+
45+
Create your Markdown pages in the `content/` directory:
46+
47+
```md [content/index.md]
48+
# My title
49+
50+
This first paragraph will be treated as the page meta description.
51+
```
52+
53+
You can overwrite meta tags by using front-matter:
54+
55+
```md [content/index.md]
56+
---
57+
title: 'Custom title'
58+
description: 'Custom meta description'
59+
image: 'Custom image injected as `og:image`'
60+
---
61+
62+
# My title
63+
64+
This first paragraph will be treated as the page meta description.
65+
```
66+
67+
This is done thanks to Nuxt Content's [document-driven mode](https://content.nuxtjs.org/guide/writing/document-driven) of Nuxt Content.
68+
69+
### Navigation
70+
71+
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.
72+
73+
It uses the [`<ContentNavigation>`](https://content.nuxtjs.org/api/components/content-navigation) component from Nuxt Content to fetch the navigation object.
74+
75+
To customize the title displayed in the navigation, you can set the `navigation.title` property in the front-matter of your pages:
76+
77+
```md
78+
---
79+
navigation.title: 'Home'
80+
---
81+
82+
# Welcome to my site
83+
84+
With a beautiful description
85+
```
86+
87+
### Theme configuration
88+
89+
You can configure Content Wind global configuration in the `app.config.ts` file:
90+
91+
```ts [signature]
92+
interface AppConfigInput {
93+
cover?: string, // default: '/cover.jpg'
94+
socials?: {
95+
twitter?: string
96+
github?: string
97+
}
98+
}
99+
```
100+
101+
Example of settings Twitter and GitHub icons in the navbar:
102+
103+
```ts [app.config.ts]
104+
export default defineAppConfig({
105+
socials: {
106+
twitter: 'Atinux',
107+
github: 'Atinux/content-wind'
108+
}
109+
})
110+
```
111+
112+
### Icons
113+
114+
Use any icon from [icones.js.org](https://icones.js.org) with the `<Icon>` component:
115+
116+
```html
117+
<Icon name="ph:music-notes-fill" />
118+
```
119+
120+
You can also use it in your Markdown:
121+
122+
```md
123+
:icon{name="ph:music-notes-fill"}
124+
```
125+
126+
Will result in :icon{name="ph:music-notes-fill"}
127+
128+
Learn more on [nuxt-icon](https://github.com/Atinux/nuxt-icon) documentation.
129+
130+
### Code Highlight
131+
132+
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).
133+
134+
::markdown-block
135+
\```ts
136+
export default () => 'Hello Content Wind'
137+
\```
138+
::
139+
140+
Will result in:
141+
142+
```ts
143+
export default () => 'Hello Content Wind'
144+
```
145+
146+
Updating the theme is as simple as editing your `nuxt.config`:
147+
148+
```ts
149+
import { defineNuxtConfig } from 'nuxt'
150+
151+
export default defineNuxtConfig({
152+
content: {
153+
highlight: {
154+
theme: 'one-dark-pro',
155+
}
156+
}
157+
})
158+
```
159+
160+
Learn more in the [Content Code Highlight section](https://content.nuxtjs.org/api/configuration#highlight).
161+
162+
### Vue Components
163+
164+
Add Vue components into the `components/content/` directory and start using them in Markdown.
165+
166+
See the `<MarkdownBlock>` component in [`components/content/MarkdownBlock.vue`](https://github.com/Atinux/content-wind/blob/main/components/content/MarkdownBlock.vue).
167+
168+
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).
169+
170+
171+
## Deployment
172+
173+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAtinux%2Fcontent-wind-template) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Atinux/content-wind-template)
174+
175+
176+
### Static Hosting
177+
178+
Pre-render the website to be deployed on any static hosting:
179+
180+
```bash
181+
npm run generate
182+
```
183+
184+
The `dist/` directory is ready to be deployed (symlink to `.output/public`), [learn more on Nuxt docs](https://nuxt.com/docs/getting-started/deployment#static-hosting).
185+
186+
### Node server
187+
188+
Build the application for production:
189+
190+
```bash
191+
npm run build
192+
```
193+
194+
Start the server in production:
195+
196+
```bash
197+
node .output/server/index.mjs
198+
```
199+
200+
Learn more on [Nuxt docs](https://nuxt.com/docs/getting-started/deployment) for more information.
201+
202+
---
203+
204+
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"}
205+
206+
Thanks for reading and happy writing, [Atinux](https://twitter.com/Atinux).

Diff for: ‎content/2.about.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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://fastly.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://fastly.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA)

Diff for: ‎nuxt.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default defineNuxtConfig({
2+
extends: 'content-wind'
3+
})

Diff for: ‎package.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "content-wind-template",
3+
"private": true,
4+
"scripts": {
5+
"dev": "nuxi dev",
6+
"build": "nuxi build",
7+
"generate": "nuxi generate",
8+
"preview": "nuxi preview"
9+
},
10+
"devDependencies": {
11+
"content-wind": "latest",
12+
"nuxt": "latest"
13+
}
14+
}

Diff for: ‎public/cover.jpg

183 KB
Loading

Diff for: ‎public/favicon.ico

103 KB
Binary file not shown.

Diff for: ‎tokens.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { defineTheme } from 'pinceau'
2+
import colors from 'tailwindcss/colors'
3+
4+
export default defineTheme({
5+
color: {
6+
primary: colors.teal,
7+
secondary: colors.gray
8+
}
9+
})

Diff for: ‎tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// https://v3.nuxtjs.org/concepts/typescript
3+
"extends": "./.nuxt/tsconfig.json"
4+
}

0 commit comments

Comments
 (0)