Update button for more minimal style inspired by jupyterlab (#47)

* Update button for jupyter style

* Simplifying design further

* More CSS improvements

* Fix CSS

* Fix index

* Lighten CSS elements

* Cleaning up CSS for more reliable behavior

Author: choldgraf

docs/conf.py

@@ -1,26 +1,7 @@
-# -*- coding: utf-8 -*-
-#
-# Configuration file for the Sphinx documentation builder.
-#
-# This file does only contain a selection of the most common options. For a
-# full list see the documentation:
-# http://www.sphinx-doc.org/en/master/config
-
-# -- Path setup --------------------------------------------------------------
-
-# If extensions (or modules to document with autodoc) are in another directory,
-# add these directories to sys.path here. If the directory is relative to the
-# documentation root, use os.path.abspath to make it absolute, like shown here.
-#
-# import os
-# import sys
-# sys.path.insert(0, os.path.abspath('.'))
-
-
 # -- Project information -----------------------------------------------------
 
 project = "Sphinx Toggle Button"
-copyright = "2018, Chris Holdgraf"
+copyright = "2022, Executable Books Community"
 author = "Chris Holdgraf"
 
 # The short X.Y version
@@ -30,51 +11,17 @@
 
 
 # -- General configuration ---------------------------------------------------
-
-# If your documentation needs a minimal Sphinx version, state it here.
-#
-# needs_sphinx = '1.0'
-
-# Add any Sphinx extension module names here, as strings. They can be
-# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
-# ones.
-extensions = ["myst_parser", "sphinx_design", "sphinx_togglebutton"]
-
-# Add any paths that contain templates here, relative to this directory.
+extensions = ["myst_nb", "sphinx_examples", "sphinx_design", "sphinx_togglebutton"]
 templates_path = ["_templates"]
-
-# The suffix(es) of source filenames.
-# You can specify multiple suffix as a list of string:
-#
-# source_suffix = ['.rst', '.md']
 source_suffix = ".rst"
-
-# The master toctree document.
-master_doc = "index"
-
-# The language for content autogenerated by Sphinx. Refer to documentation
-# for a list of supported languages.
-#
-# This is also used if you do content translation via gettext catalogs.
-# Usually you set "language" from the command line for these cases.
+main_doc = "index"
 language = None
-
-# List of patterns, relative to source directory, that match files and
-# directories to ignore when looking for source files.
-# This pattern also affects html_static_path and html_extra_path .
 exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
 
-# The name of the Pygments (syntax highlighting) style to use.
-#pygments_style = "sphinx"
-
-
 # -- Options for HTML output -------------------------------------------------
-
-# The theme to use for HTML and HTML Help pages.  See the documentation for
-# a list of builtin themes.
-#
 html_theme = "sphinx_book_theme"
 # html_theme = "sphinx_rtd_theme"  # These are just for testing
+# html_theme = "pydata_sphinx_theme"
 # html_theme = "alabaster"
 # html_theme = "furo"
 
@@ -92,87 +39,3 @@
 # togglebutton_hint = "test show"
 # togglebutton_hint_hide = "test hide"
 # togglebutton_open_on_print = False
-
-# Add any paths that contain custom static files (such as style sheets) here,
-# relative to this directory. They are copied after the builtin static files,
-# so a file named "default.css" will overwrite the builtin "default.css".
-# html_static_path = ["_static"]
-
-# Custom sidebar templates, must be a dictionary that maps document names
-# to template names.
-#
-# The default sidebars (for documents that don't match any pattern) are
-# defined by theme itself.  Builtin themes are using these templates by
-# default: ``['localtoc.html', 'relations.html', 'sourcelink.html',
-# 'searchbox.html']``.
-#
-# html_sidebars = {}
-
-# -- Options for HTMLHelp output ---------------------------------------------
-
-# Output file base name for HTML help builder.
-htmlhelp_basename = "SphinxCollapseAdmonitionsdoc"
-
-
-# -- Options for LaTeX output ------------------------------------------------
-
-latex_elements = {
-    # The paper size ('letterpaper' or 'a4paper').
-    #
-    # 'papersize': 'letterpaper',
-    # The font size ('10pt', '11pt' or '12pt').
-    #
-    # 'pointsize': '10pt',
-    # Additional stuff for the LaTeX preamble.
-    #
-    # 'preamble': '',
-    # Latex figure (float) alignment
-    #
-    # 'figure_align': 'htbp',
-}
-
-# Grouping the document tree into LaTeX files. List of tuples
-# (source start file, target name, title,
-#  author, documentclass [howto, manual, or own class]).
-latex_documents = [
-    (
-        master_doc,
-        "SphinxCollapseAdmonitions.tex",
-        "Sphinx Collapse Admonitions Documentation",
-        "Chris Holdgraf",
-        "manual",
-    )
-]
-
-
-# -- Options for manual page output ------------------------------------------
-
-# One entry per manual page. List of tuples
-# (source start file, name, description, authors, manual section).
-man_pages = [
-    (
-        master_doc,
-        "SphinxCollapseAdmonitions",
-        "Sphinx Collapse Admonitions Documentation",
-        [author],
-        1,
-    )
-]
-
-
-# -- Options for Texinfo output ----------------------------------------------
-
-# Grouping the document tree into Texinfo files. List of tuples
-# (source start file, target name, title, author,
-#  dir menu entry, description, category)
-texinfo_documents = [
-    (
-        master_doc,
-        "SphinxCollapseAdmonitions",
-        "Sphinx Collapse Admonitions Documentation",
-        author,
-        "SphinxCollapseAdmonitions",
-        "One line description of project.",
-        "Miscellaneous",
-    )
-]

docs/index.md

@@ -7,19 +7,15 @@ For example:
 
 You can collapse admonitions (notes, warnings, etc) so that their content is hidden until users click the admonition title.
 
-:::{admonition} Example: click this title to toggle the content
-:class: dropdown
-You can toggle any admonition to hide its content behind a user click!
-Do so by adding a `dropdown` class to the admonition, like this:
+````{example} An example admonition toggle
+:reverse:
 
-````
-```{note}
+:::{admonition} Click the title to toggle
 :class: dropdown
 
-Some content
-```
-````
+This title was made into a dropdown admonition by adding `:class: dropdown` to it.
 :::
+````
 
 See {ref}`dropdown-admonitions` for more information.
 
@@ -29,19 +25,14 @@ You can also hide arbitrary content behind a toggle button.
 When users press the button, they will see the content.
 For example:
 
-::::{toggle}
+````{example} An example toggle directive
+:reverse:
 
-This is a toggled content block!
-It was added like this:
-
-````
 ```{toggle}
 This is a toggled content block!
 ```
 ````
 
-::::
-
 You can either do this with a `{toggle}` directive, or by adding a `toggle` CSS class to any elements you'd like hidden behind a toggle button.
 
 See [](use:css-selector) for more details.

docs/reference/index.md

@@ -3,6 +3,10 @@
 This page shows the most common ways that `sphinx-togglebutton` is used as a reference.
 This is a benchmark for styling, and also helps demonstrate the behavior of this extension.
 
+```{toctree}
+notebooks
+```
+
 ## Use amongst text
 
 Here's a paragraph, it's just here to provide some text context for the togglebuttons in this section.

docs/reference/notebooks.md

@@ -0,0 +1,98 @@
+---
+jupytext:
+  formats: ipynb,md:myst
+  text_representation:
+    extension: .md
+    format_name: myst
+    format_version: 0.12
+    jupytext_version: 1.8.2
+kernelspec:
+  display_name: Python 3
+  language: python
+  name: python3
+---
+
+# Jupyter notebooks
+
+Sphinx Togglebutton has support within MyST-NB.
+This page shows off showing / hiding inputs, outputs, and entire cells.
+
+```{code-cell} ipython3
+:tags: [hide-cell]
+
+from matplotlib import rcParams, cycler
+import matplotlib.pyplot as plt
+import numpy as np
+```
+
+## Hiding the cell
+
+```{code-cell} ipython3
+:tags: [hide-cell]
+# Fixing random state for reproducibility
+np.random.seed(19680801)
+
+N = 10
+data = [np.logspace(0, 1, 100) + np.random.randn(100) + ii for ii in range(N)]
+data = np.array(data).T
+cmap = plt.cm.coolwarm
+rcParams['axes.prop_cycle'] = cycler(color=cmap(np.linspace(0, 1, N)))
+
+
+from matplotlib.lines import Line2D
+custom_lines = [Line2D([0], [0], color=cmap(0.), lw=4),
+                Line2D([0], [0], color=cmap(.5), lw=4),
+                Line2D([0], [0], color=cmap(1.), lw=4)]
+
+fig, ax = plt.subplots(figsize=(10, 5))
+lines = ax.plot(data)
+ax.legend(custom_lines, ['Cold', 'Medium', 'Hot']);
+```
+
+## Hiding input
+
+```{code-cell} ipython3
+:tags: [hide-input]
+# Fixing random state for reproducibility
+np.random.seed(19680801)
+
+N = 10
+data = [np.logspace(0, 1, 100) + np.random.randn(100) + ii for ii in range(N)]
+data = np.array(data).T
+cmap = plt.cm.coolwarm
+rcParams['axes.prop_cycle'] = cycler(color=cmap(np.linspace(0, 1, N)))
+
+
+from matplotlib.lines import Line2D
+custom_lines = [Line2D([0], [0], color=cmap(0.), lw=4),
+                Line2D([0], [0], color=cmap(.5), lw=4),
+                Line2D([0], [0], color=cmap(1.), lw=4)]
+
+fig, ax = plt.subplots(figsize=(10, 5))
+lines = ax.plot(data)
+ax.legend(custom_lines, ['Cold', 'Medium', 'Hot']);
+```
+
+## Hiding output
+
+```{code-cell} ipython3
+:tags: [hide-output]
+# Fixing random state for reproducibility
+np.random.seed(19680801)
+
+N = 10
+data = [np.logspace(0, 1, 100) + np.random.randn(100) + ii for ii in range(N)]
+data = np.array(data).T
+cmap = plt.cm.coolwarm
+rcParams['axes.prop_cycle'] = cycler(color=cmap(np.linspace(0, 1, N)))
+
+
+from matplotlib.lines import Line2D
+custom_lines = [Line2D([0], [0], color=cmap(0.), lw=4),
+                Line2D([0], [0], color=cmap(.5), lw=4),
+                Line2D([0], [0], color=cmap(1.), lw=4)]
+
+fig, ax = plt.subplots(figsize=(10, 5))
+lines = ax.plot(data)
+ax.legend(custom_lines, ['Cold', 'Medium', 'Hot']);
+```

docs/use.md

@@ -24,20 +24,11 @@ You can hide any content and display a toggle button to show it by using certain
 </details>
 ```
 
-:::{admonition} example
-:class: tip
-This MyST Markdown:
-
-````md
+````{example}
 ```{image} https://media.giphy.com/media/FaKV1cVKlVRxC/giphy.gif
 :class: toggle
 ```
 ````
-results in:
-```{image} https://media.giphy.com/media/FaKV1cVKlVRxC/giphy.gif
-:class: toggle
-```
-:::
 
 ### Configure the CSS selector used to insert toggle buttons
 
@@ -65,20 +56,12 @@ sphinx_togglebutton_selector = ".toggle-this-element, #my-special-id"
 `sphinx-togglebutton` treats admonitions as a special case if they are selected.
 If a Sphinx admonition matches the toggle button selector, then its title will be displayed with a button to reveal its content.
 
-:::{admonition} example
-:class: tip
-````md
+````{example}
 ```{admonition} This will be shown
 :class: dropdown
 And this will be hidden!
 ```
 ````
-results in 
-```{admonition} This will be shown
-:class: dropdown
-And this will be hidden!
-```
-:::
 
 This works for any kind of Sphinx admoniton:
 

setup.py

@@ -27,6 +27,6 @@
         "sphinx_togglebutton": ["_static/togglebutton.css", "_static/togglebutton.js", "_static/togglebutton-chevron.svg"]
     },
     install_requires=["setuptools", "wheel", "sphinx", "docutils"],
-    extras_require={"sphinx": ["myst_parser", "sphinx_book_theme", "sphinx_design"]},
+    extras_require={"sphinx": ["matplotlib", "numpy", "myst_nb", "sphinx_book_theme", "sphinx_design", "sphinx_examples"]},
     classifiers=["License :: OSI Approved :: MIT License"],
 )