Hugo Shortcodes Demo

This page demonstrates all the Hugo shortcodes that have been converted to React components for the Next.js migration.

Video Embeds

YouTube Video

YouTube with Custom Parameters

Social Media Embeds

Twitter/X Post

Instagram Post

Images and Galleries

Figure Shortcode

Basic Image Gallery

Utilities

QR Code

Code Block

import React from 'react';

const MyComponent = ({ title }) => { const [count, setCount] = useState(0);

return (

); };

export default MyComponent; {{< /code >}}

Advanced Examples

Figure with All Options

Advanced Image Gallery

QR Code with Custom Colors

Features Showcase

Multiple Shortcodes in Sequence

Here's a YouTube video followed by a QR code:

Mixed Content

You can mix shortcodes with regular markdown content:

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

And here's some code:

const greeting = "Hello, World!";
console.log(greeting);

Migration Benefits

These React components provide several advantages over Hugo shortcodes:

1. Interactive: Components can have state and handle user interactions
2. Responsive: Built with modern CSS frameworks for mobile-first design
3. Accessible: Proper ARIA labels and keyboard navigation
4. Performant: Lazy loading, image optimization, and efficient rendering
5. Customizable: Easy to style and extend with additional props
6. Type-safe: Full TypeScript support with proper prop validation

Usage Examples

In Markdown Files

<div data-shortcode="youtube" data-params="%7B%22id%22%3A%22videoId%22%2C%22src%22%3A%22videoId%22%2C%22text%22%3A%22videoId%22%2C%22images%22%3A%22videoId%22%2C%22name%22%3A%22videoId%22%7D" data-key="shortcode-youtube-ji195fem8"></div>
<div data-shortcode="figure" data-params="%7B%22src%22%3A%22%2Fimage.jpg%22%2C%22alt%22%3A%22Description%22%7D" data-key="shortcode-figure-qoxi8304g"></div>
<div data-shortcode="gallery" data-params="%7B%22images%22%3A%22img1.jpg%2Cimg2.jpg%2Cimg3.jpg%22%7D" data-key="shortcode-gallery-5zh8dkiib"></div>

In React Components

import { YouTube, Figure, ImageGallery } from '@/components/shortcodes';

<YouTube id="videoId" />
<Figure src="/image.jpg" alt="Description" />
<ImageGallery images={["img1.jpg", "img2.jpg", "img3.jpg"]} />

This demonstrates the full Hugo shortcode functionality now available in the Next.js application!