hematite 0.1.11 → 0.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 450bc32b43ae3caf2e08adc9fda7154419b1fc617014d3e8cb75fe0708591664
-  data.tar.gz: d388090f953e7e25f4a7232242d46bb6cb115abf9cb739fa8b45494b1f032fef
+  metadata.gz: e7d0e540229aa59560164e505b1f9c56bfc06410483f121f0f37de4b35f14648
+  data.tar.gz: e134ec448a27e0e1ab0b6c6fb058a71248d9a59c182956a6b873834c150eb120
 SHA512:
-  metadata.gz: b3ed73686b9e75eeedd0c4033adaef7f2f7749d0554f08252803f8f908f6173efc869074944e042814760cf9d0150de0d39c92fc56d7bfdec87c250f9e6bb485
-  data.tar.gz: b147929fea494e53217aa1dfb96957c0aa27d7b5aa4a812e0fe0d1997151d9a8eebfa6788d05871e640c2e6e5085494f221d3372d4304872d1736649dcf106c7
+  metadata.gz: f0629528aa7d95d26b68b488a2b5110625471856310273f74db557a8b543db35ccb072af00ffed6195d61e7eef1ed50ac755f55b034fe4c6fa41c22c7e0d35df
+  data.tar.gz: 31c8354bfa13a6ce9fb8531835c367214a6419d20ddb5246092271f2caf81fded7e0aba03db2e52e0166b40500d1bb2a4b0f4d31856feb94375c840f095b4f79

data/_includes/img/loading_icon.svg

@@ -0,0 +1,70 @@
+<svg
+   viewBox="0 0 64.0 64.0"
+   version="1.1"
+   class="loading-icon-root"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <style>
+.loading-icon-root {
+    cursor: pointer;
+    width: 64px;
+    height: 64px;
+}
+
+.loading-icon-root .rect {
+    fill: var(--primary-text-color);
+
+    transform: translate(0, 0);
+    transform-origin: 32px 32px;
+    animation: loading-icon-anim 1.5s ease infinite;
+}
+
+.loading-icon-root .rect2 {
+    animation-delay: 0.25s;
+}
+
+.loading-icon-root .rect3 {
+    animation-delay: 0.5s;
+}
+
+.loading-icon-root .rect4 {
+    animation-delay: 0.65s;
+}
+
+@keyframes loading-icon-anim {
+    0% { transform: rotate(0); }
+    100% { transform: rotate(-360deg) scale(1, 1); }
+}
+  </style>
+  <g
+     id="layer1">
+    <rect
+       width="9"
+       height="9"
+       x="10"
+       y="10"
+       ry="4.5"
+       class="rect" />
+    <rect
+       width="9"
+       height="9"
+       x="10"
+       y="10"
+       ry="4.5"
+       class="rect rect2" />
+    <rect
+       width="9"
+       height="9"
+       x="10"
+       y="10"
+       ry="4.5"
+       class="rect rect3" />
+    <rect
+       width="9"
+       height="9"
+       x="10"
+       y="10"
+       ry="4.5"
+       class="rect rect4" />
+  </g>
+</svg>

data/_includes/scss/_fonts.scss

@@ -1,5 +1,5 @@
 
 @font-face {
     font-family: FoulisGreek;
-    src: url({{ assets/fonts/FoulisGreek.ttf | absolute_path }});
+    src: url({{ "assets/fonts/FoulisGreek.ttf" | relative_url }});
 }

data/_layouts/remark_slideshow.html

@@ -14,6 +14,12 @@ layout: default
 
 {% assign frame_resource_url = 'assets/html/remark_presentation_frame.html' | relative_url %}
 
+<div class='loading-icon-container'>
+    <center>
+        {% include img/loading_icon.svg %}
+    </center>
+</div>
+
 <main class="slideshow-mode">
     <iframe
             id="presentation_frame"
@@ -113,13 +119,18 @@ layout: default
         `);
 
         presentationWin.initPresentation = (async () => {
-            presentationDoc.title = presentationFrame.title;
-            await slideshow.start(presentationFrame.contentWindow, config);
-
-            // Ensure that mermaid has already been run!
-            if (presentationWin.mermaid) {
-                presentationWin.mermaid.init();
-                console.log("Ran mermaid!");
+            try {
+                presentationDoc.title = presentationFrame.title;
+                await slideshow.start(presentationFrame.contentWindow, config);
+
+                // Ensure that mermaid has already been run!
+                if (presentationWin.mermaid) {
+                    presentationWin.mermaid.init();
+                }
+            }
+            finally {
+                // Hide the loading icon
+                document.querySelector(".loading-icon-container")?.remove();
             }
         });
 

data/_sass/_layout.scss

@@ -178,6 +178,9 @@ main.slideshow-mode {
         // Transition immediately!
         transition: width 0s ease, max-width 0s ease;
     }
+
+    // Don't scroll, let the inner frame do that.
+    overflow: hidden;
 }
 
 // On mobile devices,

data/_sass/_nav.scss

@@ -124,7 +124,6 @@ nav.sidebar {
     transform: scale(0, 1) translate(-30px, 0);
 
     color: var(--primary-text-color);
-    background-color: var(--primary-background-color);
     box-shadow: 0 0 2px var(--shadow-color-light);
     padding: $navbar-padding;
 
@@ -138,6 +137,15 @@ nav.sidebar {
     transform-origin: left;
     transition: opacity 0.5s ease, transform 0.5s ease, width 0.5s ease;
 
+    // Work around a rendering bug in Safari — apply the background color to both
+    // the results pane and the container.
+    //
+    // Without this, Safari may display elements of pinned-pages in the same
+    // location as the search results.
+    &, .search-results {
+        background-color: var(--primary-background-color);
+    }
+
 
     // Container with search box and button
     > .search-container {

data/assets/html/remark_presentation_frame.html

@@ -20,7 +20,15 @@ h1, h2, h3 {
     font-weight: normal;
 }
 
-.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; }
+.remark-code, .remark-inline-code, body.mdSourceView {
+    font-family: 'Ubuntu Mono', monospace;
+}
+
+body.mdSourceView {
+    padding-top: 50px;
+    background: white;
+    color: black;
+}
 
 /* Show hidden slides to allow preprocessors (e.g. mermaid) to
    properly account for container size.

data/assets/js/EscapeHelper.mjs

@@ -0,0 +1,37 @@
+
+import { assertEq } from "./assertions.mjs";
+
+let htmlReplacements = [
+    [ /[&]/g, '&' ],
+    [ /[<]/g, '&lt;' ],
+    [ /[>]/g, '&gt;' ],
+];
+
+var EscapeHelper = {
+    escapeHTML(text) {
+        for (const item of htmlReplacements) {
+            text = text.replace(item[0], item[1]);
+        }
+
+        return text;
+    },
+    // Escape for usage within a regex expression
+    escapeRegex(text) {
+        return text.replace(/([\*\(\).\[\]\{\}\^\$\-\=\;\:\'\"\\])/g, '\\$1'); //'
+    },
+    // Escape text for usage within a replacement pattern
+    // E.g. "foobar".replaceAll("foo", text);
+    escapeReplacePattern(text) {
+        return text.replace(/\$/g, '$$$$');
+    }
+};
+
+assertEq("Test escape <", EscapeHelper.escapeHTML('<'), '&lt;');
+assertEq("Test escape multiple <", EscapeHelper.escapeHTML('<a></a>'), '&lt;a&gt;&lt;/a&gt;');
+assertEq("Test escape >", EscapeHelper.escapeHTML('>'), '&gt;');
+assertEq("Test escape identity", EscapeHelper.escapeHTML('Hello, world.'), 'Hello, world.');
+assertEq("Test regex escape simple", EscapeHelper.escapeRegex(".*"), "\\.\\*");
+assertEq("Test regex more complicated escape", EscapeHelper.escapeRegex("This, is a test... :)"), "This, is a test\\.\\.\\. \\:\\)");
+assertEq("Test replace pattern escape", EscapeHelper.escapeReplacePattern("0$ and 24 cents"), "0$$ and 24 cents");
+
+export default EscapeHelper;

data/assets/js/layout/post.mjs

@@ -37,6 +37,12 @@ function createTagLinks(page) {
     let label = document.querySelector("#post_tags > #tag_header_lbl");
     label.innerText = stringLookup(`tags`);
 
+    // Don't show the tag container if there aren't any tags
+    if (!page.tags || page.tags.length == 0) {
+        container.style.display = "none";
+        return;
+    }
+
     for (const tag of page.tags) {
         let tagElem = document.createElement("a");
         tagElem.style.display = "inline-block";
@@ -47,11 +53,6 @@ function createTagLinks(page) {
 
         container.appendChild(tagElem);
     }
-
-    // Don't show the tag container if there aren't any tags
-    if (page.tags.length == 0) {
-        container.style.display = "none";
-    }
 }
 
 function fillDate(page) {

data/assets/js/layout/remark_slideshow.mjs

@@ -77,6 +77,20 @@ function focusSlideFromHash(slideshow) {
     }
 }
 
+/// Returns true iff the slide viewer should only display markdown.
+function shouldOnlyDisplayMd() {
+    let pageArgs = UrlHelper.getPageArgs();
+    if (!pageArgs) {
+        return false;
+    }
+
+    if (pageArgs.md_only) {
+        return true;
+    }
+
+    return false;
+}
+
 async function main(targetWindow, config) {
     // True if touch navigation is enabled.
     let usingCustomTouchNav = false;
@@ -88,6 +102,13 @@ async function main(targetWindow, config) {
         }));
     }
 
+    // If the user has requested that only the page's markdown be shown,
+    if (shouldOnlyDisplayMd()) {
+        targetWindow.document.body.innerText = config?.source;
+        targetWindow.document.body.classList.add('mdSourceView');
+        return;
+    }
+
     // Customize touchscreen navigation — the default remark
     // navigation can break buttons, zooming.
     if (config?.navigation?.touch === true
@@ -150,6 +171,7 @@ async function main(targetWindow, config) {
 
                 if (handlingGesture) {
                     evt.preventDefault();
+                    elemContainer.setPointerCapture();
                 }
             }
         });
@@ -205,16 +227,20 @@ function addExtendedControls(targetWindow, slideshow) {
         targetWindow.print();
     };
 
+    let updateBtns = (slideIdx) => {
+        prevSlideBtn.disabled = (slideIdx == 0);
+        nextSlideBtn.disabled = (slideIdx + 1 >= slideshow.getSlideCount());
+    };
+
     slideshow.on('showSlide', function(newSlide) {
         if (!newSlide) {
             return;
         }
 
-        prevSlideBtn.disabled = (newSlide.getSlideIndex() == 0);
-        nextSlideBtn.disabled = (newSlide.getSlideIndex() + 1 >= slideshow.getSlideCount());
+        updateBtns(newSlide.getSlideIndex());
     });
 
-
+    updateBtns(0);
 
     nav.replaceChildren(prevSlideBtn, nextSlideBtn, spacer, printBtn);
     targetWindow.document.body.appendChild(nav);

data/assets/js/search.mjs

@@ -7,6 +7,7 @@ import { expandContainingDropdowns } from "./dropdownExpander.mjs";
 import AnimationUtil from "./AnimationUtil.mjs";
 import AsyncUtil from "./AsyncUtil.mjs";
 import UrlHelper from "./UrlHelper.mjs";
+import EscapeHelper from "./EscapeHelper.mjs";
 
 const PAGE_DATA_URL = `{{ "/assets/search_data.json" | relative_url }}`;
 const MATCHING_TITLE_PRIORITY_INCREMENT = 15;
@@ -50,15 +51,25 @@ class Searcher {
                 .replaceAll(/[&]ldquo;/g, '"')
                 .replaceAll(/[&]rdquo;/g, '"')
                 .replaceAll(/[&]amp;/g, "&")
+        // Remove the astrisks around **bolded** text
+                .replaceAll(/(\s|^)[*]{2}[^*]+[*]{2}(\s|$)/g, "$1$2$3")
+        // Remove the backticks around `text` that is code-formatted
+                .replaceAll(/(\s|^)[`]([^`]+)[`](\s|$)/g, "$1$2$3") // `
                 .replaceAll(/\s+/g, ' ');
 
     }
 
+    filterQuery_(query) {
+        return query
+            .toLowerCase()
+            .replaceAll(/\s+/g, ' ');
+    }
+
     /// 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();
+        query = this.filterQuery_(query);
 
         return text.toLowerCase().split(query).length - 1;
     }
@@ -68,7 +79,7 @@ class Searcher {
     /// is found.
     /// @precondition [text] is already in a searchable form.
     getIdxOfFirstMatch(query, text, startPos) {
-        query = query.toLowerCase();
+        query = this.filterQuery_(query);
 
         return text.toLowerCase().indexOf(query, startPos);
     }
@@ -167,6 +178,7 @@ class Searcher {
                 results.push({
                     index,
                     context,
+                    matchIndex: matchLoc,
                     pageData,
                 });
 
@@ -295,17 +307,35 @@ function handleSearch(searcher) {
 
         searchResults.replaceChildren(descriptionElem);
 
+        // Adds HTML to bold/italicize all results in [context].
+        // [context] is HTML-escaped before adding to the result.
+        const boldResults = (context) => {
+            let result = "";
+            let queryRegex = new RegExp(`(${EscapeHelper.escapeRegex(query)})`, `ig`);
+            let contextHTML = "";
+            let lastIdx = 0;
+            for (const match of context.matchAll(queryRegex)) {
+                result += EscapeHelper.escapeHTML(context.substring(lastIdx, match.index));
+                result += "<b><i>" + EscapeHelper.escapeHTML(match[0]) + "</i></b>";
+                lastIdx = match.index + match[0].length;
+            }
+            result += EscapeHelper.escapeHTML(context.substring(lastIdx));
+
+            return result;
+        };
+
         for (const result of results) {
             let link = document.createElement("a");
-            let context = document.createElement("div");
-            context.classList.add('context');
+            let contextElem = document.createElement("div");
+            contextElem.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);
+            contextElem.innerHTML = boldResults(result.context);
+
+            link.appendChild(contextElem);
             searchResults.appendChild(link);
         }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.14
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-28 00:00:00.000000000 Z
+date: 2022-06-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -37,6 +37,7 @@ files:
 - _includes/extern_library_imports.html
 - _includes/footer.html
 - _includes/img/hamburger_menu.svg
+- _includes/img/loading_icon.svg
 - _includes/img/search_icon.svg
 - _includes/katex_includes.html
 - _includes/mermaid_includes.html
@@ -74,6 +75,7 @@ files:
 - assets/js/AnimationUtil.mjs
 - assets/js/AsyncUtil.mjs
 - assets/js/DateUtil.mjs
+- assets/js/EscapeHelper.mjs
 - assets/js/PageAlert.mjs
 - assets/js/Settings.mjs
 - assets/js/UrlHelper.mjs