67 lines
2.7 KiB
HTML
67 lines
2.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Blog{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Our Blog</h1>
|
|
<p class="text-xl text-primary-100 max-w-2xl mx-auto">
|
|
Insights, tutorials, and thoughts on software development, technology, and industry trends.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Search Section -->
|
|
<section class="py-8 bg-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-xl mx-auto">
|
|
<div class="relative">
|
|
<input type="text"
|
|
name="search"
|
|
placeholder="Search posts..."
|
|
class="input pl-12"
|
|
hx-get="{{ url_for('blog_search') }}"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#blog-posts"
|
|
hx-swap="innerHTML">
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blog Posts -->
|
|
<section class="py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div id="blog-posts">
|
|
{% include "blog/partials/post_list.html" %}
|
|
</div>
|
|
|
|
<!-- Load More -->
|
|
{% if posts and posts|length >= 10 %}
|
|
<div class="text-center mt-12">
|
|
<button hx-get="{{ url_for('blog_load_more', page=2) }}"
|
|
hx-target="#blog-posts"
|
|
hx-swap="beforeend"
|
|
hx-trigger="click"
|
|
class="btn btn-outline px-8 py-3">
|
|
<span class="htmx-indicator mr-2">
|
|
<svg class="animate-spin h-5 w-5 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</span>
|
|
Load More Posts
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|