Implemented details tag for distill blog

_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)

_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.

_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;