Image and Link

This section provides an overview of how AriaDocs handles links and images in Markdown.

In AriaDocs, all links and images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.

When you create a link in your Markdown, it is converted to the Next.js Link component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:

Markdown

[Visit OpenAI](https://www.openai.com)

Rendered Output

The above Markdown is converted to:

<Link href="https://www.openai.com" target="_blank" rel="noopener noreferrer">
    Visit OpenAI
</Link>

Images

Similarly, images in Markdown are transformed into the Next.js Image component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:

Markdown

![Alt text for the image](https://via.placeholder.com/150)

Rendered Output

The above Markdown is converted to:

<Image
    src="https://via.placeholder.com/150"
    alt="Alt text for the image"
    width={800}
    height={350}
/>

Benefits

  • Performance Optimization: Automatic conversion to Next.js components ensures optimized loading of images and links.
  • Improved User Experience: Client-side navigation with Next.js Link improves the browsing experience.
  • Responsive Images: Next.js Image component handles responsive images, providing the best quality for various device sizes.

By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.