diff --git a/apps/docs/docs/.vitepress/config.ts b/apps/docs/docs/.vitepress/config.ts index 2f061421..f0d4092b 100644 --- a/apps/docs/docs/.vitepress/config.ts +++ b/apps/docs/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ import path from 'path' -import VueI18n from '@intlify/vite-plugin-vue-i18n' +// import VueI18n from '@intlify/vite-plugin-vue-i18n' import Unocss from 'unocss/vite' import { defineConfig } from 'vitepress' @@ -71,11 +71,11 @@ export default defineConfig({ }, build: { target: 'esnext' }, plugins: [ - VueI18n({ - runtimeOnly: true, - compositionOnly: true, - include: [path.resolve(__dirname, './locales/**')] - }), + // VueI18n({ + // runtimeOnly: true, + // compositionOnly: true, + // include: [path.resolve(__dirname, './locales/**')] + // }), Unocss({ configFile: '../../unocss.config.ts' }) diff --git a/apps/docs/docs/.vitepress/i18n/index.ts b/apps/docs/docs/.vitepress/i18n/index.ts index a1109d7c..e408f717 100644 --- a/apps/docs/docs/.vitepress/i18n/index.ts +++ b/apps/docs/docs/.vitepress/i18n/index.ts @@ -32,9 +32,8 @@ const defaultLocal = await loadDateFNSLocale(options.locale) export const i18n = createI18n(options) // setup i18n instance with global -export async function setupI18n(app: App) { +export function setupI18n(app: App) { const huntersofbook = createHuntersofbook({ - i18n, dateFnsLanguage: defaultLocal }) app.use(i18n) diff --git a/apps/docs/docs/.vitepress/i18n/useLocale.ts b/apps/docs/docs/.vitepress/i18n/useLocale.ts index 7e87ada8..11ba63d1 100644 --- a/apps/docs/docs/.vitepress/i18n/useLocale.ts +++ b/apps/docs/docs/.vitepress/i18n/useLocale.ts @@ -23,7 +23,7 @@ export function useLocale() { // Switching the language will change the locale of useI18n // And submit to configuration modification - async function changeLocale(locale: LocaleType) { + function changeLocale(locale: LocaleType) { // const globalI18n = i18n.global; // const currentLocale = unref(globalI18n.locale); // console.log(currentLocale, "currentLocale", locale, "locale"); diff --git a/apps/docs/docs/.vitepress/theme/index.ts b/apps/docs/docs/.vitepress/theme/index.ts index 8af1e3f6..9c89908a 100644 --- a/apps/docs/docs/.vitepress/theme/index.ts +++ b/apps/docs/docs/.vitepress/theme/index.ts @@ -10,7 +10,7 @@ import Tab from '../../../components/Tabs/Tab.vue' import Tabs from '../../../components/Tabs/Tabs.vue' import { extractFileNameFromPath } from '../../../utils' import 'uno.css' -import { setupI18n } from '../i18n' +// import { setupI18n } from '../i18n' import { setupStore } from '../stores' async function setupApp(app: App) { @@ -18,13 +18,13 @@ async function setupApp(app: App) { setupStore(app) // Multilingual configuration // Asynchronous case: language files may be obtained from the server side - await setupI18n(app) + // await setupI18n(app) } export default { ...DefaultTheme, Layout() { return h(DefaultTheme.Layout, null, { - 'nav-bar-content-before': () => h(Language) + 'nav-bar-content-before': () => h('div') }) }, async enhanceApp({ app }) { diff --git a/apps/docs/docs/demos/hdatetime/unixMillisecondTimestamp.vue b/apps/docs/docs/demos/hdatetime/unixMillisecondTimestamp.vue index 76d64f48..f30ff5e7 100644 --- a/apps/docs/docs/demos/hdatetime/unixMillisecondTimestamp.vue +++ b/apps/docs/docs/demos/hdatetime/unixMillisecondTimestamp.vue @@ -1,7 +1,7 @@ - + + diff --git a/apps/nuxt-docs/components/content/ExampleMultiselect.vue b/apps/nuxt-docs/components/content/ExampleMultiselect.vue new file mode 100644 index 00000000..755f37d4 --- /dev/null +++ b/apps/nuxt-docs/components/content/ExampleMultiselect.vue @@ -0,0 +1,19 @@ + + + diff --git a/apps/nuxt-docs/components/content/ExampleTheTitle.vue b/apps/nuxt-docs/components/content/ExampleTheTitle.vue new file mode 100644 index 00000000..e2fb0231 --- /dev/null +++ b/apps/nuxt-docs/components/content/ExampleTheTitle.vue @@ -0,0 +1,5 @@ + diff --git a/apps/nuxt-docs/components/content/HeroAnnouncement.vue b/apps/nuxt-docs/components/content/HeroAnnouncement.vue new file mode 100644 index 00000000..8a48dad4 --- /dev/null +++ b/apps/nuxt-docs/components/content/HeroAnnouncement.vue @@ -0,0 +1,19 @@ + + + diff --git a/apps/nuxt-docs/components/content/IconCopy.vue b/apps/nuxt-docs/components/content/IconCopy.vue new file mode 100644 index 00000000..faf6efea --- /dev/null +++ b/apps/nuxt-docs/components/content/IconCopy.vue @@ -0,0 +1,17 @@ + diff --git a/apps/nuxt-docs/components/content/IconHeart.vue b/apps/nuxt-docs/components/content/IconHeart.vue new file mode 100644 index 00000000..849f002e --- /dev/null +++ b/apps/nuxt-docs/components/content/IconHeart.vue @@ -0,0 +1,9 @@ + diff --git a/apps/nuxt-docs/components/content/IconMarkdown.vue b/apps/nuxt-docs/components/content/IconMarkdown.vue new file mode 100644 index 00000000..308935b1 --- /dev/null +++ b/apps/nuxt-docs/components/content/IconMarkdown.vue @@ -0,0 +1,12 @@ + diff --git a/apps/nuxt-docs/components/content/IconSearch.vue b/apps/nuxt-docs/components/content/IconSearch.vue new file mode 100644 index 00000000..e7fc5005 --- /dev/null +++ b/apps/nuxt-docs/components/content/IconSearch.vue @@ -0,0 +1,12 @@ + diff --git a/apps/nuxt-docs/components/content/IconZap.vue b/apps/nuxt-docs/components/content/IconZap.vue new file mode 100644 index 00000000..6b7ac0a4 --- /dev/null +++ b/apps/nuxt-docs/components/content/IconZap.vue @@ -0,0 +1,12 @@ + diff --git a/apps/nuxt-docs/components/content/Logo.vue b/apps/nuxt-docs/components/content/Logo.vue new file mode 100644 index 00000000..81bb82f8 --- /dev/null +++ b/apps/nuxt-docs/components/content/Logo.vue @@ -0,0 +1,7 @@ + diff --git a/apps/nuxt-docs/components/content/MyButton.vue b/apps/nuxt-docs/components/content/MyButton.vue new file mode 100644 index 00000000..be09d283 --- /dev/null +++ b/apps/nuxt-docs/components/content/MyButton.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/apps/nuxt-docs/components/content/Package.vue b/apps/nuxt-docs/components/content/Package.vue new file mode 100644 index 00000000..f6119982 --- /dev/null +++ b/apps/nuxt-docs/components/content/Package.vue @@ -0,0 +1,47 @@ + + + diff --git a/apps/nuxt-docs/components/content/PackageGrid.vue b/apps/nuxt-docs/components/content/PackageGrid.vue new file mode 100644 index 00000000..f16926e4 --- /dev/null +++ b/apps/nuxt-docs/components/content/PackageGrid.vue @@ -0,0 +1,18 @@ + + + diff --git a/apps/nuxt-docs/components/content/PropInspector.vue b/apps/nuxt-docs/components/content/PropInspector.vue new file mode 100644 index 00000000..16092ce6 --- /dev/null +++ b/apps/nuxt-docs/components/content/PropInspector.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/apps/nuxt-docs/components/content/ReadMore.vue b/apps/nuxt-docs/components/content/ReadMore.vue new file mode 100644 index 00000000..f17f9085 --- /dev/null +++ b/apps/nuxt-docs/components/content/ReadMore.vue @@ -0,0 +1,29 @@ + + + diff --git a/apps/nuxt-docs/content/1.index.md b/apps/nuxt-docs/content/1.index.md new file mode 100755 index 00000000..99bac903 --- /dev/null +++ b/apps/nuxt-docs/content/1.index.md @@ -0,0 +1,86 @@ +--- +title: "huntersofbook made easy for World developers" +description: "We open the tools we use in our projects to all developers." +navigation: false +layout: page +--- + +::block-hero +--- +cta: + - Get Started + - /projects +secondary: + - Star on GitHub + - https://github.com/huntersofbook/huntersofbook +--- + +#top + ::hero-announcement + --- + label: "Discover Projects" + to: /projects + --- + :: + +#title +huntersofbook made easy for World developers + +#description +We open the tools we use in our projects to all developers. +Structures we work on ; `.vue 3`, `.nestjs`, `.graphql`, `nuxt 3` + + +#right +::video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8" poster="/video-cover.jpeg" .border-2 .u-border-gray-100 .shadow-lg .h-64} +:: +:: + +::card-grid +#title +Powerful Features + +#default + ::card + --- + icon: logos:vue + --- + #title + Vue 3 + #description + Take advantage of Nuxt 3 features: Vue 3, Auto-imports, Vite and Nitro server. + :: + + ::card + --- + icon: logos:nuxt-icon + --- + #title + Nuxt 3 + #description + Write your content in Markdown, YML, CSV or JSON and query it in your components. + :: + + ::card + --- + icon: logos-npm-icon + --- + #title + NPM Packages + #description + Use your Vue components in Markdown files, supporting props, slots and nested components. + :: + + ::card + --- + icon: ph:rocket-launch + --- + #title + Soon + #description + We continue to work on documents and projects. + :: + +#root +:ellipsis +:: \ No newline at end of file diff --git a/apps/nuxt-docs/content/2.projects.md b/apps/nuxt-docs/content/2.projects.md new file mode 100644 index 00000000..0b6f4059 --- /dev/null +++ b/apps/nuxt-docs/content/2.projects.md @@ -0,0 +1,75 @@ +--- +title: Projects +description: How to start with Nuxt Content, by creating a fresh new project or adding it to your Nuxt application. +icon: heroicons-outline:lightning-bolt +layout: page +constrainedClass: 'max-w-4xl' +--- + +::article-hero +:: + + +::package-grid +#title +Packages Vue 3 + +#default + ::package + --- + title: Plausible + logo: plausible.png + description: Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected. + username: '@productdevbook' + href: /guide/vue-packages/plausible + --- + :: + + ::package + --- + title: ChatWoot + logo: chatwoot.png + description: Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website, Facebook page, Twitter, Whatsapp, SMS, ... + username: '@productdevbook' + href: /guide/vue-packages/chatwoot + --- + :: + +:: + +::package-grid +#title +Packages Nuxt 3 + +#default + ::package + --- + title: Plausible + logo: plausible.png + description: Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected. + username: '@productdevbook' + href: /guide/nuxt-packages/plausible + --- + :: + + ::package + --- + title: Naive UI + logo: naive-ui.svg + description: A Vue 3 Component Library Fairly Complete, Theme Customizable, Uses TypeScript, Fast + username: '@productdevbook' + href: /guide/nuxt-packages/naive-ui + --- + :: + + ::package + --- + title: ChatWoot (soon) + logo: chatwoot.png + description: Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website, Facebook page, Twitter, Whatsapp, SMS, ... + username: '@productdevbook' + href: /guide/nuxt-packages/chatwoot + --- + :: + +:: diff --git a/apps/nuxt-docs/content/3.guide/1.nuxt-packages/1.plausible.md b/apps/nuxt-docs/content/3.guide/1.nuxt-packages/1.plausible.md new file mode 100644 index 00000000..76a40c15 --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/1.nuxt-packages/1.plausible.md @@ -0,0 +1,102 @@ +# Plausible + +Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected. + +![alt text](https://github.com/huntersofbook/huntersofbook/blob/main/apps/nuxt-docs/public/images/plausible-nuxt.png?raw=true) + +> [Plausible](https://plausible.io/docs) integration for [Nuxt](https://nuxtjs.org) + +## Setup + +::code-group + +```shell [pnpm] +pnpm add @huntersofbook/plausible-nuxt +``` + +```shell [yarn] +yarn add @huntersofbook/plausible-nuxt +``` + +```shell [npm] +npm add @huntersofbook/plausible-nuxt +``` + +:: + + +## Nuxt Config + + +```ts +export default defineNuxtConfig({ + modules: [ + '@huntersofbook/plausible-nuxt' + ], + huntersofbookPlausible: { + init: { + domain: 'localhost', + apiHost: 'https://site.com', + trackLocalhost: true + } + } +}) +``` + +### Composables + +```vue + + + +``` + +```vue + +``` + + +## Init Default + +`Plausible()` accepts some [options](https://plausible-tracker.netlify.app/globals.html#plausibleinitoptions) that you may want to provide: + +| Option | Type | Description | Default | +| -------------- | -------- | ----------------------------------------------------------------- | ------------------------ | +| domain | `string` | Your site's domain, as declared by you in Plausible's settings | `location.hostname` | +| hashMode | `bool` | Enables tracking based on URL hash changes. | `false` | +| trackLocalhost | `bool` | Enables tracking on *localhost*. | `false` | +| apiHost | `string` | Plausible's API host to use. Change this if you are self-hosting. | `'https://plausible.io'` | + +## Settings Default + +| Option | Type | Description | Default | +| -------------- | -------- | ----------------------------------------------------------------- | ------------------------ | +| enableAutoPageviews | `bool` | Your site's domain, as declared by you in Plausible's settings | `true` | +| enableAutoOutboundTracking | `bool` | Enables tracking based on URL hash changes. | `false` | + + +## Development 💻 + +- Clone this repository +- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10) +- Install dependencies using `pnpm install` +- Stub module with `pnpm dev:prepare` +- Run `pnpm dev` to start [playground](./playground) in development mode + +## License + +MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook) + + +## Credits 💚 + +Nuxt 3 Plugin [danielroe](https://github.com/danielroe) \ No newline at end of file diff --git a/apps/nuxt-docs/content/3.guide/1.nuxt-packages/2.naive-ui.md b/apps/nuxt-docs/content/3.guide/1.nuxt-packages/2.naive-ui.md new file mode 100644 index 00000000..f9db576b --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/1.nuxt-packages/2.naive-ui.md @@ -0,0 +1,78 @@ +# Naive UI + +Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected. + +![alt text](https://github.com/huntersofbook/huntersofbook/blob/main/apps/nuxt-docs/public/images/naive-ui-nuxt.png?raw=true) + +> [Plausible](https://plausible.io/docs) integration for [Nuxt](https://nuxtjs.org) + +## Setup + +::code-group + +```shell [pnpm] +pnpm add @huntersofbook/naive-ui-nuxt +``` + +```shell [yarn] +yarn add @huntersofbook/naive-ui-nuxt +``` + +```shell [npm] +npm add @huntersofbook/naive-ui-nuxt +``` + +:: + + +## Nuxt Config + + +```ts +export default defineNuxtConfig({ + modules: [ + '@huntersofbook/naive-ui-nuxt' + ] +}) +``` + +### Composables + +```vue [app.vue] + + + +``` + +## Development 💻 + +- Clone this repository +- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10) +- Install dependencies using `pnpm install` +- Stub module with `pnpm dev:prepare` +- Run `pnpm dev` to start [playground](./playground) in development mode + +## License + +MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook) + +## Thanks + +Thanks to [@07akioni](https://github.com/07akioni), this project is heavily inspired by [naive-ui-nuxt-demo](https://github.com/07akioni/naive-ui-nuxt-demo). + +Thanks to [@tobiasdiez](https://github.com/tobiasdiez), this project is inspired by some code structure. + +## 💚 Credits + +Nuxt 3 Plugin [danielroe](https://github.com/danielroe) \ No newline at end of file diff --git a/apps/nuxt-docs/content/3.guide/1.nuxt-packages/_dir.yml b/apps/nuxt-docs/content/3.guide/1.nuxt-packages/_dir.yml new file mode 100644 index 00000000..2407a169 --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/1.nuxt-packages/_dir.yml @@ -0,0 +1 @@ +icon: tabler:packages diff --git a/apps/nuxt-docs/content/3.guide/2.vue-packages/1.plausible.md b/apps/nuxt-docs/content/3.guide/2.vue-packages/1.plausible.md new file mode 100644 index 00000000..1028ce9a --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/2.vue-packages/1.plausible.md @@ -0,0 +1,104 @@ +# Plausible + +Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected. + +![alt text](https://github.com/huntersofbook/huntersofbook/blob/main/apps/nuxt-docs/public/images/plausible-vue.png?raw=true) + +> [Plausible](https://plausible.io/docs) integration for [Nuxt](https://nuxtjs.org) + +## Setup + +::code-group + +```shell [pnpm] +pnpm add @huntersofbook/plausible +``` + +```shell [yarn] +yarn add @huntersofbook/plausible +``` + +```shell [npm] +npm add @huntersofbook/plausible +``` + +:: + + +## Vue Config + +```ts [main.ts] +import { createPlausible } from '@huntersofbook/plausible-vue' + +const plausible = createPlausible({ + init: { + domain: 'domain.com', + apiHost: 'https://host.com', + trackLocalhost: true, + }, + settings: { + enableAutoOutboundTracking: true, + enableAutoPageviews: true, + }, +}) + +app.use(plausible) +``` + +### Composables + +```vue + + + +``` + +```vue + +``` + + +## Init Default + +`Plausible()` accepts some [options](https://plausible-tracker.netlify.app/globals.html#plausibleinitoptions) that you may want to provide: + +| Option | Type | Description | Default | +| -------------- | -------- | ----------------------------------------------------------------- | ------------------------ | +| domain | `string` | Your site's domain, as declared by you in Plausible's settings | `location.hostname` | +| hashMode | `bool` | Enables tracking based on URL hash changes. | `false` | +| trackLocalhost | `bool` | Enables tracking on *localhost*. | `false` | +| apiHost | `string` | Plausible's API host to use. Change this if you are self-hosting. | `'https://plausible.io'` | + +## Settings Default + +| Option | Type | Description | Default | +| -------------- | -------- | ----------------------------------------------------------------- | ------------------------ | +| enableAutoPageviews | `bool` | Your site's domain, as declared by you in Plausible's settings | `true` | +| enableAutoOutboundTracking | `bool` | Enables tracking based on URL hash changes. | `false` | + + +## Development 💻 + +- Clone this repository +- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10) +- Install dependencies using `pnpm install` +- Stub module with `pnpm dev:prepare` +- Run `pnpm dev` to start [playground](./playground) in development mode + +## License + +MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook) + + +## Credits 💚 + +Nuxt 3 Plugin [danielroe](https://github.com/danielroe) \ No newline at end of file diff --git a/apps/nuxt-docs/content/3.guide/2.vue-packages/2.chatwoot.md b/apps/nuxt-docs/content/3.guide/2.vue-packages/2.chatwoot.md new file mode 100644 index 00000000..da127c73 --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/2.vue-packages/2.chatwoot.md @@ -0,0 +1,72 @@ +# Chatwoot + +Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected. + +![alt text](https://github.com/huntersofbook/huntersofbook/blob/main/apps/docs/images/chatwoot-vue.png?raw=true) + +> [Plausible](https://plausible.io/docs) integration for [Nuxt](https://nuxtjs.org) + +## Setup + +::code-group + +```shell [pnpm] +pnpm add @huntersofbook/chatwoot-vue +``` + +```shell [yarn] +yarn add @huntersofbook/chatwoot-vue +``` + +```shell [npm] +npm add @huntersofbook/chatwoot-vue +``` + +:: + + +## Nuxt Config + + +```ts +export default defineNuxtConfig({ + modules: [ + '@huntersofbook/naive-ui-nuxt' + ] +}) +``` + +### Composables + +```vue [app.vue] + + + +``` + +## Development 💻 + +- Clone this repository +- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10) +- Install dependencies using `pnpm install` +- Stub module with `pnpm dev:prepare` +- Run `pnpm dev` to start [playground](./playground) in development mode + +## License + +MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook) + +## 💚 Credits + +Nuxt 3 Plugin [danielroe](https://github.com/danielroe) \ No newline at end of file diff --git a/apps/nuxt-docs/content/3.guide/2.vue-packages/_dir.yml b/apps/nuxt-docs/content/3.guide/2.vue-packages/_dir.yml new file mode 100644 index 00000000..2407a169 --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/2.vue-packages/_dir.yml @@ -0,0 +1 @@ +icon: tabler:packages diff --git a/apps/nuxt-docs/content/3.guide/_dir.yml b/apps/nuxt-docs/content/3.guide/_dir.yml new file mode 100644 index 00000000..667e034c --- /dev/null +++ b/apps/nuxt-docs/content/3.guide/_dir.yml @@ -0,0 +1 @@ +icon: heroicons-outline:book-open diff --git a/apps/nuxt-docs/content/5.examples/1.essentials/1.hello-world.md b/apps/nuxt-docs/content/5.examples/1.essentials/1.hello-world.md new file mode 100644 index 00000000..b27f569c --- /dev/null +++ b/apps/nuxt-docs/content/5.examples/1.essentials/1.hello-world.md @@ -0,0 +1,13 @@ +--- +head.title: 'Hello world | Examples' +--- + +# Hello World + +Minimal example of using Nuxt Content V2. + +::ReadMore{link="/get-started"} +:: + +::sandbox{repo="nuxt/content" branch="main" dir="examples/essentials/hello-world" file="app.vue"} +:: diff --git a/apps/nuxt-docs/content/5.examples/1.essentials/2.document-driven.md b/apps/nuxt-docs/content/5.examples/1.essentials/2.document-driven.md new file mode 100644 index 00000000..5e1c9be9 --- /dev/null +++ b/apps/nuxt-docs/content/5.examples/1.essentials/2.document-driven.md @@ -0,0 +1,9 @@ +# Document Driven + +Discover the document-driven mode of Nuxt Content in a live example. + +::ReadMore{link="/guide/writing/document-driven"} +:: + +::sandbox{repo="nuxt/content" branch="main" dir="examples/essentials/document-driven" file="index.md"} +:: diff --git a/apps/nuxt-docs/content/5.examples/1.essentials/_dir.yml b/apps/nuxt-docs/content/5.examples/1.essentials/_dir.yml new file mode 100644 index 00000000..57fa0c14 --- /dev/null +++ b/apps/nuxt-docs/content/5.examples/1.essentials/_dir.yml @@ -0,0 +1 @@ +icon: heroicons-outline:flag diff --git a/apps/nuxt-docs/content/5.examples/_dir.yml b/apps/nuxt-docs/content/5.examples/_dir.yml new file mode 100644 index 00000000..391a3e54 --- /dev/null +++ b/apps/nuxt-docs/content/5.examples/_dir.yml @@ -0,0 +1 @@ +icon: heroicons-outline:play diff --git a/apps/nuxt-docs/content/6.blog/1.announcing-v2.md b/apps/nuxt-docs/content/6.blog/1.announcing-v2.md new file mode 100644 index 00000000..35e369f0 --- /dev/null +++ b/apps/nuxt-docs/content/6.blog/1.announcing-v2.md @@ -0,0 +1,243 @@ +--- +layout: page +constrainedClass: 'max-w-4xl' +navigation: false +title: 'Announcing Nuxt Content v2' +description: '2 years after the release of Content v1, we are proud to announce the second version of Nuxt Content built for Nuxt 3.' +cover: /announcing_v2.png +date: 2022-05-24 +authors: + - name: "Sébastien Chopin" + avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg + link: https://twitter.com/Atinux + - name: "Yaël Guilloux" + avatarUrl: https://pbs.twimg.com/profile_images/1227208659572269056/Yo6GUjZw_400x400.jpg + link: https://twitter.com/yaeeelglx + - name: "Ahad Birang" + avatarUrl: https://pbs.twimg.com/profile_images/780374165136244736/x5HfdWA1_400x400.jpg + link: https://twitter.com/a_birang + - name: "Clément Ollivier" + avatarUrl: https://pbs.twimg.com/profile_images/1370286658432724996/ZMSDzzIi_400x400.jpg + link: https://twitter.com/clemcodes +tags: + - Nuxt + - Content + - Release +category: Announcements +--- + +::article-hero +:: + +2 years after the [release of Content v1](https://github.com/nuxt/content/releases/tag/v1.0.0), we are proud to announce the second version of Nuxt Content built for [Nuxt 3](https://v3.nuxtjs.org). + +On top of the Nuxt 3 support, it comes with new features: + +::list{icon="heroicons-outline:badge-check"} +- The [MDC Syntax](/guide/writing/mdc) for Components in Markdown +- Internationalization support +- [Navigation generation](/guide/displaying/navigation) +- [Fully typed](/guide/displaying/typescript) +- [Multiple sources](/api/configuration#sources) (experimental) +- Live preview edition (coming soon) +:: + +## What is Nuxt Content? + +Nuxt Content is a [Nuxt module](https://v3.nuxtjs.org/guide/features/modules) that reads Markdown, YAML, CSV and JSON files in the `content/` directory. + +Let’s imagine a `content/` directory with the following structure: + +::code-group + ```[Directory Structure] + content/ + index.md + ``` + ```md [index.md] + # Hello World + + My first paragraph. + + https://content.nuxtjs.org + ``` +:: + +Create a `pages/[...slug].vue` file with the [``](/guide/displaying/rendering) component inside: + +```vue [pages/[...slug].vue] + +``` + +And voilà! + +::code-group + ::code-block{label="Preview" preview} + # Hello World + + My first paragraph. + + https://content.nuxtjs.org + :: +:: + +You can also query the `hello.md` file by using the `queryContent()` composable: + +```ts +const file = await queryContent('hello').findOne() +``` + + +::callout +#summary +The returned file won't be Markdown or HTML, but a JSON representing the abstract syntax tree. + +#content +```json [document value] +{ + "_type": "markdown", + "_id": "content:hello.md", + "_source": "content", + "_file": "hello.md", + "_extension": "md", + "_path": "/hello", + "_draft": false, + "_partial": false, + "_empty": false, + "title": "Hello World", + "description": "My first paragraph.", + "body": { + "type": "root", + "children": [ + { + "type": "element", + "tag": "h1", + "props": { + "id": "hello-world" + }, + "children": [ + { + "type": "text", + "value": "Hello World" + } + ] + }, + { + "type": "element", + "tag": "p", + "props": {}, + "children": [ + { + "type": "text", + "value": "My first paragraph." + } + ] + }, + { + "type": "element", + "tag": "p", + "props": {}, + "children": [ + { + "type": "element", + "tag": "a", + "props": { + "href": "https://content.nuxtjs.org", + "rel": [ + "nofollow", + "noopener", + "noreferrer" + ], + "target": "_blank" + }, + "children": [ + { + "type": "text", + "value": "https://content.nuxtjs.org" + } + ] + } + ] + } + ], + "toc": { + "title": "", + "searchDepth": 2, + "depth": 2, + "links": [] + } + } +} +``` +:: +You can do much more than fetching only one file. Take a look at the [querying content](/guide/displaying/querying) section to discover its full potential. + +## Introducing MDC + +We wanted to leverage the power of Vue components in a content edition experience. After months of testing on the [Nuxt website](https://nuxtjs.org), we are happy to introduce the [**M**ark**D**own **C**omponents syntax](/guide/writing/mdc). + +::list{icon="heroicons-outline:badge-check"} + +- Use your own Vue components in Markdown +- Customize them with props +- Write Markdown content in slots (and of course, you can nest them) +- Experience blazing fast HMR for Markdown and MDC (as fast as Vite!) +:: + +::alert +MDC is Markdown, so nothing changes and you can keep using the `.md` extension. +:: + +### Show me how it works! + +::code-group + ```md [content/index.md] + ::my-button{type="success"} + ✏️ Start **writing!** + :: + ``` + ```html [components/MyButton.vue] + + + + ``` + ::code-block{label="Preview" preview} + ✏️ Start writing! + :: +:: + +Head over to the [MDC guide](/guide/writing/mdc) to discover the full power of Markdown with Vue components. + +## An introduction video + +Nuxt Content has many features, we built a video to showcase how to start using it in a Nuxt 3 application, in 3 minutes :sparkles: + +:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} + +## Thank you + +We are thankful for all the contributions we received in Content v1 and are impatient to see what you will build with Nuxt 3 and Content v2 :blush: + +::alert +The repository is open source under the MIT license and available on GitHub: [nuxt/content](https://github.com/nuxt/content) +:: + +Head over to the [Get started](/get-started) section to start playing with Content v2 :sparkles: + +--- + +Bonus: We created [Content Wind](https://github.com/Atinux/content-wind) - a lightweight Nuxt template to write a Markdown-driven website powered by Nuxt Content and TailwindCSS. + +It is available on [GitHub](https://github.com/Atinux/content-wind). Check out the demo on [content-wind.nuxt.dev](https://content-wind.nuxt.dev). diff --git a/apps/nuxt-docs/content/7.changelog.md b/apps/nuxt-docs/content/7.changelog.md new file mode 100644 index 00000000..c080caf7 --- /dev/null +++ b/apps/nuxt-docs/content/7.changelog.md @@ -0,0 +1,13 @@ +--- +aside: false +toc: false +icon: heroicons-outline:newspaper +description: Discover the latest Nuxt Content updates. +--- + +# Changelog + +Discover the latest release of nuxt Content. + +::releases +:: diff --git a/apps/nuxt-docs/content/8.playground.md b/apps/nuxt-docs/content/8.playground.md new file mode 100644 index 00000000..ab19f877 --- /dev/null +++ b/apps/nuxt-docs/content/8.playground.md @@ -0,0 +1,8 @@ +--- +layout: page +fluid: true +icon: file-icons:sandbox +--- + +::playground +:: diff --git a/apps/nuxt-docs/content/_partials/hello-world.md b/apps/nuxt-docs/content/_partials/hello-world.md new file mode 100644 index 00000000..e742d220 --- /dev/null +++ b/apps/nuxt-docs/content/_partials/hello-world.md @@ -0,0 +1,6 @@ +# I am a partial + +With some Hello World text. + + +:button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/content" blank .mr-2} diff --git a/apps/nuxt-docs/editor/Editor.vue b/apps/nuxt-docs/editor/Editor.vue new file mode 100644 index 00000000..3384d0c2 --- /dev/null +++ b/apps/nuxt-docs/editor/Editor.vue @@ -0,0 +1,30 @@ + + + diff --git a/apps/nuxt-docs/editor/Monaco.vue b/apps/nuxt-docs/editor/Monaco.vue new file mode 100644 index 00000000..28a27e79 --- /dev/null +++ b/apps/nuxt-docs/editor/Monaco.vue @@ -0,0 +1,54 @@ + + + diff --git a/apps/nuxt-docs/editor/mdc.tmLanguage.ts b/apps/nuxt-docs/editor/mdc.tmLanguage.ts new file mode 100644 index 00000000..59b2dc4b --- /dev/null +++ b/apps/nuxt-docs/editor/mdc.tmLanguage.ts @@ -0,0 +1,238 @@ +/* eslint-disable */ +/** + * MDC language + * Based on official markdown language + */ +import type { languages } from 'monaco-editor-core' + +export const conf: languages.LanguageConfiguration = { + comments: { + blockComment: [''] + }, + brackets: [ + ['{', '}'], + ['[', ']'], + ['(', ')'] + ], + autoClosingPairs: [ + { open: '{', close: '}' }, + { open: '[', close: ']' }, + { open: '(', close: ')' }, + { open: '<', close: '>', notIn: ['string'] } + ], + surroundingPairs: [ + { open: '(', close: ')' }, + { open: '[', close: ']' }, + { open: '`', close: '`' } + ], + folding: { + markers: { + start: new RegExp('^\\s*'), + end: new RegExp('^\\s*') + } + } +} + +export const language = { + defaultToken: '', + tokenPostfix: '.md', + + // escape codes + control: /[\\`*_\[\]{}()#+\-\.!]/, + noncontrol: /[^\\`*_\[\]{}()#+\-\.!]/, + escapes: /\\(?:@control)/, + + // escape codes for javascript/CSS strings + jsescapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/, + + // non matched elements + empty: [ + 'area', 'base', 'basefont', 'br', 'col', 'frame', + 'hr', 'img', 'input', 'isindex', 'link', 'meta', 'param' + ], + + tokenizer: { + root: [ + [/^---$/, { token: '', next: '@frontmatter', nextEmbedded: 'yaml' }], + { include: 'markdown' } + ], + + frontmatter: [ + [/^\s*---\s*$/, { token: '', next: '@markdown', nextEmbedded: '@pop', bracket: '@close' }], + [/.*$/, 'variable.source'] + ], + + markdown: [ + + // headers (with #) + [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ['white', 'keyword', 'keyword', 'keyword']], + + // headers (with =) + [/^\s*(=+|\-+)\s*$/, 'keyword'], + + // headers (with ***) + [/^\s*((\*[ ]?)+)\s*$/, 'meta.separator'], + + // quote + [/^\s*>+/, 'comment'], + + // list (starting with * or number) + [/^\s*([\*\-+]|\d+\.)\s/, 'keyword'], + + // code block (4 spaces indent) + [/^(\t|[ ]{4})[^ ].*$/, 'string'], + + // code block (3 tilde) + [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }], + + // github style code blocks (with backticks and language) + [/^\s*```\s*((?:\w|[\/\-#])+)\s*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }], + + // github style code blocks (with backticks but no language) + [/^\s*```\s*$/, { token: 'string', next: '@codeblock' }], + + // block components + [/^\s*(:{2,})([\w-]+)/, 'tag', '@componentWithData'], + + // markup within lines + { include: '@linecontent' } + + ], + + componentWithData: [ + [/{/, 'tag', '@attributes'], + [/^\s*---\s*$/, { token: '', next: '@componentData', nextEmbedded: 'yaml' }], + [/^\s*::+\s*$/, 'tag', '@pop'], + { include: '@component' } + ], + + component: [ + // #slots + [/^\s*#[\w_-]*\s*$/, 'attribute.name.html'], + { include: '@markdown' } + ], + + componentData: [ + [/^\s*---\s*$/, { token: '', next: '@pop', nextEmbedded: '@pop', bracket: '@close' }], + [/.*$/, 'variable.source'] + ], + + attributes: [ + // class|id + [/[^}=][^\s=}]*[\s.#]*/, 'attribute.name.html'], + [/[^}=][^\s=}]*(})/, ['attribute.name.html', { token: 'tag', next: '@pop' }]], + [/(=)("[^"]*"|[^"\s=]*)/, ['', 'string.html']], + [/}/, 'tag', '@pop'] + ], + + codeblock: [ + [/^\s*~~~\s*$/, { token: 'string', next: '@pop' }], + [/^\s*```\s*$/, { token: 'string', next: '@pop' }], + [/.*$/, 'variable.source'] + ], + + // github style code blocks + codeblockgh: [ + [/```\s*$/, { token: 'variable.source', next: '@pop', nextEmbedded: '@pop' }], + [/[^`]+/, 'variable.source'] + ], + + linecontent: [ + // escapes + [/&\w+;/, 'string.escape'], + [/@escapes/, 'escape'], + + // various markup + // [/(\b__([\w]+)__)({)/, ['strong', '']], + [/\b__([^\\_]|@escapes|_(?!_))+__\b/, 'strong'], + [/\*\*([^\\*]|@escapes|\*(?!\*))+\*\*/, 'strong'], + [/\b_[^_]+_\b/, 'emphasis'], + [/\*([^\\*]|@escapes)+\*/, 'emphasis'], + [/`([^\\`]|@escapes)+`/, 'variable'], + + // links + [/^{+[^}]*\}+/, 'string.link'], + [/[^\*\_\)\]]\{+[^}]*\}+/, 'string.link'], + [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ['string.link', '', 'string.link']], + // [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, 'string.link'], + + [/\{/, { token: 'tag', next: '@attributes' }], + + // :block{#attribute} + [/(:)([\w-]+)({)/, ['tag', 'tag', { token: 'tag', next: '@attributes' }]], + // :block + [/(:)([\w-]+)/, ['tag', 'tag']], + + // [span] + [/(\[)([^\]]*)(\])({)/, ['string.link', '', 'string.link', { token: 'tag', next: '@attributes' }]], + [/(\[)([^\]]*)(\])/, ['string.link', '', 'string.link']], + + // or html + { include: 'html' } + ], + + // Note: it is tempting to rather switch to the real HTML mode instead of building our own here + // but currently there is a limitation in Monarch that prevents us from doing it: The opening + // '<' would start the HTML mode, however there is no way to jump 1 character back to let the + // HTML mode also tokenize the opening angle bracket. Thus, even though we could jump to HTML, + // we cannot correctly tokenize it in that mode yet. + html: [ + // html tags + [/<(\w+)\/>/, 'tag'], + [/<(\w+)/, { + cases: { + '@empty': { token: 'tag', next: '@tag.$1' }, + '@default': { token: 'tag', next: '@tag.$1' } + } + }], + [/<\/(\w+)\s*>/, { token: 'tag' }], + + [//, 'comment', '@pop'], + [/