hematite 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca054447d56a7d76f00b864906bce8cc2245ba03d089dca22246060f81142a2e
-  data.tar.gz: ba039823072585771bfcdd113454a3de8353219c935907b3b95ae9fb5e82cbe5
+  metadata.gz: 3d623b260279dabc636598983bebf15e547d963ead82e21b5e8357572597bb48
+  data.tar.gz: 00bba21df3b38ea1db9bf57d631b3ce2da97c5f077c0680831550192cc4c58d7
 SHA512:
-  metadata.gz: a7d4189cc538c9fbd161458570fdeca378971746f33e9365e6ebe5b8806a754517424b1655cbd32994b206bcabd92440f5e462d89153584ee499cb4ccb5fa507
-  data.tar.gz: ca7eb2a71d1b4d6bc342fb2fec21e0bbd3628f78689f0d6728112b1a85842f26f3d90a51e58951e9a69c5871756a9840fc6d224abd600df3559c7bbbf33d276a
+  metadata.gz: 51bc1b4fbea55a7bf316d03ac9c291c3f233ab7e91fe163dd3412f23518e3f4b247c3aeafd0cc1b72bb941ec3f721b90dc949bed6cfb3572ee8a4b6ae5fff182
+  data.tar.gz: fe620903b815435c84c0a2d45b3edb1ca10c9d2727eb129ca24c0837b55adbf5fc384086feb0228b164084616419048fec8df8c62138ad976d4a8db990a1d79b

data/README.md

@@ -1,4 +1,5 @@
 # Hematite
+[![Gem Version](https://badge.fury.io/rb/hematite.svg)](https://badge.fury.io/rb/hematite)
 
 ![The dark variant of the Hematite Theme, showing a calendar](./screenshot.png)
 
@@ -50,7 +51,8 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
 When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
 To add a custom directory to your theme-gem, please edit the regexp in `Hematite.gemspec` accordingly.
 
-**Note:** All user-facing strings in JavaScript should go in `assets/js/string_data.mjs` to permit future localization.
+**Note:** All user-facing strings that are distributed with the theme should go in
+[assets/string_data](https://github.com/personalizedrefrigerator/jekyll-hematite-theme/tree/main/assets/string_data) to permit future localization.
 
 ## License
 

data/_config.yml

@@ -33,6 +33,7 @@ hematite:
       month_first: true
 
   sidebar:
-    footer_html: 'This page was made with the Hematite Theme. <a href="https://github.com/personalizedrefrigerator/jekyll-hematite-theme">Contribute on GitHub</a>'
+    footer_html: 'This page was made with the Hematite Theme. <a href="https://github.com/personalizedrefrigerator/jekyll-hematite-theme">Contribute on GitHub.</a>'
+    show_settings_btn: true
 
 

data/_includes/footer.html

@@ -0,0 +1,6 @@
+{% comment %}
+ The contents of this file are included at the bottom of all pages, posts, etc.
+
+ This is different from the text included at the bottom of the sidebar. Change the sidebar footer
+ in your _config.yml.
+{% endcomment %}

data/_includes/nav/header.html

@@ -0,0 +1,5 @@
+{% comment %}
+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>

data/_includes/nav/page_navigation.html

@@ -3,7 +3,7 @@
     <button class="toggle_sidebar" id="toggle_sidebar_btn">
         {% include img/hamburger_menu.svg %}
     </button>
-    <a href="{{ "/" | absolute_url }}">{{ site.title | default "Untitled Site" }}</a>
+    {% include nav/header.html %}
     <div class="spacer"></div>
 </header>
 

data/_includes/nav/sidebar.html

@@ -18,8 +18,22 @@
     </ul>
 
     <footer>
-        {% if site.hematite.sidebar.footer_html %}
-            {{ site.hematite.sidebar.footer_html }}
+        <div>
+            {% if site.hematite.sidebar.footer_html %}
+                {{ site.hematite.sidebar.footer_html }}
+            {% endif %}
+        </div>
+        {% if site.hematite.sidebar.show_settings_btn %}
+            <center>
+                <!-- Localized by JS -->
+                <a id="sidebar_settings_btn" class="settings-btn"
+                    {% if site.permalink == 'pretty' %}
+                        href="{{ 'assets/html/settings' | relative_url }}"
+                    {% else %}
+                        href="{{ 'assets/html/settings.html' | relative_url }}"
+                    {% endif %}
+                ></a>
+            </center>
         {% endif %}
     </footer>
 </nav>

data/_layouts/default.html

@@ -28,6 +28,8 @@ title: Untitled
             {% if page.layout == "default" %}
             </main>
             {% endif %}
+
+            {% include footer.html %}
         </div>
 
     </body>

data/_sass/_colors.scss

@@ -1,4 +1,4 @@
-:root {
+:root:not(.darkTheme), :root.lightTheme {
     --primary-text-color: black;
     --secondary-text-color: black;
     --text-color-faint: #444;
@@ -16,16 +16,10 @@
 
     --shadow-color-light: rgba(0, 0, 0, 0.6);
     --line-color-light: #eee;
+    --line-color-normal: #888;
     --code-background-color: #fafafa;
-}
 
-@media screen {
-    :root {
-        --code-background-color: #f9f5f5;
-    }
-}
 
-:root {
     // Syntax highlighting
     --syntax-keyword-fg: #d00;
     --syntax-string-fg: #c07;
@@ -37,37 +31,54 @@
     --syntax-normal-fg: black;
 }
 
+@media screen {
+    :root:not(.darkTheme), :root.lightTheme {
+        --code-background-color: #f9f5f5;
+    }
+}
+
+@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: black;
+    --secondary-background-color: #111;
+    --code-background-color: #222;
+    --line-color-light: #222;
+    --line-color-normal: #aaa;
+
+    --color-alert-background: #300;
+    --color-alert-foreground: white;
+
+    --shadow-color-light: rgba(200, 200, 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 {
-        --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: black;
-        --secondary-background-color: #111;
-        --code-background-color: #222;
-        --line-color-light: #222;
-
-        --color-alert-background: #300;
-        --color-alert-foreground: white;
-
-        --shadow-color-light: rgba(200, 200, 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;
+    :root:not(.lightTheme) {
+        @include dark-theme-colors;
+    }
+}
+
+@media screen {
+    :root.darkTheme {
+        @include dark-theme-colors;
     }
 }
 

data/_sass/_elements.scss

@@ -33,15 +33,19 @@ button[disabled] {
     cursor: not-allowed;
 }
 
-input {
+input, select, textarea {
     color: var(--secondary-text-color);
     background-color: var(--secondary-background-color);
-    border: 1px solid var(--line-color-light);
+    border: 1px solid var(--line-color-normal);
     border-radius: 4px;
     padding: 5px;
 
-    font-family: $serif-font;
-    font-size: $font-size-main;
+    font-family: var(--main-font-family);
+    font-size: var(--main-font-size);
+}
+
+select {
+    cursor: pointer;
 }
 
 input::placeholder {
@@ -112,6 +116,15 @@ input::placeholder {
             box-shadow: inset -1px -1px 4px var(--shadow-color-light);
         }
     }
+
+    table td {
+        border: 1px solid var(--line-color-light);
+    }
+
+    fieldset {
+        border-color: var(--line-color-normal);
+        margin-bottom: 30px;
+    }
 }
 
 // Markdown parsers may put `code` elements inside of `pre`
@@ -123,3 +136,16 @@ input::placeholder {
     // Let the `pre` handle the padding
     padding: 0;
 }
+
+a.settings-btn {
+    color: var(--text-color-faint);
+    border-radius: 4px;
+    padding: 3px;
+    transition: box-shadow 0.5s ease, border 0.5s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        box-shadow: 0 0 4px var(--shadow-color-light);
+        border: 1px solid var(--line-color-light);
+    }
+}

data/_sass/_layout.scss

@@ -34,8 +34,8 @@ body {
     padding-bottom: 140px;
     margin: 0;
 
-    font-size: $font-size-main;
-    font-family: $serif-font;
+    font-size: var(--main-font-size);
+    font-family: var(--main-font-family);
     color: var(--primary-text-color);
 }
 
@@ -109,7 +109,7 @@ nav#post_next_prev {
     background-color: var(--color-alert-background);
     color: var(--color-alert-foreground);
 
-    font-family: $serif-font;
+    font-family: var(--main-font-family);
     font-size: 14pt;
 
     padding: 20px;

data/_sass/_nav.scss

@@ -79,6 +79,9 @@ nav.sidebar {
         input {
             flex-grow: 1;
             flex-shrink: 1;
+
+            // Allow it to shrink
+            min-width: 20px;
         }
     }
 

data/_sass/_sizes.scss

@@ -1,11 +1,12 @@
 
-// Macro-like variables
 $site-content-preferred-width: 700px;
-$font-size-main: 12pt;
 $content-main-padding: 30px;
 
 // CSS variables
 :root {
+    // We want these variables to be changable dynamically,
+    // so they're CSS variables.
+    --main-font-size: 12pt;
     --nav-font-size: 22pt;
     --header-height: 30pt;
     --nav-width: 300px;

data/_sass/hematite.scss

@@ -1,6 +1,10 @@
 @charset "utf-8";
 
-$serif-font: 'FoulisGreek', 'EB Garamond', 'TeX Gyre Bonum', serif;
+:root {
+    --serif-font-family: 'FoulisGreek', 'EB Garamond', 'TeX Gyre Bonum', serif;
+    --sans-font-family: 'URW Gothic, Book', 'TeX Gyre Adventor', 'Ubuntu', sans-serif;
+    --main-font-family: var(--serif-font-family);
+}
 
 @import "_colors";
 @import "_sizes";

data/assets/html/settings.html

@@ -0,0 +1,94 @@
+---
+layout: default
+title: Settings
+noindex: true
+---
+
+<noscript>JavaScript is required to view this page's content!</noscript>
+
+<!-- So they can be localized, much of this page is filled by JavaScript -->
+<h1 id="settings_header">page_settings_header</h1>
+<p id="settings_description">page_settings_description</p>
+
+<!-- Organization inspired by https://www.w3.org/WAI/tutorials/forms/grouping/ -->
+<fieldset>
+    <legend id="font_legend">settings_font_legend</legend>
+    <div>
+        <label id="font_family_lbl" for="font_family">settings_font_family_label</label>
+        <select id="font_family"></select>
+    </div>
+    <div>
+        <label id="font_size_lbl" for="font_size">settings_font_size_label</label>
+        <select id="font_size">
+        </select>
+    </div>
+</fieldset>
+
+<fieldset>
+    <legend id="theme_legend">page_theme_legend</legend>
+    <div>
+        <label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
+        <select id="page_theme"></select>
+    </div>
+</fieldset>
+
+<script type="module">
+import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
+import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
+
+let settingsTextElemIDs = [
+    `settings_header`, `settings_description`, `font_legend`,
+    `font_family_lbl`, `font_size_lbl`, `theme_legend`,
+    `page_theme_lbl`,
+];
+
+// Localize all descriptive settings elements (each should contian the
+// name of its localization key).
+for (const id of settingsTextElemIDs) {
+    let elem = document.querySelector(`#${id}`);
+    elem.innerText = stringLookup(elem.innerText);
+}
+
+let fontSizeSelect = document.querySelector("#font_size");
+let fontFamilySelect = document.querySelector("#font_family");
+let pageThemeSelect = document.querySelector("#page_theme");
+
+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_LIGHT}'>${stringLookup('page_theme_light')}</option>
+`;
+
+fontFamilySelect.innerHTML =
+`
+<option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
+<option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
+<option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
+`;
+
+fontSizeSelect.innerHTML =
+`
+<option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
+<option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
+<option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
+<option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
+`;
+
+fontSizeSelect.oninput = () => {
+    Settings.setFontSize(fontSizeSelect.value);
+};
+
+fontFamilySelect.oninput = () => {
+    Settings.setFontFamily(fontFamilySelect.value);
+};
+
+pageThemeSelect.oninput = () => {
+    Settings.setTheme(pageThemeSelect.value);
+};
+
+pageThemeSelect.value = Settings.getTheme();
+fontFamilySelect.value = Settings.getFontFamily();
+fontSizeSelect.value = Settings.getFontSize();
+
+</script>

data/assets/js/Settings.mjs

@@ -0,0 +1,137 @@
+---
+---
+
+class Settings {
+    THEME_AUTO = 'auto';
+    THEME_DARK = 'dark';
+    THEME_LIGHT = 'light';
+
+    FONT_DEFAULT = 'default';
+    FONT_SANS = 'sans';
+    FONT_SERIF = 'serif';
+
+    FONT_SIZE_SMALL = 'small';
+    FONT_SIZE_MEDIUM = 'medium';
+    FONT_SIZE_LARGE = 'large';
+    FONT_SIZE_DEFAULT = 'default';
+
+    FONT_SIZE_KEY_ = 'hematite-setting-font-size';
+    FONT_FAMILY_KEY_ = 'hematite-setting-font-family';
+    THEME_KEY_ = 'hematite-setting-theme';
+
+    constructor() {
+    }
+
+    getSetting_(key) {
+        return localStorage.getItem(key);
+    }
+
+    setSetting_(key, val) {
+        localStorage.setItem(key, val);
+        this.applySettings();
+    }
+
+    getTheme() {
+        return this.getSetting_(this.THEME_KEY_) ?? this.THEME_AUTO;
+    }
+
+    getFontFamily() {
+        return this.getSetting_(this.FONT_FAMILY_KEY_) ?? this.FONT_DEFAULT;
+    }
+
+    getFontSize() {
+        return this.getSetting_(this.FONT_SIZE_KEY_) ?? this.FONT_SIZE_DEFAULT;
+    }
+
+    setFontSize(sizeOption) {
+        this.setSetting_(this.FONT_SIZE_KEY_, sizeOption);
+    }
+
+    setFontFamily(familyOption) {
+        this.setSetting_(this.FONT_FAMILY_KEY_, familyOption);
+    }
+
+    setTheme(themeOption) {
+        this.setSetting_(this.THEME_KEY_, themeOption);
+    }
+
+    getFontSizePt_() {
+        let fontSizeOption = this.getFontSize();
+
+        if (fontSizeOption == this.FONT_SIZE_SMALL) {
+            return {{ site.hematite.user_config.font_size_small | default: "9" }};
+        }
+
+        if (fontSizeOption == this.FONT_SIZE_MEDIUM) {
+            return {{ site.hematite.user_config.font_size_medium | default: "13" }};
+        }
+
+        if (fontSizeOption == this.FONT_SIZE_LARGE) {
+            return {{ site.hematite.user_config.font_size_large | default: "16" }};
+        }
+    }
+
+    usingNonDefaultFontFamily_() {
+        return this.getFontFamily() != this.FONT_DEFAULT;
+    }
+
+    usingNonDefaultFontSize_() {
+        return this.getFontSize() != this.FONT_SIZE_DEFAULT;
+    }
+
+    forcingDarkTheme_() {
+        return this.getTheme() == this.THEME_DARK;
+    }
+
+    forcingLightTheme_() {
+        return this.getTheme() == this.THEME_LIGHT;
+    }
+
+    applySettings() {
+        // Clean up previous changes. We might be re-applying styles.
+        document.documentElement.classList.remove("lightTheme");
+        document.documentElement.classList.remove("darkTheme");
+
+        if (!this.style_) {
+            this.style_ = document.createElement("style");
+        } else {
+            this.style_.remove();
+        }
+
+
+        let styleHTML = '';
+
+        // Font family
+        if (this.usingNonDefaultFontFamily_()) {
+            styleHTML +=
+            `
+                :root {
+                    --main-font-family: var(--${this.getFontFamily()}-font-family);
+                }
+            `;
+        }
+
+        // Font size
+        if (this.usingNonDefaultFontSize_()) {
+            styleHTML +=
+            `
+                :root {
+                    --main-font-size: ${this.getFontSizePt_()}pt;
+                }
+            `;
+        }
+
+        // Theme
+        if (this.forcingDarkTheme_()) {
+            document.documentElement.classList.add("darkTheme");
+        }
+        else if (this.forcingLightTheme_()) {
+            document.documentElement.classList.add("lightTheme");
+        }
+
+        this.style_.innerHTML = styleHTML;
+        document.documentElement.appendChild(this.style_);
+    }
+}
+
+export default (new Settings());

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 Settings from "./Settings.mjs";
 
 // After loading elements, images, css, etc.
 addEventListener("load", () => {
@@ -16,4 +17,7 @@ addEventListener("load", () => {
 // After loading elements, but before loading elements like images.
 addEventListener("DOMContentLoaded", () => {
     handleSidebar();
+
+    // Apply user-specified settings
+    Settings.applySettings();
 });

data/assets/js/sidebar.mjs

@@ -1,6 +1,7 @@
 import { stringLookup } from "./strings.mjs";
 import { announceForAccessibility } from "./PageAlert.mjs";
 
+
 function handleSidebar() {
     const toggleBtn = document.querySelector(`button#toggle_sidebar_btn`);
     const sidebar = document.querySelector(`nav#sidebar`);
@@ -91,6 +92,17 @@ function handleSidebar() {
             }
         });
     }
+
+    localizeSettingsBtn();
+}
+
+// Localize the text in the sidebar's settings button, if it exists.
+function localizeSettingsBtn() {
+    let sidebarBtn = document.querySelector("#sidebar_settings_btn");
+
+    if (sidebarBtn) {
+        sidebarBtn.innerText = stringLookup(`open_settings_btn`);
+    }
 }
 
 export { handleSidebar };

data/assets/string_data/en.mjs

@@ -30,4 +30,25 @@ export default {
     all_tags_header: 'All Tags',
     prev_post: '← {0}',
     next_post: '{0} →',
+
+    open_settings_btn: 'Site Settings',
+    page_settings_header: 'Settings',
+    page_settings_description:
+          'Here, you can change settings that affect how this page looks. Changes'
+           + ' save automatically.',
+    settings_font_legend: 'Font Options',
+    settings_font_family_label: 'Font Family: ',
+    settings_font_size_label: 'Font Size: ',
+    settings_theme_label: 'Page Theme: ',
+    page_theme_legend: 'Theme Options',
+
+    page_font_sans: 'Sans',
+    page_font_serif: 'Serif',
+    page_font_default: 'Default',
+    page_font_small: 'Small',
+    page_font_medium: 'Medium',
+    page_font_large: 'Large',
+    page_theme_auto: 'Automatic',
+    page_theme_dark: 'Dark Theme',
+    page_theme_light: 'Light Theme',
 };

data/assets/string_data/es.mjs

@@ -31,4 +31,22 @@ export default {
     all_tags_header: 'Todas las etiquetas',
     prev_post: '← {0}',
     next_post: '{0} →',
+
+    open_settings_btn: 'Ajustes de este sitio',
+    page_settings_header: 'Ajustes',
+    page_settings_description: 'Aquí, puede cambiar algunos aspectos de este sitio.'
+         + ' Cuando una ajuste cambia, lo debe estar guardado.',
+    settings_font_legend: 'Ajustes de fuente',
+    settings_font_family_label: 'Familia de fuente: ',
+    settings_font_size_label: 'Tamoño de fuente: ',
+    settings_theme_label: 'Color de la pagina: ',
+    page_theme_legend: 'Ajustes de tema',
+
+    page_font_default: 'Inicial',
+    page_font_small: 'Pequeño',
+    page_font_medium: 'Media',
+    page_font_large: 'Grande',
+    page_theme_auto: 'Automático',
+    page_theme_dark: 'Oscuro',
+    page_theme_light: 'Brillante',
 };

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.9
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-19 00:00:00.000000000 Z
+date: 2022-05-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -34,9 +34,11 @@ files:
 - LICENSE.txt
 - README.md
 - _config.yml
+- _includes/footer.html
 - _includes/img/hamburger_menu.svg
 - _includes/img/search_icon.svg
 - _includes/katex_includes.html
+- _includes/nav/header.html
 - _includes/nav/page_navigation.html
 - _includes/nav/pages_list.html
 - _includes/nav/pinned_page.html
@@ -56,11 +58,13 @@ files:
 - _sass/_sizes.scss
 - _sass/hematite.scss
 - assets/html/all_tags.html
+- assets/html/settings.html
 - assets/img/favicon.svg
 - assets/js/AnimationUtil.mjs
 - assets/js/AsyncUtil.mjs
 - assets/js/DateUtil.mjs
 - assets/js/PageAlert.mjs
+- assets/js/Settings.mjs
 - assets/js/UrlHelper.mjs
 - assets/js/assertions.mjs
 - assets/js/dropdownExpander.mjs