mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
267 lines
15 KiB
HTML
267 lines
15 KiB
HTML
---
|
|
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>
|