---
layout: default
section: Posts
title: Search
summary: Search across all stories on API Evangelist.
nav: Stories
sub: Stories
year:
---

<!-- Search page shows ALL posts (no year filter), with search pre-filled from URL params -->

<div class="d-flex align-items-center mb-4">
  <div>
    <h1 class="mb-0 fs-4">Search Stories</h1>
    <p class="text-muted mb-0">{{ page.summary }}</p>
  </div>
</div>

<!-- Search bar -->
<div class="card mb-4">
  <div class="card-body py-3">
    <div class="row align-items-center g-3">
      <div class="col-12 col-md-auto">
        <div class="d-flex flex-wrap gap-1">
          {% assign years = "2026,2025,2024,2023,2022,2021,2020,2019,2018,2017,2016,2015,2014,2013,2012,2011,2010" | split: "," %}
          {% for y in years %}
            <a href="/{{ y }}" class="btn btn-sm btn-outline-secondary">{{ y }}</a>
          {% endfor %}
        </div>
      </div>
      <div class="col-12 col-md">
        <div class="input-group">
          <input type="text" id="post-search" class="form-control form-control-sm" placeholder="Search all stories..." onkeyup="filterPosts()">
          <span class="input-group-text">
            <span class="material-symbols-outlined" style="font-size: 18px;">search</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- All posts -->
<div id="post-list">
  {% assign posts = site.posts %}
  {% for post in posts %}
    {% assign p = post.url | split: "/" %}
    {% assign post_date = p[1] | append: "-" | append: p[2] | append: "-" | append: p[3] | date: "%B %e, %Y" %}
    {% assign excerpt = post.content | strip_html | truncate: 200 %}

    <div class="post-entry" data-title="{{ post.title | downcase }}" data-tags="{% for tag in post.tags %}{{ tag | downcase }} {% endfor %}" style="display: none;">
      <div class="post-item d-flex">
        {% if post.image %}
        <a href="{{ post.url | replace:'.html','' }}" class="flex-shrink-0">
          <img src="{{ post.image }}" alt="" class="post-thumb me-3">
        </a>
        {% endif %}
        <div class="flex-grow-1">
          <h3 class="mb-1"><a href="{{ post.url | replace:'.html','' }}">{{ post.title }}</a></h3>
          <p class="text-muted small mb-2">{{ excerpt }}</p>
          <div class="d-flex flex-wrap align-items-center gap-2">
            <span class="post-meta">{{ post_date }}</span>
            {% for tag in post.tags %}
              <a href="/search/?search={{ tag }}&searchFields=tags" class="post-tag">#{{ tag }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

  {% endfor %}
</div>

<div id="no-results" class="text-center text-muted py-5">
  Enter a search term above to find stories.
</div>

<script>
var maxResults = 50;

function filterPosts() {
  var query = document.getElementById('post-search').value.toLowerCase().trim();
  var entries = document.querySelectorAll('.post-entry');
  var visible = 0;

  if (query === '') {
    entries.forEach(function(entry) { entry.style.display = 'none'; });
    document.getElementById('no-results').style.display = '';
    document.getElementById('no-results').textContent = 'Enter a search term above to find stories.';
    return;
  }

  // Support searching by tag via searchFields param
  var params = new URLSearchParams(window.location.search);
  var searchFields = params.get('searchFields') || 'title,tags';

  entries.forEach(function(entry) {
    var title = entry.getAttribute('data-title');
    var tags = entry.getAttribute('data-tags');
    var match = false;

    if (searchFields.indexOf('title') !== -1 && title.indexOf(query) !== -1) match = true;
    if (searchFields.indexOf('tags') !== -1 && tags.indexOf(query) !== -1) match = true;

    if (match && visible < maxResults) {
      entry.style.display = '';
      visible++;
    } else {
      entry.style.display = 'none';
    }
  });

  if (visible === 0) {
    document.getElementById('no-results').style.display = '';
    document.getElementById('no-results').textContent = 'No stories match "' + query + '".';
  } else {
    document.getElementById('no-results').style.display = 'none';
  }
}

// Auto-search from URL params
(function() {
  var params = new URLSearchParams(window.location.search);
  var search = params.get('search');
  if (search) {
    document.getElementById('post-search').value = search;
    filterPosts();
  }
})();
</script>