Test image

Test

Jan 01, 20303 min read

MDX Test with Custom Components

This is an introductory text using the IntroText component. It should be styled with a blue left border and proper spacing.

Standard Markdown Features

This is a regular paragraph with bold text and italic text.

Lists

Here's a bullet list:

Item 1
Item 2
Item 3

And a numbered list:

First item
Second item
Third item

Image Test

This is an image:

The default size of images is 'medium', but you can also make images smaller or larger:

size 'full' also exists, but with the limited blog viewport it will show the same size as 'large' here.

Links Test

You can also put links in documents: 'This is an external link'

This includes links to local pages (the locale will be added automatically) 'This is an internal link'

Blockquote Test

Here's a blockquote using standard Markdown syntax:

This is a blockquote. It should be styled with a blue left border and proper spacing.

It can contain multiple paragraphs.

It's also possible to cite people:

I never knew!
Mahatma Ghandi

AvatarQuote Test

If we have added a testimonial, we can also add their avatar to the quote:

Tidal Control is the best compliance automation tool we’ve ever built.
Dennis van de Wiel
Co-founder | Tidal Control

PhotoQuote Test

We can also add a photo to the quote as long as it's in the image registry:

One small step for man. A giant leap for mankind.

Callout Component Test

This is an informational callout component. It should have blue styling.

This is a warning callout component. It should have yellow styling.

This is an error callout component. It should have red styling.

Docusaurus Admonitions!

This page demonstrates how to use Docusaurus-style callouts in your MDX content.

::: note

This is a simple note callout.

:::

::: tip My Custom Tip Title

Here's a helpful tip with a custom title!

You can include multiple paragraphs and other markdown elements inside.

Like lists
With multiple items

:::

::: info

Here's some important information.

:::

::: caution

Be careful when doing this.

:::

::: warning

This is a warning message.

:::

::: danger

This operation is dangerous and not reversible!

:::

Note: This doesn't work:

::: info Here's some important information. :::

Native JSX Admonitions (No Plugin Needed!)

The ::: syntax above requires the remark-docusaurus-admonitions plugin to convert it to JSX. But MDX natively supports JSX components, so you can use the Admonition component directly:

Important

This uses native JSX syntax - no plugin needed! MDX supports this out of the box.

Pro Tip

This is a tip using native JSX syntax. Much cleaner and more explicit!

Be Careful

This is a warning using native JSX syntax.

Critical

This is a danger admonition. Perfect for highlighting destructive actions.

Information

This is an info admonition with the Tidal blue color.

Caution

This is a caution admonition in yellow.

Without custom title

Note

This note has no custom title - it will use the default "Note" title from the translations.

Tip

Default "Tip" title is used here.

With Complex Content

Complex Content Example

You can include markdown formatting, links, and even lists:

First item with bold text
Second item with italic text
Third item with inline code

And code blocks:

const example = "This is code inside an admonition";
console.log(example);

And even nested formatting and internal links.

Comparison: Old vs New Syntax

Old Way (requires plugin):

:::note Important
Content here
:::

New Way (native MDX):

<Admonition type="note" title="Important">
Content here
</Admonition>

Benefits of JSX syntax:

✅ No plugin needed - remove remark-docusaurus-admonitions.mjs
✅ Better IDE support (autocomplete, type checking)
✅ More explicit and easier to debug
✅ Standard MDX approach

Code Blocks

Here's a code block:

function greeting(name) {
  return `Hello, ${name}!`;
}

console.log(greeting('World'));

Conclusion

This test file demonstrates all the MDX features that should be working in our implementation.