hematite 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 1db52ef0febaa2a32beb6313442243f90416063b26eb923c30edbfe8dc3f831b
+  data.tar.gz: 18033f6c9e0d8ca6e76fa00982ab3be14995f255fa64ed68fb14b62767f6cef9
+SHA512:
+  metadata.gz: 5e89fe9507664d740d9ce0e0f6c23b4f417cb73606676fb646929df4fa712ee88cf4dd86d6bbd9edac6c758f7f2546567743597b87bcf05435e8f4169c668b2e
+  data.tar.gz: 7f694307b34129302f6e1154d855e444b54bab2f24305243d292b87047dca1e34ca3f2db86847c91047b4f2847679f2d28b8c71ceb1f3b23e54b870b421c6f96

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Henry Heino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,58 @@
+# Hematite
+
+![The dark variant of the Hematite Theme, showing a calendar](./screenshot.png)
+
+A work-in-progress theme intended to be used for course websites.
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "hematite"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: hematite
+```
+
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install hematite
+
+
+
+## Usage
+
+Further documentation for this is coming! For now, [minimal documentation](https://personalizedrefrigerator.github.io/jekyll-hematite-theme/) can be found on the theme's homepage.
+
+## Contributing
+
+Bug reports and pull requests are welcome on [GitHub](https://github.com/personalizedrefrigerator/jekyll-hematite-theme). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+```md
+TODO: Update this. This is still the default set of instructions.
+```
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+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.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_config.yml

@@ -0,0 +1,33 @@
+
+# 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
+permalink: pretty
+
+hematite:
+  auto_invert_imgs: true
+
+  # Date options are as specified here:
+  # https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+  date_format:
+    # Short weekday (e.g. Thu for Thursday)
+    # weekday: short
+    # Long weekday (e.g. Monday)
+    weekday: long
+
+    # Use two digits for the month and day
+    month: 2-digit
+    day: 2-digit
+
+    # The full year
+    year: numeric
+
+  sidebar:
+    footer_html: 'This page was made with the Hematite Theme. <a href="https://github.com/personalizedrefrigerator/jekyll-hematite-theme">Contribute on GitHub</a>'
+
+

data/_data/strings/en.yml

@@ -0,0 +1,32 @@
+# See also assets/js/string_data.mjs
+
+open_sidebar: 'Open sidebar'
+close_sidebar: 'Close sidebar'
+search_site_placeholder: 'Find in site...'
+search_site_action: 'Search for "{0}"'
+search_disabled_no_content: 'Missing text to search for!'
+search_error: 'Error searching: {0}'
+hide_search_results_action: 'Hide search results'
+found_search_results: 'Found {0} result(s):'
+copy_link_to_header: 'Copy link to section: "{0}"'
+link_to_header_copied_alert: 'Link to "{0}" copied!'
+sidebar_opened_announcement: 'Sidebar opened!'
+sidebar_closed_announcement: 'Sidebar closed!'
+
+invalid_date: 'Invalid date: {0}'
+calendar_prev_btn: 'Previous {0}'
+calendar_next_btn: 'Next {0}'
+calendar_mode_week: 'Week'
+calendar_mode_day: 'Day'
+calendar_mode_month: 'Month'
+calendar_choose_view_mode: 'Change calendar mode: '
+calendar_went_next: 'Showing next {0}'
+calendar_went_prev: 'Showing previous {0}'
+calendar_changed_mode: 'Switched view mode to {0}'
+calendar_header_date_range: '{0} through {1}'
+
+tags: 'Tags'
+untitled: 'Untitled'
+all_tags_header: 'All Tags'
+prev_post: '← {0}'
+next_post: '{0} →'

data/_data/strings/es.yml

@@ -0,0 +1,33 @@
+
+
+open_sidebar: 'Abre Navegación'
+close_sidebar: 'Cierre Navegación'
+search_site_placeholder: 'Encuentre en el sitio...'
+search_site_action: 'Busque «{0}»'
+search_disabled_no_content: 'No hay texto con que puede buscar.'
+search_error: 'Fue un error: «{0}»'
+hide_search_results_action: 'Esconder resultados'
+found_search_results: 'Encontrado {0} cosa(s):'
+copy_link_to_header: 'Copie enlace de «{0}»'
+link_to_header_copied_alert: '¡El enlace por «{0}» fue copiado!'
+sidebar_opened_announcement: 'Navegación fue abierto.'
+sidebar_closed_announcement: 'Navegación fue cerrado.'
+
+invalid_date: 'Inválida fecha: {0}'
+calendar_prev_btn: 'Anterior {0}'
+calendar_next_btn: 'Próxima {0}'
+calendar_mode_week: 'Semana'
+calendar_mode_day: 'Día'
+calendar_mode_month: 'Mes'
+calendar_choose_view_mode: 'Cambia el modo del calendario: '
+# TODO: Properly handle m/f articles here.
+calendar_went_next: 'Mostrando la próxima {0}'
+calendar_went_prev: 'Mostrando la próxima {0}'
+calendar_changed_mode: 'Modo fue cambiado a {0}'
+calendar_header_date_range: '{0} hasta {1}'
+
+tags: 'Etiquetas'
+untitled: 'No titulo'
+all_tags_header: 'Todas las etiquetas'
+prev_post: '← {0}'
+next_post: '{0} →'

data/_includes/img/hamburger_menu.svg

@@ -0,0 +1,78 @@
+<svg
+   viewBox="0 0 64.0 64.0"
+   version="1.1"
+   id="hamburger_menu_root"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <style>
+#hamburger_menu_root {
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+
+    transition: transform 0.4s ease;
+}
+
+#hamburger_menu_root .rect {
+    opacity:1;
+    fill: var(--primary-text-color);
+    cursor: pointer;
+
+    transform: translate(0, 0);
+    transition: transform 0.5s ease;
+}
+
+#hamburger_menu_root #top_rect {
+    transform-origin: 10px 10px;
+    --final-transform: translate(10px, 0px) rotate(45deg) scale(1.2, 0.6);
+}
+
+#hamburger_menu_root #mid_rect {
+    transform-origin: 5px 32px;
+    --final-transform: translate(7px, 24px) rotate(-45deg) scale(1.2, 0.6);
+}
+
+#hamburger_menu_root #bot_rect {
+    transform-origin: 55px 56px;
+
+    --final-transform: translate(-5px, 0px) rotate(48deg) scale(0, 0);
+}
+
+#hamburger_menu_root.close_btn .rect,
+        .close_btn > #hamburger_menu_root .rect {
+    transform: var(--final-transform);
+}
+
+#hamburger_menu_root:hover,
+        *:focus-visible > #hamburger_menu_root {
+    transform: scale(1.1);
+}
+  </style>
+  <g
+     id="layer1">
+    <rect
+       id="top_rect"
+       width="43"
+       height="9"
+       x="10"
+       y="10"
+       ry="4.5"
+       class="rect" />
+    <rect
+       id="mid_rect"
+       width="43"
+       height="9"
+       x="10"
+       y="26.391266"
+       ry="4.5"
+       class="rect" />
+    <rect
+       id="bot_rect"
+       width="43"
+       height="9"
+       x="10"
+       y="44"
+       ry="4.5"
+       class="rect " />
+  </g>
+</svg>

data/_includes/img/search_icon.svg

@@ -0,0 +1,99 @@
+<!-- Should be embedded directly into an HTML file -->
+<svg
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="search_icon_svg">
+  <style>
+#search_icon_svg {
+    width: 32px;
+    height: 32px;
+}
+
+#search_icon_svg .handle {
+    fill: var(--primary-text-color);
+    stroke: var(--primary-text-color);
+    stroke-width: 1;
+    transform-origin: top left;
+
+    transform: rotate(40deg);
+    transition: transform 0.3s ease;
+}
+
+#search_icon_svg.close_search .handle,
+        .close_search > #search_icon_svg .handle{
+    transform: rotate(0) scale(1.5, 1);
+}
+
+#search_icon_svg #handle_container {
+    transform: translate(38px, 33px);
+    transition: transform 0.4s ease;
+}
+
+#search_icon_svg.close_search #handle_container,
+        .close_search > #search_icon_svg #handle_container {
+    transform: translate(5px, 28px);
+}
+
+#search_icon_svg .glass {
+    fill: rgba(255, 255, 255, 0);
+    transition: fill 0.2s ease;
+}
+
+#search_icon_svg:hover .glass,
+        :focus-visible > #search_icon_svg .glass {
+    fill: rgba(124, 125, 125, 0.1);
+}
+
+#search_icon_svg.close_search .glass,
+        .close_search > #search_icon_svg .glass {
+    fill: rgba(0, 0, 0, 0);
+}
+
+#search_icon_svg .rim {
+    fill: none;
+    stroke: var(--primary-text-color);
+    stroke-width: 7;
+
+    transform-origin: center;
+    transition: transform 0.5s ease;
+}
+
+#search_icon_svg.close_search .rim,
+        .close_search > #search_icon_svg .rim {
+    transform: scale(1, 0);
+}
+
+#search_icon_svg {
+    transform: scale(0.9);
+    transition: transform 0.2s ease;
+}
+
+:focus-visible > #search_icon_svg,
+        :not([disabled]) > #search_icon_svg:hover {
+    transform: scale(1);
+}
+</style>
+  <g id="layer0">
+    <circle
+       class="glass"
+       cx="25"
+       cy="25"
+       r="18" />
+  </g>
+  <g id="layer1">
+    <circle
+       class="rim"
+       cx="25"
+       cy="25"
+       r="18" />
+    <g id="handle_container">
+      <rect
+        class="handle"
+        width="34"
+        height="7"
+        x="0"
+        y="0"
+        ry="3.5" />
+   </g>
+  </g>
+</svg>

data/_includes/katex_includes.html

@@ -0,0 +1,26 @@
+
+<!--
+    Include KaTeX resources/scripts
+    KaTeX can be enabled with page.katex.
+-->
+
+{% if page.katex %}
+
+<!-- See the releases tab on https://github.com/KaTeX/KaTeX  -->
+<link
+        rel="stylesheet"
+        href="{{ "assets/plugin/katex/katex.min.css" | relative_url }}"
+        />
+
+<script
+        defer
+        src="{{ "assets/plugin/katex/katex.min.js" | relative_url }}">
+</script>
+
+<script
+        defer
+        src="{{ "assets/plugin/katex/contrib/auto-render.min.js" | relative_url }}"
+        onload="renderMathInElement(document.body);">
+</script>
+
+{% endif %}

data/_includes/nav/page_navigation.html

@@ -0,0 +1,10 @@
+<header>
+    <!-- button title/alt text is set by JS -->
+    <button class="toggle_sidebar" id="toggle_sidebar_btn">
+        {% include img/hamburger_menu.svg %}
+    </button>
+    <a href="{{ "/" | absolute_url }}">{{ site.title | default "Untitled Site" }}</a>
+    <div class="spacer"></div>
+</header>
+
+{% include nav/sidebar.html %}

data/_includes/nav/pages_list.html

@@ -0,0 +1,17 @@
+
+{% assign page_list = site.html_pages | sort: "sidebarindex" %}
+{% for pl_sidebar_page in page_list %}
+    {% comment %}
+        Only include pages that have requested to be in the sidebar
+    {% endcomment %}
+    {% if pl_sidebar_page.sidebarindex %}
+        <!-- Page: {{ pl_sidebar_page.sidebarindex }} -->
+        {% assign pl_page_url = pl_sidebar_page.url %}
+        {% assign pl_page_title = pl_sidebar_page.title %}
+        {% include nav/pinned_page.html %}
+    {% endif %}
+{% endfor %}
+
+<!--
+    vim: nocin nosi
+-->

data/_includes/nav/pinned_page.html

@@ -0,0 +1,12 @@
+{% if pl_page_url == page.url %}
+    {% assign clss = "current_page" %}
+{% else %}
+    {% assign clss = "" %}
+{% endif %}
+{% if pl_page_title != "" %}
+<li class="{{ clss }}">
+    <a href="{{ pl_page_url | absolute_url }}">
+        {{ pl_page_title }}
+    </a>
+</li>
+{% endif %}

data/_includes/nav/sidebar.html

@@ -0,0 +1,25 @@
+<nav class="sidebar" id="sidebar">
+    <div class="search-container">
+        <!-- input placeholder and alt text should be set with JS -->
+        <input id="search_input" type="search"/>
+        <button class="search-btn" id="search_btn" aria-live="polite">
+            {% include img/search_icon.svg %}
+        </button>
+    </div>
+
+    <div class="search-results-container" aria-live="polite">
+        <ul class="search-results">
+
+        </ul>
+    </div>
+
+    <ul class="pinned-pages">
+        {% include nav/pages_list.html %}
+    </ul>
+
+    <footer>
+        {% if site.hematite.sidebar.footer_html %}
+            {{ site.hematite.sidebar.footer_html }}
+        {% endif %}
+    </footer>
+</nav>

data/_layouts/calendar.html

@@ -0,0 +1,36 @@
+---
+layout: default
+---
+
+<h1>{{ page.title }}</h1>
+<h2 id="calendar_title"></h2>
+<div id="calendar_display" class='visual-calendar'></div>
+
+<main>
+{{ content }}
+</main>
+
+<script type="module">
+    import calendarSetup from "{{ 'assets/js/layout/calendar.mjs' | relative_url }}";
+    calendarSetup(
+        document.querySelector("main"),
+        document.querySelector("#calendar_display"),
+        {% if page.show_calendar_title %}
+        document.querySelector("#calendar_title"),
+        {% else %}
+        null,
+        {% endif %}
+        {% if page.include_posts %}
+        true
+        {% else %}
+        false
+        {% endif %}
+    );
+
+    // Remove the title if we're not using it — it can mess with
+    // screen readers
+    {% if page.show_calendar_title %}
+    {% else %}
+    document.querySelector("#calendar_title").remove();
+    {% endif %}
+</script>

data/_layouts/default.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html 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"/>
+        {% 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 }}"/>
+        <script type="module" src="{{ "assets/js/main.mjs" | relative_url }}"></script>
+
+        {% include katex_includes.html %}
+
+        <title>{{ page.title }} — {{ site.title }}</title>
+    </head>
+    <body>
+        {% include nav/page_navigation.html %}
+
+        <div class="main-container">
+            {% if page.layout == "default" %}
+            <main>
+            {% endif %}
+                {{ content }}
+            {% if page.layout == "default" %}
+            </main>
+            {% endif %}
+        </div>
+
+    </body>
+</html>
+

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,42 @@
+---
+layout: default
+---
+
+<h1>{{ page.title }}</h1>
+
+<nav id="post_next_prev">
+</nav>
+<p id="post_date" class="post-assigned-date"></p>
+
+<main>
+{{ content }}
+</main>
+
+<div class="end-of-post-space"></div>
+
+<hr/>
+<nav id="post_tags">
+    <h1 id="tag_header_lbl"></h1>
+</nav>
+
+<script type="module">
+    import initPost from "{{ "assets/js/layout/post.mjs" | relative_url }}";
+    let pageData = {
+    {% if page.next %}
+        next: {
+            url: unescape("{{ page.next.url | relative_url | url_encode }}".replaceAll(/[+]/g, "%20")),
+            title: "{{ page.next.title | strip_html }}",
+        },
+    {% endif %}
+    {% if page.previous %}
+        previous: {
+            url: unescape("{{ page.previous.url | relative_url | url_encode }}".replaceAll(/[+]/g, "%20")),
+            title: "{{ page.previous.title | strip_html }}",
+        },
+    {% endif %}
+        tags: {{ page.tags | jsonify }},
+        date: {{ page.date | date_to_xmlschema | jsonify }}
+    };
+
+    initPost(pageData);
+</script>

data/_sass/_animations.scss

@@ -0,0 +1,16 @@
+// Definitions of animation keyframes
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes grow-in {
+    0% { transform: scale(1, 0); transform-origin: bottom center; }
+    100% { transform: scale(1, 1); transform-origin: bottom center; }
+}
+
+@keyframes shrink-out {
+    0% { transform: scale(1, 1); transform-origin: bottom center; }
+    100% { transform: scale(1, 0); transform-origin: bottom center; }
+}

data/_sass/_calendar.scss

@@ -0,0 +1,63 @@
+@charset "utf-8";
+
+.calendar-content {
+    display: grid;
+    grid-auto-rows: auto;
+
+    &.month-display {
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    &.week-display {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (max-width: 600px) {
+        &.week-display {
+            grid-template-columns: 1fr;
+        }
+
+        &.month-display {
+            overflow-x: scroll;
+        }
+    }
+}
+
+.visual-calendar > .controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    @media print {
+        display: none;
+    }
+}
+
+.calendar-card {
+    border: 1px solid var(--line-color-light);
+    padding-left: 5px;
+    padding-right: 5px;
+
+    > a {
+        font-size: 12pt;
+        text-align: center;
+        display: block;
+    }
+
+    > ul {
+        list-style: none;
+        padding: 0;
+
+        > :nth-child(2n + 1) {
+            background-color: var(--primary-background-color);
+        }
+
+        > :nth-child(2n) {
+            background-color: var(--secondary-background-color);
+        }
+    }
+
+    &.today {
+        box-shadow: inset 1px -2px 3px var(--shadow-color-light);
+    }
+}