Update shadow colors

src/2.x/packages/statamic.md

@@ -13,13 +13,13 @@ This documentation is for [`rapidez/statamic`](https://github.com/rapidez/statam
 ## Features
 
 - Products, categories, and brands are integrated through [Runway](https://github.com/statamic-rad-pack/runway)
-- Automatic site registration based on Magento stores
 - Routing: Statamic routes are the fallback
 - Page builder fieldset with multiple components:
     - Product slider
     - Content
     - Image
     - Form
+- Navigation component
 - Responsive images with [Glide](https://github.com/justbetter/statamic-glide-directive)
 - Breadcrumbs on pages
 - Globals available in all views
@@ -81,16 +81,30 @@ After that, you'll find all options within `config/rapidez/statamic.php`
 
 ### Sites
 
-Sites within Statamic will automatically be registered based on the Magento stores. So there is no need for a `sites.yaml`. The current site will be determined based on the `MAGE_RUN_CODE`, and the alternate hreflang link tags are grouped by the `website_code`
+Sites can be configured in the `config/rapidez/statamic.php`, no need for a `sites.yaml`
+
+```php
+'sites' => [
+    'default' => [
+        'name' => env('APP_NAME', 'Statamic'),
+        'locale' => 'en_EN',
+        'lang' => 'en_EN',
+        'url' => '/',
+        'attributes' => [
+            'magento_store_id' => 1,
+            'group' => 'default',
+            'disabled' => false,
+        ],
+    ],
+]
+```
+
+The current site will be determined based on the `MAGE_RUN_CODE`, and the alternate hreflang link tags are grouped by the `group`
 
 ::: warning Sites cache
 Make sure to flush the cache after editing stores in Magento!
 :::
 
-::: details Disable Statamic for a store
-To disable Statamic for a specific store, just add the `store_code` to the `disabled_sites` within `config/rapidez/statamic.php`
-:::
-
 ### Routing
 
 The default Statamic routing will override the Rapidez routes. We don't want that, so you have to disable the default Statamic routing within `config/statamic/routes.php`
@@ -128,8 +142,8 @@ For example, the product slider component within the page builder has a relation
 
 You can also enrich data with this. For example, when you want to use Statamic to add data on product, category, or brand pages. Therefore, next to the "Runway product collection" (which is read-only and has all data from Magento), there is also a "Product content collection". From there, you're free to use anything from Statamic. Only the `linked_product` field using the `belongs_to` field type should be there to link your custom content to a product within Magento.
 
-::: warning This is going to change in the next version!
-We're currently working on rapidez/statamic v5 where we're moving to a "hybrid Runway" solution. Have a look at [this pull request](https://github.com/rapidez/statamic/pull/80) for more information.
+::: warning This is changed in rapidez/statamic v5!
+See the [rapidez/statamic v5 docs](../../3.x/packages/statamic.md#runway-magento-data) and the [pull request](https://github.com/rapidez/statamic/pull/80) for more information.
 :::
 
 ### Displaying content
@@ -146,7 +160,7 @@ To display the default page builder content, you have to add this to your view:
 - Category: `resources/views/vendor/rapidez/category/overview.blade.php`
 
 ::: details Disable `$content`
-If you don't want `$content` on the product / category pages, you can disable it from the `rapidez/statamic.php` config file by setting the `fetch` option to `false`
+If you don't want `$content` on the product / category pages, you can disable it from the `config/rapidez/statamic.php` config file by setting the `fetch` option to `false`
 :::
 
 ## Brand pages
@@ -167,7 +181,62 @@ If you want to have actual brand pages on the frontend displaying all the produc
 route: '/brands/{slug}'
 ```
 
-For a "brand overview" page with all brands listed alphabetically, you can just create a normal page and use the "Brand overview" component.
+For a "brand overview" page with all brands listed alphabetically, you can just create a normal page from the control panel and use the "brand overview" component.
+
+## Navigation
+
+To render a navigation somewhere we provide two options; a full main navigation option with a mobile sliderover menu + a helper with a unified cached output to render it yourself.
+
+### Navigation helper
+
+With Statamic you can get a data by tag in Blade with:
+
+```php
+Statamic::tag('nav:footer')->fetch()
+```
+
+This will result in multiple queries to get all data. When you're linking to for example a category, each category will be a query resulting in a lot of queries. This packages provides a "helper" that fetches the navigation completely with all children and the result will be unified and cached. When a navigation changes; the cache will refreshed automatically.
+
+```php
+RapidezStatamic::nav('nav:footer')
+```
+
+::: details Example usage
+```blade
+<ul>
+    @foreach (RapidezStatamic::nav('nav:footer') as $item)
+        <li>
+            <a href="{{ $item['url'] }}">
+                {{ $item['title'] }}
+            </a>
+        </li>
+        {{-- $item['children'] --}}
+    @endforeach
+</ul>
+```
+:::
+
+### Main navigation
+
+When you need a navigation from Statamic to be your site's main navigation in the header we provide a Blade component that handles everything for you:
+
+```blade
+<x-rapidez-statamic::nav
+    nav="nav:main"
+    {{-- Optionally a different mobile menu; of multiple combined --}}
+    :mobileNav="['nav:main', 'nav:header_links']"
+/>
+```
+
+In `resources/views/vendor/rapidez/layouts/partials/header.blade.php` replace the default Rapidez navigation with this component and you'll get a navigation displaying the main items in the header and the children within a "mega menu" dropdown on hover.
+
+On mobile the whole menu will be in a slideover from [rapidez/blade-components](https://github.com/rapidez/blade-components); to open the mobile menu you've to add a opener somewhere and style this however you'd like:
+
+```blade
+<label for="navigation">
+    Open mobile menu
+</label>
+```
 
 ## Globals
 

src/3.x/cache.md

@@ -29,3 +29,19 @@ Alternatively, you could implement one of these packages with different strategi
 - [spatie/laravel-responsecache](https://github.com/spatie/laravel-responsecache)
 - [JosephSilber/page-cache](https://github.com/JosephSilber/page-cache)
 - [spatie/laravel-varnish](https://github.com/spatie/laravel-varnish)
+
+### Cloudflare
+
+Using [Cloudflare's CDN edge](https://www.cloudflare.com/learning/cdn/glossary/edge-server/) you can speed up page responses even more (~30ms) by bringing the files closer to your customers. By default Cloudflare will not cache any pages, but you can configure it by [creating a cache rule in Cloudflare](https://developers.cloudflare.com/cache/how-to/cache-rules/create-dashboard/) with these settings:
+
+- [Cache eligibility](https://developers.cloudflare.com/cache/how-to/cache-rules/settings/#cache-eligibility)
+  - [Eligible for cache](https://developers.cloudflare.com/cache/how-to/cache-rules/settings/#eligible-for-cache-settings)
+- [Edge TTL](https://developers.cloudflare.com/cache/how-to/cache-rules/settings/#edge-ttl)
+  -  `Use cache-control header if present, bypass cache if not` - this ensures Cloudflare will not cache pages that don't explicitly state they can be cached
+- [Browser TTL](https://developers.cloudflare.com/cache/how-to/cache-rules/settings/#browser-ttl)
+  - `Respect origin TTL`
+
+With this Cloudflare will listen to the cache-control headers sent by your server, but by default Laravel and Rapidez will make each page response private, so no caching will be done. If you're sure your pages contain no private data (which is the case by default in Rapidez) you can add the [Cache Control Middleware](https://laravel.com/docs/master/responses#cache-control-middleware). These packages control it for you:
+
+- [spatie/laravel-varnish](https://github.com/spatie/laravel-varnish)
+- [rapidez/statamic](packages/statamic.md) (see [Static Caching](packages/statamic.md#static-caching))

src/3.x/extending.md

@@ -137,6 +137,10 @@ Alternatively, you can have more control by expanding the configuration like bel
     'size' => 3,
     'stores' => ['my_second_store'],
     'sort' => ['date' => 'desc'],
+    'options' => [
+        'fields' => ['name'],
+        '_source' => false,
+    ],
 ],
 ```
 
@@ -147,6 +151,7 @@ Alternatively, you can have more control by expanding the configuration like bel
 | `size` | No | Overrides the default `size` parameter for this index, letting you define a different page size for this specific index. In the above example, we only get a maximum of 3 blogs to be shown in the autocomplete instead of the default 10. |
 | `stores` | No | Limits your index to specific stores. In the above example, the `blogs` index will only be queried on the store with the code `my_second_store`. This allows you to have store-specific indexes. The index will be used on all stores if this parameter is not defined. |
 | `sort` | No | Lets you define an alternative sorting in case the default ES sorting doesn't suffice. See [the ES documentation](https://www.elastic.co/guide/en/elasticsearch/reference/7.17/sort-search-results.html) for how to use this parameter correctly. |
+| `options` | No | Useful for any other arbitrary options you might want to define. See [the ES documentation](https://www.elastic.co/guide/en/elasticsearch/reference/7.17/search-your-data.html). |
 
 ### Displaying new indexes
 

src/3.x/installation.md

@@ -62,9 +62,12 @@ The first time product images will load slowly as they are resized on the fly. H
 ### Magento
 
 Rapidez is making AJAX requests to the Magento API which requires CORS to be opened.
-- To do so with Laravel Valet, see [this](https://gist.github.com/poul-kg/b669a76fc27afcc31012aa0b0e34f738) and for Valet+, see [this](https://github.com/weprovide/valet-plus/issues/493).
+- You have to restrict this to your domain within your webserver configuration or with, for example, this [Magento 2 CORS module](https://github.com/graycoreio/magento2-cors).
+
+When using the above module the following will probably not be necessary.
+
+- Using Laravel Valet you can use [this](https://gist.github.com/poul-kg/b669a76fc27afcc31012aa0b0e34f738) and for Valet+, see [this](https://github.com/weprovide/valet-plus/issues/493).
 - With the Docker Magento installation, it's already opened [with a patch](https://github.com/michielgerritsen/magento2-extension-integration-test/blob/master/magento/patches/cors.patch).
-- For production, you have to restrict this to your domain within your webserver configuration or with, for example, this [Magento 2 CORS module](https://github.com/graycoreio/magento2-cors).
 
 ### Elasticsearch
 

src/3.x/packages/statamic.md

@@ -20,6 +20,7 @@ This documentation is for [`rapidez/statamic`](https://github.com/rapidez/statam
     - Content
     - Image
     - Form
+- Navigation component
 - Responsive images with [Glide](https://github.com/justbetter/statamic-glide-directive)
 - Breadcrumbs on pages
 - Globals available in all views
@@ -29,45 +30,19 @@ This documentation is for [`rapidez/statamic`](https://github.com/rapidez/statam
 
 ## Installation
 
-1. **Install Statamic**
-
-> Just follow the [Statamic installation guide](https://statamic.dev/installing/laravel)
-
-2. **Prepare the user model**
-
-> Copy these two files from Laravel into your project:
->
-> - [app/Models/User.php](https://github.com/laravel/laravel/blob/11.x/app/Models/User.php)
-> - [database/migrations/0001_01_01_000000_create_users_table.php](https://github.com/laravel/laravel/blob/11.x/database/migrations/0001_01_01_000000_create_users_table.php)
-
-3. **Install the Rapidez Statamic integration**
+1. **Install Statamic with the Rapidez Statamic integration**
 
 ```bash
 composer require rapidez/statamic
 ```
 
-4. **Finish the user model**
-
-> Follow the [storing users in a database guide](https://statamic.dev/tips/storing-users-in-a-database#in-an-existing-laravel-app)
-
-5. **Run the install command**
+2. **Run the install command**
 
 ```bash
 php artisan rapidez-statamic:install
 ```
 
-When running the install command, you will be prompted to setup the Eloquent driver. In this configuration, you can choose what to keep in the flat file system and what to migrate to the database. We recommend migrating the following options to the database when setting up the eloquent driver:
-
-- Assets
-- Collection Trees
-- Entries
-- Forms
-- Form Submissions
-- Globals
-- Global Variables
-- Navigation Trees
-- Terms
-- Tokens
+And follow the steps. When finished visit `/cp` for the control panel 🚀
 
 ## Configuration
 
@@ -126,11 +101,7 @@ With [Runway](https://github.com/statamic-rad-pack/runway), you're able to displ
 
 For example, the product slider component within the page builder has a relation with the products Runway model. This way, you can select from all Magento products you'd like to display within the slider.
 
-You can also enrich data with this. For example, when you want to use Statamic to add data on product, category, or brand pages. Therefore, next to the "Runway product collection" (which is read-only and has all data from Magento), there is also a "Product content collection". From there, you're free to use anything from Statamic. Only the `linked_product` field using the `belongs_to` field type should be there to link your custom content to a product within Magento.
-
-::: warning This is going to change in the next version!
-We're currently working on rapidez/statamic v5 where we're moving to a "hybrid Runway" solution. Have a look at [this pull request](https://github.com/rapidez/statamic/pull/80) for more information.
-:::
+You can also enrich data with this; when you want to use Statamic to add data on product, category, or brand pages. When saving an entry we're not touching the Magento tables, those are always read-only! We are observing the "updating" event on those models and save all data to a Statamic entry. When reveiving a model we're doing opposite; merging the data from Magento with the data from the Statamic entry so we just have one collection.
 
 ### Displaying content
 
@@ -146,28 +117,84 @@ To display the default page builder content, you have to add this to your view:
 - Category: `resources/views/vendor/rapidez/category/overview.blade.php`
 
 ::: details Disable `$content`
-If you don't want `$content` on the product / category pages, you can disable it from the `rapidez/statamic.php` config file by setting the `fetch` option to `false`
+If you don't want `$content` on the product / category pages, you can disable it from the `config/rapidez/statamic.php` config file by setting the `fetch` option to `false`
 :::
 
 ## Brand pages
 
-You'll get a brand collection out-of-the-box. You could just create entries, but those can also be imported from Magento. Double-check the `brand_attribute_id` within `config/rapidez/statamic.php` and run the import command:
+Just make sure the `brand_attribute_id` is correct within `config/rapidez/statamic.php` and all brands will be available within Statamic automatically. If you want to have actual brand pages on the frontend displaying all the products of that brand, you have to enable the route per store within `config/rapidez/statamic/builder.php`:
 
+```php
+'routes' => [
+    Brands::class => [
+        'store_code' => 'brand/{slug}'
+    ],
+],
+```
+
+For a "brand overview" page with all brands listed alphabetically, you can just create a normal page from the control panel and use the "brand overview" component.
+
+::: details I'm using the Amasty ShopBy Brand module
+Good news! There is an import command to import the data!
 ```bash
 php artisan rapidez:statamic:import:brands
 ```
+:::
 
-::: details I'm using the Amasty ShopBy Brand module
-Good news! We'll detect that module and import all existing data into Statamic!
+## Navigation
+
+To render a navigation somewhere we provide two options; a full main navigation option with a mobile sliderover menu + a helper with a unified cached output to render it yourself.
+
+### Navigation helper
+
+With Statamic you can get a data by tag in Blade with:
+
+```php
+Statamic::tag('nav:footer')->fetch()
+```
+
+This will result in multiple queries to get all data. When you're linking to for example a category, each category will be a query resulting in a lot of queries. This packages provides a "helper" that fetches the navigation completely with all children and the result will be unified and cached. When a navigation changes; the cache will refreshed automatically.
+
+```php
+RapidezStatamic::nav('nav:footer')
+```
+
+::: details Example usage
+```blade
+<ul>
+    @foreach (RapidezStatamic::nav('nav:footer') as $item)
+        <li>
+            <a href="{{ $item['url'] }}">
+                {{ $item['title'] }}
+            </a>
+        </li>
+        {{-- $item['children'] --}}
+    @endforeach
+</ul>
+```
 :::
 
-If you want to have actual brand pages on the frontend displaying all the products of that brand, you have to enable the route within `content/collections/brands.yaml`
+### Main navigation
 
-```yaml
-route: '/brands/{slug}'
+When you need a navigation from Statamic to be your site's main navigation in the header we provide a Blade component that handles everything for you:
+
+```blade
+<x-rapidez-statamic::nav
+    nav="nav:main"
+    {{-- Optionally a different mobile menu; of multiple combined --}}
+    :mobileNav="['nav:main', 'nav:header_links']"
+/>
 ```
 
-For a "brand overview" page with all brands listed alphabetically, you can just create a normal page and use the "Brand overview" component.
+In `resources/views/vendor/rapidez/layouts/partials/header.blade.php` replace the default Rapidez navigation with this component and you'll get a navigation displaying the main items in the header and the children within a "mega menu" dropdown on hover.
+
+On mobile the whole menu will be in a slideover from [rapidez/blade-components](https://github.com/rapidez/blade-components); to open the mobile menu you've to add a opener somewhere and style this however you'd like:
+
+```blade
+<label for="navigation">
+    Open mobile menu
+</label>
+```
 
 ## Globals
 
@@ -192,6 +219,17 @@ With the [default rapidez/sitemap config](https://github.com/rapidez/sitemap/blo
 
 Statamic comes with [static caching](https://statamic.dev/static-caching) and with this packages we're adding the middleware that handles that from Statamic to all Rapidez web routes. When you configure static caching with Statamic it will also be applied to all Rapidez routes!
 
+::: details Cloudflare Static Caching
+Cloudflare's CDN edge can bring these static files even closer and faster to the customer. To achieve this you will need to create a [Cloudflare cache rule](../cache.md#cloudflare) and add a cache control header to your static route:
+
+```nginx
+location @static {
+    add_header Cache-Control "max-age=120, stale-while-revalidate=3600";# [!code ++]
+    try_files /static${uri}_$args.html $uri $uri/ /index.php?$args;
+}
+```
+:::
+
 Invalidation is handled by a command that checks the `updated_at` column on products, categories and pages in Magento. Everything updated after the latest invalidation will be invalidated:
 
 ```bash