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

Merge pull request #284 from php-flasher/dev

Browse Source 
add blog section
This commit is contained in:
Younes ENNAJI
2025-03-30 06:42:07 +00:00
committed by GitHub
parent f9d79f4589 d96a953488
commit 4070978256
16 changed files with 1451 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.gitignore
-1
View File
@@ -2,7 +2,6 @@ node_modules/
vendor/ vendor/
_site/ _site/
_site_dev/
.jekyll-cache/ .jekyll-cache/
docs/_config.dev.yml
-1
View File
@@ -1 +0,0 @@
destination: _site_dev
docs/_config.yml
+13
View File
@@ -35,6 +35,14 @@ plugins:
- jekyll-redirect-from - jekyll-redirect-from
- jekyll-seo-tag - jekyll-seo-tag
permalink: /blog/:year/:month/:day/:title/
paginate: 10
paginate_path: "/blog/page:num/"
collections:
posts:
output: true
defaults: defaults:
- scope: - scope:
path: "" path: ""
@@ -46,6 +54,11 @@ defaults:
image: https://php-flasher.io/static/images/php-flasher-social-card.png image: https://php-flasher.io/static/images/php-flasher-social-card.png
published_at: "2019-12-01" published_at: "2019-12-01"
updated_at: "2024-03-29" updated_at: "2024-03-29"
- scope:
path: ""
type: "posts"
values:
layout: "post"
exclude: exclude:
- "*.config.js" - "*.config.js"
docs/_data/manifest.json
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"dist/main.css": "/dist/main.2e8d1953.css", "dist/main.css": "/dist/main.3134c48e.css",
"dist/main.js": "/dist/main.8b056786.js", "dist/main.js": "/dist/main.8b056786.js",
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css", "dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
"dist/455.095e6545.js": "/dist/455.095e6545.js", "dist/455.095e6545.js": "/dist/455.095e6545.js",
docs/_data/menu.yml
+1
View File
@@ -1,5 +1,6 @@
<i class="fa-duotone fa-rocket"></i> Getting Started: <i class="fa-duotone fa-rocket"></i> Getting Started:
<i class="fa-duotone fa-book text-indigo-900 mr-1 fa-lg"></i> Introduction: '/' <i class="fa-duotone fa-book text-indigo-900 mr-1 fa-lg"></i> Introduction: '/'
<i class="fa-duotone fa-square-rss text-indigo-900 mr-1 fa-lg"></i> Blog: '/blog/'
<i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony: '/symfony/' <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony: '/symfony/'
<i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel: '/laravel/' <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel: '/laravel/'
<i class="fa-duotone fa-ghost fa-lg text-pink-800 mr-1"></i> Livewire: '/livewire/' <i class="fa-duotone fa-ghost fa-lg text-pink-800 mr-1"></i> Livewire: '/livewire/'
docs/_includes/header.html
+4 -1
View File
@@ -36,8 +36,11 @@
<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"> <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> <i class="fa-brands fa-github"></i> <span>GitHub</span>
</a> </a>
<a href="/blog/" class="text-slate-600 hover:text-indigo-600 p-2 flex items-center gap-1.5 transition-colors">
<i class="fa-duotone fa-square-rss"></i> <span>Blog</span>
</a>
<a href="/symfony/" 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> <i class="fa-duotone fa-book"></i> <span>Documentation</span>
</a> </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"> <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">
<i class="fa-brands fa-linkedin"></i> <span>Author</span> <i class="fa-brands fa-linkedin"></i> <span>Author</span>
docs/_layouts/blog.html
+162
View File
@@ -0,0 +1,162 @@
---
layout: default
data-controller: blog
---
<div class="mb-10">
{% if page.image %}
<div class="relative h-64 sm:h-80 md:h-96 w-full mb-8 rounded-xl overflow-hidden shadow-md">
<img src="{{ page.image }}" alt="{{ page.title }}" class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
{% if page.tags.size > 0 %}
<div class="flex flex-wrap gap-2 mb-4">
{% for tag in page.tags %}
<span class="bg-indigo-500/90 text-white text-xs px-2.5 py-1 rounded-full font-medium">{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 tracking-tight">{{ page.title }}</h1>
{% if page.date %}
<div class="flex items-center text-white/90 text-sm">
<i class="fa-regular fa-calendar-days mr-2"></i>
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>
{% if page.author %}
<span class="mx-2">•</span>
<i class="fa-regular fa-user mr-2"></i>
<span>{{ page.author }}</span>
{% endif %}
{% if page.reading_time %}
<span class="mx-2">•</span>
<i class="fa-regular fa-clock mr-2"></i>
<span>{{ page.reading_time }} min read</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="mb-8">
<h1 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4 tracking-tight">{{ page.title }}</h1>
{% if page.date %}
<div class="flex items-center text-slate-500 text-sm mb-4">
<i class="fa-regular fa-calendar-days mr-2"></i>
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>
{% if page.author %}
<span class="mx-2">•</span>
<i class="fa-regular fa-user mr-2"></i>
<span>{{ page.author }}</span>
{% endif %}
{% if page.reading_time %}
<span class="mx-2">•</span>
<i class="fa-regular fa-clock mr-2"></i>
<span>{{ page.reading_time }} min read</span>
{% endif %}
</div>
{% endif %}
{% if page.tags.size > 0 %}
<div class="flex flex-wrap gap-2 mb-6">
{% for tag in page.tags %}
<span class="bg-indigo-50 text-indigo-700 text-xs px-2.5 py-1 rounded-full font-medium">{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
<div class="prose prose-slate max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-slate-900 prose-a:text-indigo-600 prose-a:no-underline hover:prose-a:text-indigo-800 prose-a:font-medium prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:hidden prose-code:after:hidden prose-pre:bg-slate-800 prose-pre:text-slate-100 prose-img:rounded-xl prose-img:shadow-md">
{{ content }}
</div>
{% if page.layout == 'post' %}
<div class="mt-16 pt-8 border-t border-slate-200">
<div class="flex items-center justify-between flex-wrap gap-4">
<div class="flex-1 min-w-0">
{% if page.previous.url %}
<a href="{{ page.previous.url }}" class="group">
<div class="text-xs uppercase tracking-wider text-slate-500 flex items-center mb-1.5">
<i class="fa-solid fa-arrow-left mr-1.5 group-hover:text-indigo-600 transition-colors"></i> Previous Article
</div>
<div class="text-base font-medium text-slate-800 group-hover:text-indigo-600 transition-colors truncate">{{ page.previous.title }}</div>
</a>
{% endif %}
</div>
<div class="flex-1 min-w-0 text-right">
{% if page.next.url %}
<a href="{{ page.next.url }}" class="group">
<div class="text-xs uppercase tracking-wider text-slate-500 flex items-center justify-end mb-1.5">
Next Article <i class="fa-solid fa-arrow-right ml-1.5 group-hover:text-indigo-600 transition-colors"></i>
</div>
<div class="text-base font-medium text-slate-800 group-hover:text-indigo-600 transition-colors truncate">{{ page.next.title }}</div>
</a>
{% endif %}
</div>
</div>
</div>
<!-- Author Bio Section -->
<div class="mt-12 bg-gradient-to-br from-indigo-50 to-indigo-100/50 p-6 rounded-xl shadow-sm border border-indigo-100">
<div class="flex flex-col md:flex-row items-center md:items-start gap-6">
<div class="w-20 h-20 rounded-full overflow-hidden border-2 border-white shadow-md">
<img src="https://github.com/{{ page.github_username | default: 'yoeunes' }}.png" alt="{{ page.author }}" class="w-full h-full object-cover" onerror="this.src='https://ui-avatars.com/api/?name={{ page.author }}&background=6366f1&color=fff'">
</div>
<div class="flex-1 text-center md:text-left">
<h3 class="text-lg font-semibold text-slate-900 mb-2">About {{ page.author }}</h3>
<p class="text-slate-600 text-sm mb-4">
{{ page.author_bio | default: "Creator and maintainer of PHPFlasher, passionate about building elegant and user-friendly PHP libraries." }}
</p>
<div class="flex justify-center md:justify-start gap-3">
<a href="https://github.com/{{ page.github_username | default: 'yoeunes' }}" class="text-slate-500 hover:text-slate-900 transition-colors">
<i class="fa-brands fa-github text-lg"></i>
</a>
<a href="https://twitter.com/{{ page.twitter_username | default: 'yoeunes_en' }}" class="text-slate-500 hover:text-blue-500 transition-colors">
<i class="fa-brands fa-twitter text-lg"></i>
</a>
<a href="https://www.linkedin.com/in/{{ page.linkedin_username | default: 'younes--ennaji' }}" class="text-slate-500 hover:text-blue-700 transition-colors">
<i class="fa-brands fa-linkedin text-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Related Posts -->
{% if site.related_posts.size > 0 %}
<div class="mt-12">
<h3 class="text-xl font-semibold text-slate-900 mb-6 flex items-center">
<i class="fa-duotone fa-books text-indigo-500 mr-3"></i> Related Articles
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
{% for post in site.related_posts limit:2 %}
<a href="{{ post.url }}" class="group bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="aspect-w-16 aspect-h-9 bg-slate-100">
{% if post.image %}
<img src="{{ post.image }}" alt="{{ post.title }}" class="w-full h-full object-cover">
{% else %}
<div class="w-full h-full flex items-center justify-center bg-indigo-50">
<i class="fa-duotone fa-newspaper text-indigo-300 text-4xl"></i>
</div>
{% endif %}
</div>
<div class="p-4">
<div class="flex flex-wrap gap-2 mb-2">
{% for tag in post.tags limit:2 %}
<span class="bg-indigo-50 text-indigo-600 text-xs px-2 py-0.5 rounded-full">{{ tag }}</span>
{% endfor %}
</div>
<h4 class="text-base font-medium text-slate-900 mb-2 group-hover:text-indigo-600 transition-colors">{{ post.title }}</h4>
<div class="text-xs text-slate-500">
<time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
{% endif %}
{% endif %}
</div>
docs/_layouts/post.html
+5
View File
@@ -0,0 +1,5 @@
---
layout: blog
---
{{ content }}
docs/_posts/2025-03-30-integrating-phpflasher-with-laravel.html
+915
View File
@@ -0,0 +1,915 @@
---
layout: post
title: "Integrating PHPFlasher with Laravel: A Complete Guide for Beginners"
date: 2025-03-30 04:09:31
author: yoeunes
github_username: yoeunes
twitter_username: yoeunes
linkedin_username: younes--ennaji
author_bio: "Creator and maintainer of PHPFlasher. Passionate about building elegant and intuitive PHP libraries that improve developer experience."
tags: [laravel, tutorial, beginner]
image: /static/images/blog/phpflasher-laravel.png
excerpt: "Learn how to integrate PHPFlasher into your Laravel applications with step-by-step instructions and real-world examples."
reading_time: 10
featured: true
---
<div class="mb-10">
<h3 class="text-3xl font-extrabold text-gray-900 tracking-tight mb-8">Laravel vs. PHPFlasher</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8">
<!-- Laravel Column -->
<div class="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden p-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">Laravel</h4>
<div class="border border-slate-200 rounded-lg overflow-hidden">
<div class="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="text-xs text-slate-500">https://example.com/users</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-refresh text-xs text-slate-400"></i>
<i class="fa-solid fa-home text-xs text-slate-400"></i>
</div>
</div>
<div class="h-64 relative bg-white p-4">
<div class="alert alert-success border border-green-200 bg-green-50 text-green-800 p-4 rounded">
User updated successfully!
</div>
<div class="mt-6 px-2">
<div class="h-6 w-32 bg-slate-200 rounded mb-4"></div>
<div class="flex flex-col space-y-3">
<div class="h-4 w-full bg-slate-100 rounded"></div>
<div class="h-4 w-full bg-slate-100 rounded"></div>
<div class="h-4 w-2/3 bg-slate-100 rounded"></div>
</div>
</div>
</div>
</div>
<ul class="mt-5 space-y-2 text-sm text-slate-600">
<li class="flex items-start">
<i class="fa-solid fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span>Static alert takes up valuable page space</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span>Requires manual template implementation</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span>No auto-dismissal functionality</span>
</li>
</ul>
</div>
<!-- PHPFlasher Column -->
<div class="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden p-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">
<span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>
</h4>
<div class="border border-slate-200 rounded-lg overflow-hidden">
<div class="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="text-xs text-slate-500">https://example.com/users</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-refresh text-xs text-slate-400"></i>
<i class="fa-solid fa-home text-xs text-slate-400"></i>
</div>
</div>
<div class="h-64 relative bg-white p-4">
<!-- Notification toast -->
<div class="absolute top-4 right-4 max-w-xs">
<div class="bg-white border border-green-100 shadow-lg rounded-lg overflow-hidden mb-0 transform transition-all animate-popup">
<div class="p-4 flex">
<div class="text-green-500 mr-3 pt-0.5">
<i class="fa-solid fa-circle-check text-xl"></i>
</div>
<div class="text-sm text-slate-600">User updated successfully!</div>
</div>
<div class="h-1 bg-green-100">
<div class="h-full bg-green-500 w-3/4 animate-shrink"></div>
</div>
</div>
</div>
<!-- Page content -->
<div class="mt-6 px-2">
<div class="h-6 w-32 bg-slate-200 rounded mb-4"></div>
<div class="flex flex-col space-y-3">
<div class="h-4 w-full bg-slate-100 rounded"></div>
<div class="h-4 w-full bg-slate-100 rounded"></div>
<div class="h-4 w-2/3 bg-slate-100 rounded"></div>
</div>
</div>
</div>
</div>
<ul class="mt-5 space-y-2 text-sm text-slate-600">
<li class="flex items-start">
<i class="fa-solid fa-circle-check text-green-500 mt-1 mr-2"></i>
<span>Elegant toast notification that preserves layout</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-circle-check text-green-500 mt-1 mr-2"></i>
<span>Zero template modifications required</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-circle-check text-green-500 mt-1 mr-2"></i>
<span>Auto-dismissal with visual countdown</span>
</li>
</ul>
</div>
</div>
</div>
<div class="mb-8">
<p class="text-lg text-slate-600 leading-relaxed">
Adding flash notifications to your Laravel application becomes incredibly straightforward with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>.
In this complete guide, you'll learn everything you need to know to get started with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v2 in your Laravel projects.
</p>
</div>
<div class="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-xl p-6 mb-10 border border-indigo-100">
<h2 class="text-xl font-semibold text-indigo-900 mb-4 flex items-center">
<i class="fa-duotone fa-lightbulb text-amber-500 mr-2 fa-lg"></i> Why Use PHPFlasher in Laravel?
</h2>
<p class="mb-6 text-indigo-800">
Laravel does come with a built-in flash messaging system through its session, but it has several limitations:
</p>
<ul class="space-y-2 mb-0">
<li class="flex items-start">
<i class="fa-duotone fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span><strong class="text-slate-900">Limited Display Options</strong>: Laravel's default flash messages are just stored in the session - you need to build your own UI components.</span>
</li>
<li class="flex items-start">
<i class="fa-duotone fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span><strong class="text-slate-900">No Toast Notifications</strong>: You need additional JavaScript libraries to show toast-style notifications.</span>
</li>
<li class="flex items-start">
<i class="fa-duotone fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span><strong class="text-slate-900">Manual Integration</strong>: You have to manually integrate front-end code with backend session data.</span>
</li>
<li class="flex items-start">
<i class="fa-duotone fa-circle-xmark text-red-500 mt-1 mr-2"></i>
<span><strong class="text-slate-900">Inconsistent Experience</strong>: Different parts of your application might handle notifications differently.</span>
</li>
</ul>
</div>
<!-- What is PHPFlasher Section -->
<div class="mb-12">
<h2 class="text-2xl font-bold text-slate-900 mb-4 flex items-center">
<i class="fa-duotone fa-circle-info text-indigo-500 mr-3"></i> What is <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>?
</h2>
<p class="mb-6">
<span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> is a powerful, easy-to-use flash notification library for PHP. It provides a simple, unified API to create beautiful toast notifications in your web applications.
</p>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-slate-200">
<div class="p-6">
<h3 class="text-lg font-semibold text-slate-900 mb-3 flex items-center">
<i class="fa-duotone fa-check-circle text-green-500 mr-2"></i> Key Features
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Framework-agnostic with dedicated Laravel integration</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Beautiful toast notifications without any extra CSS</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Consistent API across different notification types</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Support for multiple notification libraries</span>
</li>
</ul>
</div>
<div class="p-6">
<h3 class="text-lg font-semibold text-slate-900 mb-3 flex items-center">
<i class="fa-duotone fa-heart-pulse text-pink-500 mr-2"></i> Why Developers Love It
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
<span>Single line of code for beautiful notifications</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
<span>Zero configuration needed to get started</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
<span>Works seamlessly with all modern Laravel versions</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-heart text-pink-500 mt-1 mr-2"></i>
<span>Extensive customization when you need it</span>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-100 flex flex-col md:flex-row items-center gap-6">
<div class="w-16 h-16 md:w-20 md:h-20 bg-white rounded-full shadow-sm flex items-center justify-center flex-shrink-0">
<i class="fa-duotone fa-bells text-indigo-500 text-3xl"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-slate-900 mb-2"><span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v2</h3>
<p class="text-slate-600 mb-0">
The latest version includes improved performance, enhanced styling options, and better framework integrations. It's the perfect time to start using <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> in your projects!
</p>
</div>
</div>
</div>
<div class="mb-12">
<h2 class="text-2xl font-bold text-slate-900 mb-6 border-b border-slate-200 pb-2">Getting Started in Seconds</h2>
<p class="mb-6">First, install <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> using Composer. The process is extremely simple:</p>
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">Terminal</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-bash m-0 p-4 text-slate-50 overflow-x-auto"><code>composer require php-flasher/flasher-laravel</code></pre>
</div>
<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-8 flex items-start">
<i class="fa-duotone fa-wand-magic-sparkles text-green-500 text-xl mt-1 mr-3"></i>
<div>
<p class="text-green-800 font-medium mb-1">Zero Configuration</p>
<p class="text-green-700 mb-0">
That's it! No service provider registration, no publishing assets, no template modifications. PHPFlasher v2 auto-registers and injects everything you need.
</p>
</div>
</div>
<p class="mb-6">Now you can create beautiful notifications with a single line of code:</p>
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">app/Http/Controllers/UserController.php</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code>// In your controller
public function store(Request $request)
{
// Process the form submission
$user = User::create($request->validated());
// Flash a success message
flash()->success('User created successfully!');
return redirect()->route('users.index');
}</code></pre>
</div>
</div>
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-6 mb-12 shadow-sm">
<div class="flex items-start">
<i class="fa-duotone fa-wand-magic-sparkles text-indigo-600 text-2xl mt-0 mr-4 flex-shrink-0"></i>
<div>
<p class="text-indigo-900 font-semibold mb-2 text-lg">No Template Changes Needed</p>
<p class="text-indigo-800 leading-relaxed mb-0">
With <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v2, you don't need to add any
<code class="bg-indigo-100 px-2 py-0.5 rounded text-indigo-800 font-mono text-sm">@flasher_render</code>
directive to your templates. All required assets are automatically injected into your HTML.
</p>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Comparing Laravel Flash vs. <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></h2>
<p class="mb-6">Let's compare the traditional Laravel approach with <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> to see the difference in implementation and results:</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-red-100">
<h4 class="font-semibold text-slate-900 flex items-center">
<i class="fa-regular fa-circle-xmark text-red-500 mr-2"></i> Laravel
</h4>
</div>
<div class="p-6">
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your controller:</h4>
<pre class="language-php rounded-lg text-sm overflow-x-auto mb-6"><code>// Controller
public function update(Request $request, $id)
{
$user = User::findOrFail($id);
$user->update($request->validated());
session()->flash('message', 'User updated successfully!');
session()->flash('alert-type', 'success');
return redirect()->route('users.index');
}</code></pre>
<h4 class="text-sm font-semibold text-slate-900 my-3">In your Blade template:</h4>
<pre class="language-html rounded-lg text-sm overflow-x-auto"><code>@if (session('message'))
&lt;div class="alert alert-{{ session('alert-type') ?? 'info' }}"&gt;
{{ session('message') }}
&lt;/div&gt;
@endif</code></pre>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-green-100">
<h4 class="font-semibold text-slate-900 flex items-center">
<i class="fa-regular fa-circle-check text-green-500 mr-2"></i> With <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span>
</h4>
</div>
<div class="p-6">
<h4 class="text-sm font-semibold text-slate-900 mb-3">In your controller:</h4>
<pre class="language-php rounded-lg text-sm overflow-x-auto mb-6"><code>// Controller
public function update(Request $request, $id)
{
$user = User::findOrFail($id);
$user->update($request->validated());
flash()->success('User updated successfully!');
return redirect()->route('users.index');
}</code></pre>
<h4 class="text-sm font-semibold text-slate-900 my-3">In your Blade template:</h4>
<pre class="language-html rounded-lg text-sm overflow-x-auto"><code>// Nothing needed! PHPFlasher v2 auto-injects everything</code></pre>
</div>
</div>
</div>
<style>
@keyframes popup {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-popup {
animation: popup 0.3s ease-out forwards;
}
@keyframes shrink {
0% { width: 100%; }
100% { width: 0%; }
}
.animate-shrink {
animation: shrink 5s linear forwards;
}
</style>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Notification Types</h2>
<p class="mb-6"><span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> supports different notification types out of the box. Here are the main types you'll use:</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6">
<div class="flex items-start mb-4">
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
<i class="fa-duotone fa-circle-check text-green-500"></i>
</div>
<div>
<h3 class="font-semibold text-slate-900 mb-1">Success Notification</h3>
<p class="text-sm text-slate-600">Used to indicate successful operations</p>
</div>
</div>
<pre class="language-php rounded-lg text-sm overflow-x-auto"><code>flash()->success('Changes saved successfully!');</code></pre>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6">
<div class="flex items-start mb-4">
<div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center mr-4">
<i class="fa-duotone fa-circle-xmark text-red-500"></i>
</div>
<div>
<h3 class="font-semibold text-slate-900 mb-1">Error Notification</h3>
<p class="text-sm text-slate-600">Used to indicate errors or failures</p>
</div>
</div>
<pre class="language-php rounded-lg text-sm overflow-x-auto"><code>flash()->error('Something went wrong!');</code></pre>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6">
<div class="flex items-start mb-4">
<div class="w-10 h-10 rounded-full bg-amber-50 flex items-center justify-center mr-4">
<i class="fa-duotone fa-triangle-exclamation text-amber-500"></i>
</div>
<div>
<h3 class="font-semibold text-slate-900 mb-1">Warning Notification</h3>
<p class="text-sm text-slate-600">Used for important warnings</p>
</div>
</div>
<pre class="language-php rounded-lg text-sm overflow-x-auto"><code>flash()->warning('You are about to delete this item.');</code></pre>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6">
<div class="flex items-start mb-4">
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
<i class="fa-duotone fa-circle-info text-blue-500"></i>
</div>
<div>
<h3 class="font-semibold text-slate-900 mb-1">Info Notification</h3>
<p class="text-sm text-slate-600">Used for general information</p>
</div>
</div>
<pre class="language-php rounded-lg text-sm overflow-x-auto"><code>flash()->info('New features are available.');</code></pre>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Customizing Notifications</h2>
<p class="mb-6"><span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> provides a fluent interface for customizing your notifications. Here are some common customizations:</p>
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">Customization Example</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code>flash()
->position('bottom-right') // Change position
->timeout(5000) // Set timeout in milliseconds (5 seconds)
->success('Profile updated successfully!');</code></pre>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-4">Position Options</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
<div class="bg-white border border-slate-200 rounded-lg p-4 text-center">
<div class="text-slate-400 mb-2">
<i class="fa-solid fa-arrow-up"></i>
</div>
<code class="text-sm bg-slate-100 px-2 py-1 rounded">top-left</code>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-4 text-center">
<div class="text-slate-400 mb-2">
<i class="fa-solid fa-arrow-up"></i>
</div>
<code class="text-sm bg-slate-100 px-2 py-1 rounded">top-center</code>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-4 text-center">
<div class="text-slate-400 mb-2">
<i class="fa-solid fa-arrow-up"></i>
</div>
<code class="text-sm bg-slate-100 px-2 py-1 rounded">top-right</code>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-4 text-center">
<div class="text-slate-400 mb-2">
<i class="fa-solid fa-arrow-down"></i>
</div>
<code class="text-sm bg-slate-100 px-2 py-1 rounded">bottom-left</code>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-4 text-center">
<div class="text-slate-400 mb-2">
<i class="fa-solid fa-arrow-down"></i>
</div>
<code class="text-sm bg-slate-100 px-2 py-1 rounded">bottom-center</code>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-4 text-center">
<div class="text-slate-400 mb-2">
<i class="fa-solid fa-arrow-down"></i>
</div>
<code class="text-sm bg-slate-100 px-2 py-1 rounded">bottom-right</code>
</div>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Configuration</h2>
<p class="mb-6"><span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> works out of the box with default settings, but you can publish the configuration file to customize it:</p>
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">Terminal</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-bash m-0 p-4 text-slate-50 overflow-x-auto"><code>php artisan vendor:publish --tag=flasher-config</code></pre>
</div>
<p class="mb-6">This will create a <code class="bg-slate-100 px-1.5 py-0.5 rounded text-slate-800">config/flasher.php</code> file with the following structure:</p>
<div class="bg-slate-800 rounded-lg overflow-hidden mb-8">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">config/flasher.php</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code>&lt;?php
declare(strict_types=1);
use Flasher\Prime\Configuration;
/*
* Default PHPFlasher configuration for Laravel.
*
* This configuration file defines the default settings for PHPFlasher when
* used within a Laravel application. It uses the Configuration class from
* the core PHPFlasher library to establish type-safe configuration.
*
* @return array<string, mixed> PHPFlasher configuration
*/
return Configuration::from([
// Default notification library (e.g., 'flasher', 'toastr', 'noty', 'notyf', 'sweetalert')
'default' => 'flasher',
// Path to the main PHPFlasher JavaScript file
'main_script' => '/vendor/flasher/flasher.min.js',
// List of CSS files to style your notifications
'styles' => [
'/vendor/flasher/flasher.min.css',
],
// Set global options for all notifications (optional)
// 'options' => [
// 'timeout' => 5000, // Time in milliseconds before the notification disappears
// 'position' => 'top-right', // Where the notification appears on the screen
// ],
// Automatically inject JavaScript and CSS assets into your HTML pages
'inject_assets' => true,
// Enable message translation using Laravel's translation service
'translate' => true,
// URL patterns to exclude from asset injection and flash_bag conversion
'excluded_paths' => [],
// Map Laravel flash message keys to notification types
'flash_bag' => [
'success' => ['success'],
'error' => ['error', 'danger'],
'warning' => ['warning', 'alarm'],
'info' => ['info', 'notice', 'alert'],
],
// Set criteria to filter which notifications are displayed (optional)
// 'filter' => [
// 'limit' => 5, // Maximum number of notifications to show at once
// ],
// Define notification presets to simplify notification creation (optional)
// 'presets' => [
// 'entity_saved' => [
// 'type' => 'success',
// 'message' => 'Entity saved successfully',
// ],
// ],
]);</code></pre>
</div>
<h3 class="text-xl font-semibold text-slate-900 mb-4">Key Configuration Options</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden border border-slate-200 mb-8">
<thead class="bg-slate-50 text-left">
<tr>
<th class="px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider border-b border-slate-200">Option</th>
<th class="px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider border-b border-slate-200">Description</th>
<th class="px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider border-b border-slate-200">Default</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200">
<tr>
<td class="px-6 py-4 text-sm text-slate-900"><code>default</code></td>
<td class="px-6 py-4 text-sm text-slate-600">The default notification library to use</td>
<td class="px-6 py-4 text-sm text-slate-600"><code>flasher</code></td>
</tr>
<tr>
<td class="px-6 py-4 text-sm text-slate-900"><code>inject_assets</code></td>
<td class="px-6 py-4 text-sm text-slate-600">Automatically inject assets into HTML pages</td>
<td class="px-6 py-4 text-sm text-slate-600"><code>true</code></td>
</tr>
<tr>
<td class="px-6 py-4 text-sm text-slate-900"><code>translate</code></td>
<td class="px-6 py-4 text-sm text-slate-600">Enable translation of notification messages</td>
<td class="px-6 py-4 text-sm text-slate-600"><code>true</code></td>
</tr>
<tr>
<td class="px-6 py-4 text-sm text-slate-900"><code>options.timeout</code></td>
<td class="px-6 py-4 text-sm text-slate-600">Default notification timeout (ms)</td>
<td class="px-6 py-4 text-sm text-slate-600"><code>5000</code></td>
</tr>
<tr>
<td class="px-6 py-4 text-sm text-slate-900"><code>options.position</code></td>
<td class="px-6 py-4 text-sm text-slate-600">Default notification position</td>
<td class="px-6 py-4 text-sm text-slate-600"><code>top-right</code></td>
</tr>
</tbody>
</table>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Advanced Usage</h2>
<h3 class="text-xl font-semibold text-slate-900 mb-4">Using Multiple Notification Libraries</h3>
<p class="mb-6"><span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> supports multiple notification libraries. By default, it uses its own library, but you can also use other popular libraries like SweetAlert, Toastr, and Noty:</p>
<div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-base font-semibold text-slate-900 mb-3">First, install the adapter:</h4>
<div class="bg-slate-800 rounded-lg overflow-hidden">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">Terminal</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-bash m-0 p-4 text-slate-50 overflow-x-auto"><code># For SweetAlert
composer require php-flasher/flasher-sweetalert-laravel
# For Toastr
composer require php-flasher/flasher-toastr-laravel
# For Noty
composer require php-flasher/flasher-noty-laravel</code></pre>
</div>
</div>
<div>
<h4 class="text-base font-semibold text-slate-900 mb-3">Then use it in your code:</h4>
<div class="bg-slate-800 rounded-lg overflow-hidden">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900">
<div class="text-xs text-slate-200">PHP Code</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<pre class="language-php m-0 p-4 text-slate-50 overflow-x-auto"><code>// Using SweetAlert
sweetalert()->success('This is a SweetAlert notification');
// Using Toastr
toastr()->info('This is a Toastr notification');
// Using Noty
noty()->warning('This is a Noty notification');</code></pre>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-6">Troubleshooting Guide</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-14">
<!-- Notifications Not Appearing Card -->
<div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden transition duration-300 hover:-translate-y-1 hover:shadow-lg">
<div class="h-2 bg-red-500"></div>
<div class="p-6">
<div class="w-14 h-14 bg-red-50 rounded-full mb-4 flex items-center justify-center border border-red-100">
<!-- Bug icon SVG -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2m0 14v2M3 12h2m14 0h2M5 5l1.414 1.414M18.586 18.586l1.414 1.414M18.586 5l-1.414 1.414M5 18.586l1.414-1.414" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-3">Notifications Not Appearing</h3>
<p class="text-gray-600 mb-4">If your notifications aren't showing up, check these common issues:</p>
<ul class="space-y-3">
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<!-- Check icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Check if you're redirecting after setting the flash message</span>
</li>
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Verify that JavaScript is enabled in the browser</span>
</li>
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Check if your routes are in the <code class="bg-gray-100 px-1.5 py-0.5 rounded text-gray-800">excluded_paths</code> configuration</span>
</li>
</ul>
</div>
</div>
<!-- JavaScript Errors Card -->
<div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden transition duration-300 hover:-translate-y-1 hover:shadow-lg">
<div class="h-2 bg-amber-500"></div>
<div class="p-6">
<div class="w-14 h-14 bg-amber-50 rounded-full mb-4 flex items-center justify-center border border-amber-100">
<!-- Exclamation icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-3">JavaScript Errors</h3>
<p class="text-gray-600 mb-4">If you're seeing JavaScript errors in the console:</p>
<ul class="space-y-3">
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Make sure jQuery is loaded if using adapters that require it (like Toastr)</span>
</li>
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Check for JavaScript conflicts with other libraries</span>
</li>
</ul>
<div class="mt-6 p-4 bg-amber-50 rounded-lg border border-amber-100">
<p class="text-amber-800 text-sm flex items-start">
<!-- Lightbulb icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-500 mr-2 mt-0.5 flex-shrink-0" 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>
<span>Opening your browser's console (F12) will help identify any JavaScript errors.</span>
</p>
</div>
</div>
</div>
<!-- Styling Issues Card -->
<div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden transition duration-300 hover:-translate-y-1 hover:shadow-lg">
<div class="h-2 bg-purple-500"></div>
<div class="p-6">
<div class="w-14 h-14 bg-purple-50 rounded-full mb-4 flex items-center justify-center border border-purple-100">
<!-- Paintbrush icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-3">Styling Issues</h3>
<p class="text-gray-600 mb-4">If notifications appear but don't look right:</p>
<ul class="space-y-3">
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Make sure the CSS files are properly loaded</span>
</li>
<li class="flex items-start bg-gray-50 p-3 rounded-lg">
<div class="bg-green-100 p-1 rounded-full text-green-600 flex-shrink-0 mr-3 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-700">Check if your custom CSS is overriding <span class="text-xl font-semibold text-gray-900">PHP<span class="text-indigo-500">Flasher</span></span> styles</span>
</li>
</ul>
<div class="mt-6 p-4 bg-purple-50 rounded-lg border border-purple-100">
<p class="text-purple-800 text-sm flex items-start">
<!-- Magic wand icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-purple-500 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
<span>Try adding <code class="bg-purple-100 px-1.5 py-0.5 rounded text-purple-800">!important</code> to your custom styles if you need to override defaults.</span>
</p>
</div>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Best Practices</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold text-slate-900 mb-3 flex items-center">
<i class="fa-duotone fa-thumbs-up text-green-500 mr-2"></i> Do
</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Keep messages clear and concise</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Match notification type to the context (success, error, etc.)</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Use longer timeouts for important messages</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Use consistent positioning throughout your app</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
<span>Consider translating messages for multilingual apps</span>
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold text-slate-900 mb-3 flex items-center">
<i class="fa-duotone fa-thumbs-down text-red-500 mr-2"></i> Don't
</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start">
<i class="fa-solid fa-xmark text-red-500 mt-1 mr-2"></i>
<span>Overuse notifications for non-important actions</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-xmark text-red-500 mt-1 mr-2"></i>
<span>Display multiple notifications at once</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-xmark text-red-500 mt-1 mr-2"></i>
<span>Use lengthy messages that users won't read</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-xmark text-red-500 mt-1 mr-2"></i>
<span>Mix notification types inappropriately</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-xmark text-red-500 mt-1 mr-2"></i>
<span>Forget to handle errors and display appropriate notifications</span>
</li>
</ul>
</div>
</div>
</div>
<div class="rounded-xl overflow-hidden bg-gradient-to-br from-indigo-600 to-purple-700 text-white p-8 mb-10">
<div class="flex flex-col md:flex-row items-center gap-6">
<div class="w-24 h-24 flex-shrink-0 bg-white/10 rounded-2xl backdrop-blur-sm flex items-center justify-center p-4 border border-white/20">
<i class="fa-duotone fa-bell-on text-5xl text-white"></i>
</div>
<div>
<h2 class="text-2xl font-bold mb-4">Ready to enhance your Laravel app with beautiful notifications?</h2>
<p class="mb-6 text-indigo-100">
<span class="text-xl font-semibold text-white">PHP<span class="text-indigo-200">Flasher</span></span> provides an elegant, powerful solution for all your notification needs with minimal setup and maximum flexibility.
</p>
<div class="flex flex-wrap gap-4">
<a href="https://github.com/php-flasher/php-flasher" class="inline-flex items-center px-6 py-3 bg-white text-indigo-700 font-medium rounded-lg hover:bg-indigo-50 transition-colors">
<i class="fa-brands fa-github mr-2"></i> View on GitHub
</a>
<a href="/laravel/" class="inline-flex items-center px-6 py-3 bg-indigo-500/50 text-white font-medium rounded-lg hover:bg-indigo-500/70 transition-colors backdrop-blur-sm border border-white/10">
<i class="fa-solid fa-book mr-2"></i> Read Documentation
</a>
</div>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4">Conclusion</h2>
<p class="mb-6">
<span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> simplifies the implementation of flash notifications in Laravel applications, making it easy to provide users with important feedback about their actions. With its intuitive API, beautiful out-of-the-box styling, and extensive customization options, <span class="font-semibold text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> is the perfect solution for developers looking to enhance their application's user experience.
</p>
<p class="mb-8">
By following the examples and best practices outlined in this guide, you'll be well on your way to implementing a professional notification system that not only looks great but also provides clear and timely information to your users.
</p>
docs/blog/categories.html
+37
View File
@@ -0,0 +1,37 @@
---
layout: default
title: PHPFlasher Blog Categories
description: Browse PHPFlasher blog articles by category
---
<h1 class="text-3xl font-bold text-slate-900 mb-6">Blog Categories</h1>
{% assign all_tags = "" | split: "" %}
{% for post in site.posts %}
{% for tag in post.tags %}
{% assign all_tags = all_tags | push: tag %}
{% endfor %}
{% endfor %}
{% assign unique_tags = all_tags | uniq | sort %}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{% for tag in unique_tags %}
<div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6 hover:shadow-md transition-shadow">
<h2 class="text-xl font-semibold text-slate-900 mb-3">
<i class="fa-duotone fa-tag text-indigo-500 mr-2"></i> {{ tag | capitalize }}
</h2>
{% assign tagged_posts = site.posts | where_exp: "post", "post.tags contains tag" %}
<p class="text-slate-600 mb-3">{{ tagged_posts.size }} article{% if tagged_posts.size != 1 %}s{% endif %}</p>
<a href="/blog/tag/{{ tag | slugify }}/" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Browse Articles</a>
</div>
{% endfor %}
</div>
{% if unique_tags.size == 0 %}
<div class="bg-indigo-50 text-indigo-700 p-6 rounded-xl text-center">
<i class="fa-duotone fa-tags text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">No categories yet</h3>
<p>Check back soon for categorized articles!</p>
</div>
{% endif %}
docs/blog/featured.html
+44
View File
@@ -0,0 +1,44 @@
---
layout: default
title: Featured PHPFlasher Articles
description: Our best and most useful articles about PHPFlasher
---
<h1 class="text-3xl font-bold text-slate-900 mb-6">Featured Articles</h1>
<p class="text-slate-600 mb-8">Our most helpful guides and tutorials to get the most out of PHPFlasher.</p>
<div class="grid gap-8 md:grid-cols-2">
{% assign featured_posts = site.posts | where: "featured", true %}
{% for post in featured_posts %}
<div class="bg-white border border-slate-200 shadow-sm rounded-xl overflow-hidden hover:shadow-md transition-shadow">
{% if post.image %}
<img src="{{ post.image }}" alt="{{ post.title }}" class="w-full h-48 object-cover">
{% else %}
<div class="bg-indigo-100 flex items-center justify-center h-48">
<i class="fa-duotone fa-star text-indigo-400 text-4xl"></i>
</div>
{% endif %}
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
{% for tag in post.tags limit:3 %}
<span class="bg-indigo-50 text-indigo-700 text-xs px-2.5 py-0.5 rounded-full">{{ tag }}</span>
{% endfor %}
</div>
<h2 class="text-xl font-semibold text-slate-900 mb-2">{{ post.title }}</h2>
<p class="text-slate-600 mb-4">{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
<div class="flex justify-between items-center">
<time class="text-sm text-slate-500" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time>
<a href="{{ post.url }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% if featured_posts.size == 0 %}
<div class="bg-indigo-50 text-indigo-700 p-6 rounded-xl text-center">
<i class="fa-duotone fa-star text-4xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">No featured articles yet</h3>
<p>Check back soon for our featured content!</p>
</div>
{% endif %}
docs/blog/index.html
+266
View File
@@ -0,0 +1,266 @@
---
layout: default
title: PHPFlasher Blog
description: Tips, tutorials, and updates about PHPFlasher notification system
---
<div class="relative mb-16">
<!-- Hero Section with Gradient Background -->
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700 rounded-2xl"></div>
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:20px_20px]"></div>
<div class="relative px-6 py-16 md:py-24 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">PHPFlasher Blog</h1>
<p class="text-lg md:text-xl text-indigo-100 max-w-3xl mx-auto mb-10">
Discover tutorials, best practices, and creative solutions for implementing elegant notification systems in your PHP projects.
</p>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<a href="#latest-articles" class="px-6 py-3 bg-white text-indigo-700 font-medium rounded-full shadow-lg hover:shadow-xl transition-all flex items-center">
<i class="fa-solid fa-arrow-down mr-2"></i> Latest Articles
</a>
<a href="/blog/categories/" class="px-6 py-3 bg-indigo-500 text-white font-medium rounded-full shadow-lg hover:shadow-xl transition-all hover:bg-indigo-600 flex items-center">
<i class="fa-solid fa-tags mr-2"></i> Browse Categories
</a>
</div>
<!-- Stats -->
<div class="flex flex-wrap justify-center gap-x-12 gap-y-6">
<div class="text-center">
<div class="text-3xl font-bold text-white mb-1">{{ site.posts.size }}</div>
<div class="text-indigo-200 text-sm uppercase tracking-wider">Articles</div>
</div>
{% assign all_tags = "" | split: "" %}
{% for post in site.posts %}
{% for tag in post.tags %}
{% assign all_tags = all_tags | push: tag %}
{% endfor %}
{% endfor %}
{% assign unique_tags = all_tags | uniq %}
<div class="text-center">
<div class="text-3xl font-bold text-white mb-1">{{ unique_tags.size }}</div>
<div class="text-indigo-200 text-sm uppercase tracking-wider">Categories</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-white mb-1">v2.1.6</div>
<div class="text-indigo-200 text-sm uppercase tracking-wider">Current Version</div>
</div>
</div>
</div>
<!-- Wave Decoration -->
<div class="absolute -bottom-1 left-0 right-0 h-8 text-white overflow-hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" class="h-full w-full">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="currentColor"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="currentColor"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="currentColor"></path>
</svg>
</div>
</div>
<!-- Featured Articles -->
{% assign featured_posts = site.posts | where: "featured", true %}
{% if featured_posts.size > 0 %}
<div class="mb-16">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold text-slate-900 flex items-center">
<i class="fa-duotone fa-stars text-amber-500 mr-3"></i> Featured Articles
</h2>
<a href="/blog/featured/" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 flex items-center">
View All <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
{% for post in featured_posts limit:3 %}
<div class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-slate-200">
<a href="{{ post.url }}" class="block aspect-w-16 aspect-h-9 bg-slate-100 overflow-hidden">
{% if post.image %}
<img src="{{ post.image }}" alt="{{ post.title }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300">
{% else %}
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-indigo-100 to-purple-100">
<i class="fa-duotone fa-stars text-indigo-300 text-4xl"></i>
</div>
{% endif %}
</a>
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
{% for tag in post.tags limit:3 %}
<span class="bg-indigo-50 text-indigo-700 text-xs px-2.5 py-0.5 rounded-full">{{ tag }}</span>
{% endfor %}
</div>
<a href="{{ post.url }}" class="block">
<h3 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-indigo-600 transition-colors">{{ post.title }}</h3>
<p class="text-slate-600 mb-4 line-clamp-2">{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
</a>
<div class="flex justify-between items-center">
<time class="text-sm text-slate-500" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time>
<div class="flex items-center">
{% if post.author %}
<span class="text-sm text-slate-500 mr-4">By {{ post.author }}</span>
{% endif %}
<a href="{{ post.url }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
Read <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Latest Articles -->
<div id="latest-articles" class="mb-16 scroll-mt-16">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold text-slate-900 flex items-center">
<i class="fa-duotone fa-newspaper text-indigo-500 mr-3"></i> Latest Articles
</h2>
<div class="flex space-x-2">
{% if site.posts.size > 6 %}
<a href="/blog/archives/" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 flex items-center">
View Archives <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
{% endif %}
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{% for post in site.posts limit:6 %}
<div class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-slate-200 flex flex-col h-full">
<a href="{{ post.url }}" class="block bg-slate-100 overflow-hidden h-48">
{% if post.image %}
<img src="{{ post.image }}" alt="{{ post.title }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300">
{% else %}
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-indigo-50 to-slate-100">
<i class="fa-duotone fa-newspaper text-indigo-200 text-4xl"></i>
</div>
{% endif %}
</a>
<div class="p-6 flex flex-col flex-grow">
<div class="flex flex-wrap gap-2 mb-3">
{% for tag in post.tags limit:3 %}
<a href="/blog/tag/{{ tag | slugify }}/" class="bg-indigo-50 text-indigo-700 text-xs px-2.5 py-0.5 rounded-full hover:bg-indigo-100 transition-colors">{{ tag }}</a>
{% endfor %}
</div>
<a href="{{ post.url }}" class="block mb-4 flex-grow">
<h3 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-indigo-600 transition-colors">{{ post.title }}</h3>
<p class="text-slate-600 line-clamp-3">{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
</a>
<div class="flex justify-between items-center pt-4 border-t border-slate-100">
<time class="text-sm text-slate-500 flex items-center" datetime="{{ post.date | date_to_xmlschema }}">
<i class="fa-regular fa-calendar mr-1.5 text-slate-400"></i>
{{ post.date | date: "%B %d, %Y" }}
</time>
<a href="{{ post.url }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
Read Article <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% if site.posts.size == 0 %}
<div class="bg-indigo-50 text-indigo-700 p-10 rounded-xl text-center">
<i class="fa-duotone fa-pen-to-square text-6xl mb-6 text-indigo-400"></i>
<h3 class="text-2xl font-semibold mb-3">No posts yet</h3>
<p class="text-indigo-600 mb-6">Our team is currently working on amazing content for you!</p>
<a href="/" class="inline-flex items-center px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors">
<i class="fa-solid fa-home mr-2"></i> Back to Home
</a>
</div>
{% endif %}
</div>
<!-- Categories Overview -->
{% if unique_tags.size > 0 %}
<div class="mb-16">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold text-slate-900 flex items-center">
<i class="fa-duotone fa-tags text-green-500 mr-3"></i> Browse by Category
</h2>
<a href="/blog/categories/" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 flex items-center">
View All Categories <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{% for tag in unique_tags limit:8 %}
{% assign tag_posts = site.posts | where_exp: "post", "post.tags contains tag" %}
<a href="/blog/tag/{{ tag | slugify }}/" class="bg-white border border-slate-200 rounded-xl p-4 hover:shadow-md transition-all group flex items-center">
<div class="w-12 h-12 rounded-lg bg-slate-50 flex items-center justify-center mr-4 group-hover:bg-indigo-50 transition-colors">
<i class="fa-duotone fa-tag text-indigo-400 text-xl group-hover:text-indigo-500 transition-colors"></i>
</div>
<div>
<h3 class="font-medium text-slate-800 mb-1 group-hover:text-indigo-600 transition-colors">{{ tag | capitalize }}</h3>
<p class="text-xs text-slate-500">{{ tag_posts.size }} article{% if tag_posts.size != 1 %}s{% endif %}</p>
</div>
</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Newsletter Section -->
<div class="mb-16 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl p-8 lg:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-indigo-100 rounded-full -mr-32 -mt-32 opacity-50"></div>
<div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-100 rounded-full -ml-32 -mb-32 opacity-50"></div>
<div class="relative">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-2/3 mb-8 lg:mb-0 lg:pr-12">
<h2 class="text-2xl lg:text-3xl font-bold text-slate-900 mb-4">
<i class="fa-duotone fa-envelope-open-text text-indigo-500 mr-3"></i> Stay Updated
</h2>
<p class="text-slate-600 mb-6">Subscribe to our newsletter to receive the latest updates, tutorials, and tips about PHPFlasher directly in your inbox.</p>
<form action="#" method="post" class="flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
<button type="submit" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors whitespace-nowrap">
<i class="fa-solid fa-paper-plane mr-2"></i> Subscribe
</button>
</form>
<p class="text-sm text-slate-500 mt-4">
<i class="fa-regular fa-shield-check text-green-500 mr-1"></i>
We respect your privacy. Unsubscribe at any time.
</p>
</div>
<div class="lg:w-1/3 flex justify-center">
<div class="w-40 h-40 lg:w-56 lg:h-56 rounded-full bg-white shadow-lg flex items-center justify-center p-4 border-4 border-indigo-50">
<i class="fa-duotone fa-bell-on text-8xl text-indigo-400"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Need Help Section -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8 mb-16">
<div class="flex flex-col md:flex-row items-center">
<div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-6 md:mb-0 md:mr-8">
<i class="fa-duotone fa-lightbulb-on text-3xl text-indigo-500"></i>
</div>
<div class="flex-grow text-center md:text-left">
<h3 class="text-xl font-semibold text-slate-900 mb-2">New to PHPFlasher?</h3>
<p class="text-slate-600 mb-4">Explore our comprehensive documentation to get started with PHPFlasher in your projects.</p>
<div class="flex flex-wrap justify-center md:justify-start gap-3">
<a href="/symfony/" class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors flex items-center">
<i class="fa-solid fa-book mr-2"></i> Documentation
</a>
<a href="https://github.com/php-flasher/php-flasher" class="px-4 py-2 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-900 transition-colors flex items-center">
<i class="fa-brands fa-github mr-2"></i> GitHub
</a>
<a href="https://twitter.com/yoeunes" class="px-4 py-2 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 transition-colors flex items-center">
<i class="fa-brands fa-twitter mr-2"></i> Twitter
</a>
</div>
</div>
</div>
</div>
docs/dist/entrypoints.json
Vendored
+1 -1
View File
@@ -2,7 +2,7 @@
"entrypoints": { "entrypoints": {
"main": { "main": {
"css": [ "css": [
"/dist/main.2e8d1953.css" "/dist/main.3134c48e.css"
], ],
"js": [ "js": [
"/dist/main.8b056786.js" "/dist/main.8b056786.js"
docs/dist/main.2e8d1953.css → docs/dist/main.3134c48e.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/package.json
+1 -1
View File
@@ -7,7 +7,7 @@
"dev": "encore dev", "dev": "encore dev",
"watch": "encore dev --watch", "watch": "encore dev --watch",
"serve": "bundle exec jekyll serve --livereload", "serve": "bundle exec jekyll serve --livereload",
"dev:jekyll": "bundle exec jekyll serve --livereload --config _config.yml,_config.dev.yml", "dev:jekyll": "bundle exec jekyll serve --livereload --config _config.yml",
"dev:webpack": "encore dev --watch --no-watch-options-stdin", "dev:webpack": "encore dev --watch --no-watch-options-stdin",
"start": "concurrently \"npm run dev:jekyll\" \"npm run dev:webpack\"", "start": "concurrently \"npm run dev:jekyll\" \"npm run dev:webpack\"",
"deploy": "JEKYLL_ENV=production bundle exec jekyll build" "deploy": "JEKYLL_ENV=production bundle exec jekyll build"
docs/static/images/blog/phpflasher-laravel.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB