hematite 0.1.9 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b5c50c658bf984e5c096e0279fd2372b06c5d3fad9bb56eb3984c2218fe1aab
-  data.tar.gz: d945cf8f34d17d8b9dc6468e6f2c54d2a19708890d4d54f5411d60b3c3b190df
+  metadata.gz: 3bf0eaea458e2c4fba03dbcc759aaa04eb811832e1850b210d5e5a378fab2526
+  data.tar.gz: 80dcbb081d5342365d4f119ffcb6f1dfd2be5b6533e23b0c23a18bde93709b54
 SHA512:
-  metadata.gz: 7a28e7505ec67d3e900d7fe85cd8d7cacd6dde237aca06a7b0f27146959d14f06d2760d2f478676513fe076e18432ef33b7bda54038816eb88801b81bab754d8
-  data.tar.gz: 3506d2b3ee5aa0dd81343e8f9a2b08633348ff6692de35a42851498c91a33c12c207729c0971458aff51a1924fc0f83a792bbc3b75052405263a357f0d7717b2
+  metadata.gz: 23b88d8d1249320f6b4712e19d9a00f0a2bc0de0ef1e191aab371e56e019f38da43b8f26726e0e6d22a9a271bd647dc175bae4d58997222a04a4939700642908
+  data.tar.gz: 916e067da5e530e001003b82f83d3a91241ba268823112662ff87102c16e5800c70b2d909d8e150c9a9c08017d9f6f4d7c5c76ac980f2faf4a8e22caa77bb625

data/_config.yml

@@ -3,6 +3,7 @@
 # `jekyll serve` does not auto-reload this file.
 
 title: Hematite Theme
+# short_title: Add a shortened version of the title for small screens
 description: A Jekyll theme intended for course websites
 permalink: pretty
 

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/nav/header.html

@@ -2,4 +2,9 @@
 This is the header that appears in the navigation bar (at the top of the page)!
 Customize it here.
 {% endcomment %}
-<a href="{{ "/" | absolute_url }}">{{ site.title | default "Untitled Site" }}</a>
+<a id="long_title" href="{{ "/" | absolute_url }}">
+    {{ site.title | default: "Untitled Site" }}
+</a>
+<a id="short_title" href="{{ "/" | absolute_url }}">
+    {{ site.short_title | default: site.title | default: "Untitiled" }}
+</a>

data/_includes/scss/_fonts.scss

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

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"
@@ -35,9 +41,11 @@ layout: default
     const WRAPPING_DIV_EXP = /^\s*[<]div.*[>]((?:.|[\n\r])*)[<]\/div[>]\s*$/;
 
     import slideshow from "{{ 'assets/js/layout/remark_slideshow.mjs' | relative_url }}";
+    import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
 
     let presentationFrame = document.querySelector("#presentation_frame");
     presentationFrame.src = {{ frame_resource_url | jsonify }};
+    presentationFrame.title = stringLookup('presentation_frame_title');
     window.presentationFrameLoaded = false;
 
 
@@ -111,12 +119,18 @@ layout: default
         `);
 
         presentationWin.initPresentation = (async () => {
-            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/_elements.scss

@@ -64,6 +64,10 @@ input::placeholder {
     padding: 6px;
 }
 
+main pre {
+    overflow-x: auto;
+}
+
 .main-container details {
     summary {
         cursor: pointer;
@@ -142,6 +146,17 @@ input::placeholder {
         padding-left: 20px;
         color: var(--text-color-faint);
     }
+
+    main {
+        // Some elements can grow larger than the available space.
+        // Allow scrolling.
+        @media screen {
+            .scrollable-container {
+                overflow-x: auto;
+                display: block;
+            }
+        }
+    }
 }
 
 // Markdown parsers may put `code` elements inside of `pre`

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

@@ -29,6 +29,10 @@ body > header {
         align-items: center;
     }
 
+    #short_title {
+        display: none;
+    }
+
     #toggle_sidebar_btn {
         margin-right: 10px;
         background-color: var(--primary-background-color);
@@ -38,9 +42,33 @@ body > header {
         #toggle_sidebar_btn {
             display: none;
         }
+
+        box-shadow: none;
+        border-bottom: 1px solid var(--line-color-light);
     }
 }
 
+@mixin only-short-title {
+    body > header {
+        #long_title {
+            display: none !important;
+            color: red;
+        }
+
+        #short_title {
+            display: block;
+        }
+    }
+}
+
+:root.minimizedNavHeader {
+    @include only-short-title;
+}
+
+@media screen and (max-width: $site-content-preferred-width) {
+    @include only-short-title;
+}
+
 :root {
     --header-effective-height: var(--header-height);
 }

data/assets/fonts/README.txt

@@ -0,0 +1,8 @@
+This directory includes fonts under OpenSource licenses. As the Hematite theme is distributed under the MIT, all fonts distributed with it must be free for commercial use.
+
+This directory includes the following fonts:
+ * FoulisGreek
+   * by the JUnicode project
+   * https://www.fontspace.com/foulis-greek-font-f38341
+   * https://junicode.sourceforge.io/greek.html
+

data/assets/html/remark_presentation_frame.html

@@ -11,16 +11,23 @@ noindex: true
         <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=Droid+Sans:400,700,400italic);
 @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
 
-body { font-family: 'Droid Serif'; }
+body { font-family: 'Droid Sans', sans-serif; }
 h1, h2, h3 {
     font-family: 'Yanone Kaffeesatz';
     font-weight: normal;
 }
 
-.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+.remark-code, .remark-inline-code, body.mdSourceView {
+    font-family: 'Ubuntu Mono', monospace;
+}
+
+body.mdSourceView {
+    background: white;
+    color: black;
+}
 
 /* Show hidden slides to allow preprocessors (e.g. mermaid) to
    properly account for container size.
@@ -49,6 +56,11 @@ nav:hover, nav:focus-within {
     opacity: 1;
 }
 
+/* Fix contrast issue */
+.remark-slide-number {
+    opacity: 0.8;
+}
+
 @media print {
     nav {
         display: none;

data/assets/js/dropdownExpander.mjs

@@ -57,11 +57,14 @@ function expandBasedOnURL() {
         }
 
         let targetElem = document.querySelector(hash);
-        let currentElem = targetElem;
 
-        expandContainingDropdowns(targetElem);
-
-        targetElem.focus();
+        if (targetElem) {
+            expandContainingDropdowns(targetElem);
+            targetElem.focus();
+        }
+        else {
+            console.warn(`Hash`, hash, `does not correspond to an element.`);
+        }
     };
 
     doExpansion(location.href);

data/assets/js/layout/post.mjs

@@ -47,6 +47,11 @@ 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

@@ -2,6 +2,8 @@ import { getUrlQuery, Searcher } from "../search.mjs";
 import { stringLookup } from "../strings.mjs";
 import UrlHelper from "../UrlHelper.mjs";
 
+const GESTURE_MIN_TOUCH_MOVE_DIST = 40; // px
+
 function isInPresenterMode(targetDoc) {
     return targetDoc.body.classList.contains("remark-presenter-mode");
 }
@@ -13,7 +15,6 @@ function focusSearchResult(targetWin, query, targetMatchNo, slideshow, searcher)
         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);
@@ -22,20 +23,27 @@ function focusSearchResult(targetWin, query, targetMatchNo, slideshow, searcher)
 
         // 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();
+            try {
+                targetText = (slide.notes.join ?? (() => slide.notes))("\n");
+                matchesFound += searcher.getNumberOfMatches(query, targetText);
+                if (matchesFound > targetMatchNo) {
+                    slideshow.gotoSlide(currentSlideNo);
+
+                    if (!isInPresenterMode(targetWin.document)) {
+                        slideshow.togglePresenterMode();
+                    }
+                    return;
                 }
-                return;
+            }
+            catch (e) {
+                console.error(`Unable to search through notes for slide`, slide, `Error: `, e);
+                console.log("Continuing...");
             }
         }
     }
 
-    console.log("Found ", matchesFound, " matches, which is less than the target of ", targetMatchNo);
+    console.log("Found ", matchesFound,
+        " matches, which is less than the target of ", targetMatchNo, ". Remaining on last slide.");
     slideshow.gotoLastSlide();
     return -1;
 }
@@ -69,7 +77,24 @@ 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;
+
     if (!targetWindow.remark) {
         // Wait for page load if remark isn't available yet.
         await (new Promise(resolve => {
@@ -77,22 +102,39 @@ 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
+            || config?.navigation?.touch === undefined) {
+        config ??= {};
+        config.navigation ??= {};
+        config.navigation.touch = false;
+
+        usingCustomTouchNav = true;
+    }
+
     // See https://remarkjs.com/#8
     let slideshow = targetWindow.remark.create(config);
+    targetWindow.focus();
 
     // For debugging
     window.slideshow_debug = slideshow;
 
-    targetWindow.focus();
-
     addExtendedControls(targetWindow, slideshow);
     focusSearchResultFromUrl(targetWindow, slideshow);
+    focusSlideFromHash(slideshow);
 
+    // Create a URL state we can navigate back to/restore to
     targetWindow.history.replaceState(null, targetWindow.location.href);
     let targetWinHistory = targetWindow.history.state;
 
-    focusSlideFromHash(slideshow);
-
     window.addEventListener('hashchange', () => {
         focusSlideFromHash(slideshow);
     });
@@ -111,6 +153,45 @@ async function main(targetWindow, config) {
             UrlHelper.withReplacedHash(targetWindow.location.href, hashId));
         window.location.hash = hashId;
     });
+
+    // Add custom touch events to listen for navigation.
+    if (usingCustomTouchNav) {
+        let elemContainer = targetWindow.document.body;
+        let initialPos = {};
+        let handlingGesture = false;
+
+        elemContainer.addEventListener('pointerdown', evt => {
+            if (evt.pointerType == 'touch') {
+                // Only handle single-touch gestures
+                handlingGesture = evt.isPrimary;
+                initialPos = {
+                    x: evt.clientX,
+                    y: evt.clientY,
+                };
+
+                if (handlingGesture) {
+                    evt.preventDefault();
+                    elemContainer.setPointerCapture();
+                }
+            }
+        });
+
+        elemContainer.addEventListener('pointerup', evt => {
+            if (evt.pointerType == 'touch' && handlingGesture) {
+                let dx = evt.clientX - initialPos.x;
+
+                if (Math.abs(dx) < GESTURE_MIN_TOUCH_MOVE_DIST) {
+                    return;
+                }
+
+                if (dx < 0) {
+                    slideshow.gotoNextSlide();
+                } else {
+                    slideshow.gotoPreviousSlide();
+                }
+            }
+        });
+    }
 }
 
 /// Apply minor adjustments to the default remark layout
@@ -146,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/main.mjs

@@ -3,6 +3,7 @@ import { generateHeaderLinks } from "./linkButtonGenerator.mjs";
 import handleSidebar from "./sidebar.mjs";
 import handleSearch from "./search.mjs";
 import autoExpandDropdowns from "./dropdownExpander.mjs";
+import makeElemsScrollable from "./scrollables.mjs";
 import Settings from "./Settings.mjs";
 
 // After loading elements, images, css, etc.
@@ -17,6 +18,7 @@ addEventListener("load", () => {
 // After loading elements, but before loading elements like images.
 addEventListener("DOMContentLoaded", () => {
     handleSidebar();
+    makeElemsScrollable();
 });
 
 // Apply user-specified settings

data/assets/js/scrollables.mjs

@@ -0,0 +1,29 @@
+/// Wrap elements that can be too wide in scrollable containers
+
+const SCROLLABLE_CONTAINER_CLSS = "scrollable-container";
+
+function makeScrollable() {
+    // Make tables scrollable
+    let elems = document.querySelectorAll("main > table");
+
+    for (const elem of elems) {
+        let container = document.createElement("div");
+        elem.parentElement.insertBefore(container, elem);
+        elem.remove();
+
+        container.classList.add(SCROLLABLE_CONTAINER_CLSS);
+        container.appendChild(elem);
+    }
+
+    // Make display math scrollable
+    elems = document.querySelectorAll("main > span > .katex-display");
+    for (const elem of elems) {
+        let container = elem.parentElement;
+
+        if (container.children.length == 1) {
+            container.classList.add(SCROLLABLE_CONTAINER_CLSS);
+        }
+    }
+}
+
+export default makeScrollable;

data/assets/string_data/en.mjs

@@ -53,6 +53,7 @@ export default {
     page_theme_light: 'Light Theme',
     settings_minimize_header: 'Hide Header: ',
 
+    presentation_frame_title: 'Presentation slides',
     btn_next_slide: 'Go to next slide',
     btn_prev_slide: 'Go to previous slide',
     btn_print: 'Print',

data/assets/string_data/es.mjs

@@ -51,6 +51,7 @@ export default {
     page_theme_light: 'Brillante',
     settings_minimize_header: 'Título escondido: ',
 
+    presentation_frame_title: 'Diapositivas de la presentación',
     btn_next_slide: 'Vaya a la diapositiva proxima',
     btn_prev_slide: 'Vaya a la diapositiva anterior',
     btn_print: 'Imprima',

data/assets/style.scss

@@ -5,6 +5,8 @@ styles: true
 
 @import "hematite";
 
+{% include scss/_fonts.scss %}
+
 {% if site.hematite.auto_invert_imgs %}
 // In dark mode, invert the brightness of images
 @include auto-invert-images;

data/assets/style_only_syntax.scss

@@ -5,6 +5,7 @@ styles: true
 
 // Only syntax highlighting. Useful for layouts like remark presentation.
 
+{% include scss/_fonts.scss %}
 @import "_colors";
 @import "_hljs";
 @import "_rogue";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.1.9
+  version: 0.1.12
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-25 00:00:00.000000000 Z
+date: 2022-05-29 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
@@ -45,6 +46,7 @@ files:
 - _includes/nav/pages_list.html
 - _includes/nav/pinned_page.html
 - _includes/nav/sidebar.html
+- _includes/scss/_fonts.scss
 - _includes/settings.html
 - _layouts/calendar.html
 - _layouts/default.html
@@ -63,6 +65,8 @@ files:
 - _sass/_rogue.scss
 - _sass/_sizes.scss
 - _sass/hematite.scss
+- assets/fonts/FoulisGreek.ttf
+- assets/fonts/README.txt
 - assets/html/all_tags.html
 - assets/html/remark_presentation_frame.html
 - assets/html/settings.html
@@ -81,6 +85,7 @@ files:
 - assets/js/layout/remark_slideshow.mjs
 - assets/js/linkButtonGenerator.mjs
 - assets/js/main.mjs
+- assets/js/scrollables.mjs
 - assets/js/search.mjs
 - assets/js/sidebar.mjs
 - assets/js/string_data.mjs