SlideWire: Створюйте презентації за допомогою Livewire та Blade

SlideWire — пакет для Laravel, що дозволяє створювати браузерні презентації за допомогою Livewire і Blade-компонентів. Слайди — це Blade‑шаблони, які рендеряться як повноекранні Livewire‑компоненти; вони підтримують публічні властивості, with() і повну модель компонентів Livewire.

Створення слайдів

Дек використовує компоненти <x-slidewire::deck> і <x-slidewire::slide>. Приклад нижче показує просту презентацію з темою neon і переходом fade:

<x-slidewire::deck theme="neon" transition="fade">
    <x-slidewire::slide>
        <x-slidewire::markdown>
## Hello, SlideWire
Presentations built with Blade and Livewire.
        </x-slidewire::markdown>
    </x-slidewire::slide>
 
    <x-slidewire::slide>
        <x-slidewire::code language="php">
Route::slidewire('/slides/hello', 'demo/hello');
        </x-slidewire::code>
    </x-slidewire::slide>
</x-slidewire::deck>

Фрагменти

Використовуйте компонент <x-slidewire::fragment>, щоб поступово відкривати вміст на слайді. SlideWire послідовно показує кожен фрагмент перед переходом до наступного слайду:

<x-slidewire::slide>
    <x-slidewire::fragment>First point</x-slidewire::fragment>
    <x-slidewire::fragment>Second point</x-slidewire::fragment>
    <x-slidewire::fragment>Third point</x-slidewire::fragment>
</x-slidewire::slide>

Вертикальні стеки слайдів

Для двовимірних деків <x-slidewire::vertical-slide> групує слайди в вертикальний стек під горизонтальною позицією, що дозволяє заглибитися в тему, не порушуючи основного потоку:

<x-slidewire::deck>
    <x-slidewire::slide>Overview</x-slidewire::slide>
 
    <x-slidewire::vertical-slide>
        <x-slidewire::slide>Deep Dive: Part One</x-slidewire::slide>
        <x-slidewire::slide>Deep Dive: Part Two</x-slidewire::slide>
    </x-slidewire::vertical-slide>
 
    <x-slidewire::slide>Wrap Up</x-slidewire::slide>
</x-slidewire::deck>

Підсвітка коду та діаграми

Підсвітка синтаксису вбудована через Phiki — додаткових налаштувань не потрібно. Компонент <x-slidewire::code> приймає атрибут language та необов'язкові параметри theme, font і font size:

<x-slidewire::code language="php">
public function handle(): void
{
    $this->info('Hello from SlideWire!');
}
</x-slidewire::code>

Mermaid-діаграми також підтримуються і рендеряться в браузері, коли слайд стає активним:

<x-slidewire::diagram>
flowchart LR
    A[Request] --> B[Route] --> C[Controller]
</x-slidewire::diagram>

Можливості

• Сім вбудованих тем — default, black, white, aurora, sunset, neon та solarized — із шістьма пресетами переходів і регульованою швидкістю
• Двовимірна навігація — горизонтальні і вертикальні стеки слайдів, керування клавіатурою, кліком, тапом, свайпом та deep linking на основі хешів
• Фрагменти — поступове відображення вмісту в межах одного слайду перед переходом
• Підсвітка синтаксису — вбудована через Phiki, без додаткових налаштувань
• Підтримка діаграм Mermaid — рендериться на клієнті при активації слайду
• І багато іншого...

Встановлення

SlideWire вимагає PHP 8.4, Laravel 12 і Livewire 4.2 або новіших. Встановіть через Composer:

composer require wendelladriel/slidewire

Повна документація доступна на slidewire.dev, а вихідний код — на GitHub.