Admonitions Demo

This page demonstrates the various types of admonitions/callouts available on this blog.

Basic Admonitions

Note

This is a basic note admonition. It uses the default styling and is perfect for providing additional information or context.

Tip

This is a tip admonition. Use this to share helpful hints or best practices with your readers.

Info

This is an info admonition. It’s great for providing factual information or updates.

Warning

This is a warning admonition. Use this to alert readers about potential issues or things to be careful about.

Danger

This is a danger admonition. Reserve this for critical warnings or errors that could cause problems.

Success

This is a success admonition. Perfect for highlighting positive outcomes or completed tasks.

Example

This is an example admonition. Use this to showcase code examples or demonstrate concepts.

Quote

This is a quote admonition. Great for highlighting important quotes or testimonials.

Custom Titles

Custom Title Example

You can provide custom titles for your admonitions to make them more specific and contextual.

Pro Tip

Custom titles help readers quickly understand what the admonition is about.

Collapsible Admonitions

This admonition is collapsible! Click the title to expand or collapse the content. This is perfect for:

Optional detailed information
Lengthy explanations
Advanced topics that might overwhelm beginners
FAQ sections

You can include any markdown content here, including:

Lists
Code blocks
Links
Images

console.log("Even code blocks work!");

Real-world Examples

Breaking Changes

Version 2.0 introduces breaking changes:

The old config.js format is no longer supported
API endpoints have been updated
Some function signatures have changed

Please review the migration guide before upgrading.

Performance Optimization

For better performance, consider:

Enabling caching
Using CDN for static assets
Implementing lazy loading
Minimizing bundle size

These optimizations can improve your Core Web Vitals scores significantly.

Code Example

Here’s how to use the new API:

import { createClient } from '@my-api/client';

const client = createClient({
  apiKey: process.env.API_KEY,
  version: 'v2'
});

const result = await client.fetchData();
console.log(result);

Remember to handle errors appropriately in production code.

Migration Complete

🎉 Successfully migrated to the new admonitions system!

All existing callouts have been converted and are now:

✅ Accessible with proper ARIA attributes
✅ Mobile-friendly and responsive
✅ Dark mode compatible
✅ Customizable with themes