Skip to content

Commit

Permalink
feat(docs): integrations parent page
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonnx committed Jun 28, 2022
1 parent 443d10b commit 7bb6ee8
Show file tree
Hide file tree
Showing 14 changed files with 171 additions and 27 deletions.
2 changes: 1 addition & 1 deletion app/Actions/FontAwesome/v5/CreateIcon.php
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ public function handle(array $params, $scale = 1.0, $forceOddSize = false)

protected function getIconFontPath($icon)
{
return base_path('resources/fonts/legacy/fontawesome-webfont.ttf');
return FontAwesomeV5Encoder::getFile($icon);
}

protected function getTextFontPath()
Expand Down
5 changes: 5 additions & 0 deletions app/Http/Controllers/DocumentationController.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,9 @@ public function index()
{
return view('docs.index');
}

public function integrations()
{
return view('docs.integrations.index');
}
}
75 changes: 75 additions & 0 deletions public/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -1002,6 +1002,21 @@ video {
.mb-24 {
margin-bottom: 6rem;
}
.-mb-4 {
margin-bottom: -1rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-0 {
margin-top: 0px;
}
.mb-0 {
margin-bottom: 0px;
}
.block {
display: block;
}
Expand Down Expand Up @@ -1035,6 +1050,12 @@ video {
.h-12 {
height: 3rem;
}
.h-\[75px\] {
height: 75px;
}
.h-\[50px\] {
height: 50px;
}
.min-h-screen {
min-height: 100vh;
}
Expand All @@ -1050,6 +1071,18 @@ video {
.w-12 {
width: 3rem;
}
.w-\[41px\] {
width: 41px;
}
.w-\[49px\] {
width: 49px;
}
.w-\[75px\] {
width: 75px;
}
.w-\[50px\] {
width: 50px;
}
.max-w-3xl {
max-width: 48rem;
}
Expand All @@ -1074,6 +1107,9 @@ video {
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.items-center {
align-items: center;
}
Expand Down Expand Up @@ -1108,6 +1144,12 @@ video {
.rounded-xl {
border-radius: 0.75rem;
}
.border {
border-width: 1px;
}
.border-transparent {
border-color: transparent;
}
.bg-indigo-700\/80 {
background-color: rgb(67 56 202 / 0.8);
}
Expand All @@ -1127,6 +1169,10 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}
.p-6 {
padding: 1.5rem;
}
Expand Down Expand Up @@ -1177,6 +1223,9 @@ video {
.pl-2 {
padding-left: 0.5rem;
}
.text-center {
text-align: center;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
Expand All @@ -1203,6 +1252,9 @@ video {
.font-medium {
font-weight: 500;
}
.font-black {
font-weight: 900;
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
Expand Down Expand Up @@ -1239,6 +1291,10 @@ video {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity));
}
.no-underline {
-webkit-text-decoration-line: none;
text-decoration-line: none;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Expand All @@ -1249,6 +1305,11 @@ video {
.opacity-40 {
opacity: 0.4;
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

[x-cloak] {
display: none !important;
Expand Down Expand Up @@ -1300,6 +1361,11 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
Expand All @@ -1325,6 +1391,15 @@ video {
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}

.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}

.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}

@media (min-width: 640px) {

.sm\:static {
Expand Down
3 changes: 3 additions & 0 deletions resources/views/components/docs-box.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="prose prose-invert max-w-full bg-slate-800 p-12 rounded-xl">
{{ $slot }}
</div>
24 changes: 11 additions & 13 deletions resources/views/components/docs-layout.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div>
<div class="mb-6">
<a href="/documentation" class="block mb-1">Getting Started</a>
<a href="/documentation/version2-explained" class="block mb-1">API Versioning</a>
<a href="/documentation/api-versioning" class="block mb-1">API Versioning</a>
</div>

<div class="mb-6">
Expand All @@ -20,27 +20,27 @@
<div class="mb-6">
<div class="text-black text-sm text-slate-300 mb-2">Font Awesome 5</div>
<div class="ml-2">
<a href="/documentation/font-awesome/v5#pins" class="block mb-1">Pins</a>
<a href="/documentation/font-awesome/v5#icons" class="block mb-1">Icons</a>
<a href="/documentation/font-awesome/v5#icon-stack" class="block">Icon Stacks</a>
<a href="/documentation/font-awesome/v5/pins" class="block mb-1">Pins</a>
<a href="/documentation/font-awesome/v5/icons" class="block mb-1">Icons</a>
<a href="/documentation/font-awesome/v5/icon-stack" class="block">Icon Stacks</a>
</div>
</div>

<div class="mb-6">
<div class="text-black text-sm text-slate-300 mb-2">Font Awesome 4</div>
<div class="ml-2">
<a href="/documentation/font-awesome/v4#pins" class="block mb-1">Pins</a>
<a href="/documentation/font-awesome/v4#icons" class="block mb-1">Icons</a>
<a href="/documentation/font-awesome/v4#icon-stack" class="block">Icon Stacks</a>
<a href="/documentation/font-awesome/v4/pins" class="block mb-1">Pins</a>
<a href="/documentation/font-awesome/v4/icons" class="block mb-1">Icons</a>
<a href="/documentation/font-awesome/v4/icon-stack" class="block">Icon Stacks</a>
</div>
</div>

<div class="mb-6">
<div class="text-black text-sm text-slate-300 mb-2">Integrations</div>
<div class="ml-2">
<a href="/documentation/integrations#bing-maps" class="block mb-1">Bing Maps</a>
<a href="/documentation/integrations#google-maps" class="block mb-1">Google Maps</a>
<a href="/documentation/integrations#mapbox" class="block">Mapbox</a>
<a href="/documentation/integrations/bing-maps" class="block mb-1">Bing Maps</a>
<a href="/documentation/integrations/google-maps" class="block mb-1">Google Maps</a>
<a href="/documentation/integrations/mapbox" class="block">Mapbox</a>
</div>
</div>

Expand All @@ -57,9 +57,7 @@

{{-- DOCS CONTENT --}}
<div class="col-span-4">
<div class="prose prose-invert max-w-full bg-slate-800 p-12 rounded-xl">
{{ $slot }}
</div>
{{ $slot }}
</div>
</div>

Expand Down
Empty file.
Empty file.
25 changes: 14 additions & 11 deletions resources/views/docs/index.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,23 @@
@section('content')
<x-docs-layout>

<x-icon-spectrum icon="fa-rocket" class="opacity-40" iconClass="-mr-10" />
<x-docs-box>
<x-icon-spectrum icon="fa-rocket" class="opacity-40" iconClass="-mr-12 w-[49px]" />

<h2> Getting Started</h2>
<h2> Getting Started</h2>

<p>
Building more interactive maps with MapMarker.io is easy and a fairly straight forward process. To use
our map markers in your project, you do not need to pay or register any api keys.
</p>
<p>
Building more interactive maps with MapMarker.io is easy and a fairly straight forward process. To use
our map markers in your project, you do not need to pay or register any api keys.
</p>

<p>
Just make sure that whatever you are building your maps with supports creating custom map markers from
.png image files. Most web based mapping SDKs like Google Maps or Bing Maps support this out of the box. Take
a closer look at our <a href="/documentation/integrations">integrations</a> section to learn more.
</p>
<p>
Just make sure that whatever you are building your maps with supports creating custom map markers from
.png image files. Most web based mapping SDKs like Google Maps or Bing Maps support this out of the box.
Take
a closer look at our <a href="/documentation/integrations">integrations</a> section to learn more.
</p>
</x-docs-box>

</x-docs-layout>
@endsection
Empty file.
Empty file.
59 changes: 59 additions & 0 deletions resources/views/docs/integrations/index.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
@extends('layouts.app-nav')

@section('content')
<x-docs-layout>

<div class="grid grid-cols-3 gap-8">

<div class="col-span-3">
<x-docs-box>
<x-icon-spectrum icon="fa-cog" class="opacity-40" iconClass="-mr-12 w-[49px]" />

<h2>Integrations</h2>

<p>
This section is intended to help get you started using our API by providing some basic examples for
popular mapping tools.
</p>
</x-docs-box>
</div>

<div class="text-center">
<x-docs-box>
<img src="/api/v2/font-awesome/v5/icon-stack?icon=fa-microsoft&size=100&iconsize=50&color=594578&on=fa-square-solid&oncolor=DDD"
class="mx-auto h-[75px] w-[75px]">
<h3>Bing Maps</h3>
<a href="/documentation/integrations/bing-maps"
class="no-underline -mb-4 mt-4 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">
Read Integration Guide
</a>
</x-docs-box>
</div>
<div class="text-center">
<x-docs-box>
<img src="/api/v2/font-awesome/v5/icon-stack?icon=fa-google&size=100&iconsize=50&color=594578&on=fa-square-solid&oncolor=DDD"
class="mx-auto h-[75px] w-[75px]">
<h3>Google Maps</h3>
<a href="/documentation/integrations/google-maps"
class="no-underline -mb-4 mt-4 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">
Read Integration Guide
</a>
</x-docs-box>
</div>
<div class="text-center">
<x-docs-box>
<img src="/api/v2/font-awesome/v5/icon-stack?icon=fa-map-marker-alt&size=100&iconsize=50&color=594578&on=fa-square-solid&oncolor=DDD"
class="mx-auto h-[75px] w-[75px]">
<h3>Mapbox</h3>
<a href="/documentation/integrations/mapbox"
class="no-underline -mb-4 mt-4 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">
Read Integration Guide
</a>
</x-docs-box>
</div>


</div>

</x-docs-layout>
@endsection
Empty file.
4 changes: 2 additions & 2 deletions resources/views/layouts/app-nav.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hove
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0 flex items-center">
<img class="block h-8 w-auto"
<img class="block h-8 w-auto w-[41px]"
src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-map-marker-alt&color=fff&on=fa-map-solid&oncolor=777&iconsize=14&hoffset=21&voffset=8"
alt="MapMarker.io Logo">
<span class="hidden md:inline-block font-bold text-xl ml-2 text-gray-50">MapMarker.io</span>
Expand All @@ -52,7 +52,7 @@ class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md tex
<div
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 text-gray-400 font-bold">
<a href="/changelog"
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-black">
{{ config('app.version') }}
</a>
</div>
Expand Down
1 change: 1 addition & 0 deletions routes/web.php
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
*/
Route::group(['prefix' => 'documentation'], function () {
Route::get('/', [DocumentationController::class, 'index']);
Route::get('/integrations', [DocumentationController::class, 'integrations']);
});

/*
Expand Down

0 comments on commit 7bb6ee8

Please sign in to comment.