leviathonbeast/php-flasher
1
0
Fork 0
mirror of https://github.com/php-flasher/php-flasher.git synced 2026-03-31 15:07:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

update symfony documentation page

Browse Source
This commit is contained in:
Younes ENNAJI
2025-03-26 02:15:21 +00:00
parent a2abd9455a
commit cc0658b3fe
11 changed files with 177 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_data/manifest.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"dist/main.css": "/dist/main.98f9c826.css",
"dist/main.css": "/dist/main.8afe9004.css",
"dist/main.js": "/dist/main.8b056786.js",
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
"dist/455.095e6545.js": "/dist/455.095e6545.js",
docs/_includes/flasher-studio.html
+2 -2
View File
@@ -263,13 +263,13 @@
<div class="px-6 py-3.5 bg-slate-50 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-3">
<div class="text-xs text-slate-500">Customize your perfect notification in seconds</div>
<div class="flex space-x-4">
<a href="https://phpflasher.com/docs" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
<a href="https://php-flasher.io" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
<i class="fas fa-book mr-1.5 text-xs"></i> Documentation
</a>
<a href="https://github.com/php-flasher/php-flasher" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
<i class="fab fa-github mr-1.5 text-xs"></i> GitHub
</a>
<a href="https://phpflasher.com/showcase" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
<a href="https://php-flasher.io/symfony/" class="text-xs text-slate-600 hover:text-indigo-600 transition-colors flex items-center hover:underline">
<i class="fas fa-lightbulb mr-1.5 text-xs"></i> Examples
</a>
</div>
docs/_includes/header.html
+1 -1
View File
@@ -36,7 +36,7 @@
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-600 hover:text-indigo-600 p-2 flex items-center gap-1.5 transition-colors">
<i class="fa-brands fa-github"></i> <span>GitHub</span>
</a>
<a href="/docs/" class="text-slate-600 hover:text-indigo-600 p-2 flex items-center gap-1.5 transition-colors">
<a href="/symfony/" class="text-slate-600 hover:text-indigo-600 p-2 flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-book"></i> <span>Documentation</span>
</a>
<a href="https://www.linkedin.com/in/younes--ennaji/" class="text-slate-600 hover:text-indigo-600 p-2 flex items-center gap-1.5 transition-colors">
docs/_includes/homepage-links.html
+1 -1
View File
@@ -1,5 +1,5 @@
<p class="text-sm max-w-sm mx-auto mt-6 px-4 leading-very-loose">
<a class="bg-grey-lightest text-black shadow rounded py-1 px-2 mr-1" href="/docs/"><i class="fa-solid fa-book-heart text-indigo-600"></i> Docs</a>
<a class="bg-grey-lightest text-black shadow rounded py-1 px-2 mr-1" href="/symfony/"><i class="fa-solid fa-book-heart text-indigo-600"></i> Docs</a>
<a class="bg-grey-lightest text-black shadow rounded py-1 px-2 mr-1" href="https://github.com/php-flasher/php-flasher"><i class="fa-brands fa-github text-black"></i> GitHub</a>
<a class="bg-grey-lightest text-black shadow rounded py-1 px-2" href="https://twitter.com/phpflasher"><i class="fa-brands fa-twitter text-blue-400"></i> Twitter</a>
</p>
docs/_includes/sidebar.html
+1 -1
View File
@@ -68,7 +68,7 @@
<a href="https://github.com/php-flasher/php-flasher" class="p-3 text-indigo-600 hover:bg-indigo-50 rounded-full transition-colors">
<i class="fa-brands fa-github text-xl"></i>
</a>
<a href="/docs/" class="p-3 text-indigo-600 hover:bg-indigo-50 rounded-full transition-colors">
<a href="/symfony/" class="p-3 text-indigo-600 hover:bg-indigo-50 rounded-full transition-colors">
<i class="fa-solid fa-book text-xl"></i>
</a>
<a href="https://www.linkedin.com/in/younes--ennaji/" class="p-3 text-indigo-600 hover:bg-indigo-50 rounded-full transition-colors">
docs/_layouts/home.html
+2 -2
View File
@@ -236,11 +236,11 @@
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Auto-detects frontend framework</span>
<span>Intuitive, consistent API across libraries</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Intuitive, consistent API across libraries</span>
<span>Customize notifications with ease</span>
</li>
</ul>
</div>
docs/_layouts/theme.html
+1 -1
View File
@@ -341,7 +341,7 @@ flasher.success('Well done!');</code></pre>
<h3 class="text-lg font-medium text-slate-800 mb-2">Need assistance?</h3>
<div class="flex items-center flex-wrap gap-3">
<a
href="/docs/"
href="/symfony/"
class="inline-flex items-center text-sm px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors"
>
<i class="fa-regular fa-file-lines text-indigo-600 mr-2"></i>
docs/dist/entrypoints.json
Vendored
+1 -1
View File
@@ -2,7 +2,7 @@
"entrypoints": {
"main": {
"css": [
"/dist/main.98f9c826.css"
"/dist/main.8afe9004.css"
],
"js": [
"/dist/main.8b056786.js"
docs/dist/main.98f9c826.css → docs/dist/main.8afe9004.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/_layouts/symfony.html → docs/pages/symfony.html
+166 -73
View File
@@ -1,5 +1,8 @@
---
layout: default
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.
framework: symfony
---
<div class="max-w-7xl mx-auto">
@@ -634,57 +637,55 @@ class RegistrationController extends AbstractController
<!-- AJAX Example with PHPFlasher -->
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">AJAX Support</h3>
<p class="mb-4">PHPFlasher works seamlessly with AJAX requests. It automatically displays notifications from JSON responses:</p>
<p class="mb-4">PHPFlasher can be used with AJAX requests, but requires explicit handling in your JavaScript code:</p>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<!-- Backend Code -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
<div class="bg-slate-800 px-4 py-3 flex items-center">
<div class="flex space-x-1.5 mr-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="text-white opacity-80 text-xs font-medium">ApiController.php</div>
<!-- Backend Code -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
<div class="bg-slate-800 px-4 py-3 flex items-center">
<div class="flex space-x-1.5 mr-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">#[Route('/api/save', name: 'api_save', methods: ['POST'])]
<div class="text-white opacity-80 text-xs font-medium">ApiController.php</div>
</div>
<div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">#[Route('/api/save', name: 'api_save', methods: ['POST'])]
public function saveApi(Request $request): JsonResponse
{
// Process data...
$success = true; // Assuming operation succeeded
if ($success) {
flash()->success('Data saved successfully!');
return $this->json([
'status' => 'success',
'message' => 'Data saved successfully!'
]);
} else {
flash()->error('Failed to save data');
return $this->json([
'status' => 'error',
'message' => 'Failed to save data'
], 400);
}
}</code></pre>
</div>
</div>
</div>
<!-- Frontend JS Code -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
<div class="bg-slate-800 px-4 py-3 flex items-center">
<div class="flex space-x-1.5 mr-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="text-white opacity-80 text-xs font-medium">script.js</div>
<!-- Frontend JS Code -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
<div class="bg-slate-800 px-4 py-3 flex items-center">
<div class="flex space-x-1.5 mr-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">document.getElementById('saveForm').addEventListener('submit', function(e) {
<div class="text-white opacity-80 text-xs font-medium">script.js</div>
</div>
<div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">// Import flasher in your JS file
import flasher from '@flasher/flasher';
document.getElementById('saveForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
@@ -696,28 +697,106 @@ public function saveApi(Request $request): JsonResponse
.then(response => response.json())
.then(data => {
console.log('Success:', data);
// PHPFlasher will automatically display the notification
// No additional JS code needed!
// Explicitly call flasher methods based on the response
if (data.status === 'success') {
flasher.success(data.message);
} else {
flasher.error(data.message);
}
})
.catch(error => {
console.error('Error:', error);
flasher.error('An unexpected error occurred');
});
});</code></pre>
</div>
</div>
</div>
<!-- Expert tip for AJAX -->
<div class="bg-slate-50 border-l-4 border-slate-300 rounded-r-lg p-5 mb-8">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fa-solid fa-lightbulb text-amber-500"></i>
<!-- Alternative approach with a dedicated API endpoint -->
<h4 class="text-lg font-semibold text-slate-700 mt-6 mb-3">Alternative: Dedicated Flash Message API</h4>
<p class="mb-4">You can also create a dedicated endpoint that returns flash messages as part of your API response:</p>
<!-- Backend Code for Alternative -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
<div class="bg-slate-800 px-4 py-3 flex items-center">
<div class="flex space-x-1.5 mr-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="ml-3">
<h4 class="text-sm font-medium text-slate-800">Expert Tip: AJAX Integration</h4>
<p class="text-sm text-slate-700 mt-1">
PHPFlasher automatically handles AJAX responses — notifications from the server appear without any additional code. This works with fetch, axios, jQuery, and other AJAX methods.
<div class="text-white opacity-80 text-xs font-medium">FlashController.php</div>
</div>
<div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">#[Route('/api/flash', name: 'api_flash', methods: ['GET'])]
public function getFlashMessages(): JsonResponse
{
// Get all flash messages as an array
$messages = flash()->render([], 'array');
return $this->json($messages);
}</code></pre>
</div>
</div>
<!-- Frontend JS Code for Alternative -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
<div class="bg-slate-800 px-4 py-3 flex items-center">
<div class="flex space-x-1.5 mr-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="text-white opacity-80 text-xs font-medium">fetch-flash.js</div>
</div>
<div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">import flasher from '@flasher/flasher';
// Function to fetch and display flash messages
function fetchFlashMessages() {
fetch('/api/flash')
.then(response => response.json())
.then(messages => {
// Render the flash messages using PHPFlasher
flasher.render(messages);
})
.catch(error => {
console.error('Error fetching flash messages:', error);
});
}
// Call this after operations that might set flash messages on the server
// or periodically if needed
fetchFlashMessages();</code></pre>
</div>
</div>
<!-- Expert tip for AJAX - Redesigned with Tailwind CSS v3.4 -->
<div class="bg-gradient-to-r from-slate-50 to-slate-100 border-l-4 border-amber-400 rounded-lg shadow-sm p-6 mb-8">
<div class="flex gap-4 items-start">
<div class="flex-shrink-0 p-2 bg-amber-100 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<div class="flex-1">
<h4 class="text-lg font-medium text-slate-800 mb-2">Expert Tip: AJAX Integration</h4>
<p class="text-slate-700 mb-3 leading-relaxed">
PHPFlasher requires explicit JavaScript calls to display notifications in AJAX scenarios. You have several options:
</p>
<ul class="space-y-2 text-slate-700">
<li class="flex gap-2">
<span class="flex-shrink-0 inline-flex items-center justify-center w-5 h-5 bg-amber-100 text-amber-600 rounded-full font-medium text-xs">1</span>
<span>Call flasher methods directly in your JavaScript after receiving a response</span>
</li>
<li class="flex gap-2">
<span class="flex-shrink-0 inline-flex items-center justify-center w-5 h-5 bg-amber-100 text-amber-600 rounded-full font-medium text-xs">2</span>
<span>Use the render() method with a dedicated endpoint that returns flash messages</span>
</li>
<li class="flex gap-2">
<span class="flex-shrink-0 inline-flex items-center justify-center w-5 h-5 bg-amber-100 text-amber-600 rounded-full font-medium text-xs">3</span>
<span>Integrate with frameworks like InertiaJS to automatically include flash messages in each response</span>
</li>
</ul>
</div>
</div>
</div>
@@ -747,14 +826,10 @@ use Symfony\Component\Routing\Annotation\Route;
class OrderController extends AbstractController
{
private FlasherInterface $flasher;
private OrderService $orderService;
public function __construct(FlasherInterface $flasher, OrderService $orderService)
{
$this->flasher = $flasher;
$this->orderService = $orderService;
}
public function __construct(
private OrderService $orderService,
private FlasherInterface $flasher,
) {}
#[Route('/order/process', name: 'app_order_process')]
public function processOrder(Request $request): Response
@@ -888,9 +963,9 @@ flasher:
<!-- Common Configuration Examples -->
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Common Configuration Examples</h3>
<div class="mb-6 grid md:grid-cols-2 gap-6">
<div class="mb-6">
<!-- Example 1: Change default position -->
<div class="bg-white rounded-lg border border-slate-200 p-5 shadow-sm">
<div class="bg-white rounded-lg border border-slate-200 p-5 shadow-sm mb-4">
<h4 class="text-base font-medium text-slate-800 mb-2">Change Default Position</h4>
<pre class="bg-slate-50 rounded-lg p-3 text-sm overflow-x-auto mt-2"><code class="language-yaml"># config/packages/flasher.yaml
flasher:
@@ -1106,37 +1181,55 @@ class PaymentController extends AbstractController
</div>
<!-- Preset use cases -->
<div class="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-xl p-6 mb-6 border border-indigo-200">
<h4 class="text-indigo-800 text-lg font-semibold mb-3">Common Preset Use Cases</h4>
<ul class="space-y-2">
<div class="bg-indigo-50 rounded-lg p-6 mb-6 border border-indigo-200 shadow-sm">
<h4 class="text-indigo-800 text-lg font-semibold mb-4">
Common Preset Use Cases
</h4>
<ul class="space-y-3">
<li class="flex items-start">
<div class="flex-shrink-0 p-1 bg-white rounded-full mt-1">
<i class="fa-solid fa-check text-indigo-500 text-xs"></i>
<div class="flex-shrink-0 p-1 bg-white rounded-full mt-1 border border-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-indigo-800 font-medium">CRUD Operations</p>
<p class="text-indigo-600 text-sm mt-1">
Create consistent notifications for create, update, and delete operations
</p>
</div>
<p class="ml-3 text-indigo-700">
<strong>CRUD Operations:</strong>
Create consistent notifications for create, update, delete operations
</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 p-1 bg-white rounded-full mt-1">
<i class="fa-solid fa-check text-indigo-500 text-xs"></i>
<div class="flex-shrink-0 p-1 bg-white rounded-full mt-1 border border-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-indigo-800 font-medium">User Feedback</p>
<p class="text-indigo-600 text-sm mt-1">
Standardize welcome messages, payment confirmations, and other user communications
</p>
</div>
<p class="ml-3 text-indigo-700">
<strong>User Feedback:</strong> Standardize welcome messages, payment confirmations, etc.
</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 p-1 bg-white rounded-full mt-1">
<i class="fa-solid fa-check text-indigo-500 text-xs"></i>
<div class="flex-shrink-0 p-1 bg-white rounded-full mt-1 border border-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-indigo-800 font-medium">Error Handling</p>
<p class="text-indigo-600 text-sm mt-1">
Create consistent error notifications with custom styling and actionable messages
</p>
</div>
<p class="ml-3 text-indigo-700">
<strong>Error Handling:</strong> Create consistent error notifications with custom styling
</p>
</li>
</ul>
</div>
<!-- Best Practice for Presets -->
<div class="bg-green-50 border-l-4 border-green-400 rounded-r-lg p-5 mb-8">
<div class="flex items-center">
@@ -1468,7 +1561,7 @@ flash()->preset('welcome_user', ['name' => $user->getFirstName()]);</code></pre>
<i class="fa-solid fa-bolt-lightning text-indigo-600"></i>
</div>
<h4 class="font-semibold text-slate-800 mb-2">AJAX Support</h4>
<p class="text-slate-600 text-sm">Show notifications from AJAX responses automatically with JSON responses.</p>
<p class="text-slate-600 text-sm">Easy integration with AJAX requests using JavaScript API to display notifications after requests.</p>
<a href="https://php-flasher.io/ajax" class="text-indigo-600 text-xs font-medium mt-2 inline-flex items-center hover:text-indigo-800">
Learn more <i class="fa-solid fa-arrow-right ml-1"></i>
</a>
docs/pages/symfony.md
-7
View File
@@ -1,7 +0,0 @@
---
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.
framework: symfony
layout: symfony
---