/
blog.html
80 lines (74 loc) · 2.61 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
---
title: Blog
layout: secondary
---
<div class="row">
<div class="col">
<p>Very much a work in progress. I am working on bringing in some old posts from other blogs in the past.</p>
</div>
</div>
<div class="row">
<div class="col">
<form action="" class="py-2 mb-2">
<div class="form-group">
<label for="search"><strong>Search a title, topic, tag</strong></label>
<input type="search" class="form-control" name="search" id="search" placeholder="Search blog posts...">
<ul class="suggestions list-group">
<li class="list-group-item"></li>
</ul>
</div>
</form>
</div>
</div>
<div class="row">
{% for post in site.posts %}
<div class="col-md-6 mb-4">
{% include post-card.html %}
</div>
{% endfor %}
</div>
<script>
const endpoint = '/api/posts.json';
const posts = [];
fetch(endpoint)
.then(blob => blob.json())
.then(data => posts.push(...data));
const searchInput = document.getElementById('search');
const suggestions = document.querySelector('.suggestions');
function findMatches(wordToMatch, posts) {
return posts.filter(post => {
// here we need to figure out if the post's title, exceerpt or tag matches what was searched
const regex = new RegExp(wordToMatch, 'gi');
return post.title.match(regex) || post.excerpt.match(regex) || post.tags?.filter(tag => tag.match(regex)).length
});
}
function displayMatches() {
const matchArray = findMatches(this.value, posts);
if(this.value.length) {
const html = matchArray.map(post => {
const regex = new RegExp(this.value, 'gi');
const title = post.title.replace(regex, `<span class="text-info">${this.value}</span>`);
const excerpt = post.excerpt.replace(regex, `<span class="text-info">${this.value}</span>`);
const tags = post.tags.join(', ').replace(regex, `<span class="text-info">${this.value}</span>`);
return `
<li class="list-group">
<a href="${post.url}">
<h5 class="title">${title}</h5>
<span class="excerpt">${excerpt}</span>
<div class="taglist">Tags: ${tags}</div>
</a>
</li>
`;
}).join('');
if(html) {
suggestions.innerHTML = html;
} else {
suggestions.innerHTML = '<li class="list-group">No matches for <span class="text-info">' + this.value + '</span></li>';
}
} else {
suggestions.innerHTML = `<li class="list-group"></li>`;
}
}
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);
</script>