diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7429e2c --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +node_modules +*.log* +.nuxt +.nitro +.cache +.output +.env +dist +.DS_Store + +# Yarn +.yarn/cache +.yarn/*state* + +# Local History +.history diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/README.md b/README.md new file mode 100644 index 0000000..0229c22 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +# My Website + +My website made by [Content Wind](https://content-wind.nuxt.space) theme. + +## Setup + +```bash +npm install +``` + +## Development + +```bash +npm run dev +``` + +Then open [http://localhost:3000](http://localhost:3000) to see your app. + +## Deployment + +Learn more how to deploy on [Nuxt docs](https://nuxt.com/docs/getting-started/deployment). diff --git a/app.config.ts b/app.config.ts new file mode 100644 index 0000000..e7cbc86 --- /dev/null +++ b/app.config.ts @@ -0,0 +1,9 @@ +export default defineAppConfig({ + // Configure Content Wind here + cover: '/cover.jpg', + socials: { + twitter: 'Atinux', + github: 'Atinux/content-wind', + mastodon: '@atinux@webtoo.ls' + } +}) diff --git a/components/content/ButtonLink.vue b/components/content/ButtonLink.vue new file mode 100644 index 0000000..956a1a6 --- /dev/null +++ b/components/content/ButtonLink.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/components/content/MarkdownBlock.vue b/components/content/MarkdownBlock.vue new file mode 100644 index 0000000..3ca2c10 --- /dev/null +++ b/components/content/MarkdownBlock.vue @@ -0,0 +1,4 @@ + + diff --git a/content/1.index.md b/content/1.index.md new file mode 100644 index 0000000..8453cb4 --- /dev/null +++ b/content/1.index.md @@ -0,0 +1,210 @@ +--- +navigation: + title: Home +--- + +# Content Wind + +A lightweight Nuxt theme to build a Markdown driven website, based on [Nuxt Content](https://content.nuxt.com), [TailwindCSS](https://tailwindcss.com) and [Iconify](https://iconify.design) ✨ + +## Features + +- Write pages in Markdown +- Use [layouts](https://nuxt.com/docs/guide/directory-structure/layouts) in Markdown pages +- Enjoy meta tag generation +- Generated navigation from pages +- Leverage TailwindCSS Typography +- Switch between light & dark mode +- Access 100,000 icons from 100+ icon sets +- Highlight code blocks with [Shiki](https://shiki.matsu.io) +- Create Vue components and use them in Markdown +- Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc. +- Live edit on [Nuxt Studio](https://nuxt.studio) + +## Setup + +::button-link +--- +external: true +href: https://stackblitz.com/github/Atinux/content-wind/tree/main/.demo?file=content%2F1.index.md +icon: simple-icons:stackblitz +--- +Play online on Stackblitz +:: + +Open a terminal and run the following command: + +```bash +npx nuxi init -t themes/content-wind my-website +``` + +Follow the instructions in the terminal and you are ready to go 🚀 + +## Usage + +This template has some built-in features to make it as easy as possible to create a content-driven website. + +### Pages + +Create your Markdown pages in the `content/` directory: + +```md [content/index.md] +# My title + +This first paragraph will be treated as the page meta description. +``` + +You can overwrite meta tags by using front-matter: + +```md [content/index.md] +--- +title: 'Custom title' +description: 'Custom meta description' +image: 'Custom image injected as `og:image`' +--- + +# My title + +This first paragraph will be treated as the page meta description. +``` + +This is done thanks to Nuxt Content's [document-driven mode](https://content.nuxtjs.org/guide/writing/document-driven) of Nuxt Content. + +### Navigation + +The navigation is generated from your pages, you can take a look at the [``](https://github.com/Atinux/content-wind/blob/main/components/AppNavbar.vue) component to see how it works. + +It uses the [Navigation](https://content.nuxt.com/usage/navigation) from Nuxt Content to fetch the navigation object. + +To customize the title displayed in the navigation, you can set the `navigation.title` property in the front-matter of your pages: + +```md +--- +navigation.title: 'Home' +--- + +# Welcome to my site + +With a beautiful description +``` + +### Theme configuration + +You can configure Content Wind global configuration in the `app.config.ts` file: + +```ts [signature] +interface AppConfigInput { + cover?: string, // default: '/cover.jpg' + socials?: { + twitter?: string + github?: string + mastodon?: string + } +} +``` + +Example of settings Twitter and GitHub icons in the navbar: + +```ts [app.config.ts] +export default defineAppConfig({ + socials: { + twitter: 'Atinux', + github: 'Atinux/content-wind' + mastodon: '@atinux@webtoo.ls' + } +}) +``` + +### Icons + +Use any icon from [icones.js.org](https://icones.js.org) with the `` component: + +```html + +``` + +You can also use it in your Markdown: + +```md +:icon{name="ph:music-notes-fill"} +``` + +Will result in :icon{name="ph:music-notes-fill"} + +Learn more on [nuxt-icon](https://github.com/nuxt-modules/icon) documentation. + +### Code Highlight + +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). + +::markdown-block +\`\`\`ts +export default () => 'Hello Content Wind' +\`\`\` +:: + +Will result in: + +```ts +export default () => 'Hello Content Wind' +``` + +Updating the theme is as simple as editing your `nuxt.config`: + +```ts +import { defineNuxtConfig } from 'nuxt' + +export default defineNuxtConfig({ + content: { + highlight: { + theme: 'one-dark-pro', + } + } +}) +``` + +Learn more in the [Content Code Highlight section](https://content.nuxt.com/get-started/configuration#highlight). + +### Vue Components + +Add Vue components into the `components/content/` directory and start using them in Markdown. + +See the `` component in [`components/content/MarkdownBlock.vue`](https://github.com/Atinux/content-wind/blob/main/.demo/components/content/MarkdownBlock.vue). + +By leveraging the [``](https://content.nuxt.com/components/content-slot) component from Nuxt Content, you can use both slots and props in Markdown thanks to the [MDC syntax](https://content.nuxt.com/usage/markdown). + +## Deployment + +[![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) + +### Static Hosting + +Pre-render the website to be deployed on any static hosting: + +```bash +npm run generate +``` + +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). + +### Node server + +Build the application for production: + +```bash +npm run build +``` + +Start the server in production: + +```bash +node .output/server/index.mjs +``` + +Learn more on [Nuxt docs](https://nuxt.com/docs/getting-started/deployment) for more information. + +--- + +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"} + +Thanks for reading and happy writing, [Atinux](https://twitter.com/Atinux). diff --git a/content/2.about.md b/content/2.about.md new file mode 100644 index 0000000..f351598 --- /dev/null +++ b/content/2.about.md @@ -0,0 +1,14 @@ +--- +navigation: + title: About +layout: full-width +head: + description: This is a custom description for Content Wind about page. + image: https://fastly.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA +--- + +# About + +This is the about page, with a custom description and image for SEO ✨ + +![Content Wind](https://fastly.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA) diff --git a/nuxt.config.ts b/nuxt.config.ts new file mode 100644 index 0000000..246f37a --- /dev/null +++ b/nuxt.config.ts @@ -0,0 +1,6 @@ +export default defineNuxtConfig({ + extends: 'content-wind', + routeRules: { + '/': { prerender: true } + } +}) diff --git a/package.json b/package.json new file mode 100644 index 0000000..be3093b --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "content-wind-template", + "private": true, + "scripts": { + "dev": "nuxi dev", + "build": "nuxi build", + "generate": "nuxi generate", + "preview": "nuxi preview" + }, + "devDependencies": { + "content-wind": "latest", + "nuxt": "latest" + } +} diff --git a/public/cover.jpg b/public/cover.jpg new file mode 100644 index 0000000..014d218 Binary files /dev/null and b/public/cover.jpg differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..3695e60 Binary files /dev/null and b/public/favicon.ico differ diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a7bfa18 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,4 @@ +{ + // https://v3.nuxtjs.org/concepts/typescript + "extends": "./.nuxt/tsconfig.json" +}