feat: render templates in param strings

assets/css/base/_typography.scss

@@ -44,7 +44,7 @@ html {
   color: $dark;
   background-color: $light;
   font-family: $default-font;
-  font-variant-numeric: 'oldstyle-nums slashed-zero';
+  font-variant-numeric: oldstyle-nums slashed-zero;
   writing-mode: horizontal-tb;
 }
 
@@ -305,7 +305,9 @@ kbd {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f7f7f7;
   color: #333;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px white inset;
+  box-shadow:
+    0 1px 0 rgba(0, 0, 0, 0.2),
+    0 0 0 2px white inset;
   border-radius: 3px;
   display: inline-block;
   margin-block: 0;
@@ -350,3 +352,8 @@ kbd {
 dfn {
   font-variant: small-caps;
 }
+
+sub,
+sup {
+  line-height: 0;
+}

assets/css/components/_chart.scss

@@ -1,20 +1,17 @@
 .chart-container {
   position: relative;
-  margin-inline: auto;
+  inline-size: 100%;
-  block-size: 100vh;
+  min-block-size: 50vh;
-  inline-size: 95vw;
   display: flex;
   justify-content: center;
 
   @media (orientation: landscape) {
     block-size: 75vh;
-    inline-size: 95vw;
   }
 
   @include mq("large") {
     block-size: auto;
     max-block-size: 80vh;
-    inline-size: 50vw;
   }
 
   & + .chart-container {

assets/css/components/_figure.scss

@@ -2,6 +2,11 @@
   inline-size: fit-content;
   margin: 16px auto;
 
+  &--chart {
+    margin: 0;
+    width: 100%;
+  }
+
   &__caption {
     block-size: auto;
     margin: auto;

assets/css/pages/_single.scss

@@ -2,7 +2,6 @@
   display: grid;
   column-gap: 2em;
   grid-template-columns: 0.4fr 0.6fr;
-  grid-template-rows: auto auto auto auto 60px;
 
   @include mq("large") {
     grid-template-rows: auto auto auto auto;
@@ -15,6 +14,7 @@
     grid-column-end: 3;
     background-color: $light;
     filter: brightness(80%);
+    padding-block-start: 2em;
 
     @include mq("large") {
       border: 2px solid $dark;
@@ -52,10 +52,6 @@
       }
 
       &__featured-image {
-        display: grid;
-        grid-template-columns: 15% 1fr 15%;
-        grid-template-rows: 20% 1fr 20%;
-        grid-template-areas: ". . ." ". post-header-details ." ". . .";
         background-position: center center;
         background-repeat: no-repeat;
         background-size: cover;
@@ -63,18 +59,21 @@
         min-block-size: 380px;
         inline-size: 100%;
         border: 2px solid $dark;
+        align-content: center;
+        position: relative;
 
         & .attr {
+          position: absolute;
           background-color: $dark;
           font-size: 0.7em;
           color: $light;
           inline-size: fit-content;
-          position: fixed;
           padding-block: 0.2em;
           padding-inline: 0.5em;
           opacity: 0.8;
           margin-block: 0;
           margin-inline: auto;
+          top: 0;
 
           & a {
             color: $light;
@@ -94,17 +93,15 @@
       }
 
       &__title-wrapper {
-        display: grid;
+        display: flex;
-        grid-area: post-header-details;
+        flex-direction: column;
         background-color: $dark;
         opacity: 0.8;
         text-align: center;
-        grid-template-columns: 1fr;
         padding: 20px;
-        grid-template-rows: 1fr auto auto 1fr;
+        margin: auto;
-        justify-items: center;
+        width: 80%;
-        align-items: center;
+        margin-block: auto;
-        grid-template-areas: "." "post-title" "post-subtitle" ".";
 
         &--no-title {
           visibility: hidden;
@@ -116,17 +113,12 @@
         }
 
         & .article-header__title {
-          grid-area: post-title;
           font-weight: bold;
 
           &--long {
             font-size: 1.5em;
           }
         }
-
-        & .article-header__subtitle {
-          grid-area: post-subtitle;
-        }
       }
 
       &__word-count,

layouts/locations/list.html

@@ -1,45 +1,53 @@
 {{ define "title" }}
-  Locations | {{ .Site.Title }}
+  Locations |
+  {{ .Site.Title }}
 {{ end }}
 
 {{ define "main-class" }}--section location-map{{ end }}
 
 {{ define "header-scripts" }}
-    <!-- Leaflet -->
+  <!-- Leaflet -->
-    <link rel="stylesheet" href="/css/leaflet/leaflet.css" />
+  <link
-    <link rel="stylesheet" href="/js/leaflet-fullscreen/leaflet.fullscreen.css" />
+    rel="stylesheet"
+    href="/css/leaflet/leaflet.css"
+  />
+  <link
+    rel="stylesheet"
+    href="/js/leaflet-fullscreen/leaflet.fullscreen.css"
+  />
 {{ end }}
 
 {{ define "footer-scripts" }}
-    <!-- Leaflet -->
+  <!-- Leaflet -->
-    <script src="/js/leaflet/leaflet.js"></script>
+  <script src="/js/leaflet/leaflet.js"></script>
 
-    <!-- Leaflet Heat -->
+  <!-- Leaflet Heat -->
-    <script src="/js/leaflet-heat/leaflet-heat.js"></script>
+  <script src="/js/leaflet-heat/leaflet-heat.js"></script>
 
-    <!-- Leaflet Fullscreen -->
+  <!-- Leaflet Fullscreen -->
-    <script src="/js/leaflet-fullscreen/leaflet.fullscreen.min.js"></script>
+  <script src="/js/leaflet-fullscreen/leaflet.fullscreen.min.js"></script>
 
-    <script>
+  {{- partial "cv/locations/heatmap.js" ( dict "all_pages" $.Site.AllPages "locations" $.Site.Data.locations ) -}}
-        {{- partial "cv/locations/heatmap.js" ( dict "all_pages" $.Site.AllPages ) -}}
-    </script>
 {{ end }}
 
 {{ define "main-header" }}
-    <header class="site-content__header">
+  <header class="site-content__header">
-        <h1 class="page-title">{{ .Title | safeHTML }}.</h1>
+    <h1 class="page-title">{{ .Title | safeHTML }}.</h1>
-        {{ .Content }}
+    {{ .Content }}
-    </header>
+  </header>
 {{ end }}
 
 {{ define "main-body" }}
-<article class="site-content__body site-content__body--chart">
+  <article class="site-content__body site-content__body--chart">
-    <div id="map" style="width: 100%; height: 500px; margin: 0; display: block;"></div>
+    <div
+      id="map"
+      style="width: 100%; height: 500px; margin: 0; display: block;"
+    ></div>
 
     {{- with ( partial "util/render_recursive_list.html" ( dict "sc" $ "pc" . "items" $.Site.Data.locations "schemaType" "Place" ) ) -}}
-    <section style="grid-area: section-content">
+      <section style="grid-area: section-content">
         {{- . -}}
-    </section>
+      </section>
     {{- end -}}
-</article>
+  </article>
 {{ end }}

layouts/partials/cite.html

@@ -13,8 +13,8 @@
 
 <!-- Optional parameter overrides (for nested citations) -->
 
-{{- $cite := default .Params.cite ( .Scratch.Get "cite" ) -}}
+{{- $cite := trim ( default .Params.cite ( .Scratch.Get "cite" ) | .Page.RenderString ) "\r\n" -}}
-{{- $title := default .Params.title ( .Scratch.Get "title" ) -}}
+{{- $title := trim ( default .Params.title ( .Scratch.Get "title" ) | .Page.RenderString ) "\r\n" -}}
 {{- $titleLang := default .Params.titleLang ( .Scratch.Get "titleLang" ) -}}
 {{- $titleTr := default .Params.titleTr ( .Scratch.Get "titleTr" ) -}}
 {{- $schemaType := default .Params.schemaType ( .Scratch.Get "schemaType" ) -}}
@@ -49,7 +49,7 @@
 {{- $itemType := default "CreativeWork" $schemaType -}}
 {{- if ( or ( in $.Site.Data.itemtypes $itemType ) ( eq .Params.suppress "true" ) ) -}}
   {{- with .Params.href -}}
-  <a href="{{ if eq . "asCite" }}{{ $cite }}{{ else }}{{ . }}{{ end }}">
+  <a href="{{- if eq . "asCite" -}}{{- $cite -}}{{- else -}}{{- . -}}{{- end -}}">
   {{- end -}}
     <cite
       class="cite{{ with .Params.citeStyle }} cite--{{ . }}{{ end }}"
@@ -61,7 +61,7 @@
       title="{{- $titleTr -}}"
       {{- end -}}>
       {{- with $cite -}}
-      <meta itemprop="url" content="{{ . }}">
+      <meta itemprop="url" content="{{- . -}}">
       {{- end -}}
       <span itemprop="name">
         {{- if $titleLang -}}

layouts/partials/cv/locations/heatmap.js

@@ -1,47 +1,50 @@
-/*
+{{/*
     Recursively render an ordered or unordered list from a set of arbitrarily-
     deeply-nested items.
 
     @params all_pages  All site pages
-*/
+    @params locations   All locations
-
-var map = L.map('map', {
-    fullscreenControl: true
-}).setView([55, -3], 3);
-
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-}).addTo(map);
-
-{{- $locations := partialCached "util/get_location_leaf_nodes.html" $.Site.Data.locations -}}
-
-{{/*
-{{- range .Site.AllPages -}}
-    {{- with .Params.locations -}}
-        {{- range . -}}
-            {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
-                L.marker([{{ .lat }}, {{ .lon }}]).addTo(map);
-        {{- end -}}
-        {{- end -}}
-    {{- end -}}
-{{- end -}}
 */}}
 
-L.heatLayer(
+<script>
-    [
+    var map = L.map('map', {
-    {{- range .all_pages -}}
+        fullscreenControl: true
+    }).setView([55, -3], 3);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+
+    {{- $locations := partialCached "util/get_location_leaf_nodes.html" .locations -}}
+
+    {{/*
+    {{- range .Site.AllPages -}}
         {{- with .Params.locations -}}
             {{- range . -}}
                 {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
-                    [ {{ .lat }}, {{ .lon }} ],
+                    L.marker([{{ .lat }}, {{ .lon }}]).addTo(map);
-                {{- end -}}
+            {{- end -}}
             {{- end -}}
         {{- end -}}
     {{- end -}}
-    ],
+    */}}
-    {
+
-        minOpacity: 0.5,
+    L.heatLayer(
-        gradient: {0.1: 'blue', 0.3: 'lime', 0.8: 'orange', 1: 'red'}
+        [
-    }
+        {{- range .all_pages -}}
-).addTo(map);
+            {{- with .Params.locations -}}
+                {{- range . -}}
+                    {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
+                        [ {{ .lat }}, {{ .lon }} ],
+                    {{- end -}}
+                {{- end -}}
+            {{- end -}}
+        {{- end -}}
+        ],
+        {
+            minOpacity: 0.5,
+            gradient: {0.1: 'blue', 0.3: 'lime', 0.8: 'orange', 1: 'red'}
+        }
+    ).addTo(map);
+</script>

layouts/partials/header/site-header.html

@@ -1,12 +1,62 @@
-<header class="site-header h-card">  
+<header class="site-header h-card">
   {{ block "header" . }}
-    <h2 class="p-name site-header__title" itemprop="name"><a class="u-url" href="{{ .Site.Home.RelPermalink }}" rel="me author">{{ .Site.Title }}</a></h2>
+    <h2
-    <p class="p-note site-header__tagline" itemprop="about">Views my own. Discussion ≠ endorsement. Do try this at home.</p>
+      class="p-name site-header__title"
-    <p class="site-header__icons">~ <a class="u-email" href="mailto:{{ $.Site.Params.Author.email }}" rel="me">✉️</a> ~ <a class="u-url" href="{{ .Site.Params.codeURL }}" rel="me">🧑‍💻</a> ~ <a class="u-key" href="/{{ .Site.Params.keyfile }}" rel="me">&#128272;</a> ~ <a href="/index.xml" aria-label="{{ .Site.Title }} RSS feed"><img class="feed-icon" alt="RSS feed" src="{{ .Site.Params.feedIcon }}"></a> ~</p>
+      itemprop="name"
+    >
+      <a
+        class="u-url"
+        href="{{ .Site.Home.RelPermalink }}"
+        rel="me author"
+        >{{ .Site.Title }}</a
+      >
+    </h2>
+    <p
+      class="p-note site-header__tagline"
+      itemprop="about"
+    >
+      Views my own. Discussion ≠ endorsement. Do try this at home.
+    </p>
+    <p class="site-header__icons">
+      ~
+      <a
+        class="u-email"
+        aria-label="Email"
+        href="mailto:{{ $.Site.Params.Author.email }}"
+        rel="me"
+        >✉️</a
+      >
+      ~
+      <a
+        class="u-url"
+        aria-label="Code Forge"
+        href="{{ .Site.Params.codeURL }}"
+        rel="me"
+        >🧑‍💻</a
+      >
+      ~
+      <a
+        class="u-key"
+        aria-label="PGP key"
+        href="/{{ .Site.Params.keyfile }}"
+        rel="me"
+        >&#128272;</a
+      >
+      ~
+      <a
+        href="/index.xml"
+        aria-label="{{ .Site.Title }} RSS feed"
+        ><img
+          class="feed-icon"
+          alt="RSS feed"
+          src="{{ .Site.Params.feedIcon }}"
+      /></a>
+      ~
+    </p>
     <nav class="site-header__nav">
       <ul>
         {{ range ( where .Site.Sections.ByTitle "Type" "in" site.Params.mainSections ) }}
-        <li><a href="{{ .RelPermalink }}">{{ .Title | safeHTML }}</a></li>
+          <li><a href="{{ .RelPermalink }}">{{ .Title | safeHTML }}</a></li>
         {{ end }}
       </ul>
     </nav>

layouts/partials/images/get-image.html

@@ -15,9 +15,9 @@
 
 <!-- Rendering -->
 
-{{- $isResizable :=  in ( slice "avif" "svg" "gif" ) .MediaType.SubType -}}
+{{- $isResizable := not ( in ( slice "avif" "svg" "gif" ) .img.MediaType.SubType ) -}}
 {{- if $isResizable -}}
-  {{- with .Resize "1200x webp" -}}
+  {{- with .img.Resize "1200x webp" -}}
     {{- .RelPermalink -}}
   {{- end -}}
 {{- else }}

layouts/partials/single/main-header/item-tile.html

@@ -31,7 +31,7 @@
 <div class="article-header__featured-image"
   {{ with .pc.Params.featured_image }}
     {{ with ( $.pc.Resources.GetMatch . ) }}
-      style="background-image: url({{ partialCached "images/get-image.html" ( dict "img" . ) . }})"
+      style="background-image: url({{ partialCached "images/get-image.html" ( dict "img" . ) $.pc }})"
     {{ else }}
       style="background-image: url({{ . }})"
     {{ end }}