adding collapsible code blocks

[choldgraf]

This PR adds the basic support for collapsible code blocks on the built site. If you enable it in the configuration, any of the code cells will have a little button to the side that lets you hide the code contents. In addition, if a notebook cell has a hidecode tag in it, then by default the code will be hidden in the site (though it can be re-opened by clicking the button).

@emdupre what do you think about this? I'm thinking it might be time to cut a release of jupyter-book, then this can be the first feature in the next version so there's some time to iterate on it, fix the styling, etc.

Here's a demo of what it looks like:

[emdupre]

This looks great ! It looks like the tests are failing because we should add a space to this assert statement.

Really excited to see this added ! And I noticed you also added in the configuration for the sidebar here -- 👍

[choldgraf]

OK check out a live version here:

https://85-137292803-gh.circle-artifacts.com/0/html/features/notebooks.html

I updated to use icons instead of '+' and '-'. LMKWYT

[emdupre]

I think the icons are a little too bold -- could we make them blue ? But I do like the fixed-width !!

EDIT: I realized you're adding these as SVGs, and I don't want it to be a pain to update. The styling could always be revisited later, but the functionality is fantastic ! 🎉

[emdupre]

I started playing around with styling the SVG and encountered something I didn't quite understand so I was wondering if you had any hints --

It looks like you're just using the .hidebtn class in _sass/components/ to control the styling, but setting fill and stroke attributes (even with !important) doesn't seem to allow me to update the color. I am able to set a background-color attribute, which makes me wonder if it's something to do with the SVG itself ?

If you have any recs, I'd appreciate it !

[choldgraf]

hmmm, let me play around with this a bit once I get #30 working, which is kind of a beast to figure out, that ok? :-)

[choldgraf]

OK, the latest push re-works some of the collapsible code stuff. The buttons are now purely in CSS, which should make them much easier to customize and configure rather than using SVGs. It also adds some more explanation in the features section for how to enable this feature (as well as a couple other features). See the link to a demo page here:

https://330-137292803-gh.circle-artifacts.com/0/html/features/hiding.html

@emdupre wanna take another look at this? thanks for the feedback so far, I like this version of the feature much better than the last :-)

[choldgraf]

(actually, I'm gonna merge this one once the tests pass because I need to update the data8 textbook :-) ) we can spot-check problems in smaller PRs!

[emdupre]

Sounds great ! Thanks !