hematite 0.1.13 → 0.1.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5428a81a66f2c162d5db506a782443ab49ec31a2a2b67a02dec1cab941828768
-  data.tar.gz: 4a54bb491b61987364791315c6b4024b6fc019a3ba42f5488f43fb7f9c9ff704
+  metadata.gz: 47d41c5ad077de2f9a92abb5b1b7cf4de0b161579c77de474ffaf112a859c412
+  data.tar.gz: 6115ed1ddb55c51ff476305b0ffe2b8d13df1ad66e2062b1ea35fd776e467a69
 SHA512:
-  metadata.gz: '08188e55d1fc0e2f342a186ac1cc57c0226fe7b138cdb5e2f622716b29f4a5cf41768220f9dafb3971d2081dfef5cbee1cb8f485cd6e041589b6a3472a63204f'
-  data.tar.gz: 1ddbfb8aa3b14052e0befc9e5dc6b59f1486705dc5f82033337a08a085368e27b6b1a51601db7e26b9578af0fafe74c0b3951a0e3fcda496ff5de23b35ad4b88
+  metadata.gz: d0089e6c81f4cceb7940a7de6bd305a554182d807cd9443264261bfd35ecb99016377e00dcf1b3523f84ea2e6330b16214b18bb87a439bca870b9fd6b4e9d7ed
+  data.tar.gz: 0ba240c05e96ffae702be804c3aef4d2f7785fa1192543836f69cf54c1ac726d58d5ca44a6578f5e3bf1eedd8a3b07be68a628048d46e12f759d11cb284fa93d

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/recent_posts.html

@@ -0,0 +1,24 @@
+
+{% assign recent_post_limit = recent_post_limit | default: site.hematite.recent_post_limit | default: 8 %}
+
+<ul class="recent-posts recent-posts-grid">
+{% for post in site.posts limit:recent_post_limit %}
+    <li>
+        <h2>
+            <a href="{{ post.url }}">{{ post.title }}</a>
+            <span class="post-date">{{ post.date | date_to_string }}</span>
+        </h2>
+        <p class="post-description">{{ post.content | strip_html | truncate: 200 }}</p>
+        <div class="tags">
+            {% for tag in post.tags %}
+                <a
+                    href="{{ 'assets/html/all_tags.html' | relative_url }}#tag__{{ tag | uri_escape }}"
+                    class="post-tag"
+                >
+                    {{ tag }}
+                </a>
+            {% endfor %}
+        </div>
+    </li>
+{% endfor %}
+</ul>

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);
         }
@@ -193,10 +197,6 @@ a.settings-btn {
     }
 }
 
-:root.darkTheme main img.auto-invert {
-    @include img-invert;
-}
-
 // Users can `include' this to invert images automatically in dark mode.
 @mixin auto-invert-images {
     @media (prefers-color-scheme: dark) {
@@ -205,7 +205,9 @@ a.settings-btn {
         }
     }
 
-    :root.darkTheme main img:not(.no-invert) {
-        @include img-invert;
+    :root.darkTheme, :root.veryDarkTheme {
+        main img:not(.no-invert) {
+            @include img-invert;
+        }
     }
 }

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.2;
+
+    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 {
@@ -249,3 +257,86 @@ nav.sidebar {
 .main-container * {
     scroll-margin-top: 2.5em;
 }
+
+
+.recent-posts {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    align-items: center;
+
+    flex-wrap: wrap;
+    overflow-x: auto;
+
+    li {
+        ::before {
+            content: "";
+        }
+
+        list-style: none;
+
+        border: 1px solid var(--line-color-light);
+        border-radius: 4px;
+        padding-left: 12px;
+        padding-right: 12px;
+        margin-bottom: 4px;
+
+        h2 {
+            font-variant: small-caps;
+        }
+
+        .post-date {
+            float: right;
+            color: var(--text-color-faint);
+
+            // Ensure that there is space between the date and
+            // the post title.
+            margin-left: 30px;
+        }
+
+        .post-description {
+            color: var(--text-color-faint);
+            font-style: italic;
+            font-weight: 200;
+        }
+
+        .tags {
+            opacity: 0.7;
+            font-size: 0.8em;
+        }
+    }
+}
+
+// Scrollable grid layout for the recent posts widget.
+.recent-posts-grid {
+    max-height: 500px;
+
+    li {
+        max-width: Min(50vw, 500px);
+    }
+
+    @media screen and (max-width: 500px) {
+        max-height: 100vh;
+
+        li {
+            max-width: unset;
+        }
+    }
+}
+
+@media print {
+    .recent-posts {
+        display: none;
+
+        // Should we decide to show the recent posts,
+        // ensure that they're in a list format.
+        max-height: unset;
+        max-width: unset;
+        overflow-x: hidden;
+
+        li {
+            max-width: unset;
+            border: none;
+        }
+    }
+}

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

@@ -43,7 +43,7 @@ function getCalendarData(elem, formatElemLabels, dateHeaderTag) {
                 }
             }
             catch (e) {
-                 errored = true;
+                errored = true;
             }
 
             if (errored) {
@@ -277,7 +277,7 @@ class Calendar {
             return this.data_[i];
         }
 
-        return null;
+        return this.data_[this.data_.length - 1] ?? null;
     }
 
     /// Get an item in [data_] from [date], if [searchDate]

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;
@@ -177,6 +178,7 @@ class Searcher {
                 results.push({
                     index,
                     context,
+                    matchIndex: matchLoc,
                     pageData,
                 });
 
@@ -305,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.13
+  version: 0.1.16
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-29 00:00:00.000000000 Z
+date: 2022-09-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
@@ -46,6 +47,7 @@ files:
 - _includes/nav/pages_list.html
 - _includes/nav/pinned_page.html
 - _includes/nav/sidebar.html
+- _includes/recent_posts.html
 - _includes/scss/_fonts.scss
 - _includes/settings.html
 - _layouts/calendar.html
@@ -75,6 +77,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