Skip to content

murdercode/laravel-shortcode-plus

Repository files navigation

Logo Laravel Shortcode Plus

Latest Version on Packagist GitHub Tests Action Status GitHub PHPStan GitHub Code Style Action Status Maintainability Test Coverage License Mit Total Downloads


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.


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';
    }
}

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:

Shortcode Description Parameters Example
[twitter] Get a Twitter card url [twitter url="https://twitter.com/elonmusk/status/1585841080431321088"]
[youtube] Get a Youtube (light) player url [youtube url="https://www.youtube.com/watch?v=9bZkp7q19f0"]
[spotify] Get a Spotify player url or uri [spotify url="https://open.spotify.com/track/2TpxZ7JUBn3uw46aR7qd6V"]
[faq] Create a <details> tag with embedded content title [faq title="What is the answer to the ultimate question?"]42[/faq]
[spoiler] Create a <details> tag with embedded content title [spoiler title="Spoiler"]This is hidden content[/spoiler]
[facebook] Get a Facebook card url [facebook url="https://www.facebook.com/elonmusk/posts/10157744420210129"]
[instagram] Get a Instagram card url [instagram url="https://www.instagram.com/p/CApQfIjBGxC/"]
[image] Create an image with Image::class model id, caption (optional) [image id="123"]
[gallery] Create a gallery image with Image::class model title, images Single or multiple images: [gallery title="Gallery title here" images="1"] or [gallery title="Gallery title here" images="1,2,3"]
[photo] Create a gallery image with [Nova Media Hub](https://github.com/outl1ne/nova-media-hub) model didascalia effect(optional) link(optional) shape(optional) Single or multiple images: `[photo didascalia="Gallery title here" id="1,2,3"] Effect [photo id="1,2,3" effect="carousel" link="https://..." shape="default
[leggianche] Create a Read more div, based on Article or Post model id [leggianche id="1"]
[distico] Create a side text block, based on Article or Post model id [distico id="1"]
[button] Create a button that links to an URL link, label, level (optional) [button link="https://www.google.com" label="Google" level="primary/secondary"]
[tmdb] Create a TMDB card type, id [tmdb type="movie/tv" id="123"]
[widgetbay] Create a Widgetbay iframe id (optional), link (optional), forceLink (optional), title (optional) [widgetbay id="1"] [widgetbay title="Product Title" link="https://www.amazon.it/product?tag="41515&subtag="5151"..."]
[index] Create an automatic index based on Heading (h2, h3, h4 etc...) none [index]
[trivia] Create a trivia id [trivia id="1"]

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

License

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