blogs.html

---
layout: default
title: "Blog"
description: "Empowering communities through transparent access to public information"
---


<!-- Blog Section -->
<section class="py-10 bg-white relative overflow-hidden">
    <!-- Subtle background elements -->
    <div class="absolute inset-0">
      <div class="absolute top-1/3 left-1/4 w-64 h-64 bg-purple-50 rounded-full filter blur-3xl opacity-40"></div>
      <div class="absolute bottom-1/3 right-1/4 w-72 h-72 bg-indigo-50 rounded-full filter blur-3xl opacity-30" style="animation-delay: 2s"></div>
    </div>
    <div class="container mx-auto px-6 md:px-8 max-w-6xl relative z-10">   
      <!-- Recent Articles Grid -->
      <div class="mb-16">
        <div class="flex items-center justify-between mb-8">
          <h3 class="text-2xl font-semibold text-gray-900" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
            Recent Articles
          </h3>
        </div>
        
        <!-- Articles Grid -->
        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3" id="articles-grid">
          <!-- {% assign blogs = site.data.blogs | default: empty_array %} -->
          {% for post in site.posts %}
          <article class="blog-article bg-white border border-gray-200 rounded-2xl overflow-hidden hover:border-gray-300 transition-all duration-300 hover:shadow-lg shadow-sm h-96 flex flex-col" data-index="{{ forloop.index0 }}">
            <div class="h-48 bg-gray-100 flex items-center justify-center">
              {% if post.image %}
              <img src="{{ post.image | relative_url }}" 
              alt="{{ blog.title }}" 
              class="object-cover h-full w-full" />
              {% else %}
              <i data-lucide="image" class="h-8 w-8 text-gray-400"></i>
              {% endif %}
            </div>
            <div class="p-6 flex-1 flex flex-col">
              <div class="flex items-center space-x-2 mb-3">
                <span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">{{ post.category | default: "No - Data" }}</span>
                <span class="text-gray-400 text-xs">•</span>
                <span class="text-gray-500 text-xs" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">{{ post.date | default: "No - Data" }}</span>
              </div>
              <h4 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                
                <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
              </h4>
              <div class="flex items-center justify-between pt-4 mt-auto">
                <div class="flex items-center space-x-2">
                  <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
                    <i data-lucide="user" class="h-3 w-3 text-gray-600"></i>
                  </div>
                  <span class="text-xs text-gray-600" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">{{ post.author | default: "No - Data" }}</span>
                </div>
                <span class="text-xs text-gray-500" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">{{ post.read_time | default: "No - Data" }}</span>
              </div>
            </div>
          </article>
          {% endfor %}
        </div>
  
        <!-- Pagination Controls -->
        <div id="pagination-controls" class="flex items-center justify-center space-x-4 mt-12" style="display: none;">
          <button id="prev-btn" class="p-2 rounded-md text-gray-600 hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0" disabled>
            <i data-lucide="chevron-left" class="h-4 w-4"></i>
          </button>
          
          <div id="page-numbers" class="flex items-center space-x-2 text-sm">
            <!-- Page numbers will be dynamically inserted here -->
          </div>
          
          <button id="next-btn" class="p-2 rounded-md text-gray-600 hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0">
            <i data-lucide="chevron-right" class="h-4 w-4"></i>
          </button>
        </div>
  
        <!-- Results Info -->
        <div id="results-info" class="text-center mt-8 text-gray-600 text-sm" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; display: none;">
          Showing <span id="showing-start">0</span>-<span id="showing-end">0</span> of <span id="total-posts">0</span> articles
        </div>
      </div>
  
      <!-- Newsletter Signup -->
      <div class="text-center">
        <div class="bg-gray-50 rounded-3xl p-8 md:p-12 max-w-4xl mx-auto">
          <h3 class="text-2xl font-semibold text-gray-900 mb-4" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
            Stay Updated
          </h3>
          <p class="text-gray-600 mb-8 max-w-2xl mx-auto" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
              Join to our mailing list to get the latest insights on government transparency, open data initiatives, and civic technology delivered to your inbox.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-md mx-auto">
            <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
            <button class="bg-gray-900 text-white px-6 py-3 rounded-lg font-medium border border-black hover:bg-white hover:text-black transition-colors whitespace-nowrap focus:outline-none" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
              Join
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
  
    // Pagination functionality
    const articlesPerPage = 6;
    let currentPage = 1;
    let totalArticles = 0;
    let totalPages = 0;
  
    const articlesGrid = document.getElementById('articles-grid');
    const paginationControls = document.getElementById('pagination-controls');
    const resultsInfo = document.getElementById('results-info');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const pageNumbers = document.getElementById('page-numbers');
    const showingStart = document.getElementById('showing-start');
    const showingEnd = document.getElementById('showing-end');
    const totalPosts = document.getElementById('total-posts');
  
    function initPagination() {
      const articles = document.querySelectorAll('.blog-article');
      totalArticles = articles.length;
      totalPages = Math.ceil(totalArticles / articlesPerPage);
  
      // Show pagination controls only if there are more than 6 articles
      if (totalArticles > articlesPerPage) {
        paginationControls.style.display = 'flex';
        resultsInfo.style.display = 'block';
        totalPosts.textContent = totalArticles;
        
        renderPageNumbers();
        showPage(1);
        
        // Add event listeners
        prevBtn.addEventListener('click', () => {
          if (currentPage > 1) {
            showPage(currentPage - 1);
          }
        });
        
        nextBtn.addEventListener('click', () => {
          if (currentPage < totalPages) {
            showPage(currentPage + 1);
          }
        });
      } else {
        // Show all articles if 6 or fewer
        articles.forEach(article => {
          article.style.display = 'flex';
        });
        if (totalArticles > 0) {
          resultsInfo.style.display = 'block';
          totalPosts.textContent = totalArticles;
          showingStart.textContent = '1';
          showingEnd.textContent = totalArticles;
        }
      }
    }
  
    function showPage(page) {
      currentPage = page;
      const articles = document.querySelectorAll('.blog-article');
      
      // Hide all articles
      articles.forEach(article => {
        article.style.display = 'none';
      });
      
      // Show articles for current page
      const startIndex = (page - 1) * articlesPerPage;
      const endIndex = Math.min(startIndex + articlesPerPage, totalArticles);
      
      for (let i = startIndex; i < endIndex; i++) {
        if (articles[i]) {
          articles[i].style.display = 'flex';
        }
      }
      
      // Update pagination controls
      prevBtn.disabled = page === 1;
      nextBtn.disabled = page === totalPages;
      
      // Update page number buttons
      updatePageNumbers();
      
      // Update results info
      showingStart.textContent = startIndex + 1;
      showingEnd.textContent = endIndex;
      
      // Smooth scroll to top of articles section
      document.getElementById('hehe').scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
       });
    }
  
    function renderPageNumbers() {
      pageNumbers.innerHTML = '';
      
      for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        pageBtn.style.fontFamily = "'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif";
        
        pageBtn.addEventListener('click', () => {
          showPage(i);
        });
        
        pageNumbers.appendChild(pageBtn);
      }
    }
  
    function updatePageNumbers() {
      const pageButtons = pageNumbers.querySelectorAll('button');
      pageButtons.forEach((btn, index) => {
        const page = index + 1;
        if (page === currentPage) {
          btn.className = 'w-8 h-8 rounded-md bg-gray-900 text-white transition-colors focus:outline-none focus:ring-0';
        } else {
          btn.className = 'w-8 h-8 rounded-md text-gray-600 hover:bg-gray-100 transition-colors focus:outline-none focus:ring-0';
        }
      });
    }
  
    // Initialize pagination when DOM is ready
    initPagination();
  });
  </script>
  
  <style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .blog-article {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  </style>