Merge pull request #103 from qmd-lab/feature-spacers

Add spacer shortcode

_extensions/closeread/_extension.yml

@@ -7,6 +7,8 @@ contributes:
     html:
       filters:
         - closeread.lua
+      shortcodes:
+        - spacer.lua
       css: closeread.css
       page-layout: full
       execute:

_extensions/closeread/closeread.scss

@@ -46,7 +46,11 @@
           margin-bottom: 0;
         }
       }
-
+
+      &:has(.cr-spacer) {
+        visibility: hidden;
+        padding-block: 0;
+      }
     }
   }
 

_extensions/closeread/spacer.lua

@@ -0,0 +1,24 @@
+function spacer(args)
+  local spacerLength = "40svh"
+  if args[1] ~= nil then
+    spacerString = pandoc.utils.stringify(args[1])
+  end
+
+  -- split spacer height into number and units
+  local _, _, spacerNumStr, spacerUnits =
+    string.find(spacerString, "(%d+)%s?(%a+);?")
+  local spacerNum = tonumber(spacerNumStr)
+
+  if (spacerNum == nil) then
+    error("Spacer height should be a number followed by a CSS unit, not " ..
+      spacerString)
+  end
+
+  -- halve and join back up
+  local spacerHeightHalved = tostring(spacerNum / 2) .. (spacerUnits or "")
+
+  return pandoc.Div({},
+    pandoc.Attr("",
+      { "cr-spacer" },
+      { style = "padding-block: " .. spacerHeightHalved .. ";" }))
+end

docs/gallery/examples/minards-map/index.qmd

@@ -27,8 +27,7 @@ An especially effective device for enhancing the explanatory power of time-serie
 
 :::{.cr-section}
 
-:::{style="padding-block: 20svh"}
-:::
+{{< spacer 10svh >}}
 
 The first is the classic of Charles Joseph Minard (1781-1870), the French engineer, which shows the terrible fate of Napoleon's army in Russia. Described by E. J. Marey as seeming to defy the pen of the historian by its brutal eloquence, 12 this combination of data map and time-series, drawn in 1869, portrays a sequence of devastating losses suffered in Napoleon's Russian campaign of 1812. @cr-map
 

docs/index.qmd

@@ -63,6 +63,8 @@ Step four: create a trigger to make the sticky appear. [@cr-doc]{highlight="12"}
 :::{style="height: 40dvh; visibility: hidden"}
 :::
 
+{{< spacer 40svh >}}
+
 Triggers, like this text, scroll past while the stickies stay "stuck" on the page. [@cr-doc]{highlight=""}
 
 :::{#cr-doc filename="myfirstcr.qmd" .scale-to-fill}