From 8aaf0df552357f72c7a0925ac7c76b2f5dc3dc1d Mon Sep 17 00:00:00 2001
From: gaspardbb <40466739+gaspardbb@users.noreply.github.com>
Date: Sat, 8 Apr 2023 15:43:36 +0200
Subject: [PATCH] Implemented details tag for distill blog  (#1321)

---
 _plugins/details.rb          | 24 ++++++++++++++++++++++++
 _posts/2018-12-22-distill.md | 10 ++++++++++
 _sass/_distill.scss          | 22 ++++++++++++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 _plugins/details.rb

diff --git a/_plugins/details.rb b/_plugins/details.rb
new file mode 100644
index 000000000000..fa12bf26d3c8
--- /dev/null
+++ b/_plugins/details.rb
@@ -0,0 +1,24 @@
+# Code from http://movb.de/jekyll-details-support.html
+
+module Jekyll
+    module Tags
+      class DetailsTag < Liquid::Block
+  
+        def initialize(tag_name, markup, tokens)
+          super
+          @caption = markup
+        end
+  
+        def render(context)
+          site = context.registers[:site]
+          converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
+          caption = converter.convert(@caption).gsub(/<\/?p[^>]*>/, '').chomp
+          body = converter.convert(super(context))
+          "<details><summary>#{caption}</summary>#{body}</details>"
+        end
+  
+      end
+    end
+  end
+  
+  Liquid::Template.register_tag('details', Jekyll::Tags::DetailsTag)
\ No newline at end of file
diff --git a/_posts/2018-12-22-distill.md b/_posts/2018-12-22-distill.md
index 39a6cc8cbecb..ca0da2b4d283 100644
--- a/_posts/2018-12-22-distill.md
+++ b/_posts/2018-12-22-distill.md
@@ -156,6 +156,16 @@ fig.write_html('assets/plotly/demo.html')
 
 ***
 
+## Details boxes 
+
+Details boxes are collapsible boxes which hide additional information from the user. They can be added with the `details` liquid tag:
+
+{% details Click here to know more %}
+Additional details, where math $$ 2x - 1 $$ and `code` is rendered correctly.
+{% enddetails %}
+
+***
+
 ## Layouts
 
 The main text column is referred to as the body.
diff --git a/_sass/_distill.scss b/_sass/_distill.scss
index 47837e7a8f7f..e8c05f04e4e4 100644
--- a/_sass/_distill.scss
+++ b/_sass/_distill.scss
@@ -35,6 +35,28 @@ d-article {
     display: inline;
   }
 
+  // Style taken from code blocks
+  details {  
+    color: var(--global-text-color);
+    background-color: var(--global-code-bg-color);
+    margin-top: 0;
+    padding: 8px 12px;
+    position: relative;
+    border-radius: 6px;
+    display: block;
+    margin-bottom: 20px;
+    grid-column: text;
+    overflow: auto;
+    max-width: 100%;
+    summary {
+      color: var(--global-theme-color);
+    }
+    p {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+  }
+
   d-contents {
     align-self: start;
     grid-column: 1 / 4;