hematite 0.0.11 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c5f6a0cdf074d0025f0cf3031037a4dc365af38f99aa811578f3d88f0c356175
-  data.tar.gz: 533d5d2c8897c2985977971c5a6ca66552df1edee4bae22c9184750e97478007
+  metadata.gz: 7c31b77be5a329f70985b04f78078a87cf74d79c1f462018d8eed576e18efadc
+  data.tar.gz: 643ca6f28aaf67740b9e71b9de4a0f21bbe08f0f139b95e7b67819b28f9b1648
 SHA512:
-  metadata.gz: be650d2182b5d2dccdc6bccc3837691246f94bf8271bda4343cd923e7da5eb2c9fa3ddc960f35d2711c13cf51b574f3b27eddd47f31afc3c8688e231ab22afe7
-  data.tar.gz: 7ebc7f1a7902040eb224a1adb08da8115207303e028e4bad22d608f061e11a3f5450da65c2e572da68a10317c835ba73469d1ebef1c7a9f2a182a5567eb4f80f
+  metadata.gz: 3200f91d6ddd479b360c08b74862ff2a1260d45a92d3e84aa5c9686556cea7303835129c10329bd1b84d0cf965225eeb0808771f4d8edb338870feeb2d9c52e2
+  data.tar.gz: 79a331beca39bdfb4c1f8fb9447a3f04f9f36cb7f17856103b24353c875bc2ca36a77f866613d03d11daa3fff95a45de727d4a7a977eb022f5f4df31f09590d7

data/_config.yml

@@ -1,9 +1,6 @@
 
 # Settings for the demo site.
 # `jekyll serve` does not auto-reload this file.
-#
-# See https://leo3418.github.io/collections/multilingual-jekyll-site/localize-strings
-# for how localization works.
 
 title: Hematite Theme
 description: A Jekyll theme intended for course websites
@@ -12,6 +9,9 @@ permalink: pretty
 hematite:
   auto_invert_imgs: true
 
+  # Set to true to minimize the header by default
+  minimize_header: false
+
   # Date options are as specified here:
   # https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
   date_format:

data/_includes/extern_library_imports.html

@@ -0,0 +1,7 @@
+<!--
+    Include all external libraries (that are bundled with Hematite) requested by the
+    page
+-->
+
+{% include mermaid_includes.html %}
+{% include katex_includes.html %}

data/_includes/katex_includes.html

@@ -4,7 +4,7 @@
     KaTeX can be enabled with page.katex.
 -->
 
-{% if page.katex %}
+{% if page.katex || site.mermaid %}
 
 <!-- See the releases tab on https://github.com/KaTeX/KaTeX  -->
 <link

data/_includes/mermaid_includes.html

@@ -0,0 +1,24 @@
+
+<!--
+    Include mermaid-js scripts.
+-->
+{% if page.mermaid || site.mermaid %}
+<script>
+    var MERMAID_CONFIG = window.MERMAID_CONFIG ?? {{ site.mermaid_config | jsonify }} ?? { };
+
+    // Load defaults
+    MERMAID_CONFIG.startOnLoad ??= true;
+    MERMAID_CONFIG.htmlLabels ??= true;
+</script>
+<script
+        defer
+        src="{{ "assets/plugin/mermaid/mermaid.js" | relative_url }}"
+        {% comment %}
+        Here, we're also calling "mermaid.init()" because of the defer attribute — it's
+        possible that the window has already loaded (and thus startOnLoad may have no effect).
+        {% endcomment %}
+        onload="mermaid.initialize(MERMAID_CONFIG); mermaid.init();" >
+</script>
+
+{% endif %}
+

data/_includes/settings.html

@@ -0,0 +1,101 @@
+<!--
+    See assets/html/settings.html. This file can be included
+    in your own settings page and add your settings to it!
+-->
+
+<!-- So they can be localized, much of this page is filled by JavaScript -->
+<!-- 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>
+    <div>
+        <label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
+        <input type="checkbox" id="minimize_page_hdr"/>
+    </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`, `page_minimize_header_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}`);
+
+    if (elem) {
+        elem.innerText = stringLookup(elem.innerText);
+    }
+}
+
+let fontSizeSelect = document.querySelector("#font_size");
+let fontFamilySelect = document.querySelector("#font_family");
+let pageThemeSelect = document.querySelector("#page_theme");
+let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
+
+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);
+};
+
+minimizeHeaderCheckbox.oninput = () => {
+    Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
+};
+
+pageThemeSelect.value = Settings.getTheme();
+fontFamilySelect.value = Settings.getFontFamily();
+fontSizeSelect.value = Settings.getFontSize();
+minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
+
+</script>

data/_layouts/default.html

@@ -10,10 +10,14 @@ title: Untitled
         {% assign content_start = page.content | slice: 0, 100 %}
         <meta name="description" content={{ page.description | default: content_start | strip_html | jsonify }}/>
         <link rel="stylesheet" href="{{ "assets/style.css" | relative_url }}"/>
-        <link rel="icon" href="{{ page.favicon_path | default: site.favicon_path | default: "assets/img/favicon.svg" | absolute_url }}"/>
+        {% if page.favicon_url_absolute or site.favicon_url_absolute %}
+            <link rel="icon" href="{{ page.favicon_url_absolute | default: site.favicon_url_absolute }}"/>
+        {% else %}
+            <link rel="icon" href="{{ page.favicon_url | default: site.favicon_url | default: "assets/img/favicon.svg" | absolute_url }}"/>
+        {% endif %}
         <script type="module" src="{{ "assets/js/main.mjs" | relative_url }}"></script>
 
-        {% include katex_includes.html %}
+        {% include extern_library_imports.html %}
 
         <title>{{ page.title }} — {{ site.title }}</title>
     </head>

data/_layouts/remark_slideshow.html

@@ -0,0 +1,77 @@
+---
+layout: default
+---
+
+<!-- Defines a https://remarkjs.com/ slideshow -->
+
+{% assign frame_resource_url = 'assets/html/remark_presentation_frame.html.resource' | relative_url %}
+
+<main class="slideshow-mode">
+    <iframe
+            id="presentation_frame"
+            onload="window.presentationFrameLoaded = true;"></iframe>
+</main>
+
+<script defer type="module">
+    import slideshow from "{{ 'assets/js/layout/remark_slideshow.mjs' | relative_url }}";
+
+    let presentationFrame = document.querySelector("#presentation_frame");
+    presentationFrame.src = {{ frame_resource_url | jsonify }};
+    window.presentationFrameLoaded = false;
+
+    let config = {{ page.remark_presentation_config | default: site.remark_presentation_config | jsonify }};
+    config ??= {};
+
+    config.source = {{ page.content | jsonify }};
+
+    // Library imports intended for this page: Forward to the frame.
+    let libraryImports = unescape(`
+        {% capture library_imports %}
+            {% include extern_library_imports.html %}
+        {% endcapture %}
+        {{ library_imports | url_encode | replace: "+", " " }}
+    `);
+
+    // To be called after the presentation iframe loads.
+    window.initSlides = () => {
+        let presentationDoc = presentationFrame.contentDocument;
+        let presentationWin = presentationFrame.contentWindow;
+
+        // Ensure that onload doesn't get called again if the frame reloads.
+        presentationFrame.onload = null;
+
+        // Re-create the document, add the library imports to it.
+        let slideshowHtml = presentationDoc.documentElement.outerHTML;
+
+        presentationDoc.open();
+        presentationDoc.write("<!DOCTYPE html>");
+        presentationDoc.write(slideshowHtml);
+        presentationDoc.write(libraryImports);
+        presentationDoc.write(`
+            <${"script"}>
+            if (window.MERMAID_CONFIG) {
+                window.MERMAID_CONFIG.useMaxWidth = true;
+                window.MERMAID_CONFIG.cloneCssStyles = false;
+                window.MERMAID_CONFIG.flowchart = { useMaxWidth: true };
+            }
+            </${"script"}>
+        `);
+        presentationDoc.close();
+        (async () => {
+            await slideshow.start(presentationFrame.contentWindow, config);
+
+            // Ensure that mermaid has already been run!
+            if (presentationWin.mermaid) {
+                presentationWin.mermaid.init();
+                console.log("Ran mermaid!");
+            }
+        })();
+    };
+
+    if (window.presentationFrameLoaded) {
+        initSlides();
+    }
+    else {
+        presentationFrame.onload = initSlides;
+    }
+</script>

data/_sass/_elements.scss

@@ -117,14 +117,31 @@ input::placeholder {
         }
     }
 
+    table {
+        border-collapse: collapse;
+    }
+
     table td {
         border: 1px solid var(--line-color-light);
+        padding: 3px;
+    }
+
+    table th {
+        padding: 4px;
+        font-weight: bold;
     }
 
     fieldset {
         border-color: var(--line-color-normal);
         margin-bottom: 30px;
     }
+
+    blockquote {
+        border-left: 1px solid var(--line-color-light);
+        margin-left: 10px;
+        padding-left: 20px;
+        color: var(--text-color-faint);
+    }
 }
 
 // Markdown parsers may put `code` elements inside of `pre`

data/_sass/_hljs.scss

@@ -0,0 +1,36 @@
+
+// Created while referencing rouge-github.scss as published
+// at https://github.com/pages-themes/cayman/blob/master/_sass/rouge-github.scss
+
+.hljs {
+    color: var(--syntax-normal-fg);
+    display: block;
+    white-space: pre-wrap;
+
+    // Keywords and literals
+    .hljs-keyword, .hljs-literal {
+        color: var(--syntax-keyword-fg);
+    }
+
+    .hljs-literal {
+        font-weight: bold;
+        color: var(--syntax-name-fg);
+    }
+
+    // Strings
+    .hljs-string {
+        color: var(--syntax-string-fg);
+    }
+
+    // Numbers
+    .hljs-number {
+        color: var(--syntax-number-fg);
+    }
+
+
+    // Comments
+    .hljs-comment {
+        color: var(--syntax-comment-fg);
+        font-style: italic;
+    }
+}

data/_sass/_layout.scss

@@ -154,6 +154,21 @@ nav#post_next_prev {
     flex-grow: 1;
 }
 
+main.slideshow-mode {
+    position: absolute;
+    display: flex;
+
+    left: 0;
+    right: 0;
+    top: var(--header-effective-height);
+    bottom: 0;
+
+    iframe {
+        flex-grow: 1;
+        border: none;
+    }
+}
+
 // On mobile devices,
 @media screen and (max-width: $site-content-preferred-width) {
     .main-container {

data/_sass/_nav.scss

@@ -41,6 +41,14 @@ body > header {
     }
 }
 
+:root {
+    --header-effective-height: var(--header-height);
+}
+
+:root.minimizedNavHeader {
+    --header-effective-height: 0px;
+}
+
 :root.minimizedNavHeader body > header {
     > *:not(#toggle_sidebar_btn) {
         opacity: 0;
@@ -48,6 +56,11 @@ body > header {
         transition: opacity 0.5s ease;
     }
 
+    #toggle_sidebar_btn {
+        padding-left: 4px;
+        width: var(--header-height);
+    }
+
     word-wrap: break-word;
     width: var(--header-height);
     padding: 0;
@@ -57,7 +70,7 @@ body > header {
 
     // The minimizedNavHeader class is added after page load. Make the
     // transition less jarring.
-    animation: fade-in 0.5s ease 1;
+    animation: grow-in 0.5s ease 1;
 }
 
 :root.minimizedNavHeader.hasOpenSidebar body > header {

data/_sass/hematite.scss

@@ -12,3 +12,4 @@
 @import "_layout";
 @import "_elements";
 @import "_rogue";
+@import "_hljs";

data/assets/html/remark_presentation_frame.html.resource

@@ -0,0 +1,69 @@
+---
+---
+<!-- Using a .html.resource file to prevent Jekyll from changing the extension -->
+
+<!DOCTYPE html>
+<html class="lightTheme" lang="{{ page.lang | default: site.lang | default: "en-US" }}">
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+        <meta charset="utf-8"/>
+        <!-- Content of remark presentation iframe. Based on https://github.com/gnab/remark/wiki#getting-started -->
+        <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=Ubuntu+Mono:400,700,400italic);
+
+body { font-family: 'Droid Serif'; }
+h1, h2, h3 {
+    font-family: 'Yanone Kaffeesatz';
+    font-weight: normal;
+}
+
+.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+
+/* Show hidden slides to allow preprocessors (e.g. mermaid) to
+   properly account for container size.
+   */
+@media screen {
+    .remark-slide-container:not(.remark-visible) {
+        display: block;
+        box-shadow: none;
+        z-index: -999;
+        visibility: hidden;
+    }
+}
+
+nav {
+    display: flex;
+
+    position: absolute;
+    z-index: 10000;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.8;
+}
+
+nav:hover, nav:focus-within {
+    opacity: 1;
+}
+
+@media print {
+    nav {
+        display: none;
+    }
+
+    /* Prevent parts of slides from being cut off on Firefox */
+    .remark-slide-scaler {
+        transform: none !important;
+    }
+}
+
+        </style>
+        <link rel="stylesheet" href="{{ 'assets/style_only_syntax.css' | relative_url }}" />
+    </head>
+    <body>
+    </body>
+    <script src="{{ 'assets/plugin/remark_presenter/remark.min.js' | relative_url }}"></script>
+</html>

data/assets/html/settings.html

@@ -6,98 +6,7 @@ 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>
-    <div>
-        <label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
-        <input type="checkbox" id="minimize_page_hdr"/>
-</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`, `page_minimize_header_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");
-let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
-
-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);
-};
-
-minimizeHeaderCheckbox.oninput = () => {
-    Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
-};
-
-pageThemeSelect.value = Settings.getTheme();
-fontFamilySelect.value = Settings.getFontFamily();
-fontSizeSelect.value = Settings.getFontSize();
-minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
-
-</script>
+{% include settings.html %}

data/assets/img/favicon-alternate.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+   <defs>
+      <filter id="filter7674" x="-.25" y="-.25" width="1.5" height="1.5" color-interpolation-filters="sRGB">
+         <feGaussianBlur stdDeviation="12.0308382"/>
+      </filter>
+   </defs>
+   <g>
+      <path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#9300cf" filter="url(#filter7674)" transform="scale(1.01) rotate(30deg) translate(2, 10)" transform-origin="center"/>
+      <path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#f61616"/>
+   </g>
+</svg>

data/assets/js/Settings.mjs

@@ -49,7 +49,8 @@ class Settings {
     }
 
     getHeaderMinimized() {
-        let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_) ?? {{ site.hematite.minimize_header | default: "false" | jsonify }};
+        let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_)
+            ?? {{ site.hematite.user_config.minimize_header | default: site.hematite.minimize_header | default: "false" | jsonify }};
         return minimizedStr == "true";
     }
 
@@ -163,9 +164,10 @@ class Settings {
 
                 document.documentElement.classList.add("minimizedNavHeader");
 
-                // Animate the header.
                 if (header) {
-                    await AnimationUtil.expandInVert(header, THEME_TRANSITION_TIME / 2);
+                    // Re-show the header
+                    // Rely on a CSS animation for animating the header's return.
+                    await AnimationUtil.expandInVert(header, 0);
                 }
             })();
         }

data/assets/js/UrlHelper.mjs

@@ -62,6 +62,22 @@ var UrlHelper = {
         return url.substring(hashLoc, argsStart);
     },
 
+    // Replace an existing hash with a [newHash]. The new hash
+    //
+    withReplacedHash(url, newHash) {
+        let hashLoc = url.lastIndexOf('#');
+
+        if ((newHash + "").charAt(0) != '#') {
+            newHash = `#${newHash}`;
+        }
+
+        if (hashLoc == -1) {
+            return url + newHash;
+        }
+
+        return url.substring(0, hashLoc) + newHash;
+    },
+
     /// Remove metadata encoded in the given URL and returns
     /// it.
     /// If [url] is undefined, uses the page's URL.
@@ -115,4 +131,8 @@ assertEq("Trimming metadata",
     "https://example.com/"
 );
 
+assertEq("Replacing a hash",
+    UrlHelper.withReplacedHash("https://example.com/#foo", "bar"),
+    "https://example.com/#bar");
+
 export default UrlHelper;

data/assets/js/dropdownExpander.mjs

@@ -51,7 +51,8 @@ function expandBasedOnURL() {
     const doExpansion = (url) => {
         // Determine the hash.
         let hash = UrlHelper.getPageHash();
-        if (hash == null) {
+        let isInvalid = hash && /^\#\d+/.exec(hash);
+        if (hash == null || isInvalid) {
             return;
         }