README

Server Side Integration and Transformers of Vue-Tik for Laravel.

Migration Guide

The migration from 1.x to 2.x is documented in Migration Guide Wiki

Features

Image Upload Routing
Image Cleanup Cron Job
Automatic base64 image separation and validation to desired object storage
Twitter Content Pre-Hydration
Glide Integration
HTML Sanitation

Installation

You can install the package via composer:

composer require vuetik/vuetik-laravel

You can publish and run the migrations with:

php artisan vendor:publish --tag="vuetik-laravel-migrations"
php artisan migrate

You can publish the config file with:

php artisan vendor:publish --tag="vuetik-laravel-config"

This is the contents of the published config file:

[
    'max_upload_size' => 2048,
    'storage' => [
        'disk' => 'local',
        'path' => 'images/',
    ],
    'table' => 'vuetik_images',
    'image_vendor_route' => '/img',
    'glide' => [
        'enable' => true,
        'sign_key' => env('APP_KEY'),
        'img_modifiers' => [],
    ],
    'purge_after' => '-2 days',
    'base64_to_storage' => [
        'enable' => true,
        'save_format' => 'png',
        'quality' => 100
    ],
];

Usage

Vuetik Laravel provides integration for the image upload routes and content parsing. For registering the image upload routes with VueTik requirement, you can easily call:

public function boot() {
    Vuetik\VuetikLaravel\VuetikLaravel::routes();
}

to any Service Provider.

For parsing content, it can easily be done via:

use Vuetik\VuetikLaravel\Facades\VuetikLaravel;

VuetikLaravel::parse($htmlOrDecodedJson);

// or if you use JSON

VuetikLaravel::parseJson($jsonString);

Even though the HTML Parser is working, it is possible the end result is kind of inaccurate. Therefore, using JSON approach is advised.

Available Options

Both the parse and parseJson API accepts array $options which have the following content:

Example Passing:

use Vuetik\VuetikLaravel\VuetikLaravel;

VuetikLaravel::parseJson($json, [
    'twitter' => [
        'throwOnFail' => true
    ],
    'image' => [
        'throwOnFail' => true
    ]
])

Image Management

Each uploaded image is stored with temporary state and by default Vuetik Laravel has predefined image management. This behavior can be turned off by setting the image.autoSave to false (true by default).

With that option enabled, Vuetik Laravel will take care of the entire process of image management without needing of manual interactions.

In case you want to perform manual saving, Vuetik Laravel already provided you with helper functions

use Vuetik\VuetikLaravel\ImageManager;

// quick store preuploads
// if you have a payload containing predefined id (which usally comes from editor.storage.ids)
// you can use storePreuploads to store the images without Vuetik Laravel to parse it. This could be  
// faster, but it's currently unable to save extra attributes (width, height, etc)
ImageManager::storePreuploads(["id1", "id2"]);

// Store all the images parsed from Vuetik Laravel
// This method returns an array containing all the data of the stored image.
// It's expected ContentFactory as the argument (return value of VuetikLaravel::parse() or VuetikLaravel::parseJson())
ImageManager::store($content);

// This method will return a glide url
// based on VuetikImages model with defined base url and additional attributes.
ImageManager::getGlideUrl($imgModel, $vendorUrl, $props);

You usually will the use Store API only though.

Managing failed image parsing

It is possible; for the image parsing fails to occur, for example invalid string base64 and so on. Vuetik Laravel already provided you with image.throwOnFail which will throw an exception and interrupt the entire parsing process.

This guide will cover if the options are set to false.

for Base64 images, Vuetik simply ignored them and the resulting image stays as it is.
for Preupload Images, Vuetik will add a class vuetik__failed__img to the parsed content and leave at is. You are encouraged to add a style to highlight the failed images.

Ultimately, I think it best to leave throwOnFail as true though.

Cleaning up unused image

To clean up an unused image, Vuetik Laravel has provided you with purge:unused-images commands which allow you to delete an image created after vuetik-laravel.purge_after with status of P.

Simply schedule the command in Kernel.php:

protected function schedule(Schedule $schedule): void
{
    $schedule->command('purge:unused-images')->daily();
}

The cleanup command also supports the following arguments:

--after override purge_after config for the task
--disk override storage.disk config for the task
--path override storage.path config for the task
--show-log enable verbosity over what going on with the task.

How is It Work?

Everytime you upload an image or using base64 images, Vuetik Laravel will always keep track of these images and put them into a database, these records have their created_at time and a status of either 'P' or 'A.'

And as you already aware Vuetik will only delete images with status of 'P' and created_at matches purge_after criteria.

Rendering Twitter

Vuetik Laravel only pre-hydrated your twitter content, so later it can be used to be parsed and hydrated by the Twitter WidgetJS hence the name pre-hydrated.

In order to render twitter in your view, you need to use Twitter JS Dependency to hydrate the content:

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Alternatively if you're using Blade, Vuetik Laravel also provide a helper diretive:

@twitterScript

Which under the hood renders the script mentioned earlier.

Managing Failed Twitter Parsing

Twitter parsing may fail due to invalid id. Therefore, the option twitter.failOnThrow is existed and true by default. In case you set it to false, Vuetik Laravel will render: Failed Fetching Twitter paragraph

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Credits

License

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

vuetik / vuetik-laravel

Maintainers

Details