dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(links): replace inline SVGs with reusable external link component for consistency and improved maintainability

Browse Source
This commit is contained in:
Andras Bacsai
2025-08-12 15:01:58 +02:00
parent f018d640e5
commit a93bc372cd
12 changed files with 100 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
resources/views/components/applications/links.blade.php
View File

@@ -8,133 +8,85 @@
data_get($application, 'previews', collect([]))->count() > 0 || data_get($application, 'previews', collect([]))->count() > 0 ||
data_get($application, 'ports_mappings_array')) && data_get($application, 'ports_mappings_array')) &&
data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true) data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)
@if (data_get($application, 'gitBrancLocation')) <div class="flex flex-col gap-1">
<a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}"> @if (data_get($application, 'gitBrancLocation'))
<x-git-icon git="{{ $application->source?->getMorphClass() }}" /> <a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
Git Repository <x-git-icon git="{{ $application->source?->getMorphClass() }}" />
</a> Git Repository
@endif
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endif
@if (data_get($application, 'fqdn'))
@foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ getFqdnWithoutPort($fqdn) }}
</a> </a>
@endforeach
@endif
@if (data_get($application, 'previews', collect())->count() > 0)
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach ($application->previews as $preview)
@foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>PR{{ data_get($preview, 'pull_request_id') }} |
{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endforeach
@else
@foreach (data_get($application, 'previews') as $preview)
@if (data_get($preview, 'fqdn'))
<a class="dropdown-item" target="_blank"
href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
PR{{ data_get($preview, 'pull_request_id') }} |
{{ data_get($preview, 'fqdn') }}
</a>
@endif
@endforeach
@endif @endif
@endif @if (data_get($application, 'build_pack') === 'dockercompose')
@if (data_get($application, 'ports_mappings_array')) @foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
@foreach ($application->ports_mappings_array as $port) @if (data_get($fqdn, 'domain'))
@if ($application->destination->server->id === 0) @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}"> <a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" <x-external-link class="size-4" />{{ getFqdnWithoutPort($domain) }}
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
Port {{ $port }}
</a>
@else
<a class="dropdown-item" target="_blank"
href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
</a>
@if (count($application->additional_servers) > 0)
@foreach ($application->additional_servers as $server)
<a class="dropdown-item" target="_blank"
href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
{{ $server->ip }}:{{ explode(':', $port)[0] }}
</a> </a>
@endforeach @endforeach
@endif @endif
@endforeach
@endif
@if (data_get($application, 'fqdn'))
@foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
<x-external-link class="size-4" />{{ getFqdnWithoutPort($fqdn) }}
</a>
@endforeach
@endif
@if (data_get($application, 'previews', collect())->count() > 0)
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach ($application->previews as $preview)
@foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<x-external-link class="size-4" />PR{{ data_get($preview, 'pull_request_id') }}
|
{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endforeach
@else
@foreach (data_get($application, 'previews') as $preview)
@if (data_get($preview, 'fqdn'))
<a class="dropdown-item" target="_blank"
href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
<x-external-link class="size-4" />
PR{{ data_get($preview, 'pull_request_id') }} |
{{ data_get($preview, 'fqdn') }}
</a>
@endif
@endforeach
@endif @endif
@endforeach @endif
@endif @if (data_get($application, 'ports_mappings_array'))
@foreach ($application->ports_mappings_array as $port)
@if ($application->destination->server->id === 0)
<a class="dropdown-item" target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
<x-external-link class="size-4" />
Port {{ $port }}
</a>
@else
<a class="dropdown-item" target="_blank"
href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
<x-external-link class="size-4" />
{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
</a>
@if (count($application->additional_servers) > 0)
@foreach ($application->additional_servers as $server)
<a class="dropdown-item" target="_blank"
href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
<x-external-link class="size-4" />
{{ $server->ip }}:{{ explode(':', $port)[0] }}
</a>
@endforeach
@endif
@endif
@endforeach
@endif
</div>
@else @else
<div class="px-2 py-1.5 text-xs">No links available</div> <div class="px-2 py-1.5 text-xs">No links available</div>
@endif @endif

11
resources/views/components/external-link.blade.php
View File

@@ -1,7 +1,6 @@
<svg class="inline-flex w-3 h-3 ml-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" @props(['class' => 'inline-flex w-3 h-3 dark:text-neutral-400 text-black'])
focusable="false" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none"> <svg {{ $attributes->merge(['class' => $class]) }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
</path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" fill="currentColor"> d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 B

After

Width:  |  Height:  |  Size: 356 B

8
resources/views/components/services/links.blade.php
View File

@@ -5,13 +5,7 @@
</x-slot> </x-slot>
@foreach ($links as $link) @foreach ($links as $link)
<a class="dropdown-item" target="_blank" href="{{ $link }}"> <a class="dropdown-item" target="_blank" href="{{ $link }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" <x-external-link class="size-4" />{{ $link }}
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ $link }}
</a> </a>
@endforeach @endforeach
</x-dropdown> </x-dropdown>

3
resources/views/errors/400.blade.php
View File

@@ -6,7 +6,8 @@
@if ($exception->getMessage()) @if ($exception->getMessage())
<p class="text-base leading-7 text-red-500">{{ $exception->getMessage() }}</p> <p class="text-base leading-7 text-red-500">{{ $exception->getMessage() }}</p>
@else @else
<p class="text-base leading-7 text-neutral-300">The request could not be understood by the server due to <p class="text-base leading-7 dark:text-neutral-400 text-black">The request could not be understood by the
server due to
malformed syntax. malformed syntax.
</p> </p>
@endif @endif

2
resources/views/errors/401.blade.php
View File

@@ -3,7 +3,7 @@
<div> <div>
<p class="font-mono font-semibold text-7xl dark:text-warning">401</p> <p class="font-mono font-semibold text-7xl dark:text-warning">401</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1> <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
<p class="text-base leading-7 text-neutral-300">You don't have permission to access this page. <p class="text-base leading-7 dark:text-neutral-400 text-black">You don't have permission to access this page.
</p> </p>
<div class="flex items-center mt-10 gap-x-6"> <div class="flex items-center mt-10 gap-x-6">
<a href="/"> <a href="/">

2
resources/views/errors/403.blade.php
View File

@@ -3,7 +3,7 @@
<div> <div>
<p class="font-mono font-semibold text-7xl dark:text-warning">403</p> <p class="font-mono font-semibold text-7xl dark:text-warning">403</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1> <h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
<p class="text-base leading-7 text-neutral-300">You don't have permission to access this page. <p class="text-base leading-7 dark:text-neutral-400 text-black">You don't have permission to access this page.
</p> </p>
<div class="flex items-center mt-10 gap-x-6"> <div class="flex items-center mt-10 gap-x-6">
<a href="/"> <a href="/">

2
resources/views/errors/404.blade.php
View File

@@ -3,7 +3,7 @@
<div> <div>
<p class="font-mono font-semibold text-7xl dark:text-warning">404</p> <p class="font-mono font-semibold text-7xl dark:text-warning">404</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">How did you get here?</h1> <h1 class="mt-4 font-bold tracking-tight dark:text-white">How did you get here?</h1>
<p class="text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking <p class="text-base leading-7 dark:text-neutral-400 text-black">Sorry, we couldn’t find the page you’re looking
for. for.
</p> </p>
<div class="flex items-center mt-10 gap-x-6"> <div class="flex items-center mt-10 gap-x-6">

2
resources/views/errors/419.blade.php
View File

@@ -3,7 +3,7 @@
<div> <div>
<p class="font-mono font-semibold text-7xl dark:text-warning">419</p> <p class="font-mono font-semibold text-7xl dark:text-warning">419</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1> <h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
<p class="text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking <p class="text-base leading-7 dark:text-neutral-300 text-black">Sorry, we couldn’t find the page you’re looking
for. for.
</p> </p>
<div class="flex items-center mt-10 gap-x-6"> <div class="flex items-center mt-10 gap-x-6">

3
resources/views/errors/429.blade.php
View File

@@ -3,7 +3,8 @@
<div> <div>
<p class="font-mono font-semibold text-7xl dark:text-warning">429</p> <p class="font-mono font-semibold text-7xl dark:text-warning">429</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">Woah, slow down there!</h1> <h1 class="mt-4 font-bold tracking-tight dark:text-white">Woah, slow down there!</h1>
<p class="text-base leading-7 text-neutral-300">You're making too many requests. Please wait a few <p class="text-base leading-7 dark:text-neutral-400 text-black">You're making too many requests. Please wait a
few
seconds before trying again. seconds before trying again.
</p> </p>
<div class="flex items-center mt-10 gap-x-6"> <div class="flex items-center mt-10 gap-x-6">

7
resources/views/errors/500.blade.php
View File

@@ -3,7 +3,8 @@
<div class="w-full max-w-3xl px-8"> <div class="w-full max-w-3xl px-8">
<p class="font-mono font-semibold text-red-500 text-[200px] leading-none">500</p> <p class="font-mono font-semibold text-red-500 text-[200px] leading-none">500</p>
<h1 class="text-3xl font-bold tracking-tight dark:text-white">Wait, this is not cool...</h1> <h1 class="text-3xl font-bold tracking-tight dark:text-white">Wait, this is not cool...</h1>
<p class="mt-2 text-lg leading-7 text-neutral-300">There has been an error with the following error message:</p> <p class="mt-2 text-lg leading-7 dark:text-neutral-400 text-black">There has been an error with the following
error message:</p>
@if ($exception->getMessage() !== '') @if ($exception->getMessage() !== '')
<div class="mt-6 text-sm text-red-500"> <div class="mt-6 text-sm text-red-500">
{!! Purify::clean($exception->getMessage()) !!} {!! Purify::clean($exception->getMessage()) !!}
@@ -13,8 +14,8 @@
<a href="/"> <a href="/">
<x-forms.button>Go back home</x-forms.button> <x-forms.button>Go back home</x-forms.button>
</a> </a>
<a target="_blank" class="text-sm hover:text-neutral-300 flex items-center gap-1" href="{{ config('constants.urls.contact') }}"> <a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
Contact support support
<x-external-link /> <x-external-link />
</a> </a>
</div> </div>

13
resources/views/errors/503.blade.php
View File

@@ -3,14 +3,13 @@
<div> <div>
<p class="font-mono font-semibold text-7xl dark:text-warning">503</p> <p class="font-mono font-semibold text-7xl dark:text-warning">503</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">We are working on serious things.</h1> <h1 class="mt-4 font-bold tracking-tight dark:text-white">We are working on serious things.</h1>
<p class="text-base leading-7 text-black dark:text-neutral-300">Service Unavailable. Be right back. Thanks for your <p class="text-base leading-7 dark:text-neutral-400 text-black">Service Unavailable. Be right back. Thanks for
your
patience. patience.
</p> </p>
<div class="flex items-center mt-10 gap-x-6"> <a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact support
support <x-external-link />
<x-external-link /> </a>
</a>
</div>
</div> </div>
</div> </div>

10
resources/views/livewire/settings-dropdown.blade.php
View File

@@ -224,7 +224,8 @@
<!-- What's New Modal --> <!-- What's New Modal -->
@if ($showWhatsNewModal) @if ($showWhatsNewModal)
<div class="fixed inset-0 z-50 flex items-center justify-center py-6 px-4" @keydown.escape.window="$wire.closeWhatsNewModal()"> <div class="fixed inset-0 z-50 flex items-center justify-center py-6 px-4"
@keydown.escape.window="$wire.closeWhatsNewModal()">
<!-- Background overlay --> <!-- Background overlay -->
<div class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs" wire:click="closeWhatsNewModal"> <div class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs" wire:click="closeWhatsNewModal">
</div> </div>
@@ -296,12 +297,7 @@
target="_blank" target="_blank"
class="inline-flex items-center gap-1 hover:text-coolgray-500"> class="inline-flex items-center gap-1 hover:text-coolgray-500">
<span x-text="entry.title"></span> <span x-text="entry.title"></span>
<svg class="w-3 h-3 text-neutral-400" fill="none" <x-external-link />
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a></span> </a></span>
<span class="text-xs dark:text-neutral-400" <span class="text-xs dark:text-neutral-400"
x-text="new Date(entry.published_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></span> x-text="new Date(entry.published_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></span>