diff --git a/README.md b/README.md index 21f0018db..c75e27100 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,6 @@ Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml - Powerful query builder on top of SQLite database - [... and more](https://content3.nuxt.dev) - ## 💻 Development - Clone repository diff --git a/docs/content/docs/1.getting-started/3.configuration.md b/docs/content/docs/1.getting-started/3.configuration.md index 4673224ec..b72ce3557 100644 --- a/docs/content/docs/1.getting-started/3.configuration.md +++ b/docs/content/docs/1.getting-started/3.configuration.md @@ -242,7 +242,6 @@ Content module uses files path to generate the slug, default title and content o If set to `true`, the path will be prefixed with a leading slash. Default value is `true`. - ### `pathMeta.slugifyOptions` Content module uses [slugify](https://github.com/simov/slugify) to generate the slug, you can customize the behavior of slugify with this option. diff --git a/docs/content/docs/1.getting-started/4.migration.md b/docs/content/docs/1.getting-started/4.migration.md index 097bd20ea..113734ef6 100644 --- a/docs/content/docs/1.getting-started/4.migration.md +++ b/docs/content/docs/1.getting-started/4.migration.md @@ -100,7 +100,7 @@ const v2Surround = await queryContent(targetPath) // Content v3 - don't forget to create `content` collection in `content.config.ts` const v3Surround = await queryCollectionItemSurroundings( - 'content', + 'content', targetPath, { fields: ['title', 'description', 'navigation'] @@ -118,4 +118,3 @@ Many `ProsePre` components are thin wrappers around the `ProseCode` component. W Suggested Changes 1. Your _current_ `ProseCode` logic should be moved to `ProsePre` 2. Rename your `ProseCodeInline` component to `ProseCode` - diff --git a/docs/content/docs/2.collections/1.collections.md b/docs/content/docs/2.collections/1.collections.md index ecd6adfa4..1b255ca51 100644 --- a/docs/content/docs/2.collections/1.collections.md +++ b/docs/content/docs/2.collections/1.collections.md @@ -50,7 +50,7 @@ export default defineContentConfig({ Schemas enforce data consistency within a collection and serve as the source of truth for TypeScript types. -On top of the [built-in fields](#built-in-fields), you can define a schema by adding the `schema` property to your collection by using a [`zod`](https://zod.dev) schema: +On top of the built-in fields, you can define a schema by adding the `schema` property to your collection by using a [`zod`](https://zod.dev) schema: ```ts [content.config.ts] import { defineCollection, defineContentConfig, z } from '@nuxt/content' diff --git a/docs/content/docs/3.files/1.markdown.md b/docs/content/docs/3.files/1.markdown.md index 9b3a8c489..475de75f1 100644 --- a/docs/content/docs/3.files/1.markdown.md +++ b/docs/content/docs/3.files/1.markdown.md @@ -215,7 +215,7 @@ This will be rendered inside the `description` slot. :::preview-card{icon="i-lucide-eye" label="Preview"} ::::example-hero My Page Title - + #description This will be rendered inside the `description` slot. :::: @@ -235,7 +235,7 @@ You can use Markdown inside your components slots: A [rich text](/) will be **rendered** by the component. :: ``` - + ```html [MyTitle.vue] ``` - + ::::preview-card{icon="i-lucide-eye" label="Preview"} :::::example-title A [rich text](/) will be **rendered** by the component. @@ -384,7 +384,7 @@ defineProps({ Attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax. -Possible values ​​are all named attributes, classes with the notation `.class-name` and an ID with `#id-name`. +Possible values are all named attributes, classes with the notation `.class-name` and an ID with `#id-name`. ::code-group ```mdc [index.md] @@ -402,17 +402,17 @@ In addition to mdc components and `span`, attribute syntax will work on images, ```md [index.md] Attributes work on: -- ![](/favicon.ico){style="display: inline; margin: 0;"} image, +- ![favicon](/favicon.ico){style="display: inline; margin: 0;"} image, - [link](#attributes){style="background-color: pink;"}, `code`{style="color: cyan;"}, - _italic_{style="background-color: yellow; color:black;"} and **bold**{style="background-color: lightgreen;"} texts. ``` :::preview-card{prose label="Preview"} Attributes work on: - - - ![](/favicon.ico){style="display: inline; margin: 0;"} image, + + - ![favicon](/favicon.ico){style="display: inline; margin: 0;"} image, - [link](#attributes){style="background-color: pink;"}, `code`, - - _italic_ and **bold** texts. + - *italic* and **bold** texts. ::: :: @@ -420,7 +420,7 @@ Attributes work on: You can bind data within your Markdown document using the `{{ $doc.variable || 'defaultValue' }}` syntax. These values can be defined in the YAML front matter at the top of the document, within each MDC component, or injected using the `data` prop of the `` component. -#### Example 1: Define in YAML +### Example 1: Define in YAML ```mdc --- diff --git a/docs/content/docs/3.utils/2.query-collection-navigation.md b/docs/content/docs/3.utils/2.query-collection-navigation.md index 361566448..05fccbed6 100644 --- a/docs/content/docs/3.utils/2.query-collection-navigation.md +++ b/docs/content/docs/3.utils/2.query-collection-navigation.md @@ -8,7 +8,7 @@ description: The queryCollectionNavigation composable generates the navigation ```ts function queryCollectionNavigation( - collection: T, + collection: T, fields?: Array ): ChainablePromise diff --git a/docs/content/docs/3.utils/3.query-collection-item-surroundings.md b/docs/content/docs/3.utils/3.query-collection-item-surroundings.md index 6c34cd84e..8d95725f0 100644 --- a/docs/content/docs/3.utils/3.query-collection-item-surroundings.md +++ b/docs/content/docs/3.utils/3.query-collection-item-surroundings.md @@ -8,8 +8,8 @@ description: The queryCollectionItemSurroundings composable looks for sibling ```ts function queryCollectionItemSurroundings( - collection: T, - path: string, + collection: T, + path: string, opts?: SurroundOptions ): ChainablePromise diff --git a/docs/content/docs/4.components/2.prose.md b/docs/content/docs/4.components/2.prose.md index d7672f0a2..3ae1b769e 100644 --- a/docs/content/docs/4.components/2.prose.md +++ b/docs/content/docs/4.components/2.prose.md @@ -89,7 +89,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes :::preview-card{icon="i-lucide-eye" label="Preview"} `code` - + `const code: string = 'highlighted code inline'` ::: :: @@ -102,6 +102,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes ``` :::preview-card{.pt-4 label="Preview"} + # H1 Heading ::: :: @@ -114,6 +115,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes ``` :::preview-card{icon="i-lucide-eye" label="Preview"} + ## H2 Heading ::: :: @@ -126,6 +128,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes ``` :::preview-card{icon="i-lucide-eye" label="Preview"} + ### H3 Heading ::: :: @@ -138,6 +141,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes ``` :::preview-card{icon="i-lucide-eye" label="Preview"} + #### H4 Heading ::: :: @@ -150,6 +154,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes ``` :::preview-card{icon="i-lucide-eye" label="Preview"} + ##### H5 Heading ::: :: @@ -162,6 +167,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes ``` :::preview-card{icon="i-lucide-eye" label="Preview"} + ###### H6 Heading ::: :: @@ -179,9 +185,9 @@ Divider above. :::preview-card{icon="i-lucide-eye" label="Preview"} Divider under. - + --- - + Divider above. ::: :: @@ -292,12 +298,13 @@ _Just an italic paragraph._ ``` :::preview-card{icon="i-lucide-eye" label="Preview"} - | | | | - | --- | --------- | ----------- | + | Key | Type | Description | + | --- | --------- | ----------- | | 1 | Wonderful | Table | | 2 | Wonderful | Data | | 3 | Wonderful | Website | + ::: :: diff --git a/docs/content/docs/7.studio/1.setup.md b/docs/content/docs/7.studio/1.setup.md index f51100b27..3bcbbb6f3 100644 --- a/docs/content/docs/7.studio/1.setup.md +++ b/docs/content/docs/7.studio/1.setup.md @@ -80,6 +80,7 @@ The `__studio.json` file is generated but you encounter a `Forbidden error: inva This information should be populated automatically in most cases. We support most popular providers (Vercel, Netlify, etc.), but if you're using a non supported provider or a custom one, it may not be fetched correctly. :: + 2. You can manually override this data by setting those configs in your `nuxt.config.ts`: ```ts [nuxt.config.ts] @@ -90,11 +91,12 @@ export default defineNuxtConfig({ gitInfo: { name: 'Your repository name', owner: 'Your repository owner/organization', - url: 'Your GitHub repository URL' + url: 'Your GitHub repository URL' } } } }) ``` + 3. By ensuring these fields are correctly set, you can resolve the `Forbidden error` and successfully enable your site preview on Nuxt Studio. If not, please contact us on the [Discord server](https://discord.gg/sBXDm6e8SP). diff --git a/docs/content/docs/7.studio/3.content.md b/docs/content/docs/7.studio/3.content.md index 0a0f1e1ad..c6ee894de 100644 --- a/docs/content/docs/7.studio/3.content.md +++ b/docs/content/docs/7.studio/3.content.md @@ -12,7 +12,7 @@ seo: Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between our differents editors: -- [Notion-like editor](#markdown-editor-markdown-files) for `Markdown` files +- [Notion-like editor](#notion-like-editor-markdown-files) for `Markdown` files - [Form editor](#form-editor-yaml-and-json-files) for `YAML` and `JSON` files - [Code editor](#code-editor) for any kind of files (for technical users only) @@ -55,6 +55,7 @@ One of this editor standout features is its ability to integrate and customize a In other terms, a developer can create any kind of visually complex components and editors will be able to use them and focus on the content. An editor can also tweak the component properties, styles, and behavior to fit its specific requirements as long as the developer made it customizable. ::steps{level="4"} + #### Create your component You can create Vue components and integrate them into Markdown. They just need to be located in the `/components/content` folder to be available. diff --git a/docs/content/docs/7.studio/5.config.md b/docs/content/docs/7.studio/5.config.md index 06dbda807..b3861a3f9 100644 --- a/docs/content/docs/7.studio/5.config.md +++ b/docs/content/docs/7.studio/5.config.md @@ -25,7 +25,7 @@ export default defineAppConfig({}) To create a customized editing experience for your `app.config.ts` in Studio, you need to create a `nuxt.schema.ts` file in your project. This schema serves as a representation of your `app.config.ts`. -#### Helpers +### Helpers - The `group` method allows you to customize parent objects. - The `field` method allows you to customize inputs (aka leaf). diff --git a/docs/content/docs/7.studio/6.debug.md b/docs/content/docs/7.studio/6.debug.md index ddeb8c9db..6dc2b9637 100644 --- a/docs/content/docs/7.studio/6.debug.md +++ b/docs/content/docs/7.studio/6.debug.md @@ -19,9 +19,10 @@ It can help if: ## Tutorial ::steps -### Start by importing your project on Studio. -### Clone your repository on local. +### Start by importing your project on Studio + +### Clone your repository on local ### Enable the Studio module in development @@ -48,7 +49,8 @@ npx nuxt dev --tunnel `__studio.json` file should accessible from `https://your-localtunnel-url/__studio.json` -### Copy the tunnel URL and copy it in the self-hosting section of the deployment tab on Studio platform. +### Copy the tunnel URL and copy it in the self-hosting section of the deployment tab on Studio platform + :: ::tip diff --git a/docs/content/index.md b/docs/content/index.md index 0f5cb24ed..de0517013 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -56,7 +56,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} File-based CMS - + #description{unwrap="p"} Write your content in Markdown, YML, CSV or JSON and query it in your components. ::: @@ -69,7 +69,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Query Builder - + #description{unwrap="p"} Query your content with a MongoDB-like API to fetch the right data at the right time. ::: @@ -82,7 +82,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} SQLite powered - + #description{unwrap="p"} Add custom fields to your content, making it suitable for various types of projects. ::: @@ -95,7 +95,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Markdown with Vue - + #description{unwrap="p"} Use Vue components in Markdown files, with props, slots and nested components. ::: @@ -108,7 +108,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Code highlighting - + #description{unwrap="p"} Display beautiful code blocks on your website with the Shiki integration supporting VS Code themes. ::: @@ -121,7 +121,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Visual Editor - + #description{unwrap="p"} Let your team edit your Nuxt Content project with Nuxt Studio, our visual editor. ::: @@ -134,7 +134,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Navigation Generation - + #description{unwrap="p"} Generate a structured object from your content files and display a navigation menu in minutes. ::: @@ -147,7 +147,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Prose Components - + #description{unwrap="p"} Customize HTML typography tags with Vue components to give your content a consistent style. ::: @@ -160,7 +160,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f --- #title{unwrap="p"} Deploy everywhere - + #description{unwrap="p"} Nuxt Content works on all hosting providers, static, server, serverless & edge. ::: @@ -198,35 +198,35 @@ orientation: horizontal --- #title The Everest. - + #description The Everest is the highest mountain in the world, standing at 8,848 meters above sea level. ::::: :::: - + ```mdc [content/index.md] --- title: The Mountains Website description: A website about the most iconic mountains in the world. --- - + ::landing-hero --- image: /images/everest.png --- #title The Everest. - + #description The Everest is the highest mountain in the world, standing at 8,848 meters above sea level. :: ``` - + ```vue [components/LandingHero.vue] - +