Skip to content

Commit

Permalink
docs: raw content
Browse files Browse the repository at this point in the history
  • Loading branch information
farnabaz committed Nov 7, 2024
1 parent e0f7bf5 commit 73ecf0a
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 3 deletions.
4 changes: 2 additions & 2 deletions docs/content/2.usage/2.markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -549,13 +549,13 @@ const mdcVars = ref({ name: 'Maxime'});

### Prose Components

In Nuxt Content, the prose represents HTML tags generated by the Markdown syntax, such as title levels and links.
In Nuxt Content, the prose represents HTML tags generated by the Markdown syntax, such as heading levels and links.

For each HTML tag, a Vue component is used, allowing you to override them if needed, for example `<p>` becomes `<ProseP>`.

If you want to customize a Prose component, here are the recommended steps:

- Checkout the original [component sources](https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/prose).
- Check out the original [component sources](https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/prose).
- Use the exact same props.
- In your `components/content/` directory, give it the same name.
- Make it yours 🚀.
Expand Down
2 changes: 1 addition & 1 deletion docs/content/6.snippets/1.fulltext-search.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ You can use the result of this utility in combination with [Nuxt UI Content Sear

## Nuxt UI Pro

Nuxt UI Pro provide a ready to use component for full-text search. You can use it by passing the result of `queryCollectionSearchSections` to the `files` prop of the component.
Nuxt UI Pro provides a ready to use component for full-text search. You can use it by passing the result of `queryCollectionSearchSections` to the `files` prop of the component.

Read more about [Nuxt UI Content Search][nuxt-ui-content-search].

Expand Down
54 changes: 54 additions & 0 deletions docs/content/6.snippets/2.raw-content.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
title: Raw Content
description: Access to contents raw data in appliction
---

There were lots of requests in Content version 2 about accessing contents raw data in production. We're happy to announce that in version 3 it is possible to ship contents raw data to production.

In order to ship raw contents to production you need to define `rawbody` field in your collection's schema.
That's it.

Nuxt Content will detect this magical field in your schema and fill it with the raw content.

```ts [content.config.ts]
import { defineCollection, z } from '@nuxt/content'

export const collections = {
docs: defineCollection({
source: '**',
type: 'page',
schema: z.object({
rawbody: z.string()
})
})
}
```

And you can use `queryCollection()`{lang="ts-type"} to fetch the raw content.

```vue [pages/index.vue]
<script setup lang="ts">
const route = useRoute()
const { data } = useAsyncData('page-' + route.path, () => queryCollection('docs').path(route.path).first())
</script>
<template>
<pre>{{ data.rawbody }}</pre>
</template>
```


In case you don't want to ship raw content of a specific file you can add `rawbody: ''` to frontmatter of that file. The auto filled value of `rawbody` is acting like default value and when you define `rawbody` in the frontmater it will overwriten.

```md [content.md]
---
title: My page
rawbody: ''
---

```


::callout
It is important to fill frontmatter fields with a same type of data that defined in collection schema. In this case `rawbody` is a string, and you should consider passing empry string. Do not use `boolean` or other type of values.
::
1 change: 1 addition & 0 deletions playground/content.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const content = defineCollection({
},
schema: z.object({
date: z.date(),
rawbody: z.string(),
}),
})

Expand Down

0 comments on commit 73ecf0a

Please sign in to comment.