Skip to content

Commit

Permalink
Added site search
Browse files Browse the repository at this point in the history
  • Loading branch information
harrymkt committed Sep 4, 2024
1 parent 18fbded commit e5d6194
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 11 deletions.
4 changes: 3 additions & 1 deletion Source/_data/nav.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,6 @@
- name: "Useful communities"
url: "/community"
- name: "Blog"
url: "/blog"
url: "/blog"
- name: "Useful articles"
url: "/articles"
3 changes: 3 additions & 0 deletions Source/_includes/footer.liquid
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
</div>
</main>
<aside>
<div class="beforefooter" id="footersection">
<div id="cometome">
<h1>Come to me</h1>
Expand All @@ -24,6 +26,7 @@
<p><a href="/privacy">Privacy Policy</a></p>
<p><a href="/accessibility" title="Learn more about the accessibility of the site!">Accessibility</a></p>
</div>
</aside>
<script>addfooter();</script>
</body>
</html>
8 changes: 7 additions & 1 deletion Source/_includes/header.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,20 @@
{% endif %}
</head>
<body>
{%assign permalink="/" | append: page.permalink%}
<a href="/config">Config site</a>
<h1>Accessibility links</h1>
<a href="#mainc" class="skip-link">Skip to main content</a>
<a href="#navigation" class="skip-link">Skip to navigation</a>
<a href="#footersection" class="skip-link">Skip to footer</a>
<a href="/search"
{%if permalink=="/search"%}
aria-current="page"
{%endif%}
>Search</a>
<script>navstart();</script>
<nav id="navigation" role="navigation" aria-label="Main menu">
<h1>Main Menu</h1>
{%assign permalink="/" | append: page.permalink%}
<ul style="list-style-type:none;">
{%if site.data.nav%}
{%for pn in site.data.nav%}
Expand All @@ -40,4 +45,5 @@
{%endif%}
</ul>
</nav>
<main>
<div id="mainc">
21 changes: 12 additions & 9 deletions Source/blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ Here I will share my useful posts

## posts
{%for post in paginator.pages%}
### [{{post.title}}](/{{post.permalink}})
{%assign posttitle=post.title%}
{%if post.description%}
{%assign posttitle=posttitle | append: " (" | append: post.description | append: ")"%}
{%endif%}
### [{{posttitle}}](/{{post.permalink}})
Author: {{post.data.author}}

Published on: {{post.published_date | date: "%A, %B %d %Y at %r"}}, GMT+6:30
Expand All @@ -28,19 +32,18 @@ Published on: {{post.published_date | date: "%A, %B %d %Y at %r"}}, GMT+6:30
{{paginator.index}} / {{paginator.total_indexes}}

{%if paginator.previous_index%}
<a href="/{{paginator.previous_index_permalink}}">Previous</a>
[Previous page](/{{paginator.previous_index_permalink}})
{%endif%}

{%if paginator.next_index%}
<a href="/{{paginator.next_index_permalink}}">Next</a>
[Next page](/{{paginator.next_index_permalink}})
{%endif%}
{%if paginator.previous_index%}

<a href="/{{paginator.first_index_permalink}}">First</a>

{%if paginator.previous_index%}
[First page](/{{paginator.first_index_permalink}})
{%endif%}
{%if paginator.next_index%}

<a href="/{{paginator.last_index_permalink}}">Last</a>

{%if paginator.next_index%}
[Last page](/{{paginator.last_index_permalink}})
{%endif%}
{%endif%}
17 changes: 17 additions & 0 deletions Source/lunr.liquid
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
title: Lunr index
permalink: /scripts/lunr_docs.json
---
{% assign idx = 0 %}
{% assign post_count = collections.posts.pages | size %}
[
{% for post in collections.posts.pages %}
{% assign idx = idx | plus: 1 %}
{
"title" : "{{ post.title }}",

"href" : "{{ post.permalink }}",
"content" : "{{ post.content | strip_html | strip_newlines | replace: "\", "\\" }}"
}{% if idx < post_count %},{% endif %}
{% endfor %}
]
111 changes: 111 additions & 0 deletions Source/search.liquid
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
---
layout: default.liquid
title: Search
permalink: /search
---

<search>
<h1>Search</h1>
<input id="search" type="text" size="25" placeholder="search for stuff here..." autofocus><br />

<h2>Search results</h2>

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

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/lunr/lunr.js"></script>
<script type="text/javascript">
var lunrIndex,
$results,
pagesIndex;
// This is pretty much a copy of
// https://gist.github.com/sebz/efddfc8fdcb6b480f567
// Initialize lunrjs using our generated index file
function initLunr() {
// First retrieve the index file
$.getJSON("/scripts/lunr_docs.json")
.done(function(index) {
pagesIndex = index;
// Set up lunrjs by declaring the fields we use
// Also provide their boost level for the ranking
lunrIndex = lunr(function() {
this.field("title", {
boost: 10
});
this.field("content");
// ref is the result item identifier (I chose the page URL)
this.ref("href");
// Feed lunr with each file and let lunr actually index them
pagesIndex.forEach(function(page) {
this.add(page)
}, this);
});
})
.fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.error("Error getting cobalt index file:", err);
});
}
// Nothing crazy here, just hook up a listener on the input field
function initUI() {
$results = $("#results");
$("#search").keyup(function() {
$results.empty();
// Only trigger a search when 2 chars. at least have been provided
var query = $(this).val();
if (query.length < 2) {
return;
}
var results = search(query);
renderResults(results);
});
}
function search(query) {
// Find the item in our index corresponding to the lunr one to have more
// info
// Lunr result:
// {ref: "/section/page1", score: 0.2725657778206127}
// Our result:
// {title:"Page1", href:"/section/page1", ...}
return lunrIndex.search(query).map(function(result) {
return pagesIndex.filter(function(page) {
return page.href === result.ref;
})[0];
});
}
function renderResults(results) {
if (!results.length) {
return;
}
results.forEach(function(result) {
var $result = $("<li style=\"list-style:none;\">"); // FUUUUUU!
$result.append($("<a>", {
href: "/"+result.href,
text: "» " + result.title
}));
$results.append($result);
});
}
// Let's get started
initLunr();
$(document).ready(function() {
initUI();
});
</script>
</search>

0 comments on commit e5d6194

Please sign in to comment.