improve responsivity

This commit is contained in:
Samuel Štancl 2019-10-10 20:54:06 +02:00
parent 711d938724
commit 83a7d8f95d

66
dist/index.html vendored
View file

@ -6,7 +6,7 @@
<link href="https://fonts.googleapis.com/css?family=Nunito:200,400,500,600,700,800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,400,500,600,700,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet">
<script async defer src="https://buttons.github.io/buttons.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="/tailwind.css"> <link rel="stylesheet" href="/build/tailwind.css">
<title>stancl/tenancy &mdash; Automatic multi-tenancy for your Laravel app. No code changes needed.</title> <title>stancl/tenancy &mdash; Automatic multi-tenancy for your Laravel app. No code changes needed.</title>
<meta name="description" <meta name="description"
content="A Laravel multi-database tenancy package that respects your code. You won't have to change a thing in your application's code."> content="A Laravel multi-database tenancy package that respects your code. You won't have to change a thing in your application's code.">
@ -29,8 +29,8 @@
</svg> </svg>
</div> </div>
</div> </div>
<div class="py-20 px-40 flex flex-wrap absolute top-0 left-0"> <div class="p-8 xl:py-20 xl:px-40 flex flex-wrap absolute top-0 left-0">
<div class="w-1/2 leading-relaxed"> <div class="w-full xl:w-1/2 leading-relaxed">
<h1 class="text-indigo-100 text-6xl font-bold">Automatic tenancy for your Laravel app</h1> <h1 class="text-indigo-100 text-6xl font-bold">Automatic tenancy for your Laravel app</h1>
<h2 class="mt-4 text-5xl font-thin text-indigo-200">No code changes required.</h2> <h2 class="mt-4 text-5xl font-thin text-indigo-200">No code changes required.</h2>
<p class="mt-5 text-2xl text-indigo-300"><strong class="text-indigo-200">stancl/tenancy</strong> is a tenancy package that uses a completely new approach to multi-tenancy.</p> <p class="mt-5 text-2xl text-indigo-300"><strong class="text-indigo-200">stancl/tenancy</strong> is a tenancy package that uses a completely new approach to multi-tenancy.</p>
@ -38,18 +38,18 @@
<div class="mt-8"> <div class="mt-8">
<a href="https://tenancy.samuelstancl.me/docs/v2/getting-started/"> <a href="https://tenancy.samuelstancl.me/docs/v2/getting-started/">
<button <button
class="text-indigo-100 shadow-primary font-semibold text-xl w-64 text-center py-2 bg-indigo-dark border-indigo-dark border-2 rounded-10 focus:outline-none hover:bg-indigo-900 hover:border-indigo-900 both-transition">View class="text-indigo-100 shadow-primary font-semibold text-xl w-64 text-center py-2 bg-indigo-dark border-indigo-dark border-2 rounded-10 hover:bg-indigo-900 hover:border-indigo-900 both-transition">View
Documentation</button> Documentation</button>
</a> </a>
<a <a
href="https://samuelstancl.me/blog/make-your-laravel-app-multi-tenant-without-changing-a-line-of-code/"> href="https://samuelstancl.me/blog/make-your-laravel-app-multi-tenant-without-changing-a-line-of-code/">
<button <button
class="ml-6 text-indigo-100 font-semibold text-xl w-64 text-center py-2 rounded-10 border-indigo-500 border-2 focus:outline-none hover:border-indigo-300 border-transition">Beginners class="ml-6 text-indigo-100 font-semibold text-xl w-64 text-center py-2 rounded-10 border-indigo-500 border-2 hover:border-indigo-300 border-transition">Beginners
Tutorial</button> Tutorial</button>
</a> </a>
</div> </div>
</div> </div>
<div class="w-1/2 flex justify-center items-center"> <div class="w-1/2 justify-center items-center hidden xl:flex">
<div class="bg-indigo-900 text-lg leading-loose text-blue-300 rounded-15 p-6 inline-block shadow-primary"> <div class="bg-indigo-900 text-lg leading-loose text-blue-300 rounded-15 p-6 inline-block shadow-primary">
<pre> <pre>
// Create a tenant // Create a tenant
@ -69,19 +69,19 @@ dispatch(new SendOrderCreatedMail);
</div> </div>
</div> </div>
<div class="flex justify-between mt-24"> <div class="flex flex-col xl:flex-row justify-between mt-24">
<div class="w-1/3"> <div class="xl:w-1/3 w-full">
<div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between"> <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
<div> <div>
<h3 class="font-bold text-3xl text-center my-1">Easy Installation</h3> <h3 class="font-bold text-3xl text-center my-1">Easy Installation</h3>
<p class="mt-5">Two commands is all you need to get started.</p> <p class="mt-5">Two commands is all you need to get started.</p>
<pre class="text-lg mt-5"> <pre class="text-xl mt-5 whitespace-pre-wrap">
composer require stancl/tenancy composer require stancl/tenancy
php artisan tenancy:install php artisan tenancy:install
</pre> </pre>
<p class="mt-5">After installation, just focus on what's important to you &mdash; writing your app.</p> <p class="mt-5">After installation, just focus on what's important to you &mdash; writing your app.</p>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center xl:mt-8">
<a href="https://tenancy.samuelstancl.me/docs/v2/installation"> <a href="https://tenancy.samuelstancl.me/docs/v2/installation">
<button <button
class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10 class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10
@ -92,7 +92,7 @@ php artisan tenancy:install
</div> </div>
</div> </div>
</div> </div>
<div class="ml-24 w-1/3"> <div class="ml-24 w-1/3 hidden xl:block">
<div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between"> <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
<div> <div>
<h3 class="font-bold text-3xl text-center my-1">Automatic & Flexible</h3> <h3 class="font-bold text-3xl text-center my-1">Automatic & Flexible</h3>
@ -103,7 +103,7 @@ php artisan tenancy:install
background gives you the flexibility to change how tenancy works for your project without pain. background gives you the flexibility to change how tenancy works for your project without pain.
</p> </p>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center xl:mt-8">
<a href="https://tenancy.samuelstancl.me/docs/v2/configuration"> <a href="https://tenancy.samuelstancl.me/docs/v2/configuration">
<button <button
class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10 class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10
@ -113,7 +113,7 @@ php artisan tenancy:install
</div> </div>
</div> </div>
</div> </div>
<div class="ml-24 w-1/3"> <div class="mt-6 xl:ml-24 xl:w-1/3 w-full">
<div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between"> <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
<div> <div>
<h3 class="font-bold text-3xl text-center my-1">Awesome Integration</h3> <h3 class="font-bold text-3xl text-center my-1">Awesome Integration</h3>
@ -147,7 +147,7 @@ php artisan tenancy:install
<img class="block h-8" src="spatie.png" alt="Spatie"> <img class="block h-8" src="spatie.png" alt="Spatie">
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center xl:mt-8">
<a href="https://tenancy.samuelstancl.me/docs/v2/integrations"> <a href="https://tenancy.samuelstancl.me/docs/v2/integrations">
<button <button
class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10 class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10
@ -162,14 +162,14 @@ php artisan tenancy:install
</div> </div>
</header> </header>
<div class="w-full flex items-center justify-center px-64 py-6 bg-white"> <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white">
<div class="w-1/2 text-right"> <div class="w-full xl:w-1/2 text-right">
<h3 class="text-3xl font-semibold">Automatic Data Separation</h3> <h3 class="text-3xl font-semibold">Automatic Data Separation</h3>
<p class="text-lg">Tenants' databases, caches, filesystems, queues and Redis stores are automatically separated. You can <p class="text-lg">Tenants' databases, caches, filesystems, queues and Redis stores are automatically separated. You can
write your app like you're used to and let the package worry about tenant data separation.</p> write your app like you're used to and let the package worry about tenant data separation.</p>
</div> </div>
<div class="w-1/2 flex justify-start ml-16"> <div class="w-full xl:w-1/2 flex justify-start ml-16">
<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full"> <pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
cache()->remember('total_revenue', function () { cache()->remember('total_revenue', function () {
return Order::with('products') return Order::with('products')
->get() ->get()
@ -180,9 +180,9 @@ cache()->remember('total_revenue', function () {
</div> </div>
</div> </div>
<div class="w-full flex items-center justify-center px-64 py-6 bg-white mt-10"> <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white mt-10">
<div class="w-1/2 flex justify-end mr-16"> <div class="w-full xl:w-1/2 flex justify-end mr-16">
<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full"> <pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
'redis' => [ 'redis' => [
'prefix_base' => 'tenant', 'prefix_base' => 'tenant',
'prefixed_connections' => [ 'prefixed_connections' => [
@ -191,7 +191,7 @@ cache()->remember('total_revenue', function () {
], ],
</pre> </pre>
</div> </div>
<div class="w-1/2 text-left"> <div class="w-full xl:w-1/2 text-left">
<h3 class="text-3xl font-semibold">Configurable</h3> <h3 class="text-3xl font-semibold">Configurable</h3>
<p class="text-lg">Even though everything happens automatically, you're still in control. You can configure <p class="text-lg">Even though everything happens automatically, you're still in control. You can configure
how database names, Redis keys and filesystem paths are prefixed, as well as how cache is tagged and how database names, Redis keys and filesystem paths are prefixed, as well as how cache is tagged and
@ -199,15 +199,15 @@ cache()->remember('total_revenue', function () {
</div> </div>
</div> </div>
<div class="w-full flex items-center justify-center px-64 py-6 bg-white mt-10"> <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white mt-10">
<div class="w-1/2 text-right"> <div class="w-full xl:w-1/2 text-right">
<h3 class="text-3xl font-semibold">CLI-friendly</h3> <h3 class="text-3xl font-semibold">CLI-friendly</h3>
<p class="text-lg"><strong>stancl/tenancy</strong> comes with artisan commands for migrating, rolling <p class="text-lg"><strong>stancl/tenancy</strong> comes with artisan commands for migrating, rolling
back, as well as back, as well as
seeding tenant databases.</p> seeding tenant databases.</p>
</div> </div>
<div class="w-1/2 flex justify-start ml-16"> <div class="w-full xl:w-1/2 flex justify-start ml-16">
<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full"> <pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
$ artisan tenants:seed --tenants=8075a580-1cb8-11e9-8822-49c5d8f8ff23 $ artisan tenants:seed --tenants=8075a580-1cb8-11e9-8822-49c5d8f8ff23
Tenant: 8075a580-1cb8-11e9-8822-49c5d8f8ff23 (tenant1.localhost) Tenant: 8075a580-1cb8-11e9-8822-49c5d8f8ff23 (tenant1.localhost)
Database seeding completed successfully. Database seeding completed successfully.
@ -215,9 +215,9 @@ Database seeding completed successfully.
</div> </div>
</div> </div>
<div class="w-full flex items-center justify-center px-64 py-6 bg-white mt-10"> <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white mt-10">
<div class="w-1/2 flex justify-end mr-16"> <div class="w-full xl:w-1/2 flex justify-end mr-16">
<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full"> <pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
class PostgreSQLDatabaseManager implements TenantDatabaseManager class PostgreSQLDatabaseManager implements TenantDatabaseManager
{ {
public function createDatabase($name) public function createDatabase($name)
@ -227,13 +227,13 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
} }
</pre> </pre>
</div> </div>
<div class="w-1/2 text-left"> <div class="w-full xl:w-1/2 text-left">
<h3 class="text-3xl font-semibold">SOLID extensibility</h3> <h3 class="text-3xl font-semibold">SOLID extensibility</h3>
<p class="text-lg">The package follows the SOLID principles and is open to extension. You're free to write <p class="text-lg">The package follows the SOLID principles and is open to extension. You're free to write
(and contribute ❤️) your own Storage Drivers, Tenancy Bootstrappers, and Feature classes.</p> (and contribute ❤️) your own Storage Drivers, Tenancy Bootstrappers, and Feature classes.</p>
</div> </div>
</div> </div>
<div class="p-16 flex justify-center"> <div class="py-6 xl:p-16 flex justify-center">
<div> <div>
<h2 class="text-4xl font-bold text-center">How it works</h2> <h2 class="text-4xl font-bold text-center">How it works</h2>
<ul class="text-xl leading-loose mt-4"> <ul class="text-xl leading-loose mt-4">
@ -265,7 +265,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
</ul> </ul>
</div> </div>
</div> </div>
<div class="p-20 flex justify-center bg-indigo-900"> <div class="py-10 xl:p-20 flex justify-center bg-indigo-900">
<div class="text-xl"> <div class="text-xl">
<h2 class="text-4xl font-bold text-center text-indigo-100">Ready to try it?</h2> <h2 class="text-4xl font-bold text-center text-indigo-100">Ready to try it?</h2>
<p class="text-indigo-200 my-6 text-center leading-loose"> <p class="text-indigo-200 my-6 text-center leading-loose">
@ -280,7 +280,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
</div> </div>
</div> </div>
</div> </div>
<div class="p-24"> <div class="-m-3 xl:m-0 xl:p-24">
<div class="border-2 border-indigo-200 bg-blue-100 rounded-15 p-10 flex justify-center"> <div class="border-2 border-indigo-200 bg-blue-100 rounded-15 p-10 flex justify-center">
<div class="text-xl"> <div class="text-xl">
<h2 class="text-3xl font-bold text-center">Stay Updated</h2> <h2 class="text-3xl font-bold text-center">Stay Updated</h2>