refactor(links): replace inline SVGs with reusable external link component for consistency and improved maintainability
This commit is contained in:
Andras Bacsai
@@ -8,133 +8,85 @@
|
||||
data_get($application, 'previews', collect([]))->count() > 0 ||
|
||||
data_get($application, 'ports_mappings_array')) &&
|
||||
data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)
|
||||
@if (data_get($application, 'gitBrancLocation'))
|
||||
<a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
|
||||
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
|
||||
Git Repository
|
||||
</a>
|
||||
@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) }}
|
||||
<div class="flex flex-col gap-1">
|
||||
@if (data_get($application, 'gitBrancLocation'))
|
||||
<a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
|
||||
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
|
||||
Git Repository
|
||||
</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
|
||||
@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] }}">
|
||||
<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>
|
||||
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] }}
|
||||
@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) }}">
|
||||
<x-external-link class="size-4" />{{ 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) }}">
|
||||
<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
|
||||
@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
|
||||
<div class="px-2 py-1.5 text-xs">No links available</div>
|
||||
@endif
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<svg class="inline-flex w-3 h-3 ml-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
|
||||
focusable="false" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0V0z" fill="none">
|
||||
</path>
|
||||
<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" fill="currentColor">
|
||||
</path>
|
||||
@props(['class' => 'inline-flex w-3 h-3 dark:text-neutral-400 text-black'])
|
||||
|
||||
<svg {{ $attributes->merge(['class' => $class]) }} fill="none" 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>
|
||||
|
||||
|
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 356 B |
@@ -5,13 +5,7 @@
|
||||
</x-slot>
|
||||
@foreach ($links as $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"
|
||||
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 }}
|
||||
<x-external-link class="size-4" />{{ $link }}
|
||||
</a>
|
||||
@endforeach
|
||||
</x-dropdown>
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
@if ($exception->getMessage())
|
||||
<p class="text-base leading-7 text-red-500">{{ $exception->getMessage() }}</p>
|
||||
@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.
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<div class="flex items-center mt-10 gap-x-6">
|
||||
<a href="/">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<div class="flex items-center mt-10 gap-x-6">
|
||||
<a href="/">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div>
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
<div class="flex items-center mt-10 gap-x-6">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div>
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
<div class="flex items-center mt-10 gap-x-6">
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<div>
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
<div class="flex items-center mt-10 gap-x-6">
|
||||
|
||||
@@ -3,7 +3,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>
|
||||
<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() !== '')
|
||||
<div class="mt-6 text-sm text-red-500">
|
||||
{!! Purify::clean($exception->getMessage()) !!}
|
||||
@@ -13,8 +14,8 @@
|
||||
<a href="/">
|
||||
<x-forms.button>Go back home</x-forms.button>
|
||||
</a>
|
||||
<a target="_blank" class="text-sm hover:text-neutral-300 flex items-center gap-1" href="{{ config('constants.urls.contact') }}">
|
||||
Contact support
|
||||
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
|
||||
support
|
||||
<x-external-link />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,13 @@
|
||||
<div>
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
<div class="flex items-center mt-10 gap-x-6">
|
||||
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
|
||||
support
|
||||
<x-external-link />
|
||||
</a>
|
||||
</div>
|
||||
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
|
||||
support
|
||||
<x-external-link />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -224,7 +224,8 @@
|
||||
|
||||
<!-- What's New Modal -->
|
||||
@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 -->
|
||||
<div class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs" wire:click="closeWhatsNewModal">
|
||||
</div>
|
||||
@@ -296,12 +297,7 @@
|
||||
target="_blank"
|
||||
class="inline-flex items-center gap-1 hover:text-coolgray-500">
|
||||
<span x-text="entry.title"></span>
|
||||
<svg class="w-3 h-3 text-neutral-400" fill="none"
|
||||
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>
|
||||
<x-external-link />
|
||||
</a></span>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user