hematite 0.1.12 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3bf0eaea458e2c4fba03dbcc759aaa04eb811832e1850b210d5e5a378fab2526
-  data.tar.gz: 80dcbb081d5342365d4f119ffcb6f1dfd2be5b6533e23b0c23a18bde93709b54
+  metadata.gz: a65a76e006bbd87ea26a66325be19c7acb2308d195f05763874847ed12e57b45
+  data.tar.gz: 1236b78bc5fc3da5b7135690276bb054aad7fe0c83f8dcf0cfe94ced4fce401d
 SHA512:
-  metadata.gz: 23b88d8d1249320f6b4712e19d9a00f0a2bc0de0ef1e191aab371e56e019f38da43b8f26726e0e6d22a9a271bd647dc175bae4d58997222a04a4939700642908
-  data.tar.gz: 916e067da5e530e001003b82f83d3a91241ba268823112662ff87102c16e5800c70b2d909d8e150c9a9c08017d9f6f4d7c5c76ac980f2faf4a8e22caa77bb625
+  metadata.gz: 4dd620ed3184b4d68aaa698f8fe9d5266e1f75dd9dc8daaa397a8d8ce107d95d32dd18efb85a7646bbe28e25d108b8e5ac6e7597c82879eced10e15d9c5ccfc3
+  data.tar.gz: ddc863b0e58fc4386c43a6d421de74f538d581aa4956875e25afc8a27f9d651de1c5116f75e3d5cc6bd7f2812458b64fedb2788c612382c9d9a99c13418674be

data/_includes/img/chain-link.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="chain-link-root" width="120" height="120" version="1.1" viewBox="5 0 115 115" xmlns="http://www.w3.org/2000/svg">
+<style>
+.chain-link-group {
+    stroke: var(--primary-text-color);
+    fill: var(--primary-text-color);
+    transform: scale(1, 1);
+    cursor: pointer;
+
+    transition: transform 0.5s ease;
+}
+
+*:hover > .chain-link-root > .chain-link-group, *:focus-visible > .chain-link-root > .chain-link-group {
+    transform: scale(0.9, 0.9) rotate(3deg);
+}
+
+.first-link {
+    transition: transform 0.5s ease;
+}
+
+*:hover > .chain-link-root .first-link, *:focus-visible > .chain-link-root .first-link {
+    transform: rotate(-1deg) translate(3px, 5px);
+}
+</style>
+   <g class="chain-link-group" stroke-width="1.3073px">
+      <path class="first-link" d="m33.397 50.158c-2.6598 5.036-2.2862 10.261-1.9847 14.517 0 0-15.64 22.738-7.7042 28.627 11.282 8.3732 27.844-11.316 35.784-22.274 4.6398-6.404 11.497-17.806 4.8574-22.551-4.4648-3.1911-15.534 6.396-15.534 6.396 2.4001-4.8081 3.8451-9.2997 8.8749-14.979 0 0 12.876-7.89 17.582-4.4037 10.785 7.9897 4.045 26.844-2.9517 37.755-11.67 18.198-40.276 49.141-57.96 35.093-15.977-12.692 19.037-58.18 19.037-58.18z"/>
+      <path class="second-link chain-link" d="m76.584 70.435c3.391-6.7587 5.3144-12.629 6.102-17.811 0 0 15.266-26.145 6.953-34.912-9.4283-9.9438-27.656 11.689-35.415 22.752-4.5343 6.4656-10.798 17.514-4.4871 22.614 3.5372 2.8589 13.627-3.6947 13.627-3.6947-3.7755 9.069-3.9072 9.1256-8.0298 14.333 0 0-12.197 5.8204-16.306 2.4937-10.388-8.4101-4.8557-26.982 2.3324-37.79 11.277-16.957 39.806-44.356 56.165-30.668 7.7991 6.5255 4.0194 21.892 0.36418 31.865-2.4291 6.628-21.307 30.818-21.307 30.818z"/>
+   </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/_includes/settings.html

@@ -59,6 +59,7 @@ pageThemeSelect.innerHTML =
 `
 <option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
 <option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
+<option value='${Settings.THEME_DARKEST}'>${stringLookup('page_theme_darkest')}</option>
 <option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
 `;
 

data/_sass/_colors.scss

@@ -29,15 +29,11 @@
     --syntax-comment-fg: #338;
     --syntax-name-fg: #331;
     --syntax-normal-fg: black;
+    --code-background-color: #f9f5f5;
 }
 
-@media screen {
-    :root:not(.darkTheme), :root.lightTheme {
-        --code-background-color: #f9f5f5;
-    }
-}
 
-@mixin dark-theme-colors {
+@mixin very-dark-theme-colors {
     --primary-text-color: white;
     --secondary-text-color: white;
     --text-color-faint: #ccc;
@@ -47,7 +43,7 @@
     --selected-item-fg-color: white;
     --selected-item-bg-color: #530033;
 
-    --primary-background-color: black;
+    --primary-background-color: #000;
     --secondary-background-color: #111;
     --code-background-color: #222;
     --line-color-light: #222;
@@ -70,6 +66,39 @@
     --syntax-normal-fg: white;
 }
 
+@mixin dark-theme-colors {
+    --primary-text-color: white;
+    --secondary-text-color: white;
+    --text-color-faint: #ccc;
+    --link-color: #fa0;
+    --visited-link-color: #f0a;
+
+    --selected-item-fg-color: white;
+    --selected-item-bg-color: #530033;
+
+    --primary-background-color: #333;
+    --secondary-background-color: #222;
+    --code-background-color: #222;
+    --line-color-light: #555;
+    --line-color-normal: #aaa;
+
+    --color-alert-background: #300;
+    --color-alert-foreground: white;
+
+    --shadow-color-light: rgba(220, 220, 200, 0.5);
+
+
+    // Syntax highlighting
+    --syntax-keyword-fg: pink;
+    --syntax-string-fg: #cfc;
+    --syntax-number-fg: #eef;
+    --syntax-bracket-fg: #faf;
+    --syntax-operator-fg: #aff;
+    --syntax-comment-fg: #aef;
+    --syntax-name-fg: #edf;
+    --syntax-normal-fg: white;
+}
+
 @media screen and (prefers-color-scheme: dark) {
     :root:not(.lightTheme) {
         @include dark-theme-colors;
@@ -80,5 +109,9 @@
     :root.darkTheme {
         @include dark-theme-colors;
     }
+
+    :root.veryDarkTheme {
+        @include very-dark-theme-colors;
+    }
 }
 

data/_sass/_elements.scss

@@ -116,6 +116,10 @@ main pre {
             padding: 4px;
         }
 
+        .linkToHeaderContainer > a {
+            background-color: transparent;
+        }
+
         code {
             box-shadow: inset -1px -1px 4px var(--shadow-color-light);
         }

data/_sass/_layout.scss

@@ -4,7 +4,7 @@
 @import "_calendar";
 
 .main-container {
-    box-shadow: 1px 1px 3px var(--shadow-color-light);
+    box-shadow: 0px -1px 2px var(--shadow-color-light);
     background-color: var(--primary-background-color);
 
     max-width: $site-content-preferred-width;
@@ -139,15 +139,28 @@ nav#post_next_prev {
 }
 
 .linkToHeaderContainer {
-    float: right;
-    opacity: 0.1;
     cursor: pointer;
+    position: absolute;
+    opacity: 0;
+
+    a {
+        margin-left: -1em;
+
+        svg {
+            width: 1em;
+            height: 0.7em;
+        }
+    }
 
     transition: opacity 0.2s ease;
 }
 
-.linkToHeaderContainer:hover, .linkToHeaderContainer:focus-within {
-    opacity: 1;
+h1, h2, h3, h4, h5, h6 {
+    &:hover, &:focus-visible {
+        .linkToHeaderContainer {
+            opacity: 1;
+        }
+    }
 }
 
 .spacer {

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

@@ -25,6 +25,7 @@ h1, h2, h3 {
 }
 
 body.mdSourceView {
+    padding-top: 50px;
     background: white;
     color: black;
 }

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/Settings.mjs

@@ -8,6 +8,7 @@ const THEME_TRANSITION_TIME = 500; // ms
 class Settings {
     THEME_AUTO = 'auto';
     THEME_DARK = 'dark';
+    THEME_DARKEST = 'darkest';
     THEME_LIGHT = 'light';
 
     FONT_DEFAULT = 'default';
@@ -94,20 +95,13 @@ class Settings {
         return this.getFontSize() != this.FONT_SIZE_DEFAULT;
     }
 
-    forcingDarkTheme_() {
-        return this.getTheme() == this.THEME_DARK;
-    }
-
-    forcingLightTheme_() {
-        return this.getTheme() == this.THEME_LIGHT;
-    }
-
     async applySettings() {
         document.documentElement.classList.add("changingTheme");
 
         // Clean up previous changes. We might be re-applying styles.
         document.documentElement.classList.remove("lightTheme");
         document.documentElement.classList.remove("darkTheme");
+        document.documentElement.classList.remove("veryDarkTheme");
 
         if (!this.style_) {
             this.style_ = document.createElement("style");
@@ -147,11 +141,16 @@ class Settings {
         document.documentElement.appendChild(this.style_);
 
         // Theme
-        if (this.forcingDarkTheme_()) {
-            document.documentElement.classList.add("darkTheme");
-        }
-        else if (this.forcingLightTheme_()) {
-            document.documentElement.classList.add("lightTheme");
+        switch (this.getTheme()) {
+            case this.THEME_DARK:
+                document.documentElement.classList.add("darkTheme");
+                break;
+            case this.THEME_DARKEST:
+                document.documentElement.classList.add("veryDarkTheme");
+                break;
+            case this.THEME_LIGHT:
+                document.documentElement.classList.add("lightTheme");
+                break;
         }
 
         if (this.getHeaderMinimized()) {

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/linkButtonGenerator.mjs

@@ -1,8 +1,10 @@
+---
+---
 
 import { PageAlert } from "./PageAlert.mjs";
 import { stringLookup as _L } from './strings.mjs';
 
-const INTERIOR_LINK_TEXT = "🔗";
+const INTERIOR_LINK_CONTENT_HTML = `{% include img/chain-link.svg %}`;
 const INTERIOR_LINK_CONTAINER_CLSS = "linkToHeaderContainer";
 
 /// Creates 🔗 buttons for every header with an ID.
@@ -25,9 +27,10 @@ function createLinkButton_(header) {
     let headerText = header.innerText;
 
     container.classList.add(INTERIOR_LINK_CONTAINER_CLSS);
-    link.innerText = INTERIOR_LINK_TEXT;
     link.title = _L("copy_link_to_header", headerText);
     link.href = `#${header.getAttribute('id')}`;
+    link.innerHTML = INTERIOR_LINK_CONTENT_HTML;
+
     link.onclick = () => {
         navigator.clipboard.writeText(link.href);
         PageAlert.builder()

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

data/assets/string_data/en.mjs

@@ -50,6 +50,7 @@ export default {
     page_font_large: 'Large',
     page_theme_auto: 'Automatic',
     page_theme_dark: 'Dark Theme',
+    page_theme_darkest: 'Very Dark Theme',
     page_theme_light: 'Light Theme',
     settings_minimize_header: 'Hide Header: ',
 

data/assets/string_data/es.mjs

@@ -48,6 +48,7 @@ export default {
     page_font_large: 'Grande',
     page_theme_auto: 'Automático',
     page_theme_dark: 'Oscuro',
+    page_theme_darkest: 'Muy Oscuro',
     page_theme_light: 'Brillante',
     settings_minimize_header: 'Título escondido: ',
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.1.12
+  version: 0.1.15
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-29 00:00:00.000000000 Z
+date: 2022-06-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -36,6 +36,7 @@ files:
 - _config.yml
 - _includes/extern_library_imports.html
 - _includes/footer.html
+- _includes/img/chain-link.svg
 - _includes/img/hamburger_menu.svg
 - _includes/img/loading_icon.svg
 - _includes/img/search_icon.svg
@@ -75,6 +76,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