Merge pull request #106 from dansysanalyst/style_improv

Improve doc style

docs/.vitepress/theme/custom.css

@@ -1,16 +1,88 @@
 :root {
     --vp-c-brand-1: #f69e08;
     --vp-c-brand-2: #c78108;
-
     --vp-button-brand-bg: #ee9908;
 }
 
 .dark {
     --vp-button-brand-bg: #be7b08;;
 }
 
+/*
+.vp-doc :not(pre) > code
+{
+  background-color: #fef0d7 !important;
+}
+*/
+
+.vp-doc a {
+ color: #ca8207;
+}
+
+.pre, code, kbd, samp {
+ color: #ca8207 !important;
+}
+
 .vp-doc p,
 .vp-doc summary {
   text-align: justify;
   text-justify: inter-word;
-}
+}
+
+.success {
+  padding-top: 8px;
+  background-color: #EDF9D2;
+  outline: #638613 solid 1px;
+  color: #638613;
+}
+
+:root.dark .success {
+  background-color: #064E37;
+  outline:#5aa358 solid 1.5px;
+  color: #bfc8aa;
+}
+
+.success a {
+    color: #638613 !important;
+}
+
+:root.dark .success a {
+    color: #c8e18e !important;
+}
+
+.onlinedemo {
+  padding-top: 8px;
+  background-color: #F8D2F9;
+  outline: #841285 solid 1px;
+  color: #841285;
+}
+
+:root.dark .onlinedemo {
+  background-color: #7b487c;
+  color: #F3D7F4;
+  outline: #BA80F4 solid 1.5px;
+}
+
+:root.dark .onlinedemo a {
+    color: #ffdeff !important;
+}
+
+.onlinedemo a {
+    color: #841285 !important;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: opacity 0.25s;
+}
+
+.danger {
+  outline: var(--vp-c-danger-1) solid 1px;
+}
+
+.tip {
+  outline: #b8bbff solid 1px;
+}
+
+.info {
+  outline: #c6c9d4 solid 1px;
+}

docs/get-started/create-powergrid-table.md

@@ -122,9 +122,10 @@ In the feedback message, you will find:
 
 <br/>
 
-::: info 🎉 That's it!
-Now we can proceed to the [Show a PowerGrid Table](/get-started/rendering-a-powergrid-table) section.
-:::
+<div class="success custom-block">
+  <p class="custom-block-title">🎉 That's it!</p>
+  <p>Now we can proceed to the <a href="/get-started/rendering-a-powergrid-table">Show a PowerGrid Table</a> section.</p>
+</div>
 
 ## Customize the Component Creation
 

docs/get-started/install.md

@@ -35,9 +35,10 @@ php artisan vendor:publish --tag=livewire-powergrid-config
 
 ### 3. Configure PowerGrid
 
-::: info 🎉 All done!
-Let's go on and [configure](/get-started/powergrid-configuration.html#initial-configuration) PowerGrid!
-:::
+<div class="success custom-block">
+  <p class="custom-block-title">🎉 All done!</p>
+  <p>Let's go on and <a href="/get-started/powergrid-configuration.html#initial-configuration">configure</a> PowerGrid!</p>
+</div>
 
 ## Optional Steps
 

docs/get-started/powergrid-configuration.md

@@ -150,9 +150,10 @@ Currently, there are no specific Bootstrap theme configuration instructions.
 
 ### 6. Next step
 
-::: info 🎉 Everything ready!
-Now, we can go to the next step and [create a PowerGrid Table](/get-started/create-powergrid-table.html).
-:::
+<div class="success custom-block">
+  <p class="custom-block-title">🎉 Everything ready!</p>
+  <p>Now, we can go to the next step and <a href="/get-started/create-powergrid-table.html">create a PowerGrid Table</a>.</p>
+</div>
 
 ## General Configuration
 

docs/get-started/rendering-a-powergrid-table.md

@@ -30,9 +30,10 @@ Alternatively, you can use the Livewire Blade directive.
 @livewire('dish-table') // [!code ++]
 ```
 
-::: info 🎉 Another step done!
-Now, let's move forward to configure the [Datasource](/table-component/data-source.html).
-:::
+<div class="success custom-block">
+  <p class="custom-block-title">🎉 Great, we have a table!</p>
+  <p>Now, let's move forward to configure the <a href="/table-component/data-source.html">Datasource</a>.</p>
+</div>
 
 ### Component in sub-folder
 

docs/table-component/component-columns.md

@@ -100,9 +100,10 @@ class DishTable extends PowerGridComponent
 }
 ```
 
-::: info 🎉 Ok! Ok!
-Let's explore the various [Configuration Options](/table-component/component-configuration.html) available in our Component.
-:::
+<div class="success custom-block">
+  <p class="custom-block-title">🎉 Ok, all done!</p>
+  <p>Let's explore the various <a href="/table-component/component-configuration.html">Configuration Options</a> available in our Component.</p>
+</div>
 
 ## Column Data Field
 
@@ -269,9 +270,11 @@ The next example illustrates a case where allowing to filter by date as "d/m/Y".
         ->searchableRaw('DATE_FORMAT(dishes.produced_at, "%d/%m/%Y")'), // [!code highlight:1]
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of [searchableRaw()](https://demo.livewire-powergrid.com/examples/searchableraw).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using <a target="_blank" href="https://demo.livewire-powergrid.com/examples/searchableraw">searchableRaw()</a>.</p>
+
+</div>
 
 ### sortable()
 
@@ -354,9 +357,11 @@ Column::make('Dish name', 'name')
     ->hidden(isHidden: true, isForceHidden: true),
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of [hidden()](https://demo.livewire-powergrid.com/examples/export).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using <a target="_blank" href="https://demo.livewire-powergrid.com/examples/export">hidden()</a>.</p>
+
+</div>
 
 ---
 
@@ -378,9 +383,11 @@ Column::make('Dish price', 'price')
     ->visibleInExport(false), // will not include in exported file
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of [visibleInExport()](https://demo.livewire-powergrid.com/examples/export).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using <a target="_blank" href="https://demo.livewire-powergrid.com/examples/export">visibleInExport()</a>.</p>
+
+</div>
 
 ---
 

docs/table-component/component-configuration.md

@@ -55,9 +55,11 @@ class DishTable extends PowerGridComponent
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of a [No Records Found](https://demo.livewire-powergrid.com/examples/no-results-found) Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example of customizing <a target="_blank" href="https://demo.livewire-powergrid.com/examples/no-results-found">No Records Found</a>.</p>
+
+</div>
 
 ## Defer Loading
 
@@ -97,9 +99,11 @@ class DishTable extends PowerGridComponent
 
 In addition, it might be useful for you to disable the [Loading Icon](/table-features/header-and-footer.html#loading-icon)  when using with Defer Loading.
 
-:::info 🌎 Online Demo
-See an interactive example of a [Defer Loading](https://demo.livewire-powergrid.com/examples/defer-loading) Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example of a <a target="_blank" href="https://demo.livewire-powergrid.com/examples/defer-loading">Defer Loading</a> Table.</p>
+
+</div>
 
 ## Actions Method
 
@@ -195,9 +199,11 @@ class TableRefresher extends Component
 
 :::
 
-:::info 🌎 Online Demo
-See an interactive example of using [Auto Refresh](https://demo.livewire-powergrid.com/examples/auto-refresh) on a Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using  <a target="_blank" href="https://demo.livewire-powergrid.com/examples/auto-refresh">Auto Refresh</a> on a Table.</p>
+
+</div>
 
 ## Responsive Table
 
@@ -226,9 +232,11 @@ class DishTable extends PowerGridComponent
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of a PowerGrid [Responsive Table](https://demo.livewire-powergrid.com/examples/responsive).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example of a PowerGrid <a target="_blank" href="https://demo.livewire-powergrid.com/examples/responsive">Responsive Table</a>.</p>
+
+</div>
 
 ### Fixed Columns
 
@@ -308,9 +316,11 @@ class DishTable extends PowerGridComponent
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of using [Detail Row](https://demo.livewire-powergrid.com/examples/detail) on a Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using  <a target="_blank" href="https://demo.livewire-powergrid.com/examples/detail">Detail Row</a> on a Table.</p>
+
+</div>
 
 ### Collapse Others
 
@@ -373,9 +383,11 @@ class DishTable extends PowerGridComponent
 This feature does not support including other Livewire components (e.g. Actions)
 :::
 
-:::info 🌎 Online Demo
-See an interactive example of a [Lazy Loading](https://demo.livewire-powergrid.com/examples/lazy-load) Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example of a <a target="_blank" href="https://demo.livewire-powergrid.com/examples/lazy-load">Lazy Loading</a> Table.</p>
+
+</div>
 
 ### Load Content
 
@@ -437,9 +449,11 @@ class DishTable extends PowerGridComponent
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of a [Persist](https://demo.livewire-powergrid.com/examples/persist) Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example of a <a target="_blank" href="https://demo.livewire-powergrid.com/examples/persist">Persist</a> Table.</p>
+
+</div>
 
 The state data can be stored  in either cookies or session, depending on the [Persist Drive](/get-started/powergrid-configuration.html#persist-driver) configuration. However, you may customize the Persistent Drive settings for each component using Laravel's [`config()`](https://laravel.com/docs/helpers#method-config) helper within the Component's `boot()` method.
 

docs/table-component/data-source-fields.md

@@ -35,6 +35,11 @@ class DishTable extends PowerGridComponent
 }
 ```
 
+<div class="success custom-block">
+  <p class="custom-block-title">🎉 Super!</p>
+  <p>Now, let's check out how to <a href="/table-component/component-columns.html">Add Columns</a>.</p>
+</div>
+
 ## Custom Fields
 
 Sometimes, we need to modify data from the database before showing it on the Table Component.
@@ -214,9 +219,10 @@ public function fields(): PowerGridFields
 It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) to escape data return in Custom Fields.
 :::
 
-:::info 🌎 Online Demo
-See an interactive example of creating an [HTML Link](https://demo.livewire-powergrid.com/examples/custom-field-html-link).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example generating an <a target="_blank" href="https://demo.livewire-powergrid.com/examples/custom-field-html-link">HTML Link</a>.</p>
+</div>
 
 ---
 
@@ -303,9 +309,11 @@ class SelectCategory extends Component
 
 ::: code-group
 
-:::info 🌎 Online Demo
-See an interactive example of [Dropdown Menu](https://demo.livewire-powergrid.com/examples/input-select) on a Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using <a target="_blank" href="https://demo.livewire-powergrid.com/examples/input-select">Dropdown Menu</a> on a Table.</p>
+
+</div>
 
 ---
 
@@ -329,9 +337,11 @@ public function fields(): PowerGridFields
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of showing [Images](https://demo.livewire-powergrid.com/examples/custom-field-image) on a Table.
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using <a target="_blank" href="https://demo.livewire-powergrid.com/examples/custom-field-image">Images</a> on a Table.</p>
+
+</div>
 
 ---
 
@@ -356,9 +366,11 @@ public function fields(): PowerGridFields
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of using a [Custom Field Blade Component](https://demo.livewire-powergrid.com/examples/custom-field-blade-component).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using  a <a target="_blank" href="https://demo.livewire-powergrid.com/examples/custom-field-blade-component">Custom Field Blade Component</a>.</p>
+
+</div>
 
 ---
 
@@ -405,9 +417,11 @@ public function fields(): PowerGridFields
 }
 ```
 
-:::info 🌎 Online Demo
-See an interactive example of using [Enums](https://demo.livewire-powergrid.com/examples/enum).
-:::
+<div class="onlinedemo custom-block">
+  <p class="custom-block-title">🚀 See it in action</p>
+  <p>See an interactive example using  <a target="_blank" href="https://demo.livewire-powergrid.com/examples/enum">Enums</a>.</p>
+
+</div>
 
 ## Exporting Data