Supercharge views with shortcodes

Talk about the Shortcode library.

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