Re-enable syntax highlighting in light mode

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>

assets/js/bergamot-helpers.js

@@ -42,7 +42,7 @@ const ensureObjectLanguage = () => {
     }
     return window.Bergamot.ObjectLanguage;
 }
-const parseString = (str) => {
+const parseBergamotObjectLanguage = (str) => {
     if (!(str in parsingPromiseResolvers)) {
         parsingPromiseResolvers[str] = [];
     }
@@ -54,20 +54,21 @@ const parseString = (str) => {
 }
 
 window.Bergamot = {};
-window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderPreset, input) => {
+window.Bergamot.run = (inputGroup, nodeId, inputModes, inputPrompt, rules, renderPreset, input) => {
     var app = Elm.Main.init({
         node: document.getElementById(nodeId),
         flags: {
-            inputModes: {
+            inputModes,
-                "Languge Term": { "custom": "Language Term" },
-                "Query": "query"
-            },
             renderRules: window.Bergamot.renderPresets[renderPreset],
             rules, input
         }
     });
     app.ports.convertInput.subscribe(async ({ mode, input }) => {
-        let query = await parseString(input);
+        if (!(mode in window.Bergamot.inputModes)) {
+            app.ports.receiveConverted.send({ input, result: { error: "Improperly configured desugaring function (this is the website developer's fault)" } });
+        }
+
+        let query = await (window.Bergamot.inputModes[mode])(input);
         if (query !== null) {
             query = inputPrompt.replace("TERM", query);
             app.ports.receiveConverted.send({ input, result: { query } });
@@ -80,7 +81,7 @@ window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderPreset, inp
 };
 window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
     const preset = window.Bergamot.presets[presetName];
-    window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, preset.renderPreset, preset.query || "");
+    window.Bergamot.run(inputGroup, nodeId, preset.inputModes, preset.inputPrompt, preset.rules, preset.renderPreset, preset.query || "");
 };
 window.Bergamot.close = (inputGroup, nodeId) => {
     if (!(nodeId in loadedWidgets)) return;
@@ -94,5 +95,8 @@ window.Bergamot.close = (inputGroup, nodeId) => {
     delete loadedWidgets[nodeId];
     setRunning(inputGroup, false);
 }
+window.Bergamot.inputModes = {
+    "Bergamot Object Language": parseBergamotObjectLanguage
+};
 window.Bergamot.presets = {};
 window.Bergamot.renderPresets = {};

assets/scss/code.scss

@@ -15,10 +15,10 @@
 }
 
 code {
-  font-family: $font-code;
+    font-family: $font-code;
-  @include var(background-color, code-color);
+    @include var(background-color, code-color);
-  border: $code-border;
+    border: $code-border;
-  padding: 0 0.25rem 0 0.25rem;
+    padding: 0 0.25rem 0 0.25rem;
 }
 
 pre code {
@@ -40,12 +40,12 @@ pre code {
         margin-bottom: 1rem;
 
         a {
-          color: inherit;
+            color: inherit;
-          border: none;
+            border: none;
 
-          &:hover, &:focus {
+            &:hover, &:focus {
-            background-color: rgba($primary-color, 0.25);
+                background-color: rgba($primary-color, 0.25);
-          }
+            }
         }
 
         td {
@@ -104,12 +104,10 @@ pre code {
 }
 
 .kr, .kd, .k {
-    font-weight: bold;
     @include var(color, code-keyword-color);
 }
 
 .kt {
-    font-weight: bold;
     @include var(color, code-type-color);
 }
 

assets/scss/fonts.scss

@@ -0,0 +1,45 @@
+@mixin font-inconsolata($weight) {
+    @font-face {
+        font-family: 'Inconsolata';
+        font-display: swap;
+        font-weight: $weight;
+        src: local('Inconsolata'),
+             url('../fonts/gen/Inconsolata-#{$weight}.woff2');
+    }
+}
+
+@mixin font-lora {
+    @font-face {
+        font-family: 'Lora';
+        font-display: swap;
+        src: local('Lora'),
+             url('../fonts/gen/Lora-Regular.woff2'),
+             url('../fonts/gen/Lora-Italic.woff2');
+    }
+}
+
+@mixin font-raleway($weight) {
+    @font-face {
+        font-family: 'Raleway';
+        font-display: swap;
+        font-weight: $weight;
+        src: local('Raleway'),
+             url('../fonts/gen/Raleway-#{$weight}.woff2'),
+             url('../fonts/gen/Raleway-#{$weight}-Italic.woff2');
+    }
+}
+
+@mixin font-stixgeneral {
+    @font-face {
+        font-family: 'STIXGeneral';
+        font-display: swap;
+        src: local('STIXGeneral-Regular'),
+             url('../fonts/STIXGeneral-Regular.ttf');
+    }
+}
+
+@include font-inconsolata(400);
+@include font-lora();
+@include font-raleway(400);
+@include font-raleway(700);
+@include font-stixgeneral();

assets/scss/mixins.scss

@@ -6,7 +6,7 @@
 }
 
 @mixin below-container-width {
-    @media screen and (max-width: $container-width-threshold){
+    @media screen and (max-width: $container-width-threshold) {
         @content;
     }
 }
@@ -16,17 +16,17 @@
 }
 
 @mixin textual-input {
-  @include bordered-block;
+    @include bordered-block;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  @include var(background-color, background-color);
+    @include var(background-color, background-color);
-  @include var(color, text-color);
+    @include var(color, text-color);
-  font-family: $font-body;
+    font-family: $font-body;
-  padding: $input-padding;
+    padding: $input-padding;
 
-  &:active, &:focus {
+    &:active, &:focus {
-      @include green-shadow;
+        @include green-shadow;
-      border-color: $primary-color;
+        border-color: $primary-color;
-  }
+    }
 
-  flex-grow: 1;
+    flex-grow: 1;
 }

assets/scss/search.scss

@@ -43,7 +43,7 @@ input.stork-input {
     padding: $search-element-padding;
 }
 
-.stork-message:not(:last-child), .stork-result  {
+.stork-message:not(:last-child), .stork-result {
     border-bottom: $standard-border;
 }
 

assets/scss/style.scss

@@ -4,169 +4,169 @@
 @import "modes.scss";
 
 body {
-  @include var(background-color, background-color);
+    @include var(background-color, background-color);
-  @include var(color, text-color);
+    @include var(color, text-color);
-  font-family: $font-body;
+    font-family: $font-body;
-  font-size: 1.0rem;
+    font-size: 1.0rem;
-  line-height: 1.5;
+    line-height: 1.5;
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
-  text-align: justify;
+    text-align: justify;
 
-  @include below-container-width {
+    @include below-container-width {
-    text-align: left;
+        text-align: left;
-  }
+    }
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin-bottom: .1rem;
+    margin-bottom: .1rem;
-  margin-top: .5rem;
+    margin-top: .5rem;
-  font-family: $font-heading;
+    font-family: $font-heading;
-  font-weight: normal;
+    font-weight: normal;
-  text-align: center;
+    text-align: center;
 
-  &:target {
+    &:target {
-    @include var(background-color, target-background-color);
+        @include var(background-color, target-background-color);
-    border-radius: 1rem;
+        border-radius: 1rem;
-  }
+    }
-
+
-  a {
+    a {
-    border-bottom: none;
+        border-bottom: none;
-
+
-    &:hover {
+        &:hover {
-      color: $primary-color;
+            color: $primary-color;
+        }
     }
-  }
 }
 
 p {
-  &:target {
+    &:target {
-    @include var(background-color, target-background-color);
+        @include var(background-color, target-background-color);
-    border-radius: 0.25rem;
+        border-radius: 0.25rem;
-  }
+    }
 }
 
 .container {
-  position: relative;
+    position: relative;
-  margin: auto;
+    margin: auto;
-  width: 100%;
+    width: 100%;
-  max-width: $container-width;
+    max-width: $container-width;
-  box-sizing: border-box;
+    box-sizing: border-box;
 
-  @include below-container-width {
+    @include below-container-width {
-      padding: 0 $container-min-padding 0 $container-min-padding;
+        padding: 0 $container-min-padding 0 $container-min-padding;
-      margin: 0;
+        margin: 0;
-      max-width: $container-width + 2 * $container-min-padding;
+        max-width: $container-width + 2 * $container-min-padding;
-  }
+    }
 
-  @include below-two-margins {
+    @include below-two-margins {
-      left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
+        left: -($margin-width + $margin-inner-offset + $margin-outer-offset) / 2;
-  }
+    }
 
-  @include below-one-margin {
+    @include below-one-margin {
-      left: 0;
+        left: 0;
-  }
+    }
 }
 
 .button, input[type="submit"] {
-  @include var(color, text-color);
-  padding: 0.5rem;
-  border: 1px solid $primary-color;
-  transition: color 0.25s, background-color 0.25s;
-  text-align: left;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover, &:focus {
-    background-color: rgba($primary-color, 0.2);
     @include var(color, text-color);
-  }
+    padding: 0.5rem;
+    border: 1px solid $primary-color;
+    transition: color 0.25s, background-color 0.25s;
+    text-align: left;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:hover, &:focus {
+        background-color: rgba($primary-color, 0.2);
+        @include var(color, text-color);
+    }
 }
 
 .input[type="text"], textarea {
-  @include textual-input;
+    @include textual-input;
 }
 
 nav {
-  width: 100%;
+    width: 100%;
-  margin: 0rem 0rem 1rem 0rem;
+    margin: 0rem 0rem 1rem 0rem;
 
-  .container {
+    .container {
-    display: flex;
+        display: flex;
-    justify-content: center;
+        justify-content: center;
-    flex-wrap: wrap;
+        flex-wrap: wrap;
-  }
+    }
 
-  a {
+    a {
-    padding: 0.25rem 0.75rem 0.25rem .75rem;
+        padding: 0.25rem 0.75rem 0.25rem .75rem;
-    text-decoration: none;
+        text-decoration: none;
-    @include var(color, text-color);
+        @include var(color, text-color);
-    display: inline-block;
+        display: inline-block;
-    border-bottom: none;
+        border-bottom: none;
-    white-space: nowrap;
+        white-space: nowrap;
-  }
+    }
 }
 
 .post-subscript {
-  text-align: center;
+    text-align: center;
 }
 
 .post-content {
-  margin-top: .5rem;
+    margin-top: .5rem;
 }
 
 h1 {
-  font-size: 3.0rem;
+    font-size: 3.0rem;
 }
 
 h2 {
-  font-size: 2.6rem;
+    font-size: 2.6rem;
 }
 
 h3 {
-  font-size: 2.2rem;
+    font-size: 2.2rem;
 }
 
 h4 {
-  font-size: 1.8rem;
+    font-size: 1.8rem;
 }
 
 h5 {
-  font-size: 1.4rem;
+    font-size: 1.4rem;
 }
 
 h6 {
-  font-size: 1.0rem;
+    font-size: 1.0rem;
 }
 
 a {
-  @include var(color, text-color);
+    @include var(color, text-color);
-  text-decoration: none;
+    text-decoration: none;
-  border-bottom: .2rem solid $primary-color;
+    border-bottom: .2rem solid $primary-color;
 
-  &:hover {
+    &:hover {
-    color: $primary-color;
+        color: $primary-color;
-    transition: color 0.25s;
+        transition: color 0.25s;
-  }
+    }
-
+
-  &.external-link, &.same-page-link {
+    &.external-link, &.same-page-link {
-    .feather {
+        .feather {
-      fill: none;
+            fill: none;
-      margin-left: 0.25rem;
+            margin-left: 0.25rem;
-      position: relative;
+            position: relative;
-      top: 0.125em;
+            top: 0.125em;
+        }
     }
-  }
 }
 
 .draft-link {
-  border-bottom: .2rem solid $border-color;
+    border-bottom: .2rem solid $border-color;
 }
 
 img {
-  max-width: 100%;
+    max-width: 100%;
-  background-color: white;
+    background-color: white;
 }
 
 table {
@@ -247,7 +247,25 @@ ul.post-list {
 
     p.post-wordcount, p.post-status {
         text-align: center;
-        margin-bottom: 0.6rem;
+        margin-bottom: 1rem;
+    }
+
+    .series-link {
+        display: flex;
+        align-items: center;
+
+        margin-top: 1rem;
+        font-size: 1.1rem;
+        border-top: $standard-border;
+        padding-top: 1rem;
+
+        .feather {
+            fill: none;
+            flex-shrink: 0;
+            width: 1em;
+            height: 1em;
+            margin-right: 0.5em;
+        }
     }
 }
 
@@ -291,8 +309,8 @@ figure {
     }
 
     &.fullwide {
-      margin-left: 0;
+        margin-left: 0;
-      margin-right: 0;
+        margin-right: 0;
     }
 }
 
@@ -312,21 +330,20 @@ figure {
  That's because firefox reader mode doesn't play nice with them, and
  it seems to ignore all styles in <head>. Then, the inline style
  in <head> uses !important to restore the display of icons, but provides
- limited styling. Here, we finally apply the full extent of the feather
+ limited styling. Here, we finally apply the full extent of the feather styles.
- styles.
  */
 .feather {
-  width: 1rem;
+    width: 1rem;
-  height: 1rem;
+    height: 1rem;
-  stroke: currentColor;
+    stroke: currentColor;
-  stroke-width: 2;
+    stroke-width: 2;
-  stroke-linecap: round;
+    stroke-linecap: round;
-  stroke-linejoin: round;
+    stroke-linejoin: round;
-  fill: currentColor;
+    fill: currentColor;
 }
 
 .katex * {
-  font-family: unset;
+    font-family: unset;
 }
 
 .block {
@@ -338,7 +355,7 @@ figure {
 
 .dialog {
     .message {
-        max-width: 0.8*$container-width;
+        max-width: 0.8 * $container-width;
         margin-top: 0.5rem;
         display: flex;
         flex-direction: row;
@@ -372,19 +389,18 @@ figure {
     flex-wrap: wrap;
 
     .wrapper {
-      flex-grow: 1;
+        flex-grow: 1;
-      display: flex;
+        display: flex;
 
-      &.previous {
+        &.previous {
-          justify-content: left;
+            justify-content: left;
-      }
+        }
 
-      &.next {
+        &.next {
-          justify-content: right;
+            justify-content: right;
-      }
+        }
     }
 
-
     a, .ongoing-placeholder {
         @include bordered-block;
         padding: 0.5em 1em 0.5em 1em;
@@ -394,16 +410,16 @@ figure {
         margin-top: 1em;
 
         .feather {
-          height: 1.25em;
+            height: 1.25em;
-          width: 1.25em;
+            width: 1.25em;
-          fill: none;
+            fill: none;
-          &:first-child { margin-right: 0.5em; }
+            &:first-child { margin-right: 0.5em; }
-          &:last-child { margin-left: 0.5em; }
+            &:last-child { margin-left: 0.5em; }
         }
     }
 
     .ongoing-placeholder {
-      border-style: dashed;
+        border-style: dashed;
     }
 
     div.title {
@@ -452,3 +468,32 @@ blockquote {
 .early-navigation-wrapper {
     margin-bottom: 3rem;
 }
+
+.side-by-side {
+    display: flex;
+}
+
+.side-by-side-item {
+    flex-basis: 0;
+}
+
+.internal-ref {
+    text-decoration: underline;
+    break-inside: avoid;
+
+    &:target {
+        @include var(background-color, target-background-color);
+        border-radius: 1rem;
+
+        .internal-ref-counter {
+            @include var(background-color, target-background-color);
+        }
+    }
+}
+
+.internal-ref-counter {
+    display: inline-block;
+    border: $standard-border;
+    border-radius: 0.5rem;
+    padding: 0 0.25rem 0 0.25rem;
+}

assets/scss/variables.scss

@@ -11,7 +11,7 @@ $standard-border: $standard-border-width solid $border-color;
 
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
-$font-code: "Inconsolata", monospace;
+$font-code: "Inconsolata", monospace, "STIXGeneral";
 
 $warning-background-color: #ffee99;
 $warning-border-color: #f5c827;
@@ -23,7 +23,7 @@ $target-background-color-dark: #55511c;
 
 $code-color: #f0f0f0;
 $code-color-dark: lighten($background-color-dark, 10%);
-$code-token-color: black;
+$code-token-color: darken($primary-color, 25%);
 $code-token-color-dark: $primary-color;
 $code-highlight-color: #fffd99;
 $code-highlight-color-dark: #555538;

chatgpt-instance-fonts.py

@@ -0,0 +1,69 @@
+#!/usr/bin/env python3
+
+"""
+Instantiate variable fonts at specific weights/styles, producing static TTF files.
+No subsetting, no recursive searching—just direct calls with hardcoded axis values.
+Requires fontTools >= 4.0.
+
+Genererated by ChatGTP o3-mini-high. Not human-modified.
+"""
+
+from fontTools.ttLib import TTFont
+from fontTools.varLib.instancer import instantiateVariableFont
+
+def instantiate_variable_font(input_font_path, axis_values, output_font_path):
+    """
+    1) Loads a variable font from `input_font_path`.
+    2) Instantiates (flattens) it at the specified axis values (e.g. {"wght": 400}).
+    3) Saves the result as a static TTF at `output_font_path`.
+    """
+    print(f"Instantiating {input_font_path} with axes={axis_values} -> {output_font_path}")
+    vf = TTFont(input_font_path)
+    static_font = instantiateVariableFont(vf, axis_values)
+    static_font.flavor = "woff2"
+    static_font.save(output_font_path)
+
+def main():
+    # Inconsolata (Variable)
+    instantiate_variable_font(
+        "Inconsolata-VariableFont_wdth,wght.ttf",
+        {"wght": 400},
+        "Inconsolata-400.woff2"
+    )
+
+    # Lora (Variable, normal and italic)
+    instantiate_variable_font(
+        "Lora-VariableFont_wght.ttf",
+        {"wght": 400},
+        "Lora-Regular.woff2"
+    )
+    instantiate_variable_font(
+        "Lora-Italic-VariableFont_wght.ttf",
+        {"wght": 400},
+        "Lora-Italic.woff2"
+    )
+
+    # Raleway (Variable, normal and italic)
+    instantiate_variable_font(
+        "Raleway-VariableFont_wght.ttf",
+        {"wght": 400},
+        "Raleway-400.woff2"
+    )
+    instantiate_variable_font(
+        "Raleway-VariableFont_wght.ttf",
+        {"wght": 700},
+        "Raleway-700.woff2"
+    )
+    instantiate_variable_font(
+        "Raleway-Italic-VariableFont_wght.ttf",
+        {"wght": 400},
+        "Raleway-400-Italic.woff2"
+    )
+    instantiate_variable_font(
+        "Raleway-Italic-VariableFont_wght.ttf",
+        {"wght": 700},
+        "Raleway-700-Italic.woff2"
+    )
+
+if __name__ == "__main__":
+    main()

i18n/en.toml

@@ -27,6 +27,9 @@
   one = "about one minute to read"
   other = "about {{ .Count }} minutes to read"
 
+[latestInSeries]
+  other = "Latest in series:"
+
 [recentPosts]
   other = "Recent posts"
 

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,9 @@
+{{ if and (eq .Type "alert") (eq .AlertType "todo") -}}
+<div style="background-color: tomato; color: white; padding: 10px;">
+    <em>TODO: </em>{{- .Text | plainify -}}
+</div>
+{{- else -}}
+<blockquote {{- with .Attributes.id }} id="{{ . }}"{{ end }}>
+{{ .Text -}}
+</blockquote>
+{{- end }}

layouts/_default/_markup/render-link.html

@@ -1,24 +1,25 @@
-{{- $scratch := newScratch -}}
+{{- $class := "" -}}
+{{- $icon := "" -}}
 {{- $absoluteDest := absLangURL .Destination -}}
 {{- $siteRootUrl := absLangURL "" -}}
 {{- $isExternal := not (hasPrefix $absoluteDest $siteRootUrl) -}}
 {{- $isSamePage := hasPrefix .Destination "#" -}}
 
 {{- if $isSamePage -}}
-  {{- $scratch.Set "class" "same-page-link" -}}
+  {{- $class = "same-page-link" -}}
   {{- if index (.Page.Scratch.Get "definedSections") .Destination -}}
-    {{- $scratch.Set "icon" "arrow-up" -}}
+    {{- $icon = "arrow-up" -}}
   {{- else -}}
     {{- /* Do not render "down" links because don't know how to distinguish unseen titles from paragraph links. */ -}}
-    {{- /* $scratch.Set "icon" "arrow-down" */ -}}
+    {{- /* $icon = "arrow-down" */ -}}
   {{- end -}}
 {{- else if $isExternal -}}
-  {{- $scratch.Set "class" "external-link" -}}
+  {{- $class = "external-link" -}}
-  {{- $scratch.Set "icon" "external-link" -}}
+  {{- $icon = "external-link" -}}
 {{- end -}}
 <a href="{{ .Destination | safeURL }}"
   {{- with .Title }} title="{{ . }}"{{ end -}}
-  {{- with $scratch.Get "class" -}}
+  {{- with $class -}}
     class="{{ . }}"
   {{- end -}}
   {{- if (and site.Params.externalLinksInNewTab $isExternal) -}}
@@ -26,6 +27,6 @@
   {{- end -}}
 >
   {{- with .Text | safeHTML }}{{ . }}{{ end -}}
-  {{- with $scratch.Get "icon" -}}{{- partial "icon.html" . -}}{{- end -}}
+  {{- with $icon -}}{{- partial "icon.html" . -}}{{- end -}}
 </a>
 {{- /* chomp trailing newline */ -}}

layouts/index.html

@@ -2,9 +2,10 @@
 {{ .Content }}
 
 {{ i18n "recentPosts" }}:
+{{ partial "uniquebyseries.html" (dict "scratch" .Scratch) }}
 <ul class="post-list">
-    {{ range first 10 (where (where .Site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") }}
+    {{ range first 10 (.Scratch.Get "pages") }}
-    {{ partial "post.html" (dict "page" .) }}
+    {{ partial "post.html" (dict "page" . "linkSeries" true) }}
     {{ end }}
 </ul>
 

layouts/partials/bergamotinputmode.html

@@ -0,0 +1,6 @@
+<script>
+    window.addEventListener('load', function() {
+        window.Bergamot.inputModes['{{ .name }}'] = {{ .fn | safeJS }};
+    });
+</script>
+

layouts/partials/bergamotparseinputmodes.js

@@ -0,0 +1,17 @@
+{
+{{ if . }}
+{{ range $name := split . ";" }}
+{{ if eq $name "query" }}
+    "Query": "query",
+{{ else }}
+    {{ $pieces := split $name ":" }}
+    {{ $name := index $pieces 0 }}
+    {{ $modestring := index $pieces 1 }}
+    "{{ $name }}": { "custom": "{{ $modestring }}" },
+{{ end }}
+{{ end }}
+{{ else }}
+    "Languge Term": { "custom": "Bergamot Object Language" },
+    "Query": "query",
+{{ end }}
+}

layouts/partials/bergamotpreset.html

@@ -0,0 +1,11 @@
+<script>
+    window.addEventListener('load', function() {
+        window.Bergamot.presets['{{ .name }}'] = {
+            rules: {{ .file }},
+            inputModes: {{ partial "bergamotparseinputmodes.js" .modes | safeJS }},
+            inputPrompt: '{{ .prompt }}',
+            query: '{{ .query }}',
+            renderPreset: '{{ default "default" .renderPreset }}'
+        };
+    });
+</script>

layouts/partials/bergamotrenderpreset.html

@@ -1,6 +1,6 @@
 <script>
     window.addEventListener('load', function() {
         window.Bergamot.renderPresets['{{ .name }}'] =
-            {{ readFile (printf "static/bergamot/rendering/%s" .file) }};
+            {{ .file }};
     });
 </script>

layouts/partials/head.html

@@ -15,7 +15,8 @@
 
     <!-- Fonts -->
     {{ if not (.Site.Params.noCss) }}
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway:wght@400;700&family=Lora&display=block" media="screen">
+    {{ $fonts := resources.Get "scss/fonts.scss" | css.Sass | resources.Minify }}
+    <link rel="stylesheet" href="{{ $fonts.Permalink }}" media="screen">
     {{ end }}
 
     <!-- External CSS (normalize and KaTeX -->
@@ -30,9 +31,9 @@
     {{ end -}}
 
     <!-- In-house CSS -->
-    {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
+    {{ $style := resources.Get "scss/style.scss" | css.Sass | resources.Minify }}
-    {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
+    {{ $sidenotes := resources.Get "scss/sidenotes.scss" | css.Sass | resources.Minify }}
-    {{ $code := resources.Get "scss/code.scss" | resources.ToCSS | resources.Minify }}
+    {{ $code := resources.Get "scss/code.scss" | css.Sass | resources.Minify }}
     {{ $icon := resources.Get "img/favicon.png" }}
     <style>.feather { display: inline !important; width: 10px; height: 10px; }</style>
     <style>img { max-width: 70%; }</style>
@@ -43,6 +44,12 @@
     {{ end }}
     <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">
 
+    {{ if .Params.custom_js }}
+    {{ range $customJs := .Params.custom_js }}
+    <script src="{{ page.Resources.Get $customJs }}"></script>
+    {{ end }}
+    {{ end }}
+
     {{ if hugo.IsServer }}
     <!-- KaTeX auto-rendering for when we don't have a post-processing step. -->
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
@@ -59,14 +66,27 @@
     <script defer src="{{ .Site.Params.bergamotObjectLanguageJsUrl }}"></script>
     {{ $bergamotHelpers := resources.Get "js/bergamot-helpers.js" | resources.Minify }}
     <script defer src="{{ $bergamotHelpers.Permalink }}"></script>
-    {{ $bergamotStyle := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
+    {{ $bergamotStyle := resources.Get "scss/bergamot.scss" | css.Sass | resources.Minify }}
     {{ partial "defercss.html" (dict "url" $bergamotStyle.Permalink "extra" "") }}
     {{ if .Params.bergamot.render_presets }}
         {{ range $name, $rulefile := .Params.bergamot.render_presets }}
-            {{ partial "bergamotrenderpreset.html" (dict "name" $name "file" $rulefile) }}
+            {{ $file := default (resources.Get $rulefile) (page.Resources.Get $rulefile) }}
+            {{ partial "bergamotrenderpreset.html" (dict "name" $name "file" $file.Content) }}
         {{ end }}
     {{ else }}
-        {{ partial "bergamotrenderpreset.html" (dict "name" "default" "file" "minimal.bergamot") }}
+        {{ partial "bergamotrenderpreset.html" (dict "name" "default" "file" (resources.Get "bergamot/rendering/minimal.bergamot").Content) }}
+    {{ end }}
+    {{ if .Params.bergamot.presets }}
+        {{ range $name, $preset := .Params.bergamot.presets }}
+            {{ $file := default (resources.Get $preset.file) (page.Resources.Get $preset.file) }}
+            {{ $info := dict "name" $name "prompt" $preset.prompt "query" $preset.query "file" $file.Content "renderPreset" $preset.render_preset "inputModes" $preset.input_modes }}
+            {{ partial "bergamotpreset.html" $info }}
+        {{ end }}
+    {{ end }}
+    {{ if .Params.bergamot.input_modes }}
+        {{ range $mode := .Params.bergamot.input_modes }}
+            {{ partial "bergamotinputmode.html" (dict "name" $mode.name "fn" $mode.fn) }}
+        {{ end }}
     {{ end }}
     {{ end }}
 

layouts/partials/highlightgroup.html

@@ -1,9 +1,11 @@
-{{- $scratch := newScratch -}}
+{{- $highlightGroupAttrs := (printf "data-base-path=\"%s\" data-file-path=\"%v\"" .basePath .path) -}}
-{{- $scratch.Set "highlightGroupAttrs" (printf "data-base-path=\"%s\" data-file-path=\"%v\"" .basePath .path) -}}
 {{- if (or .firstLine .lastLine) -}}
-{{- $scratch.Add "highlightGroupAttrs" (printf " data-first-line=\"%v\" data-last-line=\"%v\"" .firstLine .lastLine) -}}
+{{- $highlightGroupAttrs = add $highlightGroupAttrs (printf " data-first-line=\"%v\" data-last-line=\"%v\"" .firstLine .lastLine) -}}
 {{- end -}}
 {{- if eq (lower .language) "agda" -}}
-{{- $scratch.Add "highlightGroupAttrs" " data-agda-block" -}}
+{{- $highlightGroupAttrs = add $highlightGroupAttrs " data-agda-block" -}}
 {{- end -}}
-{{ partial "group.html" (dict "url" .url "path" .path "comment" .comment "content" (highlight .code .language .opts) "attrs" ($scratch.Get "highlightGroupAttrs")) }}
+{{- with .offset -}}
+{{- $highlightGroupAttrs = add $highlightGroupAttrs (printf " data-source-offset=\"%v\"" .) -}}
+{{- end -}}
+{{ partial "group.html" (dict "url" .url "path" .path "comment" .comment "content" (highlight .code .language .opts) "attrs" $highlightGroupAttrs) }}

layouts/partials/post.html

@@ -14,5 +14,14 @@
     {{ partial "seriesstatus.html" .page.Params.status }}
     </p>
     {{ end }}
-    <p class="post-preview">{{ .page.Summary }} {{ if .page.Truncated }}...{{ end }}</p>
+    <p class="post-preview">{{ partial "summary" .page }}</p>
+    {{- if .linkSeries -}}
+    {{- $term := index (.page.GetTerms "series") 0 -}}
+    {{- with $term -}}
+    <div class="series-link">
+    {{- partial "icon.html" "corner-down-right" -}}
+    <p>{{- i18n "latestInSeries" }} <a href="{{ $term.Permalink }}">{{ $term.Title }}</a></p>
+    </div>
+    {{- end -}}
+    {{- end }}
 </li>

layouts/partials/summary.html

@@ -0,0 +1,5 @@
+{{- if .Params.summary -}}
+{{ .Params.summary }}
+{{- else -}}
+{{ .Summary | plainify | truncate 180 }}
+{{- end -}}

layouts/partials/uniquebyseries.html

@@ -0,0 +1,14 @@
+{{- $scratch := .scratch -}}
+{{- $scratch.Set "pages" slice -}}
+{{- $tmpScratch := newScratch -}}
+{{- range $post := (where (where site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") -}}
+{{- $term := index ($post.GetTerms "series") 0 -}}
+{{- if $term -}}
+{{- if not ($tmpScratch.Get $term.Permalink) -}}
+{{- $tmpScratch.Set $term.Permalink true -}}
+{{- $scratch.Add "pages" $post -}}
+{{- end -}}
+{{- else -}}
+{{- $scratch.Add "pages" $post -}}
+{{- end -}}
+{{- end -}}

layouts/search/single.html

@@ -2,7 +2,7 @@
 <h2>{{ .Title }} </h2>
 {{ .Content }}
 
-{{ $search := resources.Get "scss/search.scss" | resources.ToCSS | resources.Minify }}
+{{ $search := resources.Get "scss/search.scss" | css.Sass | resources.Minify }}
 <link rel="stylesheet" href="{{ $search.Permalink }}" media="screen">
 
 <div class="stork-wrapper">

layouts/series/list.html

@@ -7,7 +7,7 @@
     <p>{{ partial "seriesstatus.html" .Params.status }}</p>
     <p>{{ i18n "postsFromTo" (dict "from" $startYear "to" $endYear) }}</p>
 </div>
-<p>{{ .Summary }}</p>
+<p>{{ partial "summary" . }}</p>
 
 <ul class="post-list">
     {{ range $pages }}

layouts/shortcodes/bergamot_exercise.html

@@ -0,0 +1,21 @@
+<div class="bergamot-exercise">
+    <details open>
+        <summary>
+            <span class="bergamot-exercise-label">
+                <span class="bergamot-exercise-number"></span>
+                {{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
+            </span>
+        </summary>
+        {{ transform.Markdownify .Inner }}
+
+        <div class="bergamot-button-group">
+            {{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
+            {{ else }}
+            <button class="bergamot-button bergamot-play" onclick='window.Bergamot.runPreset(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}", "{{ .Get "preset" }}")'>{{ partial "icon.html" "play" }}Start Bergamot</button>
+            <button class="bergamot-button bergamot-close bergamot-hidden" onclick='window.Bergamot.close(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}")'>{{ partial "icon.html" "x" }}Close Bergamot</button>
+            {{ end }}
+        </div>
+
+        <div id="bergamot-widget-container-{{ .Get "id" }}"></div>
+    </details>
+</div>

layouts/shortcodes/bergamot_widget.html

@@ -0,0 +1,8 @@
+<div id="{{ .Get "id" }}"></div>
+<script>
+    window.addEventListener('load', function() {
+        window.Bergamot.run(null, '{{ .Get "id" }}',
+            {{ partial "bergamotparseinputmodes.js" (.Get "modes") | safeJS }},
+            '{{ .Get "prompt" }}', '{{ .Inner }}', '{{ default "default" (.Get "rendering") }}', '{{ .Get "query" }}');
+    });
+</script>

layouts/shortcodes/codelines.html

@@ -1,23 +1,40 @@
 {{- $source := (readFile (printf "code/%s" (.Get 1))) -}}
 {{- $allLines := split $source "\n" -}}
 {{- $scratch := newScratch -}}
+{{- $remLines := $allLines -}}
 {{- if not (eq (int (.Get 2)) 1) -}}
-{{- $scratch.Set "remLines" (after (sub (int (.Get 2)) 1) $allLines) -}}
+{{- $remLines = after (sub (int (.Get 2)) 1) $allLines -}}
-{{- else -}}
-{{- $scratch.Set "remLines" $allLines -}}
 {{- end -}}
-{{- $lines := first (add (sub (int (.Get 3)) (int (.Get 2))) 1) ($scratch.Get "remLines") -}}
+{{- $lines := first (add (sub (int (.Get 3)) (int (.Get 2))) 1) $remLines -}}
 
+{{- $opts := "" -}}
 {{- if (.Get 4) -}}
-{{- $scratch.Set "opts" (printf ",%s" (.Get 4)) -}}
+{{- $opts = printf ",%s" (.Get 4) -}}
-{{- else -}}
-{{- $scratch.Set "opts" "" -}}
 {{- end -}}
 
 {{- if (.Get 5) -}}
 {{- $scratch.Set "hidden" (.Get 5) -}}
 {{- end -}}
 
+{{- $prefixLength := "" -}}
+{{- $joinedLines := "" -}}
+{{- if or (.Page.Params.left_align_code) (.Get 6) -}}
+{{- $prefixLength = -1 -}}
+{{- range $line := $lines -}}
+{{- $leading := sub (len $line) (len (strings.TrimLeft " " $line)) -}}
+{{- if and (ne $line "") (or (eq $prefixLength -1) (le $leading $prefixLength)) -}}
+{{- $prefixLength = $leading -}}
+{{- end -}}
+{{- end -}}
+
+{{- range $line := $lines -}}
+{{- $joinedLines = add $joinedLines (substr $line $prefixLength) -}}
+{{- $joinedLines = add $joinedLines "\n" -}}
+{{- end -}}
+{{- else -}}
+{{- $joinedLines = delimit $lines "\n" -}}
+{{- end -}}
+
 {{- partial "geturl.html" (dict "scratch" $scratch "path" (.Get 1) "lines" (slice (.Get 2) (.Get 3))) -}}
 {{- partial "linerangestr.html" (dict "scratch" $scratch "from" (.Get 2) "to" (.Get 3)) -}}
 
@@ -29,11 +46,12 @@
        "basePath" ($scratch.Get "bestPath")
        "path" (.Get 1)
        "comment" ($scratch.Get "comment")
-       "code" (delimit $lines "\n")
+       "code" $joinedLines
        "firstLine" (int (.Get 2))
        "lastLine" (int (.Get 3))
        "language" (.Get 0)
-       "opts" (printf "linenos=table,linenostart=%d%s" (.Get 2) ($scratch.Get "opts"))
+       "offset" $prefixLength
+       "opts" (printf "linenos=table,linenostart=%d%s" (.Get 2) $opts)
 -}}
 {{- partial "highlightgroup.html" $groupconfig -}}
 {{- with ($scratch.Get "hidden") -}}

layouts/shortcodes/internal.html

@@ -0,0 +1,12 @@
+{{- $name := .Get 0 -}}
+{{- $number := 1 -}}
+{{- with .Page.Scratch.Get "internal-ref-counter" -}}
+{{- $number = add . 1 }}
+{{- end -}}
+{{- .Page.Scratch.Set "internal-ref-counter" $number -}}
+{{- .Page.Scratch.SetInMap "internal-ref" $name $number -}}
+
+<span class="internal-ref" id="internal-ref-{{ $name }}">
+{{ .Inner }}
+<span class="internal-ref-counter">{{ $number }}</span></span>
+{{- /* chomp whitespace at the end */ -}}

layouts/shortcodes/internalref.html

@@ -0,0 +1,7 @@
+{{- $name := .Get 0 -}}
+{{- $number := index (.Page.Scratch.Get "internal-ref") $name -}}
+
+<a href="#internal-ref-{{ $name }}">
+{{ .Inner }}
+<span class="internal-ref-counter">{{ $number }}</span></a>
+{{- /* chomp whitespace at the end */ -}}

layouts/shortcodes/sidebyside.html

@@ -0,0 +1,3 @@
+<div class="side-by-side">
+    {{ .Inner }}
+</div>

layouts/shortcodes/sidebysideitem.html

@@ -0,0 +1,3 @@
+<div class="side-by-side-item" {{ with .Get "weight" }} style="flex-grow: {{ . }};" {{ end }}>
+    {{ .Inner }}
+</div>

layouts/shortcodes/todo.html

@@ -1,3 +0,0 @@
-<div style="background-color: tomato; color: white; padding: 10px;">
-    <em>TODO: </em>{{- .Inner -}}
-</div>