Content Transform

Discover ways that undocs transforms content to make it more easier to just write documentation.

#Github Notes

https://github.com/orgs/community/discussions/16925

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

Note

Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

Tip

Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

Important

Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

Warning

Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Caution

Negative potential consequences of an action.

#Auto Code Groups

If you have code blocks right after each other, they will be grouped together using a code-group component.

```json [package.json]
{
  "scripts": {
    "dev": "undocs dev"
  }
}
```

```ts [server/api/hello.get.ts]
export default defineEventHandler(() => {
  return {
    hello: "world",
  };
});
```

```html [index.html]
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>
```
{
  "scripts": {
    "dev": "undocs dev"
  }
}

#Steps

Generate steps by using standard markdown numbered lists!

Important

In order to generate this component, you need to have content inside at least one of the lists. The list can't be a child of another component & also any content within a Markdown list will need at least 2 tabs to be considered as a child of the list.

1. Install Package

   ::note
   Please note that steps only work with numbered lists and is not within children.
   ::

   :pm-install{name="undocs"}

2. Run development server

   :pm-run{script="undocs"}

3. Done ✅

Install Package

Note

Please note that steps only work with numbered lists and is not within children.

npm i undocs

Run development server

npm run undocs

Done ✅

#Config References

Generate beautiful references for your configuration files by just using markdown!

Tip

If you use automd:jsdocs, you can reference the schema file directly! Check out this example from the config page.

### `$schema`

- **Type**: `string`

### `automd`

- **Type**: `boolean`

Enable integration with https://automd.unjs.io

### `buildCache`

- **Type**: `boolean`

Enable build cache (experimental)

### `description`

- **Type**: `string`

The description of the documentation site.

#$schema

  • Type: string

#automd

  • Type: boolean

Enable integration with https://automd.unjs.io

#buildCache

  • Type: boolean

Enable build cache (experimental)

#description

  • Type: string

The description of the documentation site.

Tip

Do you have an idea for a new content transformation, feel free to open an issue!