mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
@@ -2,7 +2,6 @@ node_modules/
|
||||
vendor/
|
||||
|
||||
_site/
|
||||
_site_dev/
|
||||
|
||||
.jekyll-cache/
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
destination: _site_dev
|
||||
@@ -35,6 +35,14 @@ plugins:
|
||||
- jekyll-redirect-from
|
||||
- jekyll-seo-tag
|
||||
|
||||
permalink: /blog/:year/:month/:day/:title/
|
||||
paginate: 10
|
||||
paginate_path: "/blog/page:num/"
|
||||
|
||||
collections:
|
||||
posts:
|
||||
output: true
|
||||
|
||||
defaults:
|
||||
- scope:
|
||||
path: ""
|
||||
@@ -46,6 +54,11 @@ defaults:
|
||||
image: https://php-flasher.io/static/images/php-flasher-social-card.png
|
||||
published_at: "2019-12-01"
|
||||
updated_at: "2024-03-29"
|
||||
- scope:
|
||||
path: ""
|
||||
type: "posts"
|
||||
values:
|
||||
layout: "post"
|
||||
|
||||
exclude:
|
||||
- "*.config.js"
|
||||
|
||||
@@ -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/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<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-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-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/'
|
||||
|
||||
@@ -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">
|
||||
<i class="fa-brands fa-github"></i> <span>GitHub</span>
|
||||
</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">
|
||||
<i class="fa-solid fa-book"></i> <span>Documentation</span>
|
||||
<i class="fa-duotone 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">
|
||||
<i class="fa-brands fa-linkedin"></i> <span>Author</span>
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: blog
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -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'))
|
||||
<div class="alert alert-{{ session('alert-type') ?? 'info' }}">
|
||||
{{ session('message') }}
|
||||
</div>
|
||||
@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><?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>
|
||||
@@ -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 %}
|
||||
@@ -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 %}
|
||||
@@ -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>
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.2e8d1953.css"
|
||||
"/dist/main.3134c48e.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.8b056786.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
@@ -7,7 +7,7 @@
|
||||
"dev": "encore dev",
|
||||
"watch": "encore dev --watch",
|
||||
"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",
|
||||
"start": "concurrently \"npm run dev:jekyll\" \"npm run dev:webpack\"",
|
||||
"deploy": "JEKYLL_ENV=production bundle exec jekyll build"
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Reference in New Issue
Block a user