mirror of
https://github.com/usetrmnl/byos_laravel.git
synced 2026-01-13 15:07:49 +00:00
feat: initial implementation of recipe catalog
Some checks are pending
tests / ci (push) Waiting to run
Some checks are pending
tests / ci (push) Waiting to run
This commit is contained in:
Benjamin Nussbaum
parent
7434911275
commit
6d7968a7b0
6 changed files with 399 additions and 8 deletions
148
resources/views/livewire/catalog/index.blade.php
Normal file
148
resources/views/livewire/catalog/index.blade.php
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<?php
|
||||
|
||||
use App\Services\PluginImportService;
|
||||
use Livewire\Volt\Component;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
use Illuminate\Support\Facades\Http;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Symfony\Component\Yaml\Yaml;
|
||||
|
||||
new class extends Component {
|
||||
public array $catalogPlugins = [];
|
||||
public string $installingPlugin = '';
|
||||
|
||||
public function mount(): void
|
||||
{
|
||||
$this->loadCatalogPlugins();
|
||||
}
|
||||
|
||||
private function loadCatalogPlugins(): void
|
||||
{
|
||||
$catalogUrl = config('app.catalog_url');
|
||||
|
||||
$this->catalogPlugins = Cache::remember('catalog_plugins', 43200, function () use ($catalogUrl) {
|
||||
try {
|
||||
$response = Http::get($catalogUrl);
|
||||
$catalogContent = $response->body();
|
||||
$catalog = Yaml::parse($catalogContent);
|
||||
|
||||
return collect($catalog)->map(function ($plugin, $key) {
|
||||
return [
|
||||
'id' => $key,
|
||||
'name' => $plugin['name'] ?? 'Unknown Plugin',
|
||||
'description' => $plugin['author_bio']['description'] ?? '',
|
||||
'author' => $plugin['author']['name'] ?? 'Unknown Author',
|
||||
'github' => $plugin['author']['github'] ?? null,
|
||||
'license' => $plugin['license'] ?? null,
|
||||
'zip_url' => $plugin['trmnlp']['zip_url'] ?? null,
|
||||
'repo_url' => $plugin['trmnlp']['repo'] ?? null,
|
||||
'logo_url' => $plugin['logo_url'] ?? null,
|
||||
'screenshot_url' => $plugin['screenshot_url'] ?? null,
|
||||
'learn_more_url' => $plugin['author_bio']['learn_more_url'] ?? null,
|
||||
];
|
||||
})->toArray();
|
||||
} catch (\Exception $e) {
|
||||
Log::error('Failed to load catalog from URL: ' . $e->getMessage());
|
||||
return [];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public function installPlugin(string $pluginId, PluginImportService $pluginImportService): void
|
||||
{
|
||||
abort_unless(auth()->user() !== null, 403);
|
||||
|
||||
$plugin = collect($this->catalogPlugins)->firstWhere('id', $pluginId);
|
||||
|
||||
if (!$plugin || !$plugin['zip_url']) {
|
||||
$this->addError('installation', 'Plugin not found or no download URL available.');
|
||||
return;
|
||||
}
|
||||
|
||||
$this->installingPlugin = $pluginId;
|
||||
|
||||
try {
|
||||
$importedPlugin = $pluginImportService->importFromUrl($plugin['zip_url'], auth()->user());
|
||||
|
||||
$this->dispatch('plugin-installed');
|
||||
Flux::modal('import-from-catalog')->close();
|
||||
|
||||
} catch (\Exception $e) {
|
||||
$this->addError('installation', 'Error installing plugin: ' . $e->getMessage());
|
||||
} finally {
|
||||
$this->installingPlugin = '';
|
||||
}
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
@if(empty($catalogPlugins))
|
||||
<div class="text-center py-8">
|
||||
<flux:icon name="exclamation-triangle" class="mx-auto h-12 w-12 text-gray-400" />
|
||||
<flux:heading class="mt-2">No plugins available</flux:heading>
|
||||
<flux:subheading>Catalog is empty</flux:subheading>
|
||||
</div>
|
||||
@else
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
@error('installation')
|
||||
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}" />
|
||||
@enderror
|
||||
|
||||
@foreach($catalogPlugins as $plugin)
|
||||
<div class="bg-white dark:bg-white/10 border border-zinc-200 dark:border-white/10 [:where(&)]:p-6 [:where(&)]:rounded-xl space-y-6">
|
||||
<div class="flex items-start space-x-4">
|
||||
@if($plugin['logo_url'])
|
||||
<img src="{{ $plugin['logo_url'] }}" alt="{{ $plugin['name'] }}" class="w-12 h-12 rounded-lg object-cover">
|
||||
@else
|
||||
<div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<flux:icon name="puzzle-piece" class="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $plugin['name'] }}</h3>
|
||||
@if ($plugin['github'])
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">by {{ $plugin['github'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
@if($plugin['license'])
|
||||
<flux:badge color="gray" size="sm">{{ $plugin['license'] }}</flux:badge>
|
||||
@endif
|
||||
@if($plugin['repo_url'])
|
||||
<a href="{{ $plugin['repo_url'] }}" target="_blank" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<flux:icon name="github" class="w-5 h-5" />
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($plugin['description'])
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ $plugin['description'] }}</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-4 flex items-center space-x-3">
|
||||
<flux:button
|
||||
wire:click="installPlugin('{{ $plugin['id'] }}')"
|
||||
variant="primary">
|
||||
Install
|
||||
</flux:button>
|
||||
|
||||
@if($plugin['learn_more_url'])
|
||||
<flux:button
|
||||
href="{{ $plugin['learn_more_url'] }}"
|
||||
target="_blank"
|
||||
variant="subtle">
|
||||
Learn More
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@ new class extends Component {
|
|||
'polling_body' => 'nullable|string',
|
||||
];
|
||||
|
||||
private function refreshPlugins(): void
|
||||
public function refreshPlugins(): void
|
||||
{
|
||||
$userPlugins = auth()->user()?->plugins?->map(function ($plugin) {
|
||||
return $plugin->toArray();
|
||||
|
|
@ -96,10 +96,8 @@ new class extends Component {
|
|||
$this->reset(['zipFile']);
|
||||
|
||||
Flux::modal('import-zip')->close();
|
||||
$this->dispatch('notify', ['type' => 'success', 'message' => 'Plugin imported successfully!']);
|
||||
|
||||
} catch (\Exception $e) {
|
||||
$this->dispatch('notify', ['type' => 'error', 'message' => 'Error importing plugin: ' . $e->getMessage()]);
|
||||
$this->addError('zipFile', 'Error installing plugin: ' . $e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +118,10 @@ new class extends Component {
|
|||
<flux:button icon="chevron-down" variant="primary"></flux:button>
|
||||
<flux:menu>
|
||||
<flux:modal.trigger name="import-zip">
|
||||
<flux:menu.item icon="archive-box">Import Recipe</flux:menu.item>
|
||||
<flux:menu.item icon="archive-box">Import Recipe Archive</flux:menu.item>
|
||||
</flux:modal.trigger>
|
||||
<flux:modal.trigger name="import-from-catalog">
|
||||
<flux:menu.item icon="book-open">Import from Catalog</flux:menu.item>
|
||||
</flux:modal.trigger>
|
||||
<flux:menu.item icon="beaker" wire:click="seedExamplePlugins">Seed Example Recipes</flux:menu.item>
|
||||
</flux:menu>
|
||||
|
|
@ -167,7 +168,7 @@ new class extends Component {
|
|||
|
||||
<form wire:submit="importZip">
|
||||
<div class="mb-4">
|
||||
<label for="zipFile" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">.zip Archive</label>
|
||||
<flux:label for="zipFile">.zip Archive</flux:label>
|
||||
<input
|
||||
type="file"
|
||||
wire:model="zipFile"
|
||||
|
|
@ -175,7 +176,9 @@ new class extends Component {
|
|||
accept=".zip"
|
||||
class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 p-2.5"
|
||||
/>
|
||||
@error('zipFile') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
|
||||
@error('zipFile')
|
||||
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}" class="mt-2" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
|
|
@ -186,6 +189,18 @@ new class extends Component {
|
|||
</div>
|
||||
</flux:modal>
|
||||
|
||||
<flux:modal name="import-from-catalog">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">Import from Catalog
|
||||
<flux:badge color="yellow" class="ml-2">Alpha</flux:badge>
|
||||
</flux:heading>
|
||||
<flux:subheading>Browse and install Recipes from the community. Add yours <a href="https://github.com/bnussbau/trmnl-recipe-catalog" class="underline" target="_blank">here</a>.</flux:subheading>
|
||||
</div>
|
||||
<livewire:catalog.index @plugin-installed="refreshPlugins" />
|
||||
</div>
|
||||
</flux:modal>
|
||||
|
||||
<flux:modal name="add-plugin" class="md:w-96">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue