daun/statamic-bard-mutators

A collection of plugins for the Statamic Bard Mutator addon

1.0.2 2025-03-13 22:36 UTC

This package is auto-updated.

Last update: 2025-03-13 22:37:15 UTC


README

A collection of mutators for transforming Statamic Bard content.

All mutators are implemented as plugins for the Bard Mutator Addon.

Installation

Install the package via composer:

composer require daun/statamic-bard-mutators

Registration

Register any mutators you want to use from the Mutator facade. Options can be passed as arguments to the constructor. You can read more about class-based mutator plugins in the addon readme.

use JackSleight\StatamicBardMutator\Facades\Mutator;
use Daun\BardMutators\MarkExternalLinks;

Mutator::plugin(new MarkExternalLinks());

Mutators

Mark External Links

Mark external links with target="_blank" and rel="external".

<!-- Before -->
<a href="https://example.com">External link</a>

<!-- After -->
<a href="https://example.com" target="_blank" rel="external">External link</a>
new MarkExternalLinks();

// Optionally customize the `target` and `rel` attributes
new MarkExternalLinks(
    target: '_blank',
    rel: 'noopener noreferrer'
);

Generate Heading IDs

Adds an id attribute to headings based on their content.

<!-- Before -->
<h2>Heading</h2>

<!-- After -->
<h2 id="heading">Heading</h2>
new GenerateHeadingIds();

// Optionally customize which heading levels to generate IDs for
new GenerateHeadingIds(levels: [2, 3]);

Semantic Blockquotes

Wraps blockquotes in a figure element and moves the author/source into a figcaption element.

<!-- Before -->
<blockquote>
    <p>Quote</p>
    <p>— Author</p>
</blockquote>

<!-- After -->
<figure>
    <blockquote>
        <p>Quote</p>
    </blockquote>
    <figcaption>
        Author
    </figcaption>
</figure>
new SemanticBlockquotes();

// Optionally add a class to the figure element
new SemanticBlockquotes(
    class: 'quote'
);

Wrap Tables

Wraps tables in a div element to allow for horizontal scrolling on smaller screens.

<!-- Before -->
<table>...</table>

<!-- After -->
<div class="table-wrapper">
    <table>...</table>
</div>
new WrapTables();

// Optionally use a custom tag or add a class to the wrapper element
new WrapTables(
    tag: 'section',
    class: 'table'
);

License

MIT