$30 off During Our Annual Pro Sale. View Details »

Supercharge views with shortcodes

Supercharge views with shortcodes

Talk about the Shortcode library.

Tomasz Kowalczyk

March 09, 2018
Tweet

More Decks by Tomasz Kowalczyk

Other Decks in Programming

Transcript

  1. shortcodes
    Tomasz Kowalczyk / @tmmx
    supercharge your views with

    View Slide

  2. View Slide

  3. [ introduction ]

    View Slide

  4. [image src=”...” /]
    [post title=”Article” width=600]
    [related items=2 /]
    [quote=”Tommy”] Hi! [/quote]
    [footer]

    View Slide

  5. UBB
    phpBB
    WordPress

    View Slide

  6. dynamic content

    View Slide

  7. [ challenges ]

    View Slide

  8. regex vs parser
    regex approach has several constraints

    View Slide

  9. proper nesting
    possible only with dedicated parser

    View Slide

  10. alternate syntax
    take into account all shortcode variants

    View Slide

  11. performance
    very important for high load applications

    View Slide

  12. Shortcode
    say hello to

    View Slide

  13. open source, MIT license
    over 130k downloads
    over 9000 monthly
    ~200 GitHub stars

    View Slide

  14. View Slide

  15. composer require
    thunderer/shortcode=^0.6.5

    View Slide

  16. $handlers = new HandlerContainer();
    $handlers->add('b', function(ShortcodeInterface $s) {
    return ''.$s->getContent().'';
    });
    $parser = new RegularParser();
    $processor = new Processor($handlers, $parser);
    $text = 'My name is Bold. Text [b]Bold[/b].';
    $result = $processor->process($text);
    // My name is Bold. Text Bold.

    View Slide

  17. complete README
    with code examples

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. multiple parsers
    i want you to have the power to choose

    View Slide

  22. $wordpress = new WordpressParser();
    $regex = new RegexParser();
    $regular = new RegularParser();

    View Slide

  23. custom syntax
    can handle virtually all known variants

    View Slide

  24. $syntax = new Syntax('[[', ']]', '//', '==', '""');
    $parser = new RegexParser($syntax);
    $processor = new Processor($handlers, $parser);
    $text = 'My name is Bold. Text [[b]]Bold[[//b]].';
    $result = $processor->process($text);

    View Slide

  25. events subsystem
    altering the text processing flow

    View Slide

  26. FilterShortcodesEvent
    ReplaceShortcodesEvent
    FilterRawEventHandler
    ReplaceJoinEventHandler

    View Slide

  27. $eventHandler = function(FilterShortcodesEvent $event) {
    $p = $event->getParent();
    if($p && ($p->getName() === 'raw' || $p->hasAncestor('raw'))) {
    $event->setShortcodes([]);
    }
    };
    $events = new EventContainer();
    $events->addListener(Events::FILTER_SHORTCODES, $eventHandler);
    $processor = new Processor(new RegularParser(), new HandlerContainer());
    $processor = $processor->withEventContainer($events);
    assert(' [name /] ' === $processor->process('[raw] [name /] [/raw]'));

    View Slide

  28. built-in handlers
    no need to reinvent the wheel

    View Slide

  29. NameHandler
    ContentHandler
    RawHandler
    NullHandler
    DeclareHandler
    EmailHandler
    PlaceholderHandler
    SerializerHandler
    UrlHandler
    WrapHandler

    View Slide

  30. extensible
    interface for every abstraction

    View Slide

  31. HandlerContainerInterface
    ParserInterface
    ProcessorInterface
    SerializerInterface
    ShortcodeInterface
    SyntaxInterface

    View Slide

  32. easy to integrate
    framework agnostic, transparent implementation

    View Slide

  33. final class ShortcodeTwigExtension extends \Twig_Extension
    {
    public function getFilters()
    {
    return [new \Twig_SimpleFilter('shortcode', [$this, 'processShortcodes'])];
    }
    public function processShortcodes($text)
    {
    $handlers = new HandlerContainer();
    $handlers->add('b', new WrapHandler('', ''));
    $parser = new RegularParser();
    $processor = new Processor($handlers, $parser);
    return $processor->process($text);
    }
    }

    View Slide

  34. // template.html.twig
    {% block content %}
    {{ article.content|shortcode }}
    {% endblock %}

    View Slide

  35. [ summary ]

    View Slide

  36. [ questions? ]
    Packagist thunderer/shortcode
    Twitter @tmmx
    GitHub /thunderer

    View Slide

  37. Resources:
    https://github.com/thunderer/Shortcode (github)
    https://en.wikipedia.org/wiki/BBCode
    https://codex.wordpress.org/Shortcode
    Pictures (Creative Commons):
    https://www.flickr.com/photos/x1brett/9493399534 (bg)

    View Slide

  38. Thanks!
    Packagist thunderer/shortcode
    Twitter @tmmx
    GitHub /thunderer

    View Slide