Flowbite error pages.

canyongbs · Nov 6, 2023 · 58f335b · 58f335b
1 parent 2c68993
commit 58f335b
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/svg/flowbite-404.svg b/resources/svg/flowbite-404.svg
diff --git a/resources/svg/flowbite-500.svg b/resources/svg/flowbite-500.svg
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -0,0 +1,116 @@
+@php use Filament\Support\Facades\FilamentView; @endphp
+
+    <!DOCTYPE html>
+<html
+    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    dir="{{ __('filament-panels::layout.direction') ?? 'ltr' }}"
+    @class([
+        'fi min-h-screen',
+        'dark' => filament()->hasDarkModeForced(),
+    ])
+>
+<head>
+    {{ FilamentView::renderHook('panels::head.start') }}
+
+    <meta charset="utf-8"/>
+    <meta name="csrf-token" content="{{ csrf_token() }}"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+    @if ($favicon = filament()->getFavicon())
+        <link rel="icon" href="{{ $favicon }}"/>
+    @endif
+
+    <title>
+        {{ config('app.name') ?? 'Laravel' }}
+        {{ filament()->getBrandName() }}
+    </title>
+
+    {{ FilamentView::renderHook('panels::styles.before') }}
+
+    <style>
+        [x-cloak=''],
+        [x-cloak='x-cloak'],
+        [x-cloak='1'] {
+            display: none !important;
+        }
+
+        @media (max-width: 1023px) {
+            [x-cloak='-lg'] {
+                display: none !important;
+            }
+        }
+
+        @media (min-width: 1024px) {
+            [x-cloak='lg'] {
+                display: none !important;
+            }
+        }
+    </style>
+
+    @filamentStyles
+    {{ filament()->getTheme()->getHtml() }}
+    {{ filament()->getFontHtml() }}
+
+    <style>
+        :root {
+            --font-family: {!! filament()->getFontFamily() !!};
+            --sidebar-width: {{ filament()->getSidebarWidth() }};
+            --collapsed-sidebar-width: {{ filament()->getCollapsedSidebarWidth() }};
+        }
+    </style>
+
+    {{ FilamentView::renderHook('panels::styles.after') }}
+
+    @if (! filament()->hasDarkMode())
+        <script>
+            localStorage.setItem('theme', 'light')
+        </script>
+    @elseif (filament()->hasDarkModeForced())
+        <script>
+            localStorage.setItem('theme', 'dark')
+        </script>
+    @else
+        <script>
+            const theme = localStorage.getItem('theme') ?? 'system'
+
+            if (
+                theme === 'dark' ||
+                (theme === 'system' &&
+                    window.matchMedia('(prefers-color-scheme: dark)')
+                        .matches)
+            ) {
+                document.documentElement.classList.add('dark')
+            }
+        </script>
+    @endif
+
+    {{ FilamentView::renderHook('panels::head.end') }}
+</head>
+
+<body
+    class="fi-body min-h-screen bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white"
+>
+{{ FilamentView::renderHook('panels::body.start') }}
+
+{{ $slot }}
+
+{{ FilamentView::renderHook('panels::scripts.before') }}
+
+@filamentScripts(withCore: true)
+
+@if (config('filament.broadcasting.echo'))
+    <script data-navigate-once>
+        window.Echo = new window.EchoFactory(@js(config('filament.broadcasting.echo')))
+
+        window.dispatchEvent(new CustomEvent('EchoLoaded'))
+    </script>
+@endif
+
+@stack('scripts')
+
+{{ FilamentView::renderHook('panels::scripts.after') }}
+
+{{ FilamentView::renderHook('panels::body.end') }}
+</body>
+</html>
+
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
@@ -0,0 +1,28 @@
+@php use Filament\Facades\Filament; @endphp
+
+<x-layout>
+    <section>
+        <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+            <div class="mx-auto text-center">
+                <img class="mx-auto mb-3 max-w-md"
+                     src="{{ Vite::asset('resources/svg/flowbite-404.svg') }}"
+                     alt="Not Found"
+                >
+                <h1 class="mb-3 text-5xl font-extrabold text-primary-600 dark:text-primary-500">
+                    Page not found
+                </h1>
+                <p class="mb-5 tracking-tight font-bold text-gray-900 md:text-xl dark:text-gray-400">
+                    Oops! Looks like you followed a bad link. If you think this is a problem with us, please tell us.
+                </p>
+                <x-filament::button
+                    href="{{ Filament::getUrl() }}"
+                    icon="heroicon-o-chevron-left"
+                    tag="a"
+                    class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
+                >
+                    Go back home
+                </x-filament::button>
+            </div>
+        </div>
+    </section>
+</x-layout>
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
@@ -0,0 +1,28 @@
+@php use Filament\Facades\Filament; @endphp
+
+<x-layout>
+    <section>
+        <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+            <div class="mx-auto text-center">
+                <img class="mx-auto mb-3 max-w-md"
+                     src="{{ Vite::asset('resources/svg/flowbite-500.svg') }}"
+                     alt="Internal Server Error"
+                >
+                <h1 class="mb-3 text-5xl font-extrabold text-primary-600 dark:text-primary-500">
+                    Something has gone seriously wrong
+                </h1>
+                <p class="mb-5 tracking-tight font-bold text-gray-900 md:text-xl dark:text-gray-400">
+                    It's always time for a coffee break. We should be back by the time you finish your coffee.
+                </p>
+                <x-filament::button
+                    href="{{ Filament::getUrl() }}"
+                    icon="heroicon-o-chevron-left"
+                    tag="a"
+                    class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
+                >
+                    Go back home
+                </x-filament::button>
+            </div>
+        </div>
+    </section>
+</x-layout>
diff --git a/vite.config.js b/vite.config.js
@@ -4,7 +4,11 @@ import laravel, { refreshPaths } from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
+            input: [
+                'resources/css/app.css',
+                'resources/js/app.js',
+                'resources/css/filament/admin/theme.css'
+            ],
             refresh: [
                 ...refreshPaths,
                 'app/Filament/**',