Skip to content

Commit 3a5ba0f

Browse files
butschsterbutschster
committed
Update look of the landing page
1 parent e87ab3c commit 3a5ba0f

File tree

6 files changed

+159
-92
lines changed

6 files changed

+159
-92
lines changed

‎.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,5 @@ LOG_SLACK_WEBHOOK_URL=http://127.0.0.1:8000/slack
6161
INSPECTOR_URL=http://127.0.0.1:8000/inspector
6262
INSPECTOR_API_KEY=test
6363
INSPECTOR_ENABLE=true
64+
65+
GOOGLE_TAGMANAGER_ID=

‎app/Http/Controllers/CallAction.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class CallAction extends Controller
2525
WithFaker;
2626

2727
private array $setUpMap = [
28-
'ray_log:' => 'setUpRayLogger',
28+
'ray_logs:' => 'setUpRayLogger',
2929
'monolog:' => 'setUpSocketMonolog',
3030
'sentry:' => 'setupSentryLogger',
3131
'var_dump:' => 'setUpVarDumper',

‎config/app.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@
5757

5858
'asset_url' => env('ASSET_URL', null),
5959

60+
'google_tagmanager' => env('GOOGLE_TAGMANAGER_ID', null),
61+
6062
/*
6163
|--------------------------------------------------------------------------
6264
| Application Timezone

‎public/images/logo.png‎

-310 Bytes
Loading

‎resources/views/welcome.blade.php‎

Lines changed: 102 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,107 +6,125 @@
66
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
88

9-
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicon/apple-touch-icon.png') }}">
10-
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon/favicon-32x32.png') }}">
11-
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon/favicon-16x16.png') }}">
12-
<link rel="manifest" href="{{ asset('favicon/site.webmanifest') }}">
13-
<link rel="mask-icon" href="{{ asset('favicon/safari-pinned-tab.svg') }}" color="#5bbad5">
9+
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
10+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
11+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
12+
<link rel="manifest" href="/favicon/site.webmanifest">
1413

15-
<title>Buggregator</title>
14+
<title>{{ config('app.name') }}</title>
1615
</head>
1716
<body>
1817
<div id="app" class="h-screen">
19-
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16">
20-
<img src="{{ asset('images/logo.png') }}" alt="">
21-
<h1 class="text-2xl sm:text-3xl lg:text-4xl leading-none font-extrabold tracking-tight text-blue-600 mt-6 mb-6">
22-
Buggregator is a beautiful, lightweight debug server build on Laravel that helps you debug your app.
23-
</h1>
24-
25-
<div class="text-sm mb-5 md:mb-10 lg:mb-20">
26-
<p class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-5 text-gray-600">
27-
You can run Buggregator via docker from Docker Hub by using command below.
28-
</p>
29-
<div
30-
class="mb-2 text-center w-full bg-gray-50 text-gray-400 font-semibold hover:text-gray-900 font-mono px-3 py-2 border border-gray-200 rounded-xl transition-colors duration-200">
31-
docker run --pull always -p 23517:8000 -p 1025:1025 -p 9912:9912 -p 9913:9913
32-
butschster/buggregator:latest
33-
</div>
34-
<a class="flex border border-gray-200 w-28 justify-center items-center gap-x-2 bg-gray-50 hover:bg-gray-700 text-gray-700 hover:text-white leading-6 font-semibold py-3 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"
35-
href="https://github.com/buggregator/app">
36-
<svg class="w-6 h-6 fill-current" viewBox="0 0 1024 1024" fill="none"
37-
xmlns="http://www.w3.org/2000/svg">
38-
<path fill-rule="evenodd" clip-rule="evenodd"
39-
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
40-
transform="scale(64)" fill="#1B1F23"/>
18+
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 md:px-8 lg:px-16 my-6">
19+
<header class="flex justify-between">
20+
<a href="/">
21+
<img src="/images/logo.png" alt="{{ config('app.name') }} logo">
22+
</a>
23+
24+
<a class="py-2 px-3" href="https://github.com/buggregator/app" target="_blank">
25+
<svg class="w-6 h-6 fill-current" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
26+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
4127
</svg>
42-
<span class="flex-none">Github</span>
4328
</a>
44-
</div>
29+
</header>
30+
</div>
4531

32+
<div class="bg-gray-100">
33+
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16 my-6">
34+
<h1 class="text-2xl sm:text-3xl lg:text-5xl leading-none text-blue-800 font-extrabold tracking-tight text-white mt-6 mb-4">
35+
A server for debugging more than just Laravel applications.
36+
</h1>
37+
<p class="max-w-screen-lg text-lg sm:text-2xl font-semibold text-gray-500 mb-10 sm:mb-11 text-white">
38+
{{ config('app.name') }} is a beautiful, lightweight debug server build on Laravel that helps you debug your
39+
app.
40+
</p>
4641

47-
<a href="#demo" class="flex flex-col items-center text-gray-900 mb-5 md:mb-10 lg:mb-20">
48-
<h3 class="sm:text-lg lg:text-4xl sm:leading-snug font-extrabold tracking-wide mb-3">demo</h3>
49-
<div class="animate-bounce">
50-
<svg class="fill-current transform rotate-90 h-10" xmlns="http://www.w3.org/2000/svg"
51-
viewBox="0 0 512 512">
52-
<path
53-
d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"/>
54-
</svg>
42+
<div class="text-sm mb-6 border bg-white rounded-lg px-5 py-3">
43+
<p class="max-w-screen-lg font-medium text-gray-400 mb-2">
44+
Use the command below to run {{ config('app.name') }} via docker container.
45+
</p>
46+
<div
47+
class="mb-2 w-full bg-white text-gray-400 font-semibold hover:text-gray-700 font-mono px-3 py-2 border border-gray-200 hover:border-blue-600 rounded-lg transition-colors duration-200">
48+
docker run --pull always -p 23517:8000 -p 1025:1025 -p 9912:9912 -p 9913:9913
49+
butschster/buggregator:latest
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16 my-6">
56+
@if(config('app.buggregator_url'))
57+
<a href="#demo" class="flex flex-col items-center">
58+
<h3 class="sm:text-lg lg:text-4xl text-purple-800 font-extrabold tracking-wide mb-3">demo</h3>
59+
<div class="animate-bounce text-purple-500">
60+
<svg class="fill-current h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330" xml:space="preserve"><path d="M326 79c-6-5-16-5-22 0L165 219 26 79a15 15 0 0 0-22 22l150 150a15 15 0 0 0 22 0l150-150c5-6 5-16 0-22z"/></svg>
5561
</div>
5662
</a>
63+
@endif
5764

58-
<div class="px-4 sm:px-6 md:px-8 mb-5 md:mb-10 lg:mb-20">
59-
<h2 class="text-3xl sm:text-5xl lg:text-6xl leading-none font-extrabold text-blue-600 tracking-tight mb-8 text-center">
60-
Buggregator is a standalone.</h2>
61-
<p class="text-center max-w-4xl text-lg sm:text-2xl text-gray-700 font-bold space-y-6 max-w-4xl mx-auto mb-6">
62-
It runs without installation on multiple platforms via docker and supports symfony var-dumper, monolog,
63-
sentry, smtp and spatie ray package.
65+
<div class="px-4 sm:px-6 md:px-8 my-5 md:my-10 lg:my-20">
66+
<h2 class="text-3xl sm:text-5xl lg:text-6xl leading-none font-extrabold text-gray-800 tracking-tight mb-8 text-center">
67+
{{ config('app.name') }} is a standalone.
68+
</h2>
69+
<p class="text-center max-w-4xl text-lg sm:text-2xl text-gray-500 font-bold space-y-6 max-w-4xl mx-auto mb-6">
70+
It runs without installation on multiple platforms via docker and supports <a href="https://github.com/symfony/var-dumper">symfony var-dumper</a>, <a
71+
href="https://github.com/Seldaek/monolog">Monolog</a>,
72+
<a href="https://sentry.io/">Sentry</a>, smtp, <a href="https://inspector.dev">Inspector</a> and <a href="https://spatie.be/docs/ray/v1/introduction">spatie ray</a> package.
6473
</p>
65-
<div class="flex flex-col items-center">
74+
<a href="https://github.com/butschster" target="_blank" class="flex flex-col items-center">
6675
<div class="p-1 border-2 border-blue-400 rounded-full">
67-
<img src="https://avatars.githubusercontent.com/u/773481?v=4" alt=""
68-
class="w-16 h-16 rounded-full bg-blue-200" loading="lazy">
76+
<img src="https://avatars.githubusercontent.com/u/773481?v=4" alt="" class="w-16 h-16 rounded-full bg-blue-200" loading="lazy">
6977
</div>
70-
<a href="https://github.com/butschster" class="text-gray-900 text-lg font-bold">butschster</a>
71-
<div class="text-blue-600 text-sm font-bold">Creator of Buggregator</div>
72-
</div>
78+
<div class="text-gray-900 text-xl font-medium">Pavel Buchnev</div>
79+
<div class="text-blue-600 text-sm font-bold">Creator of {{ config('app.name') }}</div>
80+
</a>
7381
</div>
74-
7582
</div>
7683

7784
<div class="relative">
7885
@if(config('app.buggregator_url'))
7986
<div class="sticky top-0 p-0 lg:px-10" id="demo">
80-
<iframe src="{{ config('app.buggregator_url') }}"
81-
frameborder="0"
82-
height="600px"
83-
class="transform sm:scale-75 lg:scale-100 w-full bg-white border-4 border-blue-600 rounded-lg sticky top-0 w-full shadow-2xl">
84-
</iframe>
87+
<iframe src="{{ config('app.buggregator_url') }}" frameborder="0" height="600px" class="transform sm:scale-75 lg:scale-100 w-full bg-white border-4 border-blue-600 rounded-lg sticky top-0 w-full shadow-2xl">
88+
</iframe>
8589
</div>
8690
@endif
8791

8892
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16">
89-
<div class="space-y-5 sm:space-y-10 md:space-y-16 lg:space-y-20 rounded-b-lg">
90-
@foreach($buttonGroups as $group => $buttons)
91-
<div class="p-5 md:p-8 lg:p-10 bg-gray-50 rounded-xl">
92-
<h3 class="text-lg sm:text-xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-8">
93-
{{ \Illuminate\Support\Str::studly($group) }}
94-
</h3>
95-
96-
<div class="flex flex-wrap gap-2 md:gap-3 lg:gap-4 text-sm">
97-
@foreach($buttons as $button)
98-
<button-action
99-
action="{{ $group.':'.\Illuminate\Support\Str::snake($button) }}">{{ $button }}</button-action>
100-
@endforeach
101-
</div>
93+
@foreach($buttonGroups as $group => $data)
94+
<div class="mb-5 sm:mb-16 md:mb-20 lg:mb-32" id="{{ $group }}">
95+
<h3 class="text-3xl sm:text-5xl lg:text-6xl leading-none font-extrabold text-blue-800 tracking-tight mb-8">
96+
{{ $data['title'] ?? \Illuminate\Support\Str::studly($group) }}
97+
</h3>
98+
99+
@if(isset($data['description']))
100+
<p class="max-w-4xl text-lg sm:text-2xl text-gray-500 font-medium sm:leading-10 mb-6">{{ $data['description'] }}</p>
101+
@endif
102+
103+
<div class="p-5 md:p-8 lg:p-10 bg-gray-50 border border-blue-200 rounded-xl">
104+
<p class="text-sm text-gray-400 font-bold mb-4">Click a button to send an event to {{ config('app.name') }} server.</p>
105+
@foreach($data['events'] as $type => $buttons)
106+
@if($type !== 'common')
107+
<h4 class="text-xl lg:text-3xl leading-none font-extrabold text-blue-600 tracking-tight mt-6 mb-4">
108+
{{ \Illuminate\Support\Str::studly($type) }}
109+
</h4>
110+
@endif
111+
112+
<div class="flex flex-wrap gap-2 md:gap-3 lg:gap-4 text-sm">
113+
@foreach($buttons as $button)
114+
<button-action action="{{ $group.($type === 'common' ? '' : '_' . $type).':'.\Illuminate\Support\Str::snake($button) }}">
115+
{{ $button }}
116+
</button-action>
117+
@endforeach
118+
</div>
119+
@endforeach
102120
</div>
103-
@endforeach
104-
</div>
121+
</div>
122+
@endforeach
105123
</div>
106124
</div>
107125

108-
<div class="flex justify-center my-20">
109-
<img src="{{ asset('images/pacman.png') }}" alt="">
126+
<div class="flex justify-center py-20">
127+
<img src="/images/pacman.png">
110128
</div>
111129
</div>
112130
@verbatim
@@ -136,5 +154,16 @@ class="transform sm:scale-75 lg:scale-100 w-full bg-white border-4 border-blue-6
136154
</script>
137155
@endverbatim
138156

157+
@if(config('app.google_tagmanager'))
158+
<!-- Global site tag (gtag.js) - Google Analytics -->
159+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-151758540-1"></script>
160+
<script>
161+
window.dataLayer = window.dataLayer || [];
162+
function gtag(){dataLayer.push(arguments);}
163+
gtag('js', new Date());
164+
165+
gtag('config', '{{ config('app.google_tagmanager') }}');
166+
</script>
167+
@endif
139168
</body>
140169
</html>

0 commit comments

Comments
 (0)