README

Why Shortcode+?

This package allows you to use shortcodes in your application, like a Wordpress / BBS style websites.

In our days, shortcodes are a great way to preserve the integrity of the data within the content published on our site (such as a blog or forum) without risking having to rewrite the format each time.

With Laravel Shortcode+ we have the ability to turn a standard shortcode into a dynamic asset that can update over time (new HTML standards, cookie consent, AMP versions, and more)!

Warning: this is a very opinionated package and it's not intended to be multi-purpose.

How it Works

For example, you can use the following shortcode to embed a Youtube video:

[youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"]

This will be rendered as:

<iframe
    src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ&autoplay=1"
    srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1><img style='object-fit:cover;height:100%;' loading='lazy' src=https://img.youtube.com/vi/123456789/hqdefault.jpg alt='dQw4w9WgXcQ'
        loading=lazy><span>▶</span></a>"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;
        picture-in-picture"
    allowfullscreen
    title="dQw4w9WgXcQ"
></iframe>

As you can see, we don't just generate an iframe but make it accessible, performant and in line with the best SEO practices around.

Requirements

Installation

You can install the package via composer:

composer require murdercode/laravel-shortcode-plus

You can use shortcodes CSS publishing the assets:

php artisan vendor:publish --tag="shortcode-plus-assets"

You can publish and run the migrations with:

php artisan vendor:publish --tag="shortcode-plus-migrations"
php artisan migrate

You can publish the config file with:

php artisan vendor:publish --tag="shortcode-plus-config"

If you want to upgrade every time your assets, add in your composer.json:

    "scripts": {
"post-update-cmd": [
"@php artisan vendor:publish --tag=shortcode-plus-assets --ansi --force",

Optionally, you can publish the views using

php artisan vendor:publish --tag="shortcode-plus-views"

Usage

Laravel Shortcode Plus is shipped with a default CSS and JS for a better user experience. You can add on resources/css/app.css the CSS files:

@import url("/public/vendor/shortcode-plus/app.css");

and in resources/js/app.js the JS files:

import '/public/vendor/shortcode-plus/app2.js';

Now you can parse your source as follows:

use Murdercode\LaravelShortcodePlus\Facades\LaravelShortcodePlus;

$html = "I want to parse this twitter tag: [twitter url=\"https://twitter.com/elonmusk/status/1585841080431321088\"]";
return LaravelShortcodePlus::source($html)->parseAll();

Use Iubenda Cookie

Add in your iubenda cookie script the following code: (/organisms/cookie-solution.blade.php)

if (purposeId === "3") {
    var elements = document.getElementsByClassName('shortcode_nocookie');
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = 'none';
    }
}

Use Paywall with Iubenda Cookie

In config, set cookiePaywall to true

In your iubenda cookie script, add the following code: (/organisms/cookie-solution.blade.php)

<script>
    function manageShortcodePaywall() {
        const shortcodesWithPaywall = document.querySelectorAll('.shortcode_with_paywall');
        const paywalls = document.querySelectorAll('.shortcode_paywall');

        shortcodesWithPaywall.forEach(shortcode => {
            if (_iub.cs.api.isConsentGiven()) {
                shortcode.style.display = 'block';
                paywalls.forEach(paywall => paywall.style.display = 'none');
            } else {
                shortcode.style.display = 'none';
                paywalls.forEach(paywall => paywall.style.display = 'block');
            }
        });
    }
    
    var _iub = _iub || [];

_iub.csConfiguration.callback.onPreferenceExpressed = manageShortcodePaywall;
_iub.csConfiguration.callback.onReady = manageShortcodePaywall;

<script>
    var paywallPrefBtn = document.querySelector('.shortcode_paywall button');
    paywallPrefBtn.addEventListener('click', function(ev) {
        ev.preventDefault();
        _iub.cs.api.acceptAll();
    });
</script>

Indexing feature

If you want to use the [index] shortcode, you can add the withAutoHeadingIds() method to your source before parsing it. It will add an automatic ID to every headline (h2, h3, h4 etc...) in your source:

return LaravelShortcodePlus::source($html)->withAutoHeadingIds()->parseAll();

This will add an ID to every heading (h2, h3, h4 etc...) in your source.

Parsers

Here is the list of the available parsers:

Note for Facebook

Please remember to call the SDK before </body>:

<div id="fb-root"></div>
<script
    async
    defer
    crossorigin="anonymous"
    src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0"
    nonce="UcAjseAO"
></script>

Note for Twitter

Please remember to call the SDK before </body>:

<script type="text/javascript">
    window.twttr = (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function (f) {
            t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));
</script>

Note for Reddit

Please remember to call the SDK before </body>:

<script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>

Note for Justwatch

Please remember to call the SDK before </body>:

<script async src="https://widget.justwatch.com/justwatch_widget.js" type="text/javascript"></script>

Note for Parse links

Please remember to add in config file the links to parse:

    'linksToParse' => [
        'sponsored' => [
            '#https://www\\.amazon\\.[A-Za-z]+#i',
            '#https://www\\.ebay\\.[A-Za-z]+#i',
            'https://www.instant-gaming.com',
        ],
        'dofollow' => [
            'https://forum.tomshw.it/',
        ],
        'nofollow' => [
            'https://www.youtube.com',
            'https://multiplayer.it',
            'https://www.everyeye.it',
        ],
    ],

You can use a regex or a string to parse the links.

And, when parse your content, you can use forceRel():

    $content = LaravelShortcodePlus::source($content)
        ->forceRel()
        ->parseAll();

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Stefano Novelli
• All Contributors

License

The MIT License (MIT). Please see License File for more information.