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.

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();

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)`	`[widgetbay id="1"]` `[widgetbay link="https://www.amazon.it/product?tag="41515&subtag="5151"..."]`
`[index]`	Create an automatic index based on Heading (h2, h3, h4 etc...)	none	`[index]`

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>

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.

murdercode / laravel-shortcode-plus

Maintainers

Details

README

Why Shortcode+?

How it Works

Installation

Usage

Indexing feature

Parsers

Note for Facebook

Note for Twitter

Note for Reddit

Note for Justwatch

Testing

Changelog

Contributing

Security Vulnerabilities

Credits

License