Merge pull request #301152 from DanielSidhion/examples-collapsible

nixos-render-docs: make examples collapsible by default

2 files changed, 20 insertions, 4 deletions

diff --git a/doc/style.css b/doc/style.css
index fddf4f4823c7..38984169589f 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -347,6 +347,22 @@ div.appendix div.example {
     margin-top: 1.5em;
 }
 
+div.book div.example details,
+div.appendix div.example details {
+    padding: 5px;
+}
+
+div.book div.example details[open],
+div.appendix div.example details[open] {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+}
+
+div.book div.example details>summary,
+div.appendix div.example details>summary {
+    cursor: pointer;
+}
+
 div.book br.example-break,
 div.appendix br.example-break {
     display: none;
diff --git a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
index 2e43a6a2be87..1de511c7ce31 100644
--- a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
+++ b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py
@@ -219,13 +219,13 @@ class HTMLRenderer(Renderer):
     def example_open(self, token: Token, tokens: Sequence[Token], i: int) -> str:
         if id := cast(str, token.attrs.get('id', '')):
             id = f'id="{escape(id, True)}"' if id else ''
-        return f'<div class="example"><span {id} ></span>'
+        return f'<div class="example"><span {id} ></span><details>'
     def example_close(self, token: Token, tokens: Sequence[Token], i: int) -> str:
-        return '</div></div><br class="example-break" />'
+        return '</div></details></div><br class="example-break" />'
     def example_title_open(self, token: Token, tokens: Sequence[Token], i: int) -> str:
-        return '<p class="title"><strong>'
+        return '<summary><span class="title"><strong>'
     def example_title_close(self, token: Token, tokens: Sequence[Token], i: int) -> str:
-        return '</strong></p><div class="example-contents">'
+        return '</strong></span></summary><div class="example-contents">'
     def image(self, token: Token, tokens: Sequence[Token], i: int) -> str:
         src = self._pull_image(cast(str, token.attrs['src']))
         alt = f'alt="{escape(token.content, True)}"' if token.content else ""