chore: deprecate markdown component (#1435)

Author: farnabaz

docs/components/content/ExampleTheTitle.vue

@@ -1,5 +1,5 @@
 <template>
   <h1 class="text-4xl">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentSlot :use="$slots.default" unwrap="p" />
   </h1>
 </template>

docs/components/content/MyButton.vue

@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <button :class="type">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentSlot :use="$slots.default" unwrap="p" />
   </button>
 </template>
 

docs/content/3.guide/1.writing/3.mdc.md

@@ -16,7 +16,7 @@ Any component in the `components/content/` directory or [made available globally
 The component must contain either:
 
 - A `<slot />`{lang="html"} to accept raw text or another component.
-- The `<Markdown />`{lang="html"} component to accept formatted text.
+- The `<ContentSlot />`{lang="html"} component to accept formatted text.
 
 In a markdown file, use the component with the **`::`** identifier.
 
@@ -107,15 +107,15 @@ You can add more `::::` when nesting components as a visual reminder.
 
 ### Markdown rendering
 
-The `<Markdown />`{lang="html"} component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
+The `<ContentSlot />`{lang="html"} component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
 
 The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, useful when using tags such as title tags (`<h1>`{lang="html"}, `<h2>`{lang="html"}, ...) or inline tags (`<button>`{lang="html"}, `<a>`{lang="html"}, ...).
 
 ::code-group
   ```html [TheTitle.vue]
   <template>
     <h1 class="text-4xl">
-      <Markdown :use="$slots.default" unwrap="p" />
+      <ContentSlot :use="$slots.default" unwrap="p" />
     </h1>
   </template>
   ```
@@ -131,15 +131,15 @@ The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, u
   ::
 ::
 
-The `<Markdown />` component can act as a named slot with the `use` property:
+The `<ContentSlot />` component can act as a named slot with the `use` property:
 
 ```html
-<Markdown :use="$slots.description" unwrap="p">
+<ContentSlot :use="$slots.description" unwrap="p">
 ```
 
 ## Inline components
 
-Inline components are components without slots or `<Markdown />`.
+Inline components are components without slots or `<ContentSlot />`.
 
 They can be used with the `:` identifier.
 
@@ -189,7 +189,7 @@ defineProps(['type'])
 
 <template>
   <div :class="[type]">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentSlot :use="$slots.default" unwrap="p" />
   </div>
 </template>
   ```

docs/content/4.api/1.components/5.markdown.md

@@ -3,6 +3,10 @@ title: '<Markdown>'
 description: 'The fastest way to inject Markdown into your Vue components.'
 ---
 
+::alert{type=danger}
+**NOTE**: As of [email protected] this component is deprecated and replaced by [`<ContentSlot>`](./content-slot).
+::
+
 The `<Markdown>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
 
 It is useful when creating components that you want to use in your Markdown content.

docs/content/4.api/1.components/6.content-slot.md

@@ -0,0 +1,32 @@
+---
+title: '<ContentSlot>'
+description: 'The fastest way to inject Markdown into your Vue components.'
+---
+
+The `<ContentSlot>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
+
+It is useful when creating components that you want to use in your Markdown content.
+
+## Props
+
+- `use`{lang=ts}: The slot to bind on, you must provide a `use`{lang=ts} via `$slots.{your_slot}`{lang=ts} in `<template>`{lang=html}.
+  - Type: Vue slot `Function`
+  - Example: `$slots.default`{lang=ts}
+- `unwrap`{lang=ts}: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
+  - Type: `Boolean`{lang=ts} or `String`{lang=ts}
+  - Default: `false`{lang=ts}
+  - Example: `'ul li'`{lang=ts}
+
+## Example
+
+```html [components/FancyHeader.vue]
+<template>
+  <h2 class="fancy-header"><ContentSlot :use="$slots.default" unwrap="p" /></h2>
+</template>
+```
+
+```md [content/index.md]
+::fancy-header
+That text paragraph will be unwrapped.
+::
+```

docs/content/4.api/1.components/6.prose.md renamed to docs/content/4.api/1.components/7.prose.md

@@ -2,4 +2,4 @@
 title: 'useUnwrap()'
 ---
 
-It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from `<Markdown>`{lang=html} component.
+It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from `<ContentSlot>`{lang=html} component.

docs/content/4.api/2.composables/3.unwrap.md

@@ -4,7 +4,7 @@ title: 'Nested components'
 description: 'The MDC syntax allow you to nest components within a parent slot using indentation and the :: syntax.'
 ---
 
-The `components/AppNested.vue` component uses the `<Markdown>` component as markdown-rendering slot.
+The `components/AppNested.vue` component uses the `<ContentSlot>` component as markdown-rendering slot.
 
 ::ReadMore{link="/guide/writing/mdc#nesting"}
 

docs/content/5.examples/3.mdc/2.nested-components.md

@@ -205,7 +205,7 @@ MDC is Markdown, so nothing changes and you can keep using the `.md` extension.
 
   <template>
     <button :class="type">
-      <Markdown :use="$slots.default" unwrap="p" />
+      <ContentSlot :use="$slots.default" unwrap="p" />
     </button>
   </template>
   ```

docs/content/6.blog/1.announcing-v2.md

@@ -1,6 +1,6 @@
 <template>
   <aside>
     <h2>Nested component</h2>
-    <Markdown unwrap="p" />
+    <ContentSlot unwrap="p" />
   </aside>
 </template>