A pile of code changes

.gitignore

@@ -1 +1,3 @@
 public/
+.deploy_config
+static/processed_images

config.toml

@@ -1,12 +1,12 @@
-# The URL the site will be built for
-base_url = "https://lfcode.ca"
+base_url = "https://jade.fyi"
 
-# Whether to automatically compile all Sass files in the sass directory
 compile_sass = true
 
-# Whether to build a search index to be used later on by a JavaScript library
 build_search_index = false
 
+feed_filename = "rss.xml"
+generate_feed = true
+
 title = "jade's website"
 description = "computers i guess"
 
@@ -19,3 +19,4 @@ highlight_code = true
 # Put all your custom variables here
 copyright = "(c) 2021 jade CC-BY-SA"
 dtformat = "%B %d, %Y"
+debug = false

content/_index.md

@@ -0,0 +1,3 @@
++++
+sort_by = "date"
++++

deploy.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+if [[ ! -e .deploy_config ]]; then
+	cat >&2 <<-EOF
+	Please create a .deploy_config with content:
+	DEPLOY_HOST=[the host you rsync to]
+	DEPLOY_DIR=[the directory you rsync to]
+	# optional
+	EXTRA_OPTS=[extra rsync options you want to use]
+	EOF
+
+	exit 1
+fi
+
+source .deploy_config
+# trailing slash: copy contents of directory into destination
+rsync --verbose --human-readable --recursive --links --times --new-compress --delete-delay ${EXTRA_OPTS} public/ "${DEPLOY_HOST}:${DEPLOY_DIR}"

sass/main.scss

@@ -1,24 +1,18 @@
 $text: #ddd;
 $bg: #540362;
+$lowerbg1: darken($bg, 5);
+$higherbg1: lighten($bg, 10);
 $lower1: darken($text, 18);
+$lower2: darken($text, 30);
 
 @import 'fonts';
 
 @mixin reset-list {
-    margin: 0;
-    padding: 0;
-}
-
-@mixin horizontal-list {
-    @include reset-list;
-
     li {
         display: inline-block;
-        margin: {
-            left: -2px;
-            right: 2em;
-        }
     }
+    margin: 0;
+    padding: 0;
 }
 
 @mixin flex-center {
@@ -27,16 +21,16 @@ $lower1: darken($text, 18);
     justify-content: center;
 }
 
-@mixin chonky-link-underline {
-    a {
-        border-bottom: solid 2px;
+@mixin chonky-link-underline($elType: "a", $thickness: 2px) {
+    #{$elType} {
+        border-bottom: solid $thickness;
         padding-bottom: 0px;
         border-radius: 1px;
     }
 }
 
-@mixin a-normal {
-    a {
+@mixin a-normal($class: "") {
+    a#{$class} {
         color: $text;
         text-decoration: none;
     }
@@ -47,7 +41,7 @@ pre {
     margin: .5em 0;
     border-radius: .3em;
     overflow: auto;
-    background-color: darken($bg, 5.0);
+    background-color: $lowerbg1;
 
     code {
         font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
@@ -58,44 +52,155 @@ body {
     font-family: 'Source Sans 3', 'sans-serif';
     background-color: $bg;
     color: $text;
-    font-size: 1.1em;
+    font-size: 1.1rem;
+    line-height: 1.35;
+
+    margin: {
+        left: 0.75rem;
+        right: 0.75rem;
+    }
 }
 
-nav {
+a {
+    color: #f778e3;
+    text-decoration: none;
+}
+
+// navigation between pages at the end of articles
+nav.article-nav {
+    margin-top: 5rem;
+    margin-bottom: 2rem;
+
+    .disabled-link {
+        color: $lower2;
+        cursor: default;
+    }
+
+    .nav-label {
+        color: $lower1;
+        font-size: 1rem;
+        user-select: none;
+    }
+
+    .older {
+        text-align: right;
+    }
+
+    ul {
+        @include reset-list();
+        @include chonky-link-underline($thickness: 1px);
+        @include chonky-link-underline($elType: ".disabled-link", $thickness: 1px);
+        @include a-normal();
+        display: flex;
+        justify-content: space-between;
+        font-size: 1.4rem;
+        font-weight: 400;
+    }
+}
+
+// navigation at the top of the page
+nav.main-nav {
     @include flex-center;
 
     ul {
-        @include horizontal-list();
+        @include reset-list();
         @include chonky-link-underline();
         @include a-normal();
+        font-size: 1.4rem;
         font-weight: 700;
+
+        li {
+            margin: {
+                left: -2px;
+                right: 2rem;
+                bottom: .25rem;
+            }
+        }
+    }
+
+    margin: {
+        bottom: 2rem;
+        top: 2rem;
     }
 }
 
-article {
-    @include a-normal();
-    h2 {
-        margin-block-end: -0.2em;
+header.page-header {
+    margin: {
+        bottom: 1em;
     }
+}
 
-    // the spans below individual page titles on the home page
+main {
+    // the details below individual page titles on the home page
     .detail span {
         font-weight: 600;
         font-size: 0.8rem;
         color: $lower1;
     }
 
+    display: block;
+    margin: 0 auto;
+    max-width: 860px;
+    
+    .detail.page-detail span {
+        font-size: 1rem;
+    }
+
     .detail span:first-child::after {
         content: " - ";
     }
 }
 
+article.homepage-article {
+    @include a-normal($class: ".homepage-link");
+}
+
 footer {
     @include flex-center;
 }
 
-main {
-    display: block;
-    margin: 0 auto;
-    max-width: 860px;
+// stuff on pages
+
+:not(pre) > code {
+    // add background with rounded corners
+    background: $lowerbg1;
+    padding: 0.2rem;
+    border-radius: 0.3rem;
+
+    // wrap words instead of causing scrolling
+    word-wrap: break-word;
+}
+
+img {
+    // make the alt text extremely obnoxious and harder to miss if the image
+    // is missing
+    font-size: 3rem;
+    color: #0f0;
+}
+
+div.image {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+
+    img {
+        border-radius: .3rem;
+    }
+}
+
+blockquote {
+    border-left: solid $higherbg1;
+    border-left-width: 0.5rem;
+    padding-left: 1rem;
+    margin-left: 1.5rem;
+}
+
+/* headings */
+
+h1 {
+    line-height: 1.10;
+}
+
+h1, h2 {
+    margin-block-end: 0.1rem;
 }

static/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

templates/base.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ config.description }}">
+
+    <title>
+        {{ config.title }}
+    </title>
+
+    <link type="text/css" rel="stylesheet" href="{{ get_url(path="css/normalize.css", cachebust=true) | safe }}">
+    <link type="text/css" rel="stylesheet" href="{{ get_url(path="/main.css", cachebust=true) | safe }}">
+</head>
+<body>
+    <header>
+        {# linear row of page links #}
+        <nav class="main-nav">
+            <ul>
+                <li>
+                    <a href="/">{{ config.title }}</a>
+                </li>{#
+                #}<li>
+                    <a href="/about">About</a>
+                </li>{#
+                #}<li>
+                    <a href="https://github.com/lf-">GitHub</a>
+                </li>
+            </ul>
+        </nav>
+    </header>
+    <main role="main">
+        {% block content %}
+        <h1 style="color: #f00">You should not see this.</h1>
+        {% endblock content %}
+    </main>
+
+    <footer>
+        <p>{{ config.extra.copyright }}</p>
+    </footer>
+</body>
+</html>

templates/index.html

@@ -1,47 +1,20 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% extends "base.html" %}
 
-    <title>
-        {{ config.title }}
-    </title>
+{% block content %}
+{% for page in section.pages %}
+    {% if page.extra.isPage %}
+    {% continue %}
+    {% endif %}
+    <article class="homepage-article">
+        <a class="homepage-link" href="{{ page.permalink }}"><h2>{{ page.title }}</h2></a>
+        <div class="detail">
+            <span>{{ page.date | date(format=config.extra.dtformat) }}</span>
+            <span>{{ page.reading_time }} minute read</span>
+        </div>
+    </article>
+{% endfor %}
 
-    <link type="text/css" rel="stylesheet" href="{{ get_url(path="/main.css", cachebust=true) | safe }}">
-</head>
-<body>
-    <header>
-        {# linear row of page links #}
-        <nav class="main-nav">
-            <ul role="navigation">
-                <li>
-                    <a href="/">{{ config.title }}</a>
-                </li>{#
-                #}<li>
-                    <a href="/about">About</a>
-                </li>{#
-                #}<li>
-                    <a href="https://github.com/lf-">GitHub</a>
-                </li>
-            </ul>
-        </nav>
-    </header>
-    <main role="main">
-        {% for page in section.pages %}
-        <article>
-            <a href="{{ page.permalink }}"><h2>{{ page.title }}</h2></a>
-            <div class="detail">
-                <span>{{ page.date | date(format=config.extra.dtformat) }}</span>
-                <span>{{ page.reading_time }} minute read</span>
-            </div>
-        </article>
-        {% endfor %}
-        <pre><code>{{ __tera_context | escape | safe }}</code></pre>
-    </main>
-
-    <footer>
-        <p>{{ config.extra.copyright }}</p>
-    </footer>
-</body>
-</html>
+{% if config.extra.debug %}
+    <pre><code>{{ __tera_context | escape | safe }}</code></pre>
+{% endif %}
+{% endblock content %}

templates/page.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+
+{% block content %}
+<header class="page-header">
+<h1>{{ page.title }}</h1>
+
+{% if not page.extra.isPage %}
+<div class="detail page-detail">
+    <span>{{ page.date | date(format=config.extra.dtformat) }}</span>
+    <span>{{ page.reading_time }} minute read</span>
+</div>
+{% endif %}
+</header>
+
+{{ page.content | safe }}
+
+{% if config.extra.debug %}
+    <pre><code>{{ __tera_context | escape | safe }}</code></pre>
+{% endif %}
+
+{# back/forward buttons #}
+{% if not page.extra.isPage %}
+<nav class="article-nav">
+    <ul>
+        <li>
+            <div id="newer-post" class="nav-label">Newer post</div>
+        {% if page.later %}
+            <a href="{{ page.later.permalink }}"
+                aria-labelledby="newer-post">← {{ page.later.title }}</a>
+        {% else %}
+            <span class="disabled-link">←</span>
+        {% endif %}
+        </li>{#
+
+        #}<li class="older">
+            <div id="older-post" class="nav-label">Older post</div>
+        {% if page.earlier %}
+            <a href="{{ page.earlier.permalink }}"
+                aria-labelledby="older-post">{{ page.earlier.title }} →</a>
+        {% else %}
+            <span class="disabled-link">←</span>
+        {% endif %}
+        </li>
+    </ul>
+</nav>
+{% endif %}
+
+
+{% endblock content %}

templates/shortcodes/image.html

@@ -0,0 +1,20 @@
+{% set name_sanitized = name | replace(from=".", to="-") | replace(from="/", to="-") %}
+{% set image_id = "image" ~ name_sanitized %}
+{% set alt = alt | default(value=body) %}
+{% set height = height | default(value=600) %}
+<div class="image">
+    <a href="{{ get_url(path="images/" ~ name) }}">
+    <img src="{{ resize_image(path="../static/images/" ~ name, width=800, height=height, op="fit") }}"
+        alt="{{ alt }}"
+        title="{{ alt }}"
+    {% if label %}
+        aria-describedby="{{ image_id }}"
+    {% endif %}
+    >
+    </a>
+    {% if label %}
+    <span class="image-label" id="{{ image_id }}">
+        {{ label }}
+    </span>
+    {% endif %}
+</div>