mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
add blog articles
This commit is contained in:
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.eaca6eb4.css",
|
||||
"dist/main.js": "/dist/main.8b056786.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
<i class="fa-duotone fa-ghost fa-lg text-pink-800 mr-1"></i> Livewire: '/livewire/'
|
||||
<i class="fa-duotone fa-angles-right fa-lg text-indigo-900 mr-1"></i> Inertia: '/inertia/'
|
||||
|
||||
<i class="fa-duotone fa-blog"></i> Blog:
|
||||
<i class="fa-duotone fa-newspaper text-indigo-900 mr-1 fa-lg"></i> All Articles: '/blog/'
|
||||
<i class="fa-duotone fa-tags text-indigo-900 mr-1 fa-lg"></i> Categories: '/blog/categories/'
|
||||
<i class="fa-duotone fa-star text-indigo-900 mr-1 fa-lg"></i> Featured: '/blog/featured/'
|
||||
|
||||
<i class="fa-duotone fa-plug"></i> 3rd Party:
|
||||
<i class="fa-duotone fa-bell text-indigo-900 mr-1 fa-lg"></i> Noty: '/library/noty/'
|
||||
<i class="fa-duotone fa-info-circle text-indigo-900 mr-1 fa-lg"></i> Notyf: '/library/notyf/'
|
||||
|
||||
@@ -36,6 +36,9 @@
|
||||
<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-solid fa-newspaper"></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>
|
||||
</a>
|
||||
|
||||
@@ -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 }}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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.eaca6eb4.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