Org html export: make src blocks collapsable

config.org

@@ -4635,6 +4635,38 @@ Suffice to say I've snatched it, with a few of my own tweaks applied.
 The TOC and theme toggle both use ~position: fixed~, and for some strange reason
 Chrome seems to be treating this as ~position: absolute~.
 #+end_warning
+***** Collapsable src and example blocks
+By wrapping the ~<pre>~ element in a ~<details>~ block, we can obtain collapsable
+blocks with no CSS, though we will toss a little in anyway to have this looking
+somewhat spiffy.
+
+#+NAME: Src blocks
+#+BEGIN_SRC emacs-lisp
+(defadvice! org-html-src-block-collapsable (orig-fn src-block contents info)
+  "Wrap the usual <pre> block in a <details>"
+  :around #'org-html-src-block
+  (let* ((properties (cadr src-block))
+         (lang (plist-get properties :language))
+         (name (plist-get properties :name)))
+    (format "<details class='code' open><summary%s>%s</summary>%s</details>"
+            (if name " class='named'" "")
+            (if (not name) lang (format "<span class='name'>%s</span> %s" name lang))
+            (funcall orig-fn src-block contents info))))
+#+END_SRC
+
+#+NAME: Exampl, fixed width, and property blocks
+#+BEGIN_SRC emacs-lisp
+(after! org
+  (defun org-html-block-collapsable (orig-fn block contents info)
+    "Wrap the usual block in a <details>"
+    (concat "<details class='code' open><summary></summary>"
+            (funcall orig-fn block contents info)
+            "</details>"))
+
+  (advice-add 'org-html-example-block   :around #'org-html-block-collapsable)
+  (advice-add 'org-html-fixed-width     :around #'org-html-block-collapsable)
+  (advice-add 'org-html-property-drawer :around #'org-html-block-collapsable))
+#+END_SRC
 ***** Make verbatim different to code
 Since we have =verbatim= and ~code~, let's use =verbatim= for key strokes.
 #+BEGIN_SRC emacs-lisp

misc/pile-css-theme/_code.scss

@@ -65,6 +65,37 @@ li {
   }
 }
 
+// folding
+
+details.code {
+  summary {
+    position: relative;
+    left: -2px;
+    padding-left: 10px;
+    padding-botton: 4px;
+    margin-left: -10px;
+    z-index: 1;
+    @include light-meta;
+    .name {
+      font-size: 14px;
+      color: $text-medium;
+    }
+  }
+  summary::marker {
+    color: $back-medium;
+  }
+  &[open] summary {
+    color: transparent;
+    margin-bottom: -32px;
+  }
+  &[open] summary.named {
+    margin-bottom: -26px;
+  }
+  &:not([open]) summary {
+    margin-bottom: -16px;
+  }
+}
+
 // Palette copied from blog
 // ------------------------
 // foreground: #655370

misc/pile-css-theme/main.css

@@ -1139,6 +1139,36 @@ li code {
 li p code {
   font-size: 15px; }
 
+details.code summary {
+  position: relative;
+  left: -2px;
+  padding-left: 10px;
+  padding-botton: 4px;
+  margin-left: -10px;
+  z-index: 1;
+  font-family: "Open Sans";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 1.9;
+  color: var(--text-light); }
+  details.code summary .name {
+    font-size: 14px;
+    color: var(--text-medium); }
+
+details.code summary::marker {
+  color: var(--back-medium); }
+
+details.code[open] summary {
+  color: transparent;
+  margin-bottom: -32px; }
+
+details.code[open] summary.named {
+  margin-bottom: -26px; }
+
+details.code:not([open]) summary {
+  margin-bottom: -16px; }
+
 .example,
 .src {
   color: var(--code-foreground); }