Skip to content

Commit

Permalink
Merge pull request #92 from nickhammond/add-search
Browse files Browse the repository at this point in the history
Connect search form and get lunrjs search working
  • Loading branch information
seanmitchell authored Jul 28, 2024
2 parents bdd5cd6 + 87fce75 commit b217cf8
Show file tree
Hide file tree
Showing 12 changed files with 218 additions and 5 deletions.
2 changes: 2 additions & 0 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@
<link rel="apple-touch-icon" href="{{ '/assets/images/apple-touch-icon.png' }}">
<link rel="stylesheet" href="{{ '/assets/css/style.css' }}">

<script src="{{ '/assets/js/lunr.min.js' }}"></script>
<script src="{{ '/assets/js/script.js' }}" type="module"></script>

<script defer data-domain="kamal-deploy.org" src="https://plausible.io/js/script.js"></script>

</head>
4 changes: 2 additions & 2 deletions _includes/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
</label>
</div>
<div class="nav__options">
<form class="search search--nav">
<input type="search" placeholder="Search">
<form class="search search--nav" action="/docs/search/" method="get">
<input type="search" placeholder="Search" id="search-box" name="q">
<button type="submit" aria-label="Search">
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m16.1909 17.8535c-1.8921 1.4686-4.2727 2.161-6.65733 1.9363-2.38461-.2248-4.59395-1.3499-6.17829-3.1462-1.58433-1.7963-2.424578-4.1289-2.3497-6.5229.07489-2.39402 1.05927-4.66953 2.75277-6.36333 1.6938-1.6935 3.9693-2.67788 6.36335-2.75276 2.394-.074885 4.7266.76536 6.5229 2.3497 1.7963 1.58433 2.9214 3.79367 3.1461 6.17828.2248 2.38461-.4676 4.76531-1.9362 6.65731l4.7709 4.7709c.1549.1439.2682.3269.3278.5297.0597.2029.0635.4181.0111.6229-.0523.2048-.159.3918-.3087.5411s-.3369.2555-.5419.3073c-.2046.0524-.4195.0488-.6222-.0106s-.3857-.1723-.5297-.3268zm1.2869-7.4388c.014-.93601-.1583-1.86541-.5069-2.73418-.3485-.86877-.8663-1.65956-1.5232-2.32638-.657-.66681-1.44-1.19634-2.3034-1.55778-.8635-.36144-1.7902-.54758-2.7263-.54758-.93608 0-1.86281.18614-2.72629.54758-.86347.36144-1.64646.89097-2.30341 1.55778-.65695.66682-1.17475 1.45761-1.52327 2.32638-.34853.86877-.52083 1.79817-.50687 2.73418.02765 1.8541.78361 3.623 2.10458 4.9244 1.32096 1.3014 3.10089 2.0309 4.95526 2.0309 1.8543 0 3.6343-.7295 4.9552-2.0309 1.321-1.3014 2.077-3.0703 2.1046-4.9244z" fill="currentColor"/></svg>
</button>
Expand Down
9 changes: 7 additions & 2 deletions _layouts/docs.html
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@
<div class="page__content">
<aside>
<div>
<form class="search">
<input type="search" placeholder="Search">
<form class="search" action="/docs/search/" method="get">
<input type="search" placeholder="Search" id="search-box" name="q">
<button type="submit" aria-label="Search">
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m16.1909 17.8535c-1.8921 1.4686-4.2727 2.161-6.65733 1.9363-2.38461-.2248-4.59395-1.3499-6.17829-3.1462-1.58433-1.7963-2.424578-4.1289-2.3497-6.5229.07489-2.39402 1.05927-4.66953 2.75277-6.36333 1.6938-1.6935 3.9693-2.67788 6.36335-2.75276 2.394-.074885 4.7266.76536 6.5229 2.3497 1.7963 1.58433 2.9214 3.79367 3.1461 6.17828.2248 2.38461-.4676 4.76531-1.9362 6.65731l4.7709 4.7709c.1549.1439.2682.3269.3278.5297.0597.2029.0635.4181.0111.6229-.0523.2048-.159.3918-.3087.5411s-.3369.2555-.5419.3073c-.2046.0524-.4195.0488-.6222-.0106s-.3857-.1723-.5297-.3268zm1.2869-7.4388c.014-.93601-.1583-1.86541-.5069-2.73418-.3485-.86877-.8663-1.65956-1.5232-2.32638-.657-.66681-1.44-1.19634-2.3034-1.55778-.8635-.36144-1.7902-.54758-2.7263-.54758-.93608 0-1.86281.18614-2.72629.54758-.86347.36144-1.64646.89097-2.30341 1.55778-.65695.66682-1.17475 1.45761-1.52327 2.32638-.34853.86877-.52083 1.79817-.50687 2.73418.02765 1.8541.78361 3.623 2.10458 4.9244 1.32096 1.3014 3.10089 2.0309 4.95526 2.0309 1.8543 0 3.6343-.7295 4.9552-2.0309 1.321-1.3014 2.077-3.0703 2.1046-4.9244z" fill="currentColor"/></svg>
</button>
Expand Down Expand Up @@ -152,6 +152,8 @@

{{ content }}

{% unless page.nav == false %}

<nav>
<a href="{{ docs_prev.url | absolute_url }}" aria-label="{{ docs_prev_title }}">
<dl>
Expand All @@ -166,6 +168,9 @@
</dl>
</a>
</nav>

{% endunless %}

</article>
</div>
</div>
Expand Down
5 changes: 4 additions & 1 deletion _sass/base/_elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,10 @@ a {
text-decoration: underline;
text-decoration-thickness: 0.09em;
text-underline-offset: 0.09em;
transition: color var(--transition);
transition:
color var(--transition),
text-decoration-color var(--transition)
;
}

em,
Expand Down
78 changes: 78 additions & 0 deletions _sass/modules/_search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,81 @@
}

}

#search-query {

mark {
color: inherit;
font-style: italic;
font-weight: 400;
text-decoration: underline;
text-decoration-thickness: 0.055em;
text-underline-offset: 0.1em;
}

}

#search-results {

display: flex;
flex-direction: column;
gap: 1.4em;

.search-result {

display: flex;
flex-direction: column;

h3 {

color: var(--color-blue);

a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(var(--rgb-blue), 0);
}

}

small {

color: var(--color-grey);
font-size: 80%;
font-weight: 500;
margin-bottom: 0.6em;
margin-top: 0.1em;

a {
color: inherit;
text-decoration: none;
}

}

}

@media(hover: hover) {

h3 a {

&:focus,
&:hover {
color: var(--color-black);
text-decoration-color: var(--color-black);
}

}

small a {

&:focus,
&:hover {
color: var(--color-black);
}

}

}

}
6 changes: 6 additions & 0 deletions assets/js/lunr.min.js

Large diffs are not rendered by default.

89 changes: 89 additions & 0 deletions assets/js/modules/search.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
function ready() {

function showResults(results, store, searchTerm) {

var searchResults = document.getElementById('search-results');

document.getElementById('search-query').innerHTML = 'Search results for <mark>' + searchTerm + '</mark>';

Check failure

Code scanning / CodeQL

Client-side cross-site scripting High

Cross-site scripting vulnerability due to
user-provided value
.

var appendString = '';

if(results.length) {

for(var i = 0; i < results.length; i++) {

var item = store[results[i].ref];

appendString += '<div class="search-result">';
appendString += ' <h3><a href="' + item.url + '">' + item.title + '</a></h3>';
appendString += ' <small><a href="' + item.url + '">' + item.section + '</a></small>';
appendString += ' <p>' + item.content.substring(0, 250) + '&hellip;</p>';
appendString += '</div>';

}

} else {

appendString = '<div class="search-result"><p>No results found.</p></div>';

}

searchResults.innerHTML = appendString;

}

function getQuery(variable) {

var query = window.location.search.substring(1);
var vars = query.split('&');

for(var i = 0; i < vars.length; i++) {

var pair = vars[i].split('=');

if(pair[0] === variable) {

return decodeURIComponent(pair[1].replace(/\+/g, '%20'));

}

}

}

var searchTerm = getQuery('q');

if(searchTerm) {

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

var idx = lunr(function() {

this.field('id');
this.field('title', {
boost: 10
});
this.field('author');
this.field('section');
this.field('content');

for(var key in window.store) {
this.add({
'id': key,
'title': window.store[key].title,
'author': window.store[key].author,
'section': window.store[key].section,
'content': window.store[key].content
});
}
});

var results = idx.search(searchTerm);

showResults(results, window.store, searchTerm);

}

}

export { ready };
3 changes: 3 additions & 0 deletions assets/js/script.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import * as code from './modules/code.js';
import * as search from './modules/search.js';
import * as video from './modules/video.js';

document.addEventListener('DOMContentLoaded', () => {

code.ready();

search.ready();

video.ready();

});
1 change: 1 addition & 0 deletions docs/commands/index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
---
title: Commands
redirect_to:
- /docs/commands/view-all-commands/
---
1 change: 1 addition & 0 deletions docs/configuration/index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
---
title: Configuration
redirect_to:
- /docs/configuration/configuration-overview/
---
1 change: 1 addition & 0 deletions docs/hooks/index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
---
title: Hooks
redirect_to:
- /docs/hooks/hooks-overview/
---
24 changes: 24 additions & 0 deletions docs/search/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: Search Results
nav: false
---

<h1 id="search-query"></h1>

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

<script>
{% assign docs = site.data.docs %}

window.store = {
{% for page in site.pages %}
"{{ page.url | slugify }}": {
"title": "{{ page.title | smartify | xml_escape }}",
"content": {{ page.content | markdownify | strip_html | strip_newlines | jsonify }},
"section": "{{ page.url }}".split("/").filter(element => element !== "").slice(1).join("/"),
"url": "{{ page.url | xml_escape }}"
}
{% unless forloop.last %},{% endunless %}
{% endfor %}
};
</script>

0 comments on commit b217cf8

Please sign in to comment.