# Search Articles
<div class="search-container">
<input type="text" id="search-input" placeholder="Search articles..." aria-label="Search articles" />
<div id="search-results"></div>
</div>
---
## Browse by Category
- [[index/ai-tools-and-setup|AI Tools & Setup]] (11 articles)
- [[index/ai-development-and-engineering|AI Development & Engineering]] (14 articles)
- [[index/ai-systems-and-architecture|AI Systems & Architecture]] (12 articles)
- [[index/ai-research-and-analysis|AI Research & Analysis]] (12 articles)
- [[index/case-studies-and-lessons|Case Studies & Lessons]] (8 articles)
## Browse by Other
- [[by-date|All Articles by Date]]
- [[index/by-difficulty|Articles by Difficulty]]
- [[index/by-tag|Articles by Tag]]
- [[by-series|Article Series]]
- [[reading-paths|Learning Paths]]
---
<style>
.search-container {
max-width: 600px;
margin: 20px auto;
}
#search-input {
width: 100%;
padding: 15px;
font-size: 18px;
border: 2px solid #219EBC;
border-radius: 8px;
background: var(--background-primary);
color: var(--text-normal);
outline: none;
}
#search-input:focus {
border-color: #FFB703;
box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.2);
}
#search-results {
margin-top: 20px;
}
.search-result {
padding: 15px;
margin: 10px 0;
background: var(--background-secondary);
border-radius: 8px;
border-left: 4px solid #219EBC;
}
.search-result h3 {
margin: 0 0 8px 0;
color: var(--text-normal);
}
.search-result h3 a {
color: #219EBC;
text-decoration: none;
}
.search-result h3 a:hover {
text-decoration: underline;
}
.search-result .meta {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 8px;
}
.search-result .summary {
font-size: 14px;
color: var(--text-normal);
line-height: 1.5;
}
.no-results {
text-align: center;
padding: 40px;
color: var(--text-muted);
}
.search-stats {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 15px;
}
</style>
<script src="https://unpkg.com/
[email protected]/dist/umd/index.min.js"></script>
<script>
(async function() {
const input = document.getElementById('search-input');
const results = document.getElementById('search-results');
let miniSearch = null;
let articles = [];
// Load search index
try {
const response = await fetch('/search-index.min.json');
const data = await response.json();
articles = data.articles;
// Initialize MiniSearch
miniSearch = new MiniSearch({
fields: ['title', 'summary', 'body', 'tags'],
storeFields: ['title', 'category', 'summary', 'url', 'difficulty', 'reading_time', 'date'],
searchOptions: {
boost: { title: 3, summary: 2, tags: 1.5 },
fuzzy: 0.2,
prefix: true
}
});
miniSearch.addAll(articles);
console.log('Search index loaded: ' + articles.length + ' articles');
} catch (e) {
console.error('Failed to load search index:', e);
results.textContent = 'Search index not available. Try browsing by category instead.';
return;
}
// Search handler
input.addEventListener('input', function() {
const query = this.value.trim();
if (query.length < 2) {
results.textContent = '';
return;
}
const searchResults = miniSearch.search(query, { limit: 20 });
if (searchResults.length === 0) {
results.textContent = 'No articles found. Try different keywords.';
return;
}
// Clear results
while (results.firstChild) {
results.removeChild(results.firstChild);
}
// Add stats
const stats = document.createElement('div');
stats.className = 'search-stats';
stats.textContent = 'Found ' + searchResults.length + ' article' + (searchResults.length > 1 ? 's' : '');
results.appendChild(stats);
searchResults.forEach(function(result) {
const article = articles.find(function(a) { return a.id === result.id; });
if (!article) return;
const date = article.date ? new Date(article.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '';
const div = document.createElement('div');
div.className = 'search-result';
const h3 = document.createElement('h3');
const link = document.createElement('a');
link.href = article.url;
link.textContent = article.title;
h3.appendChild(link);
div.appendChild(h3);
const meta = document.createElement('div');
meta.className = 'meta';
meta.textContent = article.category + ' \u2022 ' + article.difficulty + ' \u2022 ' + article.reading_time + ' min' + (date ? ' \u2022 ' + date : '');
div.appendChild(meta);
if (article.summary) {
const summary = document.createElement('div');
summary.className = 'summary';
summary.textContent = article.summary;
div.appendChild(summary);
}
results.appendChild(div);
});
});
// Focus search on page load
input.focus();
})();
</script>