hematite 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a71c298f5a705d7357954e7c3a07f84cadf351135ecc275bd594fe340bd87899
-  data.tar.gz: 1469e07477ec5f0ae1827902f654137c1d147d55e1e414243d5d8603f6496e97
+  metadata.gz: 7c31b77be5a329f70985b04f78078a87cf74d79c1f462018d8eed576e18efadc
+  data.tar.gz: 643ca6f28aaf67740b9e71b9de4a0f21bbe08f0f139b95e7b67819b28f9b1648
 SHA512:
-  metadata.gz: '09ee339a6bbfb33e00a96dd84c1dffeca7584853ca45fd74832b0dbd244ca1833dd27c4c955a6282ee85e87f14b8d2e66762787b00323a6c65e40d527daadee2'
-  data.tar.gz: 8c9a200eeadec2ca02366086fd7933b0e8fc7601118c9a209cfec70160ceb73b35d76cf6a0835ea04e0f55e56c8731eef2ad1b35d48092c51a540276d886d9f4
+  metadata.gz: 3200f91d6ddd479b360c08b74862ff2a1260d45a92d3e84aa5c9686556cea7303835129c10329bd1b84d0cf965225eeb0808771f4d8edb338870feeb2d9c52e2
+  data.tar.gz: 79a331beca39bdfb4c1f8fb9447a3f04f9f36cb7f17856103b24353c875bc2ca36a77f866613d03d11daa3fff95a45de727d4a7a977eb022f5f4df31f09590d7

data/_includes/extern_library_imports.html

@@ -0,0 +1,7 @@
+<!--
+    Include all external libraries (that are bundled with Hematite) requested by the
+    page
+-->
+
+{% include mermaid_includes.html %}
+{% include katex_includes.html %}

data/_includes/katex_includes.html

@@ -4,7 +4,7 @@
     KaTeX can be enabled with page.katex.
 -->
 
-{% if page.katex %}
+{% if page.katex || site.mermaid %}
 
 <!-- See the releases tab on https://github.com/KaTeX/KaTeX  -->
 <link

data/_includes/mermaid_includes.html

@@ -0,0 +1,24 @@
+
+<!--
+    Include mermaid-js scripts.
+-->
+{% if page.mermaid || site.mermaid %}
+<script>
+    var MERMAID_CONFIG = window.MERMAID_CONFIG ?? {{ site.mermaid_config | jsonify }} ?? { };
+
+    // Load defaults
+    MERMAID_CONFIG.startOnLoad ??= true;
+    MERMAID_CONFIG.htmlLabels ??= true;
+</script>
+<script
+        defer
+        src="{{ "assets/plugin/mermaid/mermaid.js" | relative_url }}"
+        {% comment %}
+        Here, we're also calling "mermaid.init()" because of the defer attribute — it's
+        possible that the window has already loaded (and thus startOnLoad may have no effect).
+        {% endcomment %}
+        onload="mermaid.initialize(MERMAID_CONFIG); mermaid.init();" >
+</script>
+
+{% endif %}
+

data/_layouts/default.html

@@ -17,7 +17,7 @@ title: Untitled
         {% endif %}
         <script type="module" src="{{ "assets/js/main.mjs" | relative_url }}"></script>
 
-        {% include katex_includes.html %}
+        {% include extern_library_imports.html %}
 
         <title>{{ page.title }} — {{ site.title }}</title>
     </head>

data/_layouts/remark_slideshow.html

@@ -0,0 +1,77 @@
+---
+layout: default
+---
+
+<!-- Defines a https://remarkjs.com/ slideshow -->
+
+{% assign frame_resource_url = 'assets/html/remark_presentation_frame.html.resource' | relative_url %}
+
+<main class="slideshow-mode">
+    <iframe
+            id="presentation_frame"
+            onload="window.presentationFrameLoaded = true;"></iframe>
+</main>
+
+<script defer type="module">
+    import slideshow from "{{ 'assets/js/layout/remark_slideshow.mjs' | relative_url }}";
+
+    let presentationFrame = document.querySelector("#presentation_frame");
+    presentationFrame.src = {{ frame_resource_url | jsonify }};
+    window.presentationFrameLoaded = false;
+
+    let config = {{ page.remark_presentation_config | default: site.remark_presentation_config | jsonify }};
+    config ??= {};
+
+    config.source = {{ page.content | jsonify }};
+
+    // Library imports intended for this page: Forward to the frame.
+    let libraryImports = unescape(`
+        {% capture library_imports %}
+            {% include extern_library_imports.html %}
+        {% endcapture %}
+        {{ library_imports | url_encode | replace: "+", " " }}
+    `);
+
+    // To be called after the presentation iframe loads.
+    window.initSlides = () => {
+        let presentationDoc = presentationFrame.contentDocument;
+        let presentationWin = presentationFrame.contentWindow;
+
+        // Ensure that onload doesn't get called again if the frame reloads.
+        presentationFrame.onload = null;
+
+        // Re-create the document, add the library imports to it.
+        let slideshowHtml = presentationDoc.documentElement.outerHTML;
+
+        presentationDoc.open();
+        presentationDoc.write("<!DOCTYPE html>");
+        presentationDoc.write(slideshowHtml);
+        presentationDoc.write(libraryImports);
+        presentationDoc.write(`
+            <${"script"}>
+            if (window.MERMAID_CONFIG) {
+                window.MERMAID_CONFIG.useMaxWidth = true;
+                window.MERMAID_CONFIG.cloneCssStyles = false;
+                window.MERMAID_CONFIG.flowchart = { useMaxWidth: true };
+            }
+            </${"script"}>
+        `);
+        presentationDoc.close();
+        (async () => {
+            await slideshow.start(presentationFrame.contentWindow, config);
+
+            // Ensure that mermaid has already been run!
+            if (presentationWin.mermaid) {
+                presentationWin.mermaid.init();
+                console.log("Ran mermaid!");
+            }
+        })();
+    };
+
+    if (window.presentationFrameLoaded) {
+        initSlides();
+    }
+    else {
+        presentationFrame.onload = initSlides;
+    }
+</script>

data/_sass/_hljs.scss

@@ -0,0 +1,36 @@
+
+// Created while referencing rouge-github.scss as published
+// at https://github.com/pages-themes/cayman/blob/master/_sass/rouge-github.scss
+
+.hljs {
+    color: var(--syntax-normal-fg);
+    display: block;
+    white-space: pre-wrap;
+
+    // Keywords and literals
+    .hljs-keyword, .hljs-literal {
+        color: var(--syntax-keyword-fg);
+    }
+
+    .hljs-literal {
+        font-weight: bold;
+        color: var(--syntax-name-fg);
+    }
+
+    // Strings
+    .hljs-string {
+        color: var(--syntax-string-fg);
+    }
+
+    // Numbers
+    .hljs-number {
+        color: var(--syntax-number-fg);
+    }
+
+
+    // Comments
+    .hljs-comment {
+        color: var(--syntax-comment-fg);
+        font-style: italic;
+    }
+}

data/_sass/_layout.scss

@@ -154,6 +154,21 @@ nav#post_next_prev {
     flex-grow: 1;
 }
 
+main.slideshow-mode {
+    position: absolute;
+    display: flex;
+
+    left: 0;
+    right: 0;
+    top: var(--header-effective-height);
+    bottom: 0;
+
+    iframe {
+        flex-grow: 1;
+        border: none;
+    }
+}
+
 // On mobile devices,
 @media screen and (max-width: $site-content-preferred-width) {
     .main-container {

data/_sass/_nav.scss

@@ -41,6 +41,14 @@ body > header {
     }
 }
 
+:root {
+    --header-effective-height: var(--header-height);
+}
+
+:root.minimizedNavHeader {
+    --header-effective-height: 0px;
+}
+
 :root.minimizedNavHeader body > header {
     > *:not(#toggle_sidebar_btn) {
         opacity: 0;

data/_sass/hematite.scss

@@ -12,3 +12,4 @@
 @import "_layout";
 @import "_elements";
 @import "_rogue";
+@import "_hljs";

data/assets/html/remark_presentation_frame.html.resource

@@ -0,0 +1,69 @@
+---
+---
+<!-- Using a .html.resource file to prevent Jekyll from changing the extension -->
+
+<!DOCTYPE html>
+<html class="lightTheme" lang="{{ page.lang | default: site.lang | default: "en-US" }}">
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+        <meta charset="utf-8"/>
+        <!-- Content of remark presentation iframe. Based on https://github.com/gnab/remark/wiki#getting-started -->
+        <style>
+/* Stylesheet mostly taken from https://github.com/gnab/remark/wiki#getting-started */
+@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
+@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
+
+body { font-family: 'Droid Serif'; }
+h1, h2, h3 {
+    font-family: 'Yanone Kaffeesatz';
+    font-weight: normal;
+}
+
+.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+
+/* Show hidden slides to allow preprocessors (e.g. mermaid) to
+   properly account for container size.
+   */
+@media screen {
+    .remark-slide-container:not(.remark-visible) {
+        display: block;
+        box-shadow: none;
+        z-index: -999;
+        visibility: hidden;
+    }
+}
+
+nav {
+    display: flex;
+
+    position: absolute;
+    z-index: 10000;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.8;
+}
+
+nav:hover, nav:focus-within {
+    opacity: 1;
+}
+
+@media print {
+    nav {
+        display: none;
+    }
+
+    /* Prevent parts of slides from being cut off on Firefox */
+    .remark-slide-scaler {
+        transform: none !important;
+    }
+}
+
+        </style>
+        <link rel="stylesheet" href="{{ 'assets/style_only_syntax.css' | relative_url }}" />
+    </head>
+    <body>
+    </body>
+    <script src="{{ 'assets/plugin/remark_presenter/remark.min.js' | relative_url }}"></script>
+</html>

data/assets/js/UrlHelper.mjs

@@ -62,6 +62,22 @@ var UrlHelper = {
         return url.substring(hashLoc, argsStart);
     },
 
+    // Replace an existing hash with a [newHash]. The new hash
+    //
+    withReplacedHash(url, newHash) {
+        let hashLoc = url.lastIndexOf('#');
+
+        if ((newHash + "").charAt(0) != '#') {
+            newHash = `#${newHash}`;
+        }
+
+        if (hashLoc == -1) {
+            return url + newHash;
+        }
+
+        return url.substring(0, hashLoc) + newHash;
+    },
+
     /// Remove metadata encoded in the given URL and returns
     /// it.
     /// If [url] is undefined, uses the page's URL.
@@ -115,4 +131,8 @@ assertEq("Trimming metadata",
     "https://example.com/"
 );
 
+assertEq("Replacing a hash",
+    UrlHelper.withReplacedHash("https://example.com/#foo", "bar"),
+    "https://example.com/#bar");
+
 export default UrlHelper;

data/assets/js/dropdownExpander.mjs

@@ -51,7 +51,8 @@ function expandBasedOnURL() {
     const doExpansion = (url) => {
         // Determine the hash.
         let hash = UrlHelper.getPageHash();
-        if (hash == null) {
+        let isInvalid = hash && /^\#\d+/.exec(hash);
+        if (hash == null || isInvalid) {
             return;
         }
 

data/assets/js/layout/remark_slideshow.mjs

@@ -0,0 +1,164 @@
+import { getUrlQuery, Searcher } from "../search.mjs";
+import { stringLookup } from "../strings.mjs";
+import UrlHelper from "../UrlHelper.mjs";
+
+function isInPresenterMode(targetDoc) {
+    return targetDoc.body.classList.contains("remark-presenter-mode");
+}
+
+function focusSearchResult(targetWin, query, targetMatchNo, slideshow, searcher) {
+    let matchesFound = 0;
+    for (const slide of slideshow.getSlides()) {
+        let targetText = (slide.content ?? []).join("\n");
+        let currentSlideNo = slide.getSlideIndex() + 1;
+
+        matchesFound += searcher.getNumberOfMatches(query, targetText);
+        console.log("Considering ", targetText, " with ", matchesFound, "matches found so far");
+
+        if (matchesFound > targetMatchNo) {
+            slideshow.gotoSlide(currentSlideNo);
+            return;
+        }
+
+        // Now search the notes!
+        if (slide.notes) {
+            targetText = slide.notes.join("\n");
+            matchesFound += searcher.getNumberOfMatches(query, targetText);
+            if (matchesFound > targetMatchNo) {
+                slideshow.gotoSlide(currentSlideNo);
+
+                if (!isInPresenterMode(targetWin.document)) {
+                    slideshow.togglePresenterMode();
+                }
+                return;
+            }
+        }
+    }
+
+    console.log("Found ", matchesFound, " matches, which is less than the target of ", targetMatchNo);
+    slideshow.gotoLastSlide();
+    return -1;
+}
+
+/// Show a search result the user requested through the
+/// page's URL.
+function focusSearchResultFromUrl(targetWin, slideshow) {
+    let { query, resultIndex } = getUrlQuery() ?? {};
+    let index = resultIndex;
+
+    if (query === undefined || index === undefined) {
+        return;
+    }
+
+    console.log("Focusing a search result: ", query, index);
+
+    let searcher = new Searcher();
+    focusSearchResult(targetWin, query, index, slideshow, searcher);
+}
+
+function focusSlideFromHash(slideshow) {
+    let hash = UrlHelper.getPageHash();
+    if (!hash) {
+        return;
+    }
+
+    let targetSlide = parseInt(hash.substring(1));
+    if (targetSlide) {
+        console.log("Navigating to slide", targetSlide);
+        slideshow.gotoSlide(targetSlide);
+    }
+}
+
+async function main(targetWindow, config) {
+    if (!targetWindow.remark) {
+        // Wait for page load if remark isn't available yet.
+        await (new Promise(resolve => {
+            targetWindow.addEventListener('load', resolve);
+        }));
+    }
+
+    // See https://remarkjs.com/#8
+    let slideshow = targetWindow.remark.create(config);
+
+    // For debugging
+    window.slideshow_debug = slideshow;
+
+    targetWindow.focus();
+
+    addExtendedControls(targetWindow, slideshow);
+    focusSearchResultFromUrl(targetWindow, slideshow);
+
+    targetWindow.history.replaceState(null, targetWindow.location.href);
+    let targetWinHistory = targetWindow.history.state;
+
+    focusSlideFromHash(slideshow);
+
+    window.addEventListener('hashchange', () => {
+        focusSlideFromHash(slideshow);
+    });
+
+    slideshow.on('showSlide', function(newSlide) {
+        if (!newSlide) {
+            return;
+        }
+        let hashId = newSlide.getSlideIndex() + 1;
+
+        // Update the window's URL to match that of the interior
+        // (e.g. slide 3 = #3).
+        // Try not to have the forward/back arrows go forward/back in the iframe's history.
+        targetWindow.history.replaceState(
+            targetWinHistory,
+            UrlHelper.withReplacedHash(targetWindow.location.href, hashId));
+        window.location.hash = hashId;
+    });
+}
+
+/// Apply minor adjustments to the default remark layout
+function addExtendedControls(targetWindow, slideshow) {
+    let slideContainer = targetWindow.document.querySelector(".remark-slides-area");
+
+    // Announce changes to the slide (e.g. going to the next slide).
+    slideContainer.setAttribute("aria-live", "polite");
+
+    // Add next/previous buttons
+    let nextSlideBtn = targetWindow.document.createElement("button");
+    let prevSlideBtn = targetWindow.document.createElement("button");
+    let printBtn = targetWindow.document.createElement("button");
+    let spacer = targetWindow.document.createElement("div");
+
+    let nav = targetWindow.document.createElement("nav");
+
+    nextSlideBtn.innerText = stringLookup('btn_next_slide');
+    prevSlideBtn.innerText = stringLookup('btn_prev_slide');
+    printBtn.innerText = stringLookup('btn_print');
+
+    spacer.style.flexGrow = 1;
+
+    nextSlideBtn.onclick = () => {
+        slideshow.gotoNextSlide();
+    };
+
+    prevSlideBtn.onclick = () => {
+        slideshow.gotoPreviousSlide();
+    };
+
+    printBtn.onclick = () => {
+        targetWindow.print();
+    };
+
+    slideshow.on('showSlide', function(newSlide) {
+        if (!newSlide) {
+            return;
+        }
+
+        prevSlideBtn.disabled = (newSlide.getSlideIndex() == 0);
+        nextSlideBtn.disabled = (newSlide.getSlideIndex() + 1 >= slideshow.getSlideCount());
+    });
+
+
+
+    nav.replaceChildren(prevSlideBtn, nextSlideBtn, spacer, printBtn);
+    targetWindow.document.body.appendChild(nav);
+}
+
+export default { start: main };

data/assets/js/search.mjs

@@ -54,6 +54,25 @@ class Searcher {
 
     }
 
+    /// Get number of full matches for [query] in [text].
+    /// @precondition [text] is already in a searchable (i.e.
+    /// filtered) form.
+    getNumberOfMatches(query, text) {
+        query = query.toLowerCase();
+
+        return text.toLowerCase().split(query).length - 1;
+    }
+
+    /// Get the index of the first full match for [query] in
+    /// [text], starting at [startPos]. Returns -1 if no match
+    /// is found.
+    /// @precondition [text] is already in a searchable form.
+    getIdxOfFirstMatch(query, text, startPos) {
+        query = query.toLowerCase();
+
+        return text.toLowerCase().indexOf(query, startPos);
+    }
+
     /// Get the container element for the [n]th search
     /// result for [query] in the given [elem].
     /// Returns an Element.
@@ -77,7 +96,7 @@ class Searcher {
 
             // If the current node is a leaf,
             if (elem.childNodes.length == 0) {
-                let numMatches = searchText.split(query).length - 1;
+                let numMatches = this.getNumberOfMatches(query, searchText);
                 n -= numMatches;
 
                 // If we've considered enough matches,
@@ -154,7 +173,7 @@ class Searcher {
                 index ++;
                 pageData.numMatches ++;
                 startPos = matchLoc + query.length;
-                matchLoc = toSearch.indexOf(query, startPos);
+                matchLoc = this.getIdxOfFirstMatch(query, toSearch, startPos);
             }
         }
 
@@ -185,26 +204,52 @@ class Searcher {
     }
 }
 
+/// Extract a search query and index from the current page's URL.
+function getUrlQuery() {
+    let query, resultIndex;
+
+    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 (urlArgs.index === undefined) {
+        resultIndex = 0;
+    }
+
+    return { query, resultIndex };
+}
+
 /// 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 (elem === undefined) {
+        console.warn(`focusSearchResult requires [elem] to function. Not focusing a result.`);
+        return;
+    }
 
-        if (urlArgs === null) {
-            return;
-        }
+    if (query === undefined && resultIndex === undefined) {
+        let pageArgs = getUrlQuery();
 
-        // The page's hash also causes scrolling. Don't focus
-        // if the page has a hash.
-        if (pageHash != null) {
+        // No args, nothing to focus.
+        if (!pageArgs) {
             return;
         }
 
-        query = urlArgs.query;
-        resultIndex = parseInt(urlArgs.index);
+        resultIndex = pageArgs.resultIndex;
+        query = pageArgs.query;
 
         if (isNaN(resultIndex)) {
             console.warn("Unable to navigate to result. Given idx is NaN");
@@ -355,4 +400,4 @@ function handleSearch(searcher) {
 }
 
 export default handleSearch;
-export { handleSearch, Searcher };
+export { handleSearch, getUrlQuery, Searcher };