eleventy-plugin-currency-shortcode

An Eleventy plugin that adds a {% currency %} shortcode for displaying currency conversions with tooltips - perfect for travel blogs and international content.

Installation

npm install eleventy-plugin-currency-shortcode

Usage

Add the plugin to your .eleventy.js configuration file:

import currencyPlugin from 'eleventy-plugin-currency-shortcode';

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(currencyPlugin);
    
    // Your other configuration...
}

Then use the shortcode in your templates:

{% currency "15", "CAD", "11", "USD" %}
{% currency "100", "€", "85", "£" %}
{% currency "50", "USD", "67", "CAD" %}

More Examples

<!-- Travel blog example -->
The hotel cost {% currency "120", "€", "130", "USD" %} per night, which was reasonable for Paris.

<!-- Restaurant pricing -->
Dinner was {% currency "45", "GBP", "55", "USD" %} including wine.

<!-- Shopping -->
I found this jacket for {% currency "80", "CAD", "60", "USD" %} - what a deal!

Output

The shortcode generates HTML like this:

<span class="currency-convert" title="15 CAD ≈ USD11">15 CAD (~USD11)</span>

Configuration

You can customize the plugin behavior by passing options:

eleventyConfig.addPlugin(currencyPlugin, {
    shortcodeName: 'currency',          // Change the shortcode name (default: 'currency')
    className: 'currency-convert'       // Change the CSS class (default: 'currency-convert')
});

Options

• shortcodeName (string, default: 'currency'): The name of the shortcode
• className (string, default: 'currency-convert'): CSS class for styling

CSS Styling

The plugin generates HTML with a CSS class that you can style:

.currency-convert {
    /* Basic styling */
    color: #2c5aa0;
    font-weight: 500;
    cursor: help;
}

.currency-convert:hover {
    text-decoration: underline;
}

Example Styling for Travel Blogs

.currency-convert {
    display: inline-block;
    background: linear-gradient(45deg, #f0f8ff, #e6f3ff);
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    padding: 2px 6px;
    color: #0066cc;
    font-weight: 500;
    cursor: help;
    transition: all 0.2s ease;
}

.currency-convert:hover {
    background: linear-gradient(45deg, #e6f3ff, #d1e9ff);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,102,204,0.2);
}

Parameters

The currency shortcode accepts four parameters:

1. fromValue (string): The original amount
2. fromSymbol (string): The original currency symbol/code
3. toValue (string): The converted amount
4. toSymbol (string): The target currency symbol/code

Use Cases

Perfect for:

• Travel blogs - Show costs in multiple currencies
• International e-commerce - Display price comparisons
• Financial content - Illustrate currency conversions
• Educational material - Teach about exchange rates

Requirements

• Node.js 18.0.0 or higher
• Eleventy 3.0.0 or higher

License

MIT