blog_index.html

{% extends "base.html" %}

{% block title %}Blog · Kishaloy Roy{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/blog_page.css') }}">
{% endblock %}

{% block content %}
  <div class="blog-header">
    <h1 class="page-title">Blog</h1>
    <p class="page-subtitle">Short notes, long dives, and occasional experiments.</p>
  </div>

  <div class="blog-search-container">
    <form class="blog-search" action="{{ url_for('blog_index') }}" method="get" role="search">
      <input type="hidden" name="tag" value="{{ tag }}">
      <input name="q" value="{{ q }}" placeholder="Search posts..." aria-label="Search blog posts">
      <button class="search-btn" type="submit">Search</button>
    </form>
  </div>

  {% if q and tag %}
    <div class="filter-info">
      Search results for "{{ q }}" in <span class="tag-highlight">{{ tag }}</span>
    </div>
  {% elif q %}
    <div class="filter-info">
      Search results for "{{ q }}"
    </div>
  {% elif tag %}
    <div class="filter-info">
      Showing posts tagged <span class="tag-highlight">{{ tag }}</span>
    </div>
  {% endif %}

  {% if posts|length == 0 %}
    <div class="blog-empty">
      <div class="blog-empty-icon">📝</div>
      <p class="blog-empty-text">No posts found.</p>
    </div>
  {% else %}
    <div class="blog-list">
      {% for p in posts %}
        <a class="blog-item" href="{{ url_for('blog_post', slug=p.slug) }}" aria-label="Read {{ p.title }}">
          {% if p.cover_image %}
            <img class="blog-item-thumbnail" src="{{ url_for('static', filename='uploads/' + p.cover_image) }}" alt="{{ p.title }}" loading="lazy">
          {% endif %}
          
          <div class="blog-item-content">
            <h2 class="blog-item-title">{{ p.title }}</h2>
            
            {% if p.excerpt %}
              <p class="blog-item-excerpt">{{ p.excerpt }}</p>
            {% endif %}

            <div class="blog-item-meta">
              {% if p.tags and p.tags|length > 0 %}
                <div class="blog-item-tags">
                  {% for t in p.tags %}
                    <span class="blog-tag {% if tag==t %}is-active{% endif %}" data-tag="{{ t|lower }}">{{ t }}</span>
                  {% endfor %}
                </div>
              {% endif %}
              
              {% if p.like_count is defined and p.like_count > 0 %}
                <span class="blog-card-likes">👍 {{ p.like_count }}</span>
              {% endif %}
              
              {% if p.published_at %}
                <span class="blog-item-date">{{ p.published_at.strftime('%d %b %Y') }}</span>
              {% endif %}
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}