Skip to content

Commit 71f1cee

Browse files
JonnxJonnx
committed
feat(docs): added parent pages for font-awesome docs
1 parent cafac5a commit 71f1cee

File tree

8 files changed

+286
-5
lines changed

8 files changed

+286
-5
lines changed

‎app/Http/Controllers/DocumentationController.php

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,54 @@ public function integrationsMapbox()
3333
{
3434
return view('docs.integrations.mapbox');
3535
}
36+
37+
public function fontAwesome()
38+
{
39+
return redirect('/documentation/font-awesome/v5');
40+
}
41+
42+
public function fontAwesomeV6()
43+
{
44+
return view('docs.font-awesome.v6.index');
45+
}
46+
47+
public function fontAwesomeV5()
48+
{
49+
return view('docs.font-awesome.v5.index');
50+
}
51+
52+
public function fontAwesomeV5Pins()
53+
{
54+
return view('docs.font-awesome.v5.pins');
55+
}
56+
57+
public function fontAwesomeV5Icons()
58+
{
59+
return view('docs.font-awesome.v5.icons');
60+
}
61+
62+
public function fontAwesomeV5IconStacks()
63+
{
64+
return view('docs.font-awesome.v5.icon-stacks');
65+
}
66+
67+
public function fontAwesomeV4()
68+
{
69+
return view('docs.font-awesome.v4.index');
70+
}
71+
72+
public function fontAwesomeV4Pins()
73+
{
74+
return view('docs.font-awesome.v4.pins');
75+
}
76+
77+
public function fontAwesomeV4Icons()
78+
{
79+
return view('docs.font-awesome.v4.icons');
80+
}
81+
82+
public function fontAwesomeV4IconStacks()
83+
{
84+
return view('docs.font-awesome.v4.icon-stacks');
85+
}
3686
}

‎public/css/app.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -942,6 +942,18 @@ video {
942942
margin-left: auto;
943943
margin-right: auto;
944944
}
945+
.mx-2 {
946+
margin-left: 0.5rem;
947+
margin-right: 0.5rem;
948+
}
949+
.mx-1 {
950+
margin-left: 0.25rem;
951+
margin-right: 0.25rem;
952+
}
953+
.-mx-1 {
954+
margin-left: -0.25rem;
955+
margin-right: -0.25rem;
956+
}
945957
.mb-8 {
946958
margin-bottom: 2rem;
947959
}
@@ -1017,6 +1029,21 @@ video {
10171029
.mb-0 {
10181030
margin-bottom: 0px;
10191031
}
1032+
.-ml-6 {
1033+
margin-left: -1.5rem;
1034+
}
1035+
.-mr-6 {
1036+
margin-right: -1.5rem;
1037+
}
1038+
.-mr-7 {
1039+
margin-right: -1.75rem;
1040+
}
1041+
.-ml-2 {
1042+
margin-left: -0.5rem;
1043+
}
1044+
.-mr-3 {
1045+
margin-right: -0.75rem;
1046+
}
10201047
.block {
10211048
display: block;
10221049
}
@@ -1059,6 +1086,21 @@ video {
10591086
.h-\[50px\] {
10601087
height: 50px;
10611088
}
1089+
.h-10 {
1090+
height: 2.5rem;
1091+
}
1092+
.h-9 {
1093+
height: 2.25rem;
1094+
}
1095+
.h-7 {
1096+
height: 1.75rem;
1097+
}
1098+
.h-11 {
1099+
height: 2.75rem;
1100+
}
1101+
.h-2 {
1102+
height: 0.5rem;
1103+
}
10621104
.min-h-screen {
10631105
min-height: 100vh;
10641106
}

‎resources/views/docs/font-awesome/v4/index.blade.php

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@extends('layouts.app-nav')
2+
3+
@section('content')
4+
<x-docs-layout>
5+
<div class="grid grid-cols-3 gap-8">
6+
<div class="col-span-3">
7+
<x-docs-box>
8+
<x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
9+
10+
<h2>Font Awesome 4</h2>
11+
12+
<p>
13+
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers,
14+
and
15+
content creators. So its very likely that you would want to use those icons for your map-based
16+
applications
17+
as well.
18+
</p>
19+
</x-docs-box>
20+
</div>
21+
{{-- PINS --}}
22+
<div class="prose prose-invert text-center">
23+
<div class="-mb-4">
24+
<img src="/api/v1/font-awesome/v4/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 -mx-1" />
25+
<img src="/api/v1/font-awesome/v4/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 -mx-1" />
26+
<img src="/api/v1/font-awesome/v4/pin?icon=fa-star&background=CE86F5&size=50"
27+
class="inline-block h-12 m-0 -mx-1" />
28+
</div>
29+
<x-markdown>
30+
### Pins
31+
Create pins that look native to any map but contain more contextual information for your users.
32+
</x-markdown>
33+
<a href="/documentation/font-awesome/v5/pins"
34+
class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
35+
Get Started
36+
</a>
37+
</div>
38+
{{-- ICONS --}}
39+
<div class="prose prose-invert text-center">
40+
<div class="-mb-4">
41+
<img src="/api/v1/font-awesome/v4/icon?icon=fa-user&color=992DE5&size=50"
42+
class="inline h-12 m-0 -mx-1" />
43+
<img src="/api/v1/font-awesome/v4/icon?icon=fa-book&color=BC5AF4&size=50"
44+
class="inline h-12 m-0 -mx-1" />
45+
<img src="/api/v1/font-awesome/v4/icon?icon=fa-compass&color=CE86F5&size=50"
46+
class="inline-block h-12 m-0 -mx-1" />
47+
</div>
48+
<x-markdown>
49+
### Icons
50+
When simplicity and a minimal look are the goal. Simple icons as map markers are a good go-to.
51+
</x-markdown>
52+
<a href="/documentation/font-awesome/v5/icons"
53+
class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
54+
Get Started
55+
</a>
56+
</div>
57+
{{-- ICON STACKS --}}
58+
<div class="prose prose-invert text-center">
59+
<div class="-mb-4">
60+
<img src="/api/v1/font-awesome/v4/icon-stack?size=64&icon=fa-binoculars&color=992DE5&on=fa-circle-o&oncolor=992DE5&iconsize=14"
61+
class="inline h-12 m-0 mx-1" />
62+
<img src="/api/v1/font-awesome/v4/icon-stack?size=64&icon=fa-amazon&color=171719&on=fa-truck&oncolor=BC5AF4&iconsize=22&voffset=-6&hoffset=7"
63+
class="inline h-12 m-0 mx-1" />
64+
<img src="/api/v1/font-awesome/v4/icon-stack?size=64&icon=fa-apple&color=CE86F5&on=fa-file-o&oncolor=CE86F5&iconsize=20&voffset=5"
65+
class="inline h-12 m-0 mx-1" />
66+
</div>
67+
<x-markdown>
68+
### Icon Stacks
69+
You can layer your favorite icons to create unique icons tailored to your application and branding.
70+
</x-markdown>
71+
<a href="/documentation/font-awesome/v5/icon-stacks"
72+
class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
73+
Get Started
74+
</a>
75+
</div>
76+
</div>
77+
</x-docs-layout>
78+
@endsection

‎resources/views/docs/font-awesome/v5/icon-stacks.blade.php

Whitespace-only changes.

‎resources/views/docs/font-awesome/v5/index.blade.php

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@extends('layouts.app-nav')
2+
3+
@section('content')
4+
<x-docs-layout>
5+
<div class="grid grid-cols-3 gap-8">
6+
<div class="col-span-3">
7+
<x-docs-box>
8+
<x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
9+
10+
<h2>Font Awesome 5</h2>
11+
12+
<p>
13+
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers,
14+
and
15+
content creators. So its very likely that you would want to use those icons for your map-based
16+
applications
17+
as well.
18+
</p>
19+
</x-docs-box>
20+
</div>
21+
{{-- PINS --}}
22+
<div class="prose prose-invert text-center">
23+
<div class="-mb-4">
24+
<img src="/api/v2/font-awesome/v5/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 mx-1" />
25+
<img src="/api/v2/font-awesome/v5/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
26+
<img src="/api/v2/font-awesome/v5/pin?icon=fa-star-solid&background=CE86F5&size=50"
27+
class="inline-block h-12 m-0 mx-1" />
28+
</div>
29+
<x-markdown>
30+
### Pins
31+
Create pins that look native to any map but contain more contextual information for your users.
32+
</x-markdown>
33+
<a href="/documentation/font-awesome/v5/pins"
34+
class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
35+
Get Started
36+
</a>
37+
</div>
38+
{{-- ICONS --}}
39+
<div class="prose prose-invert text-center">
40+
<div class="-mb-4">
41+
<img src="/api/v2/font-awesome/v5/icon?icon=fa-users&color=992DE5&size=50"
42+
class="inline h-12 m-0 mx-1" />
43+
<img src="/api/v2/font-awesome/v5/icon?icon=fa-box&color=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
44+
<img src="/api/v2/font-awesome/v5/icon?icon=fa-wind&color=CE86F5&size=50"
45+
class="inline-block h-12 m-0 mx-1" />
46+
</div>
47+
<x-markdown>
48+
### Icons
49+
When simplicity and a minimal look are the goal. Simple icons as map markers are a good go-to.
50+
</x-markdown>
51+
<a href="/documentation/font-awesome/v5/icons"
52+
class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
53+
Get Started
54+
</a>
55+
</div>
56+
{{-- ICON STACKS --}}
57+
<div class="prose prose-invert text-center">
58+
<div class="-mb-4">
59+
<img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-map-marker-alt&color=171719&on=fa-map-solid&oncolor=992DE5&iconsize=14&hoffset=21&voffset=8"
60+
class="inline h-12 m-0 mx-1" />
61+
<img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-amazon&color=171719&on=fa-truck&oncolor=BC5AF4&iconsize=30&voffset=-6&hoffset=-11"
62+
class="inline h-12 m-0 mx-1" />
63+
<img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-apple&color=171719&on=fa-box&oncolor=CE86F5&iconsize=25&voffset=10"
64+
class="inline h-12 m-0 mx-1" />
65+
</div>
66+
<x-markdown>
67+
### Icon Stacks
68+
You can layer your favorite icons to create unique icons tailored to your application and branding.
69+
</x-markdown>
70+
<a href="/documentation/font-awesome/v5/icon-stacks"
71+
class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
72+
Get Started
73+
</a>
74+
</div>
75+
</div>
76+
</x-docs-layout>
77+
@endsection

‎resources/views/docs/font-awesome/v6/index.blade.php

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@extends('layouts.app-nav')
2+
3+
@section('content')
4+
<x-docs-layout>
5+
6+
<x-docs-box>
7+
<x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
8+
9+
<h2>Font Awesome 6</h2>
10+
11+
<p>
12+
Coming Soon...
13+
</p>
14+
</x-docs-box>
15+
16+
</x-docs-layout>
17+
@endsection

‎resources/views/docs/integrations/index.blade.php

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
@section('content')
44
<x-docs-layout>
5-
65
<div class="grid grid-cols-3 gap-8">
7-
86
<div class="col-span-3">
97
<x-docs-box>
108
<x-icon-spectrum icon="fa-cog" class="opacity-40" iconClass="-mr-12 w-[49px]" />
@@ -51,9 +49,6 @@ class="no-underline -mb-4 mt-4 block px-4 py-2 border border-transparent text-sm
5149
</a>
5250
</x-docs-box>
5351
</div>
54-
55-
5652
</div>
57-
5853
</x-docs-layout>
5954
@endsection

‎routes/web.php

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,28 @@
4040
Route::get('/google-maps', [DocumentationController::class, 'integrationsGoogleMaps']);
4141
Route::get('/mapbox', [DocumentationController::class, 'integrationsMapbox']);
4242
});
43+
44+
Route::group(['prefix' => 'font-awesome'], function () {
45+
Route::get('/', [DocumentationController::class, 'fontAwesome']);
46+
47+
Route::group(['prefix' => 'v6'], function () {
48+
Route::get('/', [DocumentationController::class, 'fontAwesomeV6']);
49+
});
50+
51+
Route::group(['prefix' => 'v5'], function () {
52+
Route::get('/', [DocumentationController::class, 'fontAwesomeV5']);
53+
Route::get('/pins', [DocumentationController::class, 'fontAwesomeV5Pins']);
54+
Route::get('/icons', [DocumentationController::class, 'fontAwesomeV5Icons']);
55+
Route::get('/icon-stacks', [DocumentationController::class, 'fontAwesomeV5IconStacks']);
56+
});
57+
58+
Route::group(['prefix' => 'v4'], function () {
59+
Route::get('/', [DocumentationController::class, 'fontAwesomeV4']);
60+
Route::get('/pins', [DocumentationController::class, 'fontAwesomeV4Pins']);
61+
Route::get('/icons', [DocumentationController::class, 'fontAwesomeV4Icons']);
62+
Route::get('/icon-stacks', [DocumentationController::class, 'fontAwesomeV4IconStacks']);
63+
});
64+
});
4365
});
4466

4567
/*

0 commit comments

Comments
 (0)