Skip to content

Commit

Permalink
docs: add search box (#424)
Browse files Browse the repository at this point in the history
  • Loading branch information
cyjake authored Aug 27, 2024
1 parent aca30b2 commit be46e67
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 6 deletions.
7 changes: 7 additions & 0 deletions docs/_layouts/en.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,15 @@
<div id="header">
<div class="container-lg px-3">
<a class="logo" href="{{ '/' | relative_url }}">Leoric</a>

<nav>
<ul>
<li class="nav-item">
<form action="/search.html" method="get" class="search">
<input type="search" name="q" placeholder="Search the site..." id="search-box">
<input type="submit" value="🔍">
</form>
</li>
<li class="nav-item">
<a href="{{ '/starter' | relative_url }}">Starter</a>
</li>
Expand Down
6 changes: 6 additions & 0 deletions docs/_layouts/zh.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@
<a class="logo" href="{{ '/zh' | relative_url }}">Leoric</a>
<nav>
<ul>
<li class="nav-item">
<form action="/zh/search.html" method="get" class="search">
<input type="search" name="q" placeholder="Search the site..." id="search-box">
<input type="submit" value="🔍">
</form>
</li>
<li class="nav-item">
<a href="{{ '/zh/starter' | relative_url }}">快速上手</a>
</li>
Expand Down
44 changes: 38 additions & 6 deletions docs/assets/css/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,36 @@ body {
}
}

.search {
position: relative;

& [type="search"] {
padding: 0 24px 0 4px;
width: 100%;
background: var(--bg-color);
color: var(--color);
border: 1px solid rgb(118, 118, 118);
height: 1.6em;
border-radius: 0;

&:focus-visible {
border: none;
}
}

& [type="submit"] {
position: absolute;
right: 0;
width: 1.6em;
height: 1.6em;
line-height: 1.7;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
}

.dropdown-trigger {
&:after {
content: '';
Expand Down Expand Up @@ -249,12 +279,12 @@ body {
}

a.logo {
background: url(/favicon.ico) no-repeat 32px 8px;
background: url(/favicon.ico) no-repeat 0 8px;
background-size: 40px;
display: block;
height: 56px;
line-height: unset;
padding-left: 84px;
padding-left: 48px;
padding-top: 6px;
margin-bottom: 12px;
font-size: 2em;
Expand All @@ -269,7 +299,6 @@ body {
a {
height: 32px;
line-height: 32px;
padding: 0 12px 0 36px;
background-color: transparent;
opacity: 0.75;
transition: all 0.1s ease-in-out;
Expand All @@ -281,7 +310,7 @@ body {
}

.color-scheme {
margin: 6px 6px 6px 36px;
margin: 6px 0;
}

nav {
Expand All @@ -290,15 +319,18 @@ body {
.nav-item {
display: block;
padding: 0;
}

.search {
margin-bottom: 8px;
}

.dropdown-trigger:after {
display: block;
content: '';
position: absolute;
top: 12px;
right: 12px;
right: 0;
bottom: initial;
left: initial;
background: none;
Expand All @@ -322,7 +354,7 @@ body {
padding-left: 0;

a {
padding: 0 12px 0 66px;
padding: 0 12px 0 24px;
}

a.active {
Expand Down
3 changes: 3 additions & 0 deletions docs/assets/javascript/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"env": {
"browser": true
},
"globals": {
"lunr": true
},
"rules": {
"strict": [2, "function"]
}
Expand Down
46 changes: 46 additions & 0 deletions docs/assets/javascript/search.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@


function displaySearchResults(results, store) {
var searchResults = document.getElementById('search-results');

if (results.length) { // Are there any results?
var appendString = '';

for (var i = 0; i < results.length; i++) { // Iterate over the results
var item = store[results[i].ref];
appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
}

searchResults.innerHTML = appendString;
} else {
searchResults.innerHTML = '<li>No results found</li>';
}
}

var searchTerm = new URLSearchParams(window.location.search).get('q');

if (searchTerm) {
document.getElementById('search-box').setAttribute('value', searchTerm);

// Initalize lunr with the fields it will be searching on. I've given title
// a boost of 10 to indicate matches on this field are more important.
var idx = lunr(function () {
this.field('id');
this.field('title', { boost: 10 });
this.field('categories');
this.field('content');

for (var key in window.store) { // Add the data to lunr
this.add({
'id': key,
'title': window.store[key].title,
'categories': window.store[key].categories,
'content': window.store[key].content
});
}
});

var results = idx.search(searchTerm); // Get lunr to perform a search
displaySearchResults(results, window.store); // We'll write this in the next section
}
37 changes: 37 additions & 0 deletions docs/search.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
layout: en
---

<ul id="search-results"></ul>

<script>
window.store = {
{% for post in site.posts %}
{% if post.categories contains "zh" %}
{% continue %}
{% else %}
"{{ post.url | slugify }}": {
"title": {{ post.title | jsonify }},
"categories": {{ post.categories | jsonify }},
"content": {{ post.content | strip_html | strip_newlines | jsonify }},
"url": {{ post.url | jsonify }}
},
{% endif %}
{% endfor %}
{% for page in site.pages %}
{% if page.url contains "/zh/" %}
{% continue %}
{% else %}
"{{ page.url | slugify }}": {
"title": {{ page.title | jsonify }},
"categories": {{ page.categories | jsonify }},
"content": {{ page.content | strip_html | strip_newlines | jsonify }},
"url": {{ page.url | jsonify }}
},
{% endif %}
{% endfor %}
};
</script>

<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="{{ 'assets/javascript/search.mjs' | relative_url }}"></script>
34 changes: 34 additions & 0 deletions docs/zh/search.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
layout: zh
---

<ul id="search-results"></ul>

<script>
window.store = {
{% for post in site.posts %}
{% if post.categories contains "zh" %}
"{{ post.url | slugify }}": {
"title": {{ post.title | jsonify }},
"categories": {{ post.categories | jsonify }},
"content": {{ post.content | strip_html | strip_newlines | jsonify }},
"url": {{ post.url | jsonify }}
}
{% unless forloop.last %},{% endunless %}
{% endif %}
{% endfor %}
{% for page in site.pages %}
{% if page.url contains "/zh/" %}
"{{ page.url | slugify }}": {
"title": {{ page.title | jsonify }},
"categories": {{ page.categories | jsonify }},
"content": {{ page.content | strip_html | strip_newlines | jsonify }},
"url": {{ page.url | jsonify }}
},
{% endif %}
{% endfor %}
};
</script>

<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="{{ 'assets/javascript/search.mjs' | relative_url }}"></script>

0 comments on commit be46e67

Please sign in to comment.