You've already forked php-flasher
mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-04-05 12:32:55 +01:00
update docs
This commit is contained in:
Younes ENNAJI
@@ -0,0 +1,4 @@
|
||||
<div class="bg-green-700 text-white text-center p-1 leading-tight shadow-lg">
|
||||
<span class="text-xl font-bold"><img src="/static/images/palestine-flag.png" alt="Palestinian Flag" class="inline h-4 w-auto mr-1"> Solidarity with Palestine.</span>
|
||||
<span class="inline text-xs sm:text-sm md:text-base">We seek justice and peace, and strongly oppose all forms of injustice and genocide.</span>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<nav class="mb-6" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center space-x-2 text-sm text-slate-500">
|
||||
<li>
|
||||
<a href="/" class="hover:text-indigo-600">
|
||||
<i class="fa-solid fa-home"></i>
|
||||
<span class="sr-only">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% if page.title %}
|
||||
<li class="flex items-center">
|
||||
<i class="fa-solid fa-chevron-right text-xs mx-2"></i>
|
||||
<span class="text-slate-700">{{ page.title }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ol>
|
||||
</nav>
|
||||
@@ -1,8 +1,55 @@
|
||||
<section class="bg-indigo-900 pt-10 pb-10">
|
||||
<div class="max-w-xs mx-auto text-center text-md leading-loose">
|
||||
<img src="/static/images/younes-khoubza.jpeg" alt="Younes" class="inline rounded-full h-20 w-20 border-gray-100 border-2"/>
|
||||
<p class="text-white">
|
||||
<span class="text-gray-300">PHP<span class="text-gray-400">Flasher</span></span> is a project by <a class="text-indigo-300" target="_blank" href="https://www.linkedin.com/in/younes--ennaji/">Younes ENNAJI</a>.
|
||||
</p>
|
||||
<footer class="bg-indigo-900 mt-12 pt-12 pb-8 text-white">
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<!-- About Section -->
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4 flex items-center">
|
||||
PHP<span class="text-indigo-300">Flasher</span>
|
||||
</h3>
|
||||
<p class="text-indigo-200 mb-4 text-sm leading-relaxed">
|
||||
A powerful & easy-to-use package for adding flash messages to Laravel or Symfony projects.
|
||||
Provides feedback to users, improves engagement & enhances user experience.
|
||||
</p>
|
||||
<div class="flex space-x-4 mt-6">
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-indigo-300 hover:text-white">
|
||||
<i class="fa-brands fa-github text-xl"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/phpflasher" class="text-indigo-300 hover:text-white">
|
||||
<i class="fa-brands fa-twitter text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-indigo-100">Documentation</h3>
|
||||
<ul class="space-y-2 text-sm text-indigo-200">
|
||||
<li><a href="/" class="text-indigo-200 transition">Introduction</a></li>
|
||||
<li><a href="/laravel/" class="text-indigo-200 transition">Laravel Integration</a></li>
|
||||
<li><a href="/symfony/" class="text-indigo-200 transition">Symfony Integration</a></li>
|
||||
<li><a href="/livewire/" class="text-indigo-200 transition">Livewire Integration</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Author -->
|
||||
<div class="text-center md:text-left">
|
||||
<h3 class="text-lg font-semibold mb-4 text-indigo-100">Created By</h3>
|
||||
<div class="flex md:justify-start justify-center items-center">
|
||||
<img src="/static/images/younes-ennaji.jpeg" alt="Younes ENNAJI"
|
||||
class="h-16 w-16 rounded-full border-2 border-indigo-200 mr-4">
|
||||
<div>
|
||||
<h4 class="font-medium">Younes ENNAJI</h4>
|
||||
<a href="https://www.linkedin.com/in/younes--ennaji/"
|
||||
class="text-indigo-300 hover:text-white text-sm inline-flex items-center gap-1">
|
||||
<i class="fa-brands fa-linkedin"></i> LinkedIn Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 pt-6 border-t border-indigo-800 text-center text-indigo-400 text-sm">
|
||||
<p>© {{ 'now' | date: "%Y" }} PHPFlasher. Released under the MIT License.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-100 rounded-lg p-4 mb-8">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="text-center sm:text-left">
|
||||
<div class="text-slate-700">
|
||||
Enjoying <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>?
|
||||
Show your support with a <strong><i class="fa-solid fa-star text-amber-400"></i> star</strong> on
|
||||
<a href="https://github.com/php-flasher/php-flasher"><i class="fab fa-github text-black"></i> GitHub</a>!
|
||||
It helps others discover this tool and motivates us to keep improving it.
|
||||
Have ideas or spot a typo? We'd love your contributions to the docs <i class="fa-solid fa-file-pen text-blue-600"></i>.
|
||||
<strong>Thank you</strong> <i class="fa-solid fa-heart text-red-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,55 @@
|
||||
<header class="sticky top-0 z-30 w-full bg-white border-b border-slate-200 shadow-sm">
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo Area -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="/" class="flex items-center space-x-3">
|
||||
<span class="text-xl font-semibold text-indigo-900 hidden sm:block">PHP<span class="text-indigo-500">Flasher</span></span>
|
||||
</a>
|
||||
|
||||
<!-- Version Selector -->
|
||||
<div class="hidden sm:flex items-center space-x-2">
|
||||
{% for version in site.data.project.versions %}
|
||||
<a href="{{ version[1] }}" class="{% if forloop.first %}bg-indigo-500 text-white{% else %}text-indigo-700 bg-indigo-50 hover:bg-indigo-100{% endif %} text-xs px-2.5 py-1 rounded-full font-medium transition">
|
||||
{{ version[0] }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search (placeholder for future implementation) -->
|
||||
<!--
|
||||
<div class="hidden md:block flex-1 max-w-md mx-4">
|
||||
<div class="relative">
|
||||
<input type="search" placeholder="Search documentation..."
|
||||
class="w-full pl-10 pr-4 py-2 rounded-md border border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-sm"
|
||||
disabled>
|
||||
<i class="fa-light fa-magnifying-glass absolute left-3 top-2.5 text-slate-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="lg:hidden">
|
||||
<button id="menu-toggle" class="p-2 rounded-md text-slate-500 hover:bg-slate-100 focus:outline-none">
|
||||
<svg class="menu-closed:shown h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg class="menu-closed:hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation Links -->
|
||||
<nav class="hidden lg:flex items-center space-x-4">
|
||||
<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">
|
||||
<i class="fa-brands fa-github"></i> <span>GitHub</span>
|
||||
</a>
|
||||
<a href="/" class="text-slate-600 hover:text-indigo-600 p-2 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-book"></i> <span>Documentation</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between border-t border-slate-200 mt-12 pt-6 text-sm">
|
||||
<a class="link-previous mb-4 sm:mb-0 hidden previous-link sm:flex items-center text-slate-600 hover:text-indigo-600" href="./">
|
||||
<i class="fa-duotone fa-chevron-left mr-2"></i>
|
||||
<span class="label">Previous Page</span>
|
||||
</a>
|
||||
|
||||
<a class="link-next hidden previous-next sm:flex items-center text-slate-600 hover:text-indigo-600" href="./">
|
||||
<span class="label">Next Page</span>
|
||||
<i class="fa-duotone fa-chevron-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script>
|
||||
// Mobile menu toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMenu = document.getElementById('close-menu');
|
||||
|
||||
if (menuToggle && mobileMenu) {
|
||||
menuToggle.addEventListener('click', function() {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
document.body.classList.toggle('overflow-hidden');
|
||||
});
|
||||
|
||||
closeMenu.addEventListener('click', function() {
|
||||
mobileMenu.classList.add('hidden');
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
});
|
||||
}
|
||||
|
||||
// Run example buttons
|
||||
const exampleButtons = document.querySelectorAll('.run-example');
|
||||
exampleButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const id = this.getAttribute('data-id');
|
||||
if (window.messages && window.messages[id]) {
|
||||
const notification = window.messages[id];
|
||||
// This assumes there's a global function to show notifications
|
||||
if (window.flasher) {
|
||||
window.flasher.flash(
|
||||
notification.type,
|
||||
notification.message,
|
||||
notification.options,
|
||||
notification.title
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Generate table of contents
|
||||
const headings = document.querySelectorAll('main h2, main h3');
|
||||
const tocList = document.querySelector('#anchor-navigation ul');
|
||||
|
||||
if (headings.length > 0 && tocList) {
|
||||
headings.forEach((heading, index) => {
|
||||
// Add ID to heading if not present
|
||||
if (!heading.id) {
|
||||
heading.id = 'heading-' + index;
|
||||
}
|
||||
|
||||
const isH3 = heading.tagName.toLowerCase() === 'h3';
|
||||
const listItem = document.createElement('li');
|
||||
const link = document.createElement('a');
|
||||
|
||||
link.href = '#' + heading.id;
|
||||
link.className = isH3 ? 'pl-4 text-slate-600 hover:text-indigo-600 border-l-2 border-slate-200 block py-1'
|
||||
: 'text-slate-700 hover:text-indigo-600 font-medium block py-1';
|
||||
link.textContent = heading.textContent;
|
||||
|
||||
listItem.appendChild(link);
|
||||
tocList.appendChild(listItem);
|
||||
});
|
||||
|
||||
document.getElementById('anchor-navigation').classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<nav id="main-navigation" class="sticky top-24 hidden lg:block">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
|
||||
{% for section in site.data.menu %}
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xs font-semibold text-indigo-600 uppercase tracking-wider mb-3">
|
||||
{{ section[0] }}
|
||||
</h3>
|
||||
<ul class="space-y-1">
|
||||
{% for link in section[1] %}
|
||||
<li>
|
||||
<a href="{{ link[1] }}"
|
||||
class="block py-2 px-3 rounded-md text-sm leading-tight
|
||||
{% if page.url == link[1] %}
|
||||
bg-indigo-500 text-white font-medium
|
||||
{% else %}
|
||||
text-slate-700 hover:bg-slate-100 hover:text-indigo-700
|
||||
{% endif %}">
|
||||
{{ link[0] }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Navigation Menu -->
|
||||
<div id="mobile-menu" class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm hidden">
|
||||
<div class="fixed right-0 top-0 bottom-0 w-64 bg-white shadow-xl p-5 overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<h2 class="text-lg font-bold text-indigo-900">Navigation</h2>
|
||||
<button id="close-menu" class="p-2 text-slate-500 hover:text-slate-700">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% for section in site.data.menu %}
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xs font-semibold text-indigo-600 uppercase tracking-wider mb-2">
|
||||
{{ section[0] }}
|
||||
</h3>
|
||||
<ul class="space-y-1">
|
||||
{% for link in section[1] %}
|
||||
<li>
|
||||
<a href="{{ link[1] }}"
|
||||
class="block py-2 text-sm leading-tight
|
||||
{% if page.url == link[1] %}
|
||||
text-indigo-600 font-medium
|
||||
{% else %}
|
||||
text-slate-700 hover:text-indigo-600
|
||||
{% endif %}">
|
||||
{{ link[0] }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user