Wip

docs/_data/manifest.json

@@ -1,5 +1,5 @@
 {
-  "dist/main.css": "/dist/main.687d1b36.css",
+  "dist/main.css": "/dist/main.e1d30c81.css",
   "dist/main.js": "/dist/main.3be5bc06.js",
   "dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
   "dist/455.095e6545.js": "/dist/455.095e6545.js",

docs/_layouts/symfony.html

@@ -0,0 +1,167 @@
+---
+layout: default
+---
+
+<div class="max-w-7xl mx-auto">
+  <!-- Hero Section with Animated Elements -->
+  <div class="relative overflow-hidden rounded-xl bg-gradient-to-r from-white to-slate-50 border border-slate-200 mb-8 shadow-sm">
+    <!-- Subtle background pattern -->
+    <div class="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:16px_16px] pointer-events-none"></div>
+
+    <!-- Symfony logo with glow effect -->
+    <div class="absolute -right-5 -top-5 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
+
+    <div class="relative px-6 py-10 md:py-16 md:px-10 flex flex-col md:flex-row items-center">
+      <div class="md:w-3/5 z-10">
+        <h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
+          {{ page.title }} <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Integration</span>
+        </h1>
+        <p class="text-lg text-slate-600 mb-6 max-w-xl">{{ page.description }}</p>
+        <div class="flex flex-wrap gap-3 animate-fade-in">
+          <a href="#installation" class="flex items-center bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-5 py-2.5 rounded-full shadow-md hover:shadow-lg transition-all group">
+            <span>Get Started</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+          </a>
+          <a href="https://github.com/php-flasher/php-flasher" target="_blank" class="flex items-center bg-white text-slate-800 px-5 py-2.5 rounded-full border border-slate-200 hover:bg-slate-50 transition-colors">
+            <i class="fa-brands fa-github mr-2"></i>
+            <span>Star on GitHub</span>
+          </a>
+        </div>
+      </div>
+
+      <div class="md:w-2/5 mt-6 md:mt-0 z-10 animate-float">
+        <div class="relative aspect-square w-44 mx-auto">
+          <!-- Symfony Logo -->
+          <div class="absolute inset-0 flex items-center justify-center">
+            <i class="fa-brands fa-symfony text-black text-7xl"></i>
+          </div>
+          <!-- Animated orbit -->
+          <div class="absolute inset-0 rounded-full border-4 border-dashed border-slate-200 animate-spin-slow"></div>
+          <!-- PHPFlasher notification dots -->
+          <div class="absolute top-0 right-0 w-8 h-8 bg-blue-500 rounded-full animate-pulse-slow"></div>
+          <div class="absolute bottom-0 left-5 w-6 h-6 bg-green-500 rounded-full animate-pulse-delayed"></div>
+          <div class="absolute left-0 top-10 w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Feature pills -->
+    <div class="bg-white border-t border-slate-100 px-6 py-4 flex gap-2 overflow-x-auto no-scrollbar">
+      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
+        <i class="fa-solid fa-bolt text-amber-500 mr-1.5"></i> Quick Setup
+      </div>
+      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
+        <i class="fa-solid fa-wand-magic-sparkles text-purple-500 mr-1.5"></i> Multiple Themes
+      </div>
+      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
+        <i class="fa-solid fa-language text-blue-500 mr-1.5"></i> RTL Support
+      </div>
+      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
+        <i class="fa-solid fa-universal-access text-green-500 mr-1.5"></i> Accessible
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Content with Styled Sections -->
+  <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+    <!-- Table of contents - Desktop -->
+    <div class="border-b border-slate-100">
+      <div class="px-6 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
+        <a href="#requirements" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
+          <i class="fa-solid fa-list-check mr-1.5 text-indigo-500"></i> Requirements
+        </a>
+        <span class="text-slate-300">|</span>
+        <a href="#installation" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
+          <i class="fa-solid fa-download mr-1.5 text-indigo-500"></i> Installation
+        </a>
+        <span class="text-slate-300">|</span>
+        <a href="#usage" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
+          <i class="fa-solid fa-code mr-1.5 text-indigo-500"></i> Usage
+        </a>
+        <span class="text-slate-300">|</span>
+        <a href="#configuration" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
+          <i class="fa-solid fa-gear mr-1.5 text-indigo-500"></i> Configuration
+        </a>
+        <span class="text-slate-300">|</span>
+        <a href="#presets" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
+          <i class="fa-solid fa-sliders mr-1.5 text-indigo-500"></i> Presets
+        </a>
+      </div>
+    </div>
+
+    <!-- Content area with custom styling -->
+    <div class="prose prose-slate max-w-none p-6 md:p-8">
+      {{ content }}
+    </div>
+  </div>
+
+  <!-- Footer CTA -->
+  <div class="mt-8 mb-12">
+    <div class="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-xl p-6 md:p-8 border border-indigo-200/50 shadow-sm">
+      <div class="flex flex-col md:flex-row md:items-center">
+        <div class="md:w-3/4">
+          <h3 class="text-2xl font-bold text-indigo-900 mb-2">Ready to improve your user experience?</h3>
+          <p class="text-indigo-700 mb-6 md:mb-0">Start using PHPFlasher today and give your users beautiful notifications in minutes!</p>
+        </div>
+        <div class="md:w-1/4 md:text-right">
+          <a href="#installation" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-3 rounded-lg transition-colors">
+            Get Started Now
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+
+  .animate-spin-slow {
+    animation: spin 20s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .animate-pulse-slow {
+    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .animate-pulse-delayed {
+    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) 1s infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 1s ease-out forwards;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+</style>

docs/dist/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "main": {
       "css": [
-        "/dist/main.687d1b36.css"
+        "/dist/main.e1d30c81.css"
       ],
       "js": [
         "/dist/main.3be5bc06.js"

docs/pages/symfony.md

@@ -1,24 +1,25 @@
 ---
 permalink: /symfony/
 title: Symfony
-description: Integrate PHPFlasher into your Symfony application to enhance user experience with flash notifications. This guide shows you how to add engaging messages after user actions using PHPFlasher in Symfony.
+description: Integrate PHPFlasher into your Symfony application to enhance user experience with flash notifications. This guide shows you how to add engaging messages after user actions.
 framework: symfony
+layout: symfony
 ---
 
-## <i class="fa-duotone fa-list-radio"></i> Requirements
+<a id="requirements"></a>
+## Requirements
 
-**<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** helps you easily add flash notifications to your **<i class="fa-brands fa-symfony text-black fa-xl"></i> Symfony** projects, improving user feedback with minimal setup.
+**PHPFlasher** helps you easily add flash notifications to your **Symfony** projects, improving user feedback with minimal setup.
 
-To use **<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** with Symfony, you need:
+To use **PHPFlasher** with Symfony, you need:
 
-> <i class="fa-brands fa-php fa-2xl text-blue-900 mr-1 mb-1"></i> **PHP** v8.2 or higher
+* **PHP** v8.2 or higher
-> <i class="fa-brands fa-symfony fa-2xl text-black mr-1 ml-4"></i> **Symfony** v7.0 or higher
+* **Symfony** v7.0 or higher
 
----
+<a id="installation"></a>
+## Installation
 
-## <i class="fa-duotone fa-list-radio"></i> Installation
+**PHPFlasher** is modular. You can install only the parts you need.
-
-**<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** is modular. You can install only the parts you need.
 
 Run this command to install it:
 
@@ -32,13 +33,80 @@ After installing, run this command to set up the required assets:
 php bin/console flasher:install
 ```
 
----
+<a id="usage"></a>
+## Usage
 
-{% include _usage.md %}
+### Basic Usage
 
----
+Here's a basic example of using PHPFlasher in a Symfony controller:
 
-## <i class="fa-duotone fa-list-radio"></i> Configuration
+```php
+#/ basic usage
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ProductController extends AbstractController
+{
+    #[Route('/product/create', name: 'app_product_create')]
+    public function create(): Response
+    {
+        // Your logic to create a product
+        
+        // Add a success notification
+        flash()->success('Product created successfully!');
+        
+        return $this->redirectToRoute('app_product_list');
+    }
+}
+```
+
+### Notification Types
+
+PHPFlasher supports different types of notifications:
+
+```php
+#/ notification types
+
+// Success message
+flash()->success('Your changes have been saved!');
+
+// Error message
+flash()->error('Something went wrong!');
+
+// Warning message
+flash()->warning('Please review your data before proceeding.');
+
+// Info message
+flash()->info('The system will be down for maintenance tonight.');
+```
+
+### Adding a Title
+
+You can add a title to your notifications:
+
+```php
+flash()->success('Your profile has been updated successfully.', 'Profile Updated');
+```
+
+### Notification Options
+
+Customize your notifications with various options:
+
+```php
+#/ notification options
+
+flash()->success('Your changes have been saved!')
+    ->option('position', 'top-center')  // Position on the screen
+    ->option('timeout', 5000)           // How long to display (milliseconds)
+    ->option('rtl', true);              // Right-to-left support
+```
+
+<a id="configuration"></a>
+## Configuration
 
 If you want to change the default settings, you can publish the configuration file:
 
@@ -86,25 +154,10 @@ flasher:
       error: ['error', 'danger']
       warning: ['warning', 'alarm']
       info: ['info', 'notice', 'alert']
-  
-    # Set criteria to filter which notifications are displayed (optional)
-    # filter:
-    #     # Maximum number of notifications to show at once
-    #     limit: 5
-
-    # Define notification presets to simplify notification creation (optional)
-    # presets:
-    #     # Example preset:
-    #     entity_saved:
-    #         type: 'success'
-    #         title: 'Entity saved'
-    #         message: 'Entity saved successfully'
-
 ```
 
----
+<a id="presets"></a>
-
+## Presets
-## <i class="fa-duotone fa-list-radio"></i> Presets
 
 You can create a preset for a custom notification that you want to reuse in multiple places. Add a `presets` entry in the configuration file.
 
@@ -152,49 +205,11 @@ class BookController
         flash()->{{ type }}('{{ message }}', '{{ title }}');
 ```
 
-<p id="preset-variables"><a href="#preset-variables" class="anchor"><i class="fa-duotone fa-link"></i> Variables</a></p>
+## RTL Support
 
-Presets can also have variables that you can replace using the translation system. For example, you can have a preset that shows a personalized welcome message.
+**PHPFlasher** makes it easy to use **right-to-left** languages like `Arabic` or `Hebrew`. It automatically detects the text direction and adjusts accordingly.
 
-```yaml
+Just make sure the translation service is enabled, and **PHPFlasher** will handle the rest.
-# config/packages/flasher.yaml
-
-flasher:
-    presets:
-        hello_user:
-            type: {{ type }}
-            message: welcome_back_user
-```
-
-In your translation file, define `welcome_back_user` with a message containing the variable `:username`.
-
-```yaml
-# translations/flasher.en.yaml
-
-welcome_back_user: Welcome back :username
-```
-
-To replace `:username` with the actual username in your controller, pass an array with the values to substitute as the second argument:
-
-```php
-class BookController
-{
-    public function save()
-    {
-        $username = 'John Doe';
-
-        flash()->preset('hello_user', ['username' => $username]);
-```
-
----
-
----
-
-## <i class="fa-duotone fa-list-radio"></i> RTL support
-
-**<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** makes it easy to use <i class="fa-duotone fa-signs-post text-indigo-900 mr-1 fa-lg"></i> **right-to-left** languages like `Arabic` or `Hebrew`. It automatically detects the text direction and adjusts accordingly.
-
-Just make sure the translation service is enabled, and **<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** will handle the rest.
 
 {% assign id = '#/ phpflasher rtl' %}
 {% assign type = 'success' %}
@@ -211,15 +226,11 @@ flash()
     ->{{ type }}('Your request was processed successfully.', 'Congratulations!');
 ```
 
----
+## Translation
 
-## <i class="fa-duotone fa-list-radio"></i> Translation
+**PHPFlasher** lets you translate your notification `messages` and `presets`. It comes with translations for `Arabic`, `English`, `French`, `German`, `Spanish`, `Portuguese`, `Russian`, and `Chinese`. You can also add your own translations.
 
-**<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** lets you translate your notification `messages` and `presets`. It comes with translations for `Arabic`, `English`, `French`, `German`, `Spanish`, `Portuguese`, `Russian`, and `Chinese`. You can also add your own translations.
+To override the `English` translations for **PHPFlasher**, create a file at `translations/flasher.en.yaml`.
-
-To override the `English` translations for <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>, create a file at `translations/flasher.en.yaml`.
-
-In this file, define **only** the translation strings you want to change. Any strings you don't override will use <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>'s default translations.
 
 Here are examples of the default translation keys for `Arabic`, `English`, and `French`:
 
@@ -271,106 +282,16 @@ The resource was deleted: 'La ressource :resource a été supprimée'
 resource: ''
 ```
 
-> These translation files help you localize notifications to match user preferences, so your application can communicate effectively in different languages.
+{% assign id = '#/ symfony translation examples' %}
-
+{% assign type = 'success' %}
-{% assign id = '#/ symfony arabic translations' %}
+{% include example.html %}
-{% assign successMessage = 'تم إنشاء الملف' %}
-{% assign errorMessage = 'حدث خطأ أثناء إرسال طلبك.' %}
-{% assign warningMessage = 'يجب إكمال جميع الحقول الإلزامية قبل إرسال النموذج' %}
-{% assign infoMessage = 'سيتم تحديث هذه الصفحة في غضون 10 دقائق.' %}
-
-<script type="text/javascript">
-    messages['{{ id }}'] = [
-        {
-            handler: 'flasher',
-            type: 'success',
-            message: '{{ successMessage }}',
-            title: 'نجاح',
-            options: {},
-        },
-        {
-            handler: 'flasher',
-            type: 'error',
-            message: '{{ errorMessage }}',
-            title: 'خطأ',
-            options: {},
-        },
-        {
-            handler: 'flasher',
-            type: 'warning',
-            message: '{{ warningMessage }}',
-            title: 'تحذير',
-            options: {},
-        },
-        {
-            handler: 'flasher',
-            type: 'info',
-            message: '{{ infoMessage }}',
-            title: 'معلومة',
-            options: {},
-        },
-        
-    ];
-</script>
 
 ```php
 {{ id }}
 
-// Translate the flash message using the PHPFlasher translation files
+// Translation will automatically use the correct language files
 flash()->success('The resource was created');
 
-flash()->error('{{ errorMessage }}');
+// You can also specify a different language
-flash()->warning('{{ warningMessage }}');
+flash()->translate('fr')->success('The resource was created');
-flash()->info('{{ infoMessage }}');
-```
-
-{% assign id = '#/ symfony french translations' %}
-{% assign successMessage = "La ressource a été ajoutée" %}
-{% assign errorMessage = "Une erreur s’est produite lors de l’envoi de votre demande." %}
-{% assign warningMessage = "Vous devez remplir tous les champs obligatoires avant de soumettre le formulaire." %}
-{% assign infoMessage = "Cette page sera mise à jour dans 10 minutes."%}
-
-<script type="text/javascript">
-    messages['{{ id }}'] = [
-        {
-            handler: 'flasher',
-            type: 'success',
-            message: '{{ successMessage }}',
-            title: 'Succès',
-            options: {},
-        },
-        {
-            handler: 'flasher',
-            type: 'error',
-            message: '{{ errorMessage }}',
-            title: 'Erreur',
-            options: {},
-        },
-        {
-            handler: 'flasher',
-            type: 'warning',
-            message: '{{ warningMessage }}',
-            title: 'Avertissement',
-            options: {},
-        },
-        {
-            handler: 'flasher',
-            type: 'info',
-            message: '{{ infoMessage }}',
-            title: 'Information',
-            options: {},
-        },
-        
-    ];
-</script>
-
-```php
-{{ id }}
-
-// Translate the flash message using the PHPFlasher translation files
-flash()->success('The resource was created');
-
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
 ```