From 371253c2dcc2735a1190950bf225ce0afa658b0e Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Wed, 27 Apr 2022 08:53:39 -0700
Subject: [PATCH] Improve code blocks

- Support defining text in a codeblock that can be translated
- Shrink some blocks to prevent page breaks on print
---
 content/posts/website-best-practices.gmi      | 15 ++++++---------
 content/posts/website-best-practices.md       | 19 ++++++++-----------
 .../_markup/render-codeblock-figure.html      |  5 ++++-
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi
index aede01a..a03721a 100644
--- a/content/posts/website-best-practices.gmi
+++ b/content/posts/website-best-practices.gmi
@@ -516,8 +516,7 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
 <article aria-label="comic, caption, and transcript">
   <h4>Infinite scrolling</h4>
   <figure>
-    <img
-      src="SRC"
+    <img src="SRC"
       aria-describedby="transcript-xkcd-1309"
       alt="Comic: if books had infinite-scroll, we'd have to
            turn pages carefully or risk losing the page.">
@@ -1164,20 +1163,18 @@ Finally, it's important to distinguish <kbd> from <code>, <samp>, and regular bo
 
 Here's how I distinguish <code> and <samp>, <pre>, and <kbd> from each other and from body text.
 ```
-code,
-kbd,
-samp {
+code, kbd, samp {
   font-family: monospace, monospace;
 }
 
 pre,
-:not(pre) > code {
+:not(pre) > code, :not(pre) > samp {
   border: 1px solid;
 }
 
-/* A black border is too harsh. */
-:not(pre) > code {
-  border-color: #aaa;
+/* Dark borders in text are too harsh */
+:not(pre) > code, :not(pre) > samp {
+  border-color: #999;
 }
 
 kbd {
diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md
index e2d9721..a3ccce0 100644
--- a/content/posts/website-best-practices.md
+++ b/content/posts/website-best-practices.md
@@ -563,8 +563,7 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
 <article aria-label="comic, caption, and transcript">
   <h4>Infinite scrolling</h4>
   <figure>
-    <img
-      src="SRC"
+    <img src="SRC"
       aria-describedby="transcript-xkcd-1309"
       alt="Comic: infinite-scrolling books require
            careful page-turns to avoid losing the page.">
@@ -990,7 +989,7 @@ Another example: outside the Web, I prefer indenting code with tabs instead of s
 Small phones typically support display rotation. When phones switch to landscape-mode, vertical space becomes precious. Fixed elements (e.g. dickbars) become a major usability hazard. Ironically, the WCAG's own interactive Techniques reference is a perfect example of how fixed elements impact usability on short screens.
 
 <figure>
-{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.75 >}}
+{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.5 >}}
 <figcaption>
 
 When filtering criteria on [the Quickref Reference page](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_customize&showtechniques=134%2C124&levels=a&technologies=js%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl), a dickbar lists active filters. I increased the zoom level; you may have to add more filters to fill the screen with a smaller font.
@@ -1125,21 +1124,19 @@ Finally, it's important to distinguish `<kbd>` from `<code>`, `<samp>`, and regu
 
 {{< codecaption lang="CSS" >}} How I distinguish `<code>` and `<samp>`, `<pre>`, and `<kbd>` from each other and from body text. {{< /codecaption >}}
 
-```figure
-code,
-kbd,
-samp {
+```figure {trans1="Dark borders in text are harsh",str1="code",str2="kbd",str3="samp",str4="pre"}
+code, kbd, samp {
   font-family: monospace, monospace;
 }
 
 pre,
-:not(pre) > code {
+:not(pre) > code, :not(pre) > samp {
   border: 1px solid;
 }
 
-/* A black border is too harsh. */
-:not(pre) > code {
-  border-color: #aaa;
+/* Dark borders in text are harsh */
+:not(pre) > code, :not(pre) > samp {
+  border-color: #999;
 }
 
 kbd {
diff --git a/layouts/_default/_markup/render-codeblock-figure.html b/layouts/_default/_markup/render-codeblock-figure.html
index 9d48458..1fe2746 100644
--- a/layouts/_default/_markup/render-codeblock-figure.html
+++ b/layouts/_default/_markup/render-codeblock-figure.html
@@ -6,7 +6,10 @@
 			{{- $after := printf `<var translate="yes">%s</var>` $v -}}
 			{{- $contents = $contents | replaceRE $v $after -}}
 		{{- else if strings.HasPrefix $k "str" -}}
-			{{- $after := printf `<strong translate="yes">%s</strong>` $v -}}
+			{{- $after := printf `<strong>%s</strong>` $v -}}
+			{{- $contents = $contents | replaceRE $v $after -}}
+		{{- else if strings.HasPrefix $k "trans" -}}
+			{{- $after := printf `<span translate="yes">%s</span>` $v -}}
 			{{- $contents = $contents | replaceRE $v $after -}}
 		{{- else if and (eq $k "samp")}}
 			{{- $samp = $v -}}