Expand details elements in PDF renders

Also clean up display of code blocks a bit,
and implement some sensible page breaks

docker/docker-compose.build-pdf.yaml

@@ -1,5 +1,3 @@
-version: "3.8"
-
 services:
   docs-pdf-builder:
     build:

scripts/pdf/cleanup_combined_markdown.mjs

@@ -233,7 +233,7 @@ function cleanup() {
             node.value = code;
             const siblings = ancestors[ancestors.length - 1].children;
             const idx = siblings.indexOf(node);
-            siblings.splice(idx + 1, 0, { type: "code", value: output });
+            siblings.splice(idx + 1, 0, { type: "code", lang: "output", value: output });
             return idx + 2;
           }
         }

scripts/pdf/generate_pdf.py

@@ -49,6 +49,7 @@ def main(args):
             "--from=gfm",
             "--self-contained",
             "--highlight-style=tango",
+            f"--include-in-header={BASE_DIR / 'pdf-script.html'}",
             f"--css={BASE_DIR / 'pdf-styles.css'}",
             f"--resource-path={':'.join((str(p) for p in resource_search_paths))}",
             f"--output={html_file}",

scripts/pdf/pdf-script.html

@@ -0,0 +1,10 @@
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+  var detailElements = document.querySelectorAll("details");
+  Array.prototype.slice.call(detailElements).forEach(function(e) {    
+    e.setAttribute("open", "");
+  });
+});
+</script>
+
+

scripts/pdf/pdf-styles.css

@@ -116,10 +116,32 @@ pre code {
   background-color: #f8f8f8; /* match SourceCode pandoc highlighting colors */
 }
 
+div.sourceCode { margin-bottom: 2rem; }
+
 @media screen {
   div.sourceCode { overflow: visible; }
 }
 
+pre.output {
+  margin-top: -2rem;
+  border-top: 1px dotted black;
+}
+
+pre.output, pre.output code  {
+  background-color: black;
+  color: white;
+}
+
+pre.output::before {
+  content: "output";
+  display: block;
+  margin: -0.2rem -0.1rem 0.3rem;
+  border-radius: 0.2rem;
+  background-color: #f8f8f8;
+  color: black;
+  text-align: center;
+}
+
 
 /* Tables */
 table {
@@ -148,3 +170,46 @@ td {
   padding: 0.3rem 0;
   padding-right: 1.5rem;
 }
+
+/*
+ * details / summary
+ */
+
+details hr {
+  display: none;
+}
+
+summary {
+  display: block;
+}
+
+summary::-webkit-details-marker { display: none }
+
+/* 
+ * page break hints
+ * wkhtmltopdf doesn't support page-break-after: avoid, so using this hack: https://stackoverflow.com/questions/9238868/how-do-i-avoid-a-page-break-immediately-after-a-heading/53742871#53742871
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  page-break-inside: avoid;
+}
+
+h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
+  content: "";
+  display: block;
+  height: 8em;
+  margin-bottom: -8em;
+}
+
+h2 {
+  page-break-before: always;
+}
+
+p, tr, li, blockquote, pre {
+  page-break-inside: avoid;
+}