Blowfish Shortcode Compatibility Test

This page tests the exact Hugo Blowfish shortcode API compatibility. All shortcodes below should work identically in both Hugo Blowfish and this Next.js implementation.

Alert Shortcodes

Basic Alert

This is a basic alert with default styling. {{< /alert >}}

Alert with Custom Icon

Success! This alert uses a custom check icon. {{< /alert >}}

Alert with Custom Colors

This is a custom styled alert with red background and white text. {{< /alert >}}

Positional Parameter Alert

This alert uses positional parameters (icon as first parameter). {{< /alert >}}

Badge Shortcodes

Here are some example badges:

New Feature {{< /badge >}}

v2.87.0 {{< /badge >}}

In Progress {{< /badge >}}

Button Shortcodes

Basic Button

Visit Blowfish Theme {{< /button >}}

Button with Target

Hugo Documentation {{< /button >}}

Timeline Shortcodes

Started working on the Hugo to Next.js migration project. The goal was to maintain full compatibility with Blowfish shortcodes while leveraging Next.js capabilities. {{< /timelineItem >}}

Implemented all major Blowfish shortcodes with exact API compatibility: - Alert with custom styling support - Badge components - Button with href/target support - Timeline and TimelineItem - GitHub repository cards {{< /timelineItem >}}

Testing all shortcodes to ensure 100% API compatibility between Hugo Blowfish and Next.js implementation. This allows seamless content migration between platforms. {{< /timelineItem >}}

{{< /timeline >}}

GitHub Repository Cards

Basic GitHub Card

GitHub Card with Thumbnail

GitHub Card without Thumbnail

Testing shortcode processing - if you see this as a styled alert, shortcodes are working!{{< /alert >}}

Mermaid Diagrams

Flowchart

flowchart TD A[Hugo Blowfish] --> B{Migration Decision} B -->|Keep Hugo| C[Continue with Hugo] B -->|Migrate| D[Next.js Implementation] D --> E[Exact API Compatibility] E --> F[Seamless Content Migration] {{< /mermaid >}}

Sequence Diagram

sequenceDiagram participant Hugo participant NextJS participant Content

Hugo->>Content: Parse Shortcodes
Content->>NextJS: Migrate with Same API
NextJS->>Content: Render Identically
Content->>Hugo: Still Compatible

{{< /mermaid >}}

Compatibility Verification

✅ Exact API Match

Alert: icon, cardColor, iconColor, textColor + positional parameters
Badge: Simple content wrapper with Blowfish styling
Button: href, target, rel parameters
Timeline/TimelineItem: icon, header, badge, subheader parameters
GitHub: repo, showThumbnail parameters
Mermaid: Direct diagram content support

✅ Styling Compatibility

All components use exact Blowfish CSS classes and color schemes:

bg-primary-600, text-neutral, dark:bg-primary-800
border-l-2 border-primary-500 dark:border-primary-300
text-white bg-primary-600 hover:bg-primary-700

✅ Markdown Hot-Swappable

Content files can be moved between Hugo Blowfish and this Next.js implementation without any modifications to shortcode syntax.

Testing Instructions

Copy this file to your Hugo Blowfish project's content/ directory
Compare rendering between Hugo and Next.js
Verify identical behavior for all shortcodes
Test parameter variations to ensure full compatibility

All shortcodes should render identically in both environments! 🎉