hematite 0.1.9 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b5c50c658bf984e5c096e0279fd2372b06c5d3fad9bb56eb3984c2218fe1aab
-  data.tar.gz: d945cf8f34d17d8b9dc6468e6f2c54d2a19708890d4d54f5411d60b3c3b190df
+  metadata.gz: 7d562db0ed2225f8650bd5c5f4a463b484254df5c5b6324eb7b2febf6f072e0d
+  data.tar.gz: 415dee3a5e09d9e84f0f2abb907f613bf68edf2a5224816995462148155415ad
 SHA512:
-  metadata.gz: 7a28e7505ec67d3e900d7fe85cd8d7cacd6dde237aca06a7b0f27146959d14f06d2760d2f478676513fe076e18432ef33b7bda54038816eb88801b81bab754d8
-  data.tar.gz: 3506d2b3ee5aa0dd81343e8f9a2b08633348ff6692de35a42851498c91a33c12c207729c0971458aff51a1924fc0f83a792bbc3b75052405263a357f0d7717b2
+  metadata.gz: f36ce4207f588d36389548a4755140b78738731be85582c8208e7092940254613e5241417825c7a47d0322b606be5958fd46ed593d971e5dc70ecd9b5a506357
+  data.tar.gz: daf31b575712939d9de6b0fd0c0500727736fd2da81e9e70c7eff7b2229c07f269ad3394c2231542c9594b2c65dccf08ebfa261ab1d42a10ac12782d9ccf82bf

data/_config.yml

@@ -2,7 +2,8 @@
 # Settings for the demo site.
 # `jekyll serve` does not auto-reload this file.
 
-title: Hematite Theme
+title: The Hematite Theme
+short_title: Hematite Theme
 description: A Jekyll theme intended for course websites
 permalink: pretty
 

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

@@ -35,9 +35,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,6 +113,7 @@ layout: default
         `);
 
         presentationWin.initPresentation = (async () => {
+            presentationDoc.title = presentationFrame.title;
             await slideshow.start(presentationFrame.contentWindow, config);
 
             // Ensure that mermaid has already been run!

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/_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,16 @@ 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 { font-family: 'Ubuntu Mono', monospace; }
 
 /* Show hidden slides to allow preprocessors (e.g. mermaid) to
    properly account for container size.
@@ -49,6 +49,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;
 }
@@ -70,6 +78,9 @@ function focusSlideFromHash(slideshow) {
 }
 
 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 +88,32 @@ async function main(targetWindow, config) {
         }));
     }
 
+    // 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 +132,44 @@ 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.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

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.10
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-25 00:00:00.000000000 Z
+date: 2022-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -45,6 +45,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 +64,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 +84,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