hematite 0.0.1

data/assets/js/search.mjs

@@ -0,0 +1,358 @@
+---
+permalink: assets/js/search.mjs
+---
+
+import { stringLookup } from "./strings.mjs";
+import { expandContainingDropdowns } from "./dropdownExpander.mjs";
+import AnimationUtil from "./AnimationUtil.mjs";
+import AsyncUtil from "./AsyncUtil.mjs";
+import UrlHelper from "./UrlHelper.mjs";
+
+const PAGE_DATA_URL = `{{ "/assets/search_data.json" | relative_url }}`;
+const MATCHING_TITLE_PRIORITY_INCREMENT = 15;
+const ALREADY_SEEN_PRIORITY_DECREMENT = 100;
+const SEARCH_CONTEXT_LEN = 40;
+
+/// Handles fetching page data, caching it, etc.
+class Searcher {
+    constructor() {
+        this.cachedData_ = null;
+    }
+
+    async getPageData_() {
+        if (this.cachedData_ == null) {
+            let response = await fetch(PAGE_DATA_URL);
+
+            // If the server responded, but something went wrong,
+            if (!response.ok) {
+                throw new Error(
+                    `While fetching search data from “${PAGE_DATA_URL}”:` +
+                    ` Server responded with code ${response.status}/${response.statusText}.`
+                );
+            }
+
+            let json = await (response).json();
+            this.cachedData_ = json;
+        }
+
+        return this.cachedData_;
+    }
+
+    filterContent_(content) {
+        return content
+        // Remove tags that have attributes < 20 characters long (total)
+                .replaceAll(/[<][/]?\w+\s*[^>]{0,20}[>]/g, "")
+        // Remove tags with known attributes
+                .replaceAll(/[<]\w+(?:\s+(?:href|class|id|src)\s*[=]\s*["'].*['"])+[>]/g, "")
+        // Replace escape sequences
+                .replaceAll(/[&]lt;/g, "<")
+                .replaceAll(/[&]gt;/g, ">")
+                .replaceAll(/[&]ldquo;/g, '"')
+                .replaceAll(/[&]rdquo;/g, '"')
+                .replaceAll(/[&]amp;/g, "&")
+                .replaceAll(/\s+/g, ' ');
+
+    }
+
+    /// Get the container element for the [n]th search
+    /// result for [query] in the given [elem].
+    /// Returns an Element.
+    getNthResultIn(elem, query, n) {
+        var recurse = (elem) => {
+            let isElement = elem.tagName != undefined;
+
+            if (n < 0) {
+                return null;
+            }
+
+            // The element must actually contain the query.
+            // [elem] may not be an Element (we only require that it be a Node),
+            // so use textContent.
+            let searchText = this.filterContent_(isElement ? elem.innerHTML : elem.textContent);
+            searchText = searchText.toLowerCase();
+
+            if (searchText.indexOf(query) == -1) {
+                return null;
+            }
+
+            // If the current node is a leaf,
+            if (elem.childNodes.length == 0) {
+                let numMatches = searchText.split(query).length - 1;
+                n -= numMatches;
+
+                // If we've considered enough matches,
+                if (n < 0) {
+                    return elem;
+                }
+            }
+
+            for (const child of elem.childNodes) {
+                let res = recurse(child);
+
+                if (res) {
+                    let resIsElement = res.tagName != undefined;
+
+                    if (isElement && !resIsElement) {
+                        return elem;
+                    }
+                    return res;
+                }
+            }
+
+            return null;
+        };
+
+        return recurse(elem);
+    }
+
+    async runSearch(query) {
+        let data = await this.getPageData_();
+        let results = [];
+
+        query = query
+            .replaceAll(/\s+/g, ' ')
+            .toLowerCase();
+
+        for (const page of data) {
+            // Remove HTML tags.
+            let content = this.filterContent_(page.content);
+            content += '\n' + page.title;
+
+            let pageData = {
+                title: page.title,
+                url: page.url,
+                numMatches: 0,
+                titleMatches: (page.title.toLowerCase().indexOf(query) != -1)
+            };
+
+
+            // TODO: Improve search!
+            let toSearch = content.toLowerCase();
+            let matchLoc = toSearch.indexOf(query);
+            let startPos = 0;
+            let index = 0;
+            while (matchLoc !== -1 && startPos < toSearch.length) {
+                let context = content.substring(
+                        matchLoc - SEARCH_CONTEXT_LEN,
+                        matchLoc + SEARCH_CONTEXT_LEN
+                );
+
+                // If content was clipped,
+                if (matchLoc - SEARCH_CONTEXT_LEN > 0) {
+                    context = '…' + context;
+                }
+                if (matchLoc + SEARCH_CONTEXT_LEN < content.length) {
+                    context += '…';
+                }
+
+                results.push({
+                    index,
+                    context,
+                    pageData,
+                });
+
+                index ++;
+                pageData.numMatches ++;
+                startPos = matchLoc + query.length;
+                matchLoc = toSearch.indexOf(query, startPos);
+            }
+        }
+
+        // Prioritize results
+        let includedPages = {};
+        for (let i = 0; i < results.length; i++) {
+            let result = results[i];
+
+            result.priority = result.pageData.numMatches;
+
+            if (result.pageData.titleMatches) {
+                result.priority += MATCHING_TITLE_PRIORITY_INCREMENT;
+            }
+
+            // If we already are including a copy of the page, this result
+            // is just for another match in the same page. Deprioritize
+            if (includedPages[result.pageData.title]) {
+                result.priority -= ALREADY_SEEN_PRIORITY_DECREMENT;
+            }
+            includedPages[result.pageData.title] = true;
+        }
+
+        results.sort((a, b) => {
+            return b.priority - a.priority;
+        });
+
+        return results;
+    }
+}
+
+/// Scrolls to and shows the search result for the given [query]
+/// If neither [query] nor [resultIndex] are given, attempt to get them from
+/// the page's arguments (i.e. from https://example.com/...?search=...,n=...).
+function focusSearchResult(searcher, elem, query, resultIndex) {
+    if (query === undefined && resultIndex === undefined) {
+        let urlArgs = UrlHelper.getPageArgs();
+        let pageHash = UrlHelper.getPageHash();
+
+        if (urlArgs === null) {
+            return;
+        }
+
+        // The page's hash also causes scrolling. Don't focus
+        // if the page has a hash.
+        if (pageHash != null) {
+            return;
+        }
+
+        query = urlArgs.query;
+        resultIndex = parseInt(urlArgs.index);
+
+        if (isNaN(resultIndex)) {
+            console.warn("Unable to navigate to result. Given idx is NaN");
+            return;
+        }
+    }
+
+    resultIndex ??= 0;
+
+    if (query === undefined) {
+        return;
+    }
+
+    let result = searcher.getNthResultIn(elem, query, resultIndex);
+    if (result) {
+        console.log("Scrolling", result, "into view...");
+
+        expandContainingDropdowns(result);
+
+        result.focus();
+        result.scrollIntoView();
+    }
+}
+
+/// Set up inputs/events using the given [searcher]. If [null], a new
+/// [Searcher] is created.
+function handleSearch(searcher) {
+    const searchInput = document.querySelector(".search-container > #search_input");
+    const searchBtn = document.querySelector(".search-container > #search_btn");
+    const searchResults = document.querySelector("#sidebar .search-results");
+
+    searchInput.setAttribute("placeholder", stringLookup(`search_site_placeholder`));
+    searchBtn.disabled = true;
+
+    searcher ??= new Searcher();
+    focusSearchResult(searcher, document.querySelector("main"));
+
+    const showResults = (query, results) => {
+        let descriptionElem = document.createElement("div");
+        descriptionElem.innerText =
+                stringLookup(`found_search_results`, results.length);
+        descriptionElem.classList.add(`results-description`);
+
+        searchResults.replaceChildren(descriptionElem);
+
+        for (const result of results) {
+            let link = document.createElement("a");
+            let context = document.createElement("div");
+            context.classList.add('context');
+
+            link.innerText = result.pageData.title ?? stringLookup(`untitled`);
+            link.href =
+                result.pageData.url + `?query=${escape(query)},index=${result.index}`;
+            context.innerText = result.context;
+
+            link.appendChild(context);
+            searchResults.appendChild(link);
+        }
+
+        AnimationUtil.expandInVert(searchResults);
+        searchResults.classList.remove(`hidden`);
+
+        return { descriptionElem };
+    };
+
+    const showError = (error) => {
+        let errorDescription = document.createElement("div");
+        errorDescription.innerText = stringLookup(`search_error`, `${error}`);
+
+        searchResults.replaceChildren(errorDescription);
+
+        AnimationUtil.expandInVert(searchResults);
+        searchResults.classList.remove(`hidden`);
+
+        return { errorDescription };
+    };
+
+    const hideResults = () => {
+        AnimationUtil.collapseOutVert(searchResults);
+        searchResults.classList.add(`hidden`);
+    };
+
+    const areSearchResultsHidden = () =>
+        searchResults.classList.contains('hidden');
+
+    let lastQuery;
+    const updateSearchBtn = () => {
+        let searchText = searchInput.value;
+        let newLabel = stringLookup(`search_disabled_no_content`);
+        let shouldDisable = (searchText == "");
+        shouldDisable &&= !searchBtn.classList.contains('close_search');
+
+        searchBtn.disabled = shouldDisable;
+        if (!shouldDisable) {
+            newLabel = stringLookup(`search_site_action`, searchText);
+        }
+
+        // The search button's action is to search
+        if (lastQuery == searchText && !areSearchResultsHidden()) {
+            searchBtn.classList.add('close_search');
+            newLabel = stringLookup(`hide_search_results_action`, searchText);
+        }
+        else {
+            searchBtn.classList.remove('close_search');
+        }
+
+        searchBtn.setAttribute("title", newLabel);
+    };
+
+    searchBtn.onclick = async () => {
+        let query = searchInput.value;
+
+        // If the user hasn't changed the input from their last search,
+        // we want to close the search view. Otherwise,
+        if (query != lastQuery || areSearchResultsHidden()) {
+            lastQuery = searchInput.value;
+
+            try {
+                let results = await searcher.runSearch(query);
+
+                showResults(query, results);
+            } catch (e) {
+                console.error(e);
+
+                showError(e);
+            }
+        } else {
+            hideResults();
+        }
+
+        updateSearchBtn();
+    };
+
+    // Enter: causes searching to happen
+    searchInput.addEventListener("keyup", (evt) => {
+        if (evt.key == "Enter") {
+            searchBtn.click();
+        }
+
+        updateSearchBtn();
+    });
+
+    searchInput.addEventListener("input", (evt) => {
+        updateSearchBtn();
+    });
+
+    updateSearchBtn();
+}
+
+export default handleSearch;
+export { handleSearch, Searcher };

data/assets/js/sidebar.mjs

@@ -0,0 +1,97 @@
+import { stringLookup } from "./strings.mjs";
+import { announceForAccessibility } from "./PageAlert.mjs";
+
+function handleSidebar() {
+    const toggleBtn = document.querySelector(`button#toggle_sidebar_btn`);
+    const sidebar = document.querySelector(`nav#sidebar`);
+    const mainContainer = document.querySelector(`.main-container`);
+
+    // True if sidebar has been toggled by user at least once.
+    let sidebarToggled = false;
+
+    const setBtnLabel = (text) => {
+        toggleBtn.setAttribute(`title`, text);
+    };
+
+    const setSidebarOpen = (open) => {
+        if (!open) {
+            sidebar.classList.remove(`open`);
+            document.scrollingElement?.classList.remove(`hasOpenSidebar`);
+        }
+        else {
+            sidebar.classList.add(`open`);
+            document.scrollingElement?.classList.add(`hasOpenSidebar`);
+        }
+    };
+
+    const isSidebarOpen = () => sidebar.classList.contains(`open`);
+
+    const updateBtn = () => {
+        if (sidebar.classList.contains(`open`)) {
+            toggleBtn.classList.add(`close_btn`);
+            setBtnLabel(stringLookup(`close_sidebar`));
+        } else {
+            toggleBtn.classList.remove(`close_btn`);
+            setBtnLabel(stringLookup(`open_sidebar`));
+        }
+    };
+
+    // Expand the sidebar with/without animation.
+    const autoExpandSidebar = (noAnimations) => {
+        if (noAnimations) {
+            // Don't animate the sidebar if auto-expanding.
+            sidebar.style.transition = "none";
+        }
+
+        let remainingSpace = window.innerWidth - mainContainer.clientWidth;
+        let spaceOnLeft = remainingSpace / 2;
+
+        // If there's enough space for the sidebar
+        if (sidebar.clientWidth < spaceOnLeft) {
+            setSidebarOpen(true);
+        } else {
+            setSidebarOpen(false);
+        }
+
+
+        updateBtn();
+
+        if (noAnimations) {
+            // Reset the sidebar's transition.
+            requestAnimationFrame(() => {
+                sidebar.style.transition = "";
+            });
+        }
+    };
+
+    toggleBtn.onclick = () => {
+        setSidebarOpen(!isSidebarOpen());
+
+        sidebarToggled = true;
+        updateBtn();
+
+        if (isSidebarOpen()) {
+            announceForAccessibility(stringLookup(`sidebar_opened_announcement`));
+        }
+        else {
+            announceForAccessibility(stringLookup(`sidebar_closed_announcement`));
+        }
+    };
+
+    updateBtn();
+
+
+    // Auto-set whether the sidebar is open.
+    if (mainContainer) {
+        autoExpandSidebar(true);
+
+        addEventListener('resize', () => {
+            if (!sidebarToggled) {
+                autoExpandSidebar();
+            }
+        });
+    }
+}
+
+export { handleSidebar };
+export default handleSidebar;

data/assets/js/string_data.mjs

@@ -0,0 +1,19 @@
+---
+permalink: /assets/js/string_data.mjs
+---
+
+const STRING_TABLE = {
+{% for language in site.data.strings %}
+    {{ language[0] }}: {
+        {% for string in language[1] %}
+            "{{ string[0] }}": {{ string[1] | jsonify }},
+        {% endfor %}
+    },
+{% endfor %}
+};
+
+// Locales to check if a string isn't localized in any of the
+// user's preferred languages.
+const DEFAULT_LOCALES = [ 'en' ];
+
+export { STRING_TABLE, DEFAULT_LOCALES };

data/assets/js/strings.mjs

@@ -0,0 +1,167 @@
+
+import { assertEq } from "./assertions.mjs";
+import DateUtil from "./DateUtil.mjs";
+import { STRING_TABLE, DEFAULT_LOCALES } from "./string_data.mjs";
+
+
+
+/// Returns a possibly-localized string corresponding to [key].
+function stringLookup(key, ...formatting) {
+    let sourceText = null;
+
+    // Search for a translation in a supported language
+    for (const lang of navigator.languages) {
+        if (STRING_TABLE[lang] && STRING_TABLE[lang][key] != null) {
+            sourceText = STRING_TABLE[lang][key];
+            break;
+        }
+    }
+
+    // If not in any of the supported languages...
+    if (sourceText == null) {
+        for (const lang of DEFAULT_LOCALES) {
+            if (STRING_TABLE[lang][key] != null) {
+                sourceText = STRING_TABLE[lang][key];
+
+                console.warn(
+                    `Translation for ${key} not found in any supported language.` +
+                    ` Substituting ${sourceText} from ${lang}.`
+                );
+                break;
+            }
+        }
+
+    }
+
+    if (sourceText) {
+        return formatText(sourceText, ...formatting);
+    }
+    else {
+        console.warn(`String lookup for key “${key}” not found`);
+        return key;
+    }
+}
+
+function formatText(text, ...formatArgs) {
+    let chars = text.split('');
+    let escaped = false;
+    let i = 0;
+    let result = [];
+    formatArgs ??= [];
+
+    // Convert each argument to a string.
+    formatArgs = formatArgs.map((elem) => {
+        if (DateUtil.isDate(elem)) {
+            return DateUtil.toString(elem);
+        }
+
+        return "" + elem;
+    });
+
+    var consumeNumber = () => {
+        let numberRes = "";
+
+        for (; !isNaN(parseInt(text.charAt(i))); ++i) {
+            numberRes += text.charAt(i);
+        }
+
+        if (numberRes == "") {
+            return null;
+        }
+
+        return parseInt(numberRes);
+    };
+
+    // Consumes a single format specifier in the form
+    // {n} for some integer n ∈ [0, formatArgs.length).
+    var consumeFormatSpec = () => {
+        let initialPoint = i;
+        if (!escaped && text.charAt(i) == '{') {
+            i++;
+            let formatNumber = consumeNumber();
+
+            // If the number is invalid,
+            if (formatNumber === null
+                    || formatNumber > formatArgs.length
+                    || formatNumber < 0
+            ) {
+                // Unconsume and return
+                i = initialPoint;
+                return false;
+            }
+
+            if (text.charAt(i) != '}') {
+                i = initialPoint;
+                return false;
+            }
+
+            i++;
+
+            result.push(formatArgs[formatNumber]);
+            return true;
+        }
+
+        return false;
+    };
+
+    var consumeEscape = () => {
+        if (escaped) {
+            escaped = false;
+            consumeCharacter();
+
+            return true;
+        }
+
+        if (text.charAt(i) == '\\') {
+            i++;
+            escaped = true;
+
+            return true;
+        }
+
+        return false;
+    };
+
+    var consumeCharacter = () => {
+        result.push(text.charAt(i));
+        i++;
+
+        return true;
+    };
+
+    for (i = 0; i < text.length;) {
+        let current = text.charAt(i);
+
+        consumeEscape() || consumeFormatSpec() || consumeCharacter();
+    }
+
+    return result.join('');
+}
+
+assertEq("Test single replacement", formatText("{0}", "hello"), "hello");
+assertEq("Test no replacement 1", formatText("hello"), "hello");
+assertEq("Test no replacement 2",
+    formatText("{this is a test}", ":)"),
+    "{this is a test}"
+);
+assertEq("Test no replacement 3",
+    formatText("{999}", "okay"),
+    "{999}"
+);
+assertEq("Test no replacement 4",
+    formatText("{123"),
+    "{123"
+);
+assertEq("Test double replacement",
+    formatText("The second: {1}, the first: {0}", "✅", "⛔"),
+    "The second: ⛔, the first: ✅"
+);
+assertEq("Test escaping",
+    formatText("Escape\\d thing"), "Escaped thing");
+assertEq("Test escaping 2",
+    formatText(" \\\\", ""), " \\");
+assertEq("Test escaping 3",
+    formatText("\\{0}", 3), "{0}");
+
+export { stringLookup, formatText };
+export default stringLookup;