blog.html

---
layout: default
title: Blog
permalink: /blog/
---

<section class="blog-posts">
  <h1 class="bp">{{ page.title }}</h1>

  <!-- Search Bar -->
  <div class="search-container">
    <input type="text" id="search-input" placeholder="Search by title or category..." />
  </div>

  <div class="post-name-wrapper" id="post-container">
    {% for post in site.posts %}
    <div class="post-name" data-title="{{ post.title | downcase }}"
      data-tags="{{ post.categories | join: ' ' | downcase }}">
      <h2 class="post-title">
        <a href="{{ post.url }}">{{ post.title }}</a>
      </h2>
      <p class="post-date">{{ post.date | date: "%B %d, %Y" }}</p>

      <div class="post-tags">
        tags: {% for tag in post.categories %}
        <span class="tag">{{ tag }}{% unless forloop.last %},{% endunless %}</span>
        {% endfor %}
      </div>

      <p class="post-excerpt">
        {{ post.excerpt | strip_html | truncatewords: 20 }}
      </p>

      <a href="{{ post.url }}" class="read-more">Read More →</a>
    </div>
    {% endfor %}
  </div>
</section>