Adding footnotes to bard with Texstyle Pins

My Bard Texstyle addon for Statamic was recently updated with a new feature called Pins. These make it really easy to add custom elements within a line of text, like icons, footnotes, and dynamic values. This post is a quick overview of how to add a footnote pin type and templating needed to make them work.

• Define the pin type
• Create a footnote partial
• Render a list of footnotes

#Define the pin type

First of all you'll need to define the pin type. Open up config/statamic/bard_texstyle.php and add a new footnote type to the pins array. For a full list of options check the pins documentation.

'footnote' => [
    'display' => 'Footnote',
    'icon' => 'mail-chat-bubble-text',
    'instructions' => 'A footnote.',
    'fields' => [
        'text' => [
            'display' => 'Text',
            'type' => 'textarea',
        ],
    ],
],
'footnote' => [
    'display' => 'Footnote',
    'icon' => 'mail-chat-bubble-text',
    'instructions' => 'A footnote.',
    'fields' => [
        'text' => [
            'display' => 'Text',
            'type' => 'textarea',
        ],
    ],
],

Once you've defined this you can enable it for a bard field through the blueprint editor and start adding the pins to your content. Again check the documentation for full details.

#Create a footnote partial

Pins are rendered automatically during bard's augmentation process. For your footnote pin you'll need to create a new partial at resources/views/pins/_footnote.antlers.html. This will be used to render the pin within the line of text.

Here we're outputting a link tag with some basic Tailwind styling and a CSS counter to output the correct footnote number. We're using the pin's unique ID to link to the actual footnote, which we'll be dealing with next.

<a href="#fn-{{ id }}" class="align-super [counter-increment:footnote] before:content-[counter(footnote)]"></a>
<a href="#fn-{{ id }}" class="align-super [counter-increment:footnote] before:content-[counter(footnote)]"></a>

#Render a list of footnotes

The last piece of the puzzle is outputting a list of footnotes below the content. To do this you can use Texstyle's pins tag, which will loop over all the pins of a given type from a bard value.

Here we're outputting the bard value as usual, but wrapping it in a div so that we can define the CSS counter that's used in the link tags from before. Then we simply loop over the list of footnote pins and output them with their IDs set to match the links.

<div class="[counter-reset:footnote]">
    {{ content }}
</div>
<ol class="list-decimal">
    {{ pins:content type="footnote" }}
        <li id="fn-{{ id }}">{{ text }}</li>
    {{ /pins:content }}
</ol>
<div class="[counter-reset:footnote]">
    {{ content }}
</div>
<ol class="list-decimal">
    {{ pins:content type="footnote" }}
        <li id="fn-{{ id }}">{{ text }}</li>
    {{ /pins:content }}
</ol>

And that's it! I hope you find the new pins feature useful.