hematite 0.0.12 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ba3735a0bf64aa9c895fc9622e0370b0827c80386469ccb4c5172058f91db97
-  data.tar.gz: e6f824c10b0febde44d427ee0528681f756cc59bff67a3362e256d77d5be3650
+  metadata.gz: 57c0b3ae9bdec4a2e37d649a52dfbacb84a8c09b258d2a5bb676571c5fed060d
+  data.tar.gz: '09bc9aa4956973f5cbb3dfa1e4889b9adfe70928eb5f2f25518b09b863a4e8ed'
 SHA512:
-  metadata.gz: 958067abc2e83cbecc509dc7c31c2eb711c2116ea201a27c28f6a89bc0f0a6658d34532433596b989178ab070d686c2a5de0d26781ff6b92d73fdc6416f9608f
-  data.tar.gz: e01cb8c28899e24135e832ef89543c9266e66db13d9a53f40327d6c32b6d8ed815d5da7247a63fd88ca94dc762180ab752fb8494c2d9e31d3ae2ed13fdda6297
+  metadata.gz: 86065a34d00cc7d8844bdd02883dc7c8dd25c4c6436a1d4b28747d0140d4409d0ac7e7a910d8fe4f54ba546c303208cb347d598141a6e66b1d0c5607e282f249
+  data.tar.gz: 2b218f88fec888c6029650fdd29b0809729cd321905e25e9151e26173347e7488813eebcc79d32c7ced657d8a4ce7a0e2acb4b9386e9d683607b6622e6911784

data/_includes/extern_library_imports.html

@@ -0,0 +1,11 @@
+<!--
+    Include all external libraries (that are bundled with Hematite) requested by the
+    page
+-->
+
+{% include mermaid_includes.html %}
+{% include katex_includes.html %}
+
+<!-- Page/site-specific imports and configuration -->
+{{ site.additional_import_html | default: "" }}
+{{ page.additional_import_html | default: "" }}

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

@@ -10,10 +10,14 @@ title: Untitled
         {% assign content_start = page.content | slice: 0, 100 %}
         <meta name="description" content={{ page.description | default: content_start | strip_html | jsonify }}/>
         <link rel="stylesheet" href="{{ "assets/style.css" | relative_url }}"/>
-        <link rel="icon" href="{{ page.favicon_path | default: site.favicon_path | default: "assets/img/favicon.svg" | absolute_url }}"/>
+        {% if page.favicon_url_absolute or site.favicon_url_absolute %}
+            <link rel="icon" href="{{ page.favicon_url_absolute | default: site.favicon_url_absolute }}"/>
+        {% else %}
+            <link rel="icon" href="{{ page.favicon_url | default: site.favicon_url | default: "assets/img/favicon.svg" | absolute_url }}"/>
+        {% 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,88 @@
+---
+layout: default
+---
+
+<!-- Defines a https://remarkjs.com/ slideshow -->
+<!-- Configure remark with
+    page.remark_presentation_config, site.remark_presentation_config,
+    page.remark_presentation_config_html
+-->
+
+{% 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);
+
+        // Any additional configuration scripts/html specific to remark
+        presentationDoc.write(unescape(
+            {{ page.remark_presentation_config_html | default: "" | url_encode | replace: "+", " " | jsonify }}
+        ));
+
+        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/_elements.scss

@@ -117,14 +117,31 @@ input::placeholder {
         }
     }
 
+    table {
+        border-collapse: collapse;
+    }
+
     table td {
         border: 1px solid var(--line-color-light);
+        padding: 3px;
+    }
+
+    table th {
+        padding: 4px;
+        font-weight: bold;
     }
 
     fieldset {
         border-color: var(--line-color-normal);
         margin-bottom: 30px;
     }
+
+    blockquote {
+        border-left: 1px solid var(--line-color-light);
+        margin-left: 10px;
+        padding-left: 20px;
+        color: var(--text-color-faint);
+    }
 }
 
 // Markdown parsers may put `code` elements inside of `pre`

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;
@@ -48,6 +56,11 @@ body > header {
         transition: opacity 0.5s ease;
     }
 
+    #toggle_sidebar_btn {
+        padding-left: 4px;
+        width: var(--header-height);
+    }
+
     word-wrap: break-word;
     width: var(--header-height);
     padding: 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/img/favicon-alternate.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+   <defs>
+      <filter id="filter7674" x="-.25" y="-.25" width="1.5" height="1.5" color-interpolation-filters="sRGB">
+         <feGaussianBlur stdDeviation="12.0308382"/>
+      </filter>
+   </defs>
+   <g>
+      <path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#9300cf" filter="url(#filter7674)" transform="scale(1.01) rotate(30deg) translate(2, 10)" transform-origin="center"/>
+      <path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#f61616"/>
+   </g>
+</svg>

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 };