blog.md

layout	title	pagination
default	Blog	enabled true

Blog

Technical insights, tutorials, and thoughts on AI

{% for post in paginator.posts %}

{%- if post.image -%}

{%- else -%}

{%- endif -%}

{{ post.title }}

{{ post.date | date: '%B %d, %Y' }} {% if post.categories %} •

{% for category in post.categories %} {{ category | replace: '_', ' ' | capitalize }} {% endfor %}

{% endif %}

                        {% if post.excerpt %}
                            <div class="text-gray-700 leading-relaxed mb-4">
                                {{ post.excerpt | strip_html | truncate: 200 }}
                            </div>
                        {% endif %}
                        
                        <footer>
                            <a href="{{ post.url | relative_url }}" 
                               class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 font-medium transition-colors">
                                Read more
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                        </footer>
                    </div>
                </div>
            </article>
        {% endfor %}
        
        {% if paginator.posts.size == 0 %}
            <div class="text-center py-12">
                <p class="text-gray-600 text-lg">No blog posts available yet.</p>
            </div>
        {% endif %}
        
        <!-- Pagination -->
        {% if paginator.total_pages > 1 %}
            <nav class="mt-12 pt-8 border-t border-gray-200" aria-label="Blog pagination">
                <div class="flex items-center justify-between">
                    {% if paginator.previous_page %}
                        <a href="{{ paginator.previous_page_path | relative_url }}" 
                           class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                            </svg>
                            Previous
                        </a>
                    {% else %}
                        <div></div>
                    {% endif %}
                    
                    <div class="flex items-center gap-2">
                        {% for page in (1..paginator.total_pages) %}
                            {% if page == paginator.page %}
                                <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-md">
                                    {{ page }}
                                </span>
                            {% elsif page == 1 %}
                                <a href="{{ site.baseurl }}/blog/" 
                                   class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                                    {{ page }}
                                </a>
                            {% else %}
                                <a href="{{ site.baseurl }}/blog/page/{{ page }}/" 
                                   class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                                    {{ page }}
                                </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                    
                    {% if paginator.next_page %}
                        <a href="{{ paginator.next_page_path | relative_url }}" 
                           class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            Next
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                    {% else %}
                        <div></div>
                    {% endif %}
                </div>
            </nav>
        {% endif %}
        </div>
    </main>

    <!-- Sidebar - Hidden on mobile -->
    <aside class="hidden lg:block w-80 flex-shrink-0">
        {% include blog-sidebar.html %}
    </aside>
</div>