Skip to content

Commit

Permalink
Merge pull request #55 from hyrodium/feature/search
Browse files Browse the repository at this point in the history
Add search box
  • Loading branch information
hyrodium authored Jan 20, 2024
2 parents 1b18e01 + b999d80 commit ce457f1
Show file tree
Hide file tree
Showing 40 changed files with 380 additions and 19 deletions.
7 changes: 5 additions & 2 deletions .github/workflows/Deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ on:
push:
branches:
- main
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
Expand Down Expand Up @@ -36,8 +35,12 @@ jobs:
# specific arguments, see the documentation or ?optimize in the REPL.
- run: julia -e '
using Pkg; Pkg.activate("."); Pkg.instantiate();
using NodeJS; run(`$(npm_cmd()) install highlight.js`);
using NodeJS;
run(`$(npm_cmd()) install lunr`);
run(`$(npm_cmd()) install cheerio`);
run(`$(npm_cmd()) install highlight.js`);
using Franklin;
lunr();
optimize()'
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
Expand Down
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,6 @@ __site/
node_modules/
package-lock.json
Manifest.toml

# This file will be created by running `using Franklin; lunr()`
_libs/lunr/lunr_index.js
53 changes: 38 additions & 15 deletions _css/jtd.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ body {
background-color: #fff;
}

@media (min-width: 50rem) {
@media (min-width: 60rem) {
body {
position: static;
padding-bottom: 0;
Expand Down Expand Up @@ -139,7 +139,7 @@ hr {
border: 0;
}

@media (min-width: 50rem) {
@media (min-width: 60rem) {
.page-wrap {
position: absolute;
top: 0;
Expand Down Expand Up @@ -174,7 +174,7 @@ SIDE BAR
}

.side-bar .header .title {
padding-right: 1rem;
padding-right: 3.5rem;
padding-left: 0rem;
flex-grow: 1;
display: flex;
Expand All @@ -183,10 +183,33 @@ SIDE BAR
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #27262b;
font-size: 18px !important;
font-size: 20px !important;
line-height: 1em;
}

.search-input {
font-size: 16px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
transition: border-color 0.3s;
}

.search-input:focus {
border-color: #66afe9;
outline: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 8px rgba(102,175,233,0.6);
}

#lunrSearchForm {
max-width: 800px;
margin: 10px auto;
}

.show-menu {
cursor: pointer;
appearance: none;
Expand Down Expand Up @@ -288,7 +311,7 @@ input[type=checkbox] { display: none; }
input[type=checkbox]:checked ~ #side-menu { display: block; }

/* side bar adjustments for narrow mode (bar on top) */
@media (max-width: 49.99rem) {
@media (max-width: 59.99rem) {
/* Toggle menu off */
.side-bar .menu {
display: none;
Expand Down Expand Up @@ -319,11 +342,11 @@ input[type=checkbox]:checked ~ #side-menu { display: block; }
}

/* side bar adjustments for medium mode (bar on side) */
@media (min-width: 50rem) {
@media (min-width: 60rem) {
.side-bar {
flex-wrap: nowrap;
position: absolute;
width: 248px;
width: 268px;
height: 100%;
flex-direction: column;
align-items: flex-end;
Expand All @@ -348,7 +371,7 @@ input[type=checkbox]:checked ~ #side-menu { display: block; }
}

.side-bar .menu {
width: 135px;
width: 200px;
padding-right: 2rem;
padding-left: 2rem;
padding-top: 1rem;
Expand All @@ -365,9 +388,9 @@ input[type=checkbox]:checked ~ #side-menu { display: block; }
}

/* side bar adjustments for wide mode (bar on side) */
@media (min-width: 66.5rem) {
@media (min-width: 76.5rem) {
.side-bar {
width: calc((100% - 66.5rem) / 2 + 264px);
width: calc((100% - 76.5rem) / 2 + 264px);
min-width: 264px;
}
}
Expand All @@ -381,7 +404,7 @@ MAIN CONTENT
============================================================
************************************************************/

@media (min-width: 50rem) {
@media (min-width: 60rem) {
.main-content-wrap {
position: absolute;
top: 0;
Expand All @@ -400,7 +423,7 @@ MAIN CONTENT
}
}

@media (min-width: 66.5rem) {
@media (min-width: 76.5rem) {
.main-content {
margin-left: calc((100% - 1064px) / 2 + 264px);
}
Expand All @@ -419,14 +442,14 @@ MAIN CONTENT
line-height: 60px;
}

@media (min-width: 50rem) {
@media (min-width: 60rem) {
.main-header {
padding-right: 2rem;
padding-left: 2rem;
}
}

@media (min-width: 50rem) {
@media (min-width: 60rem) {
.main-header {
display: flex;
justify-content: flex-end;
Expand All @@ -451,7 +474,7 @@ MAIN CONTENT
line-height: 1.5;
}

@media (min-width: 50rem) {
@media (min-width: 60rem) {
.franklin-content {
padding-right: 2rem;
padding-left: 2rem;
Expand Down
5 changes: 5 additions & 0 deletions _layout/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
{{if hascode}} {{insert head_highlight.html }} {{end}}
{{insert style.html}}
{{isdef title}} <title>{{fill title}}</title> {{end}}

<!-- LUNR -->
<script src="/libs/lunr/lunr.min.js"></script>
<script src="/libs/lunr/lunr_index.js"></script>
<script src="/libs/lunr/lunrclient.min.js"></script>
</head>
<body> <!-- closed in foot.html -->
{{insert pgwrap.html}}
Expand Down
3 changes: 3 additions & 0 deletions _layout/pgwrap.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
<label for="show-menu" class="show-menu">MENU</label>
<input type="checkbox" id="show-menu" role="button">
<div class="menu" id="side-menu">
<form id="lunrSearchForm" name="lunrSearchForm" action="/search/index.html" method="get">
<input class="search-input" name="q" placeholder="Enter search term" type="text">
</form>
<ul class="menu-list">
<li class="menu-list-item {{ispage index}}active{{end}}"><a href="/" class="menu-list-link {{ispage index}}active{{end}}">Home</a>
<li class="menu-list-item {{ispage pages/agentbasedmodelling/*}}active{{end}}"><a href="/pages/agentbasedmodelling/" class="menu-list-link {{ispage pages/agentbasedmodelling}}active{{end}}">Agent Based Modelling</a>
Expand Down
103 changes: 103 additions & 0 deletions _libs/lunr/build_index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
var path = require("path");
var fs = require("fs");
var lunr = require("lunr");
var cheerio = require("cheerio");

// don't modify this, it'll be modified on the fly by lunr() in Franklin
const PATH_PREPEND = "..";

const HTML_FOLDER = "../../__site";
const OUTPUT_INDEX = "lunr_index.js";

function isHtml(filename) {
lower = filename.toLowerCase();
return (lower.endsWith(".htm") || lower.endsWith(".html"));
}

function findHtml(folder) {
if (!fs.existsSync(folder)) {
console.log("Could not find folder: ", folder);
return;
}
var files = fs.readdirSync(folder);
var htmls = [];
for (var i = 0; i < files.length; i++) {
var filename = path.join(folder, files[i]);
var stat = fs.lstatSync(filename);
if (stat.isDirectory()) {
if (stat == "assets" || stat == "css" || stat == "libs" ) {
continue
}
var recursed = findHtml(filename);
for (var j = 0; j < recursed.length; j++) {
recursed[j] = path.join(files[i], recursed[j]).replace(/\\/g, "/");
}
htmls.push.apply(htmls, recursed);
}
else if (isHtml(filename)){
htmls.push(files[i]);
};
};
return htmls;
};

function readHtml(root, file, fileId) {
var filename = path.join(root, file);
var txt = fs.readFileSync(filename).toString();
var $ = cheerio.load(txt);
var title = $("title").text();
if (typeof title == 'undefined') title = file;
var body = $("body").text()
if (typeof body == 'undefined') body = "";

var data = {
"id": fileId,
"l": filename,
"t": title,
"b": body
}
return data;
}

function buildIndex(docs) {
var idx = lunr(function () {
this.ref('id');
this.field('t'); // title
this.field('b'); // body
docs.forEach(function (doc) {
this.add(doc);
}, this);
});
return idx;
}

function buildPreviews(docs) {
var result = {};
for (var i = 0; i < docs.length; i++) {
var doc = docs[i];
result[doc["id"]] = {
"t": doc["t"],
"l": doc["l"].replace(/^\.\.\/\.\.\/__site/gi, '/' + PATH_PREPEND)
}
}
return result;
}

function main() {
files = findHtml(HTML_FOLDER);
var docs = [];
for (var i = 0; i < files.length; i++) {
docs.push(readHtml(HTML_FOLDER, files[i], i));
}
var idx = buildIndex(docs);
var prev = buildPreviews(docs);
var js = "const LUNR_DATA = " + JSON.stringify(idx) + ";\n" +
"const PREVIEW_LOOKUP = " + JSON.stringify(prev) + ";";
fs.writeFile(OUTPUT_INDEX, js, function(err) {
if(err) {
return console.log(err);
}
});
}

main();
1 change: 1 addition & 0 deletions _libs/lunr/lunr.min.js

Large diffs are not rendered by default.

88 changes: 88 additions & 0 deletions _libs/lunr/lunrclient.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
// This file and its minified version is adapted from https://github.com/BLE-LTER/Lunr-Index-and-Search-for-Static-Sites which is unlicensed.
//

"use strict";

var LUNR_CONFIG = {
"resultsElementId": "searchResults", // Element to contain results
"countElementId": "resultCount" // Element showing number of results
};


// Get URL arguments
function getParameterByName(name) {
var url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return "";
return decodeURIComponent(results[2].replace(/\+/g, " "));
}


// Parse search results into HTML
function parseLunrResults(results) {
var html = [];
for (var i = 0; i < results.length; i++) {
var id = results[i]["ref"];
var item = PREVIEW_LOOKUP[id]
var title = item["t"];
var preview = item["p"];
var link = item["l"].replace("__site/", "");
var result = ('<li><span class="result-title"><a href="' + link + '">'
+ title + '</a></span>');
html.push(result);
}
if (html.length) {
html.join("");
return '<ul>'+html+'</ul>'
}
else {
return "";
}
}


function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}


function showResultCount(total) {
var element = document.getElementById(LUNR_CONFIG["countElementId"])
if (element !== null) {
element.innerHTML = total + ".";
}
}


function searchLunr(query) {
var idx = lunr.Index.load(LUNR_DATA);
// Write results to page
var results = idx.search(query);
var resultHtml = parseLunrResults(results);
var elementId = LUNR_CONFIG["resultsElementId"];
document.getElementById(elementId).innerHTML = resultHtml;
// Write the number of results
showResultCount(results.length);
}


// When the window loads, read query parameters and perform search
window.onload = function() {
var query = getParameterByName("q");
if (query != "" && query != null) {
document.forms.lunrSearchForm.q.value = query;
searchLunr(query);
} else {
// empty query: show 0 results (no query)
showResultCount("0 (empty query)");
}
document.getElementById("focus").focus();
};
1 change: 1 addition & 0 deletions _libs/lunr/lunrclient.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit ce457f1

Please sign in to comment.