Proposal: Map Bard content to (typography) components

[carstenjaksch]

This is my first time with Peak, so I played around a bit and stumbled upon the page_builder/_article.antlers.html partial.

I like the modular approach with typography partials and was confused that the Bard content doesn't render with these partials – instead the HTML is left as is. That defeats the purpose of global typography partials for me, because there are elements on the page that aren't using them.

So I went on the journey (as a new Statamic user) to map the Bard content to corresponding typography partials. Here is my very early prototype:

There is a new tag named "BardPartial" that takes the Bard content (currently with the raw modifier, because I don't know how to get that from the variable without raw in PHP), loops through that and renders a component for each Bard block.

Special is the components/_text.antlers.thml partial – for that I needed to "group" junks of text and render that again with this partial.

Now all Bard blocks use the typography partials for global layout/styling, which is kinda cool I think.

Code:

{{#
    @name Article
    @desc The article page builder block. It extends the prose typography partial.
    @set page.page_builder.article
#}}

<!-- /page_builder/_article.antlers.html -->
{{ partial:page_builder/block }}
    {{ partial:typography/prose as="article" class="contents" }}
        {{ bard_partial :blocks="article | raw" }}
    {{ /partial:typography/prose }}
{{ /partial:page_builder/block }}
<!-- End: /page_builder/_article.antlers.html -->

<?php

namespace App\Tags;

use Statamic\Tags\Partial;

class BardPartial extends Partial
{
    protected $bardText = '';
    protected $bardHtml = '';

    /**
     * The {{ bard_partial }} tag.
     *
     * @return string|array
     */
    public function index()
    {
        $blocks = $this->params->get('blocks');

        foreach($blocks as $key => $block) {
            $attrs = $block['attrs'] ?? null;
            $content = $block['content'] ?? null;

            switch ($block['type']) {
                case 'heading':
                    $this->bardText .= $this->renderView("typography/h{$attrs['level']}", ['content' => $content[0]['text']]);
                    break;
                case 'paragraph':
                    $this->bardText .= $this->renderView('typography/p', ['content' => $content[0]['text']]);
                    break;
                case 'bulletList':
                    $this->bardText .= $this->renderView('typography/ul', ['content' => $content]);
                    break;
                case 'set':
                    $this->renderText();
                    $this->bardHtml .= $this->renderView("components/{$attrs['values']['type']}", [...$attrs['values']]);
                    break;
            }

            if ($key === array_key_last($blocks)) {
                $this->renderText();
            }
        };

        return $this->bardHtml;
    }

    protected function renderView($partial, $variables)
    {
        return view($this->viewName($partial), $variables)
            ->withoutExtractions()
            ->render();
    }

    protected function renderText()
    {
        if ($this->bardText) {
            $this->bardHtml .= $this->renderView('components/text', ['text' => $this->bardText]);
            $this->bardText = '';
        }
    }
}

As said, this code is a very early prototype and could be enhanced by an experienced Statamic developer.

What do you think about my idea?

[robdekort]

Hey, thanks for sharing. It's an interesting approach, but not something I'm look for. To clarify, how I use all this is broadly:

1. Mostly use Bard as a text input field so it can be rendered consistently throughout the site using the Tailwind Prose classes.
2. For other parts of styled blocks where Bard doesn't make sense I use typography partials together with text/textarea fields or other data coming from an entry.

So they're different things and in practice always almost differently styled.

[carstenjaksch]

A valid approach too, thanks for your answer! So I will merge that into my fork, I guess. :)

[marcorieser]

@carstenjaksch I really like that approach. It's something I tinkered with in the past too but never managed to go beyond the tinkering because, well "you can overwrite prose styles even when I hate the approach". I probably will give that a shot in the next project.

[carstenjaksch]

Great to read you like it. I would be happy to take a look at your solution, when the time has come.