Distill: support for details tag (collapsible boxes)

[gaspardbb]

Details tag with Distill template

I came upon ejmastnak blog and I really liked how the they use collapsible boxes to hide unnecessary details to the user. Basically, it consists of:

<details> 
<summary> Title of the collapsible box </summary>
Some details
</details>

This is not supported in the theme's Distill template (no box, no dark theme, no markdown rendering).

Possible solution

What I did:

• Formatting: I edited _sass/_distill.scss to match roughly a code block in distill, which gives support for dark theme.

• Rendering markdown: I used this blog post to create a plugin which makes Jekyll aware of details tag.

Example

For instance, with the distill template this gives:

## Example of detail box.

Some **markdown** content.

{% details Click here to know more %}
Additional details, correct math $$ 2x - 1 $$ and code `is rendered correctly`.
{% enddetails %}

this rendering

Limitations

• Footnotes at the end of the details section are not rendered well (but I think that Distill's footnote would gain from being turned into Jekyll's plugins?)
• Would be nice to remove the details content from the "estimated reading time" of the blog's page

I can submit a PR if you want with those modifications, with the caveat that I know next to nothing of CSS, ruby and Jekyll inner mechanics 🙂

[kjabon]

I am but a humble al-folio user, but I would find this incredibly useful, as I just searched for this exact functionality and came upon this issue. +1 to adding this! (And if it gets rejected, maybe share the code? 😉)

[gaspardbb]

Sure! I opened a PR at #1321 . You can easily get the code from there for your own use in the meantime 🙂

[gaspardbb]

Thanks for accepting the PR! Glad it could be useful!