<p>
  <em>
    Graph search
  </em>
  algorithms let us find the shortest path on a map 
  represented as a graph. One popular algorithm is
  <a href="…">
    A*
  </a>
  .
</p>
<p>
  Let's start with
  <a href="…">
    Breadth First Search
  </a>
  and work our way up from there.
</p>

<div>
  This is a block of text
  <div>
    inside another
  </div>
  block of text
</div>

cat pathfinding/a-star/introduction.bxml \
    | pandoc --read html --write plain --wrap=none \
    | less

fd --extension bxml | while read -r file; do
    cat "$file" | pandoc --read html --write plain --wrap none
done >all-pages.txt

fd --extension bxml | while read -r file; do
    echo "%%%% $file %%%%";
    cat "$file" \
        | pandoc --read html --write plain --wrap none \
        | grep '[a-zA-Z0-9]'
done >all-pages.txt

const words = await (await fetch("./all-pages.txt")).text();
const lines = words.split("\n");

function search1(event) {
    let results = [];
    let query = event.currentTarget.value;
    if (query) {
        for (let line of lines) {
            if (line.indexOf(query) >= 0) results.push(line);
            if (results.length > 10) break;
        }
    }
    document.querySelector("#search-results-1").textContent = results.join("\n");
}
document.querySelector("#search-query-1").addEventListener('input', search1);

function escapeHTML(text) {     const map = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

function search2(event) {
    let results = [];
    let query = event.currentTarget.value;
    if (query) {
        query = new RegExp(RegExp.escape(query), 'gi');
        for (let line of lines.map(line => line.trim())) {
            let matches = line.matchAll(query).toArray();
            if (matches.length > 0) {
                let result = "";
                let pos = 0;
                for (let m of matches) {
                    result += escapeHTML(line.slice(pos, m.index)) + "<b>" + m[0] + "</b>";
                    pos = m.index + m[0].length;
                }
                result += escapeHTML(line.slice(pos));
                results.push(result);
            }
            if (results.length > 10) break;
        }
    }
    document.querySelector("#search-results-2").innerHTML = results.join("\n");
}
document.querySelector("#search-query-2").addEventListener('input', search2);

function parseIntoDocuments(text) {
        const results = text.split(/%%%% (.*?) %%%%$/gm); 
    if (results[0] !== "") throw `expected first split to be empty ${results[0]}`;
    if (results[1].length > 100) "expected second split to be filename";
    let documents = [];
    for (let i = 1; i+1 < results.length; i += 2) {
        let filename = results[i];
        let lines = results[i+1].split("\n");
        lines = lines.map(line => line.trim());         lines = lines.filter(line => line);         documents.push({filename, lines});
    }
    return documents;
}
const documents = parseIntoDocuments(words);

function search3(event) {
    const MAX_DOCUMENTS = 5;
    const SNIPPET_LENGTH = 3;
    let results = [];     let query = event.currentTarget.value;
    if (query) {
        query = new RegExp(RegExp.escape(query), 'gi');
        for (let document of documents) {
            let snippet = [];             for (let line of document.lines) {
                let matches = line.matchAll(query).toArray();
                if (matches.length > 0) {
                    let result = " … ";
                    let pos = 0;
                    for (let m of matches) {
                        result += escapeHTML(line.slice(pos, m.index)) + `<b>${m[0]}</b>`;
                        pos = m.index + m[0].length;
                    }
                    result += escapeHTML(line.slice(pos));
                    snippet.push(result);
                }
                if (snippet.length > SNIPPET_LENGTH) break;
            }
            if (snippet.length > 0) results.push({document, snippet});
            if (results.length > MAX_DOCUMENTS) break;
        }
    }
    let html = results
         .map(({document, snippet}) => `<i>[${document.filename}]</i>\n<small>${snippet} …</small>`)
         .join("\n");
    document.querySelector("#search-results-3").innerHTML = html;
}
document.querySelector("#search-query-3").addEventListener('input', search3);