switch to the pydata sphinx theme

Author: rmorshea

docs/main.py

@@ -20,7 +20,7 @@
 
 @app.route("/")
 async def forward_to_index(request):
-    return response.redirect("/docs/index.html")
+    return response.redirect("/docs/content/index.html")
 
 
 mount, element = multiview()

docs/source/conf.py

@@ -64,7 +64,7 @@
 source_suffix = ".rst"
 
 # The master toctree document.
-master_doc = "index"
+master_doc = "content/index"
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.
@@ -95,7 +95,7 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
-html_theme = "sphinx_rtd_theme"
+html_theme = "pydata_sphinx_theme"
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
@@ -110,7 +110,11 @@
 
 # These paths are either relative to html_static_path
 # or fully qualified paths (eg. https://...)
-html_css_files = ["css/interactive-widget.css"]
+html_css_files = [
+    "css/interactive-widget.css",
+    "css/custom-max-width.css",
+    "css/fix-code-linenos.css",
+]
 
 # Custom sidebar templates, must be a dictionary that maps document names
 # to template names.

docs/source/core-concepts.rst renamed to docs/source/content/advanced-usage/core-concepts.rst

@@ -0,0 +1,14 @@
+Advanced Usage
+==============
+
+Explains the high level abstractions of IDOM like layouts, distpatchers and servers as
+well as more advanced features that allow you to import existing or custom javascript
+into your IDOM views. If you're just getting started check out the :ref:`User Guide`
+first before you dive in here.
+
+.. toctree::
+    :maxdepth: 1
+
+    core-concepts
+    javascript-modules
+    extra-features

docs/source/extra-features.rst renamed to docs/source/content/advanced-usage/extra-features.rst

@@ -77,12 +77,8 @@ hook in a module of your own making on the fly. As before, we'll be using a
 parameter which is a file-like object. In the following example we'll use Victory again,
 but this time we'll add a callback to it. Unfortunately we can't just pass it in
 :ref:`like we did before <Passing Props To Components>` because Victory's event API
-is a bit more complex so we've implemented a quick wrapper for it in a file ``chart.js``.
-
-.. literalinclude:: examples/custom_chart.js
-    :language: javascript
-
-Which we can read in as a ``source`` to :class:`~idom.widgets.utils.Module`:
+is a bit more complex so we've implemented a quick wrapper for it in a file ``chart.js``
+which we can read in as a ``source`` to :class:`~idom.widgets.utils.Module`:
 
 Click the bars to trigger an event 👇
 

docs/source/content/advanced-usage/index.rst

@@ -0,0 +1,10 @@
+API Reference
+=============
+
+Detailed explanations of classes, functions, and protocols used by IDOM.
+
+.. toctree::
+    :maxdepth: 1
+
+    package-api
+    specifications

docs/source/javascript-modules.rst renamed to docs/source/content/advanced-usage/javascript-modules.rst

@@ -1,5 +1,5 @@
-API
-===
+Package API
+===========
 
 .. contents::
   :local:

docs/source/content/api-reference/index.rst

@@ -10,15 +10,10 @@ Libraries for defining and controlling interactive webpages with Python
 .. toctree::
     :maxdepth: 1
 
-    installation
-    getting-started
-    core-concepts
-    life-cycle-hooks
-    javascript-modules
-    specifications
-    extra-features
+    user-guide/index
     examples
-    api
+    advanced-usage/index
+    api-reference/index
 
 
 Early Days

docs/source/mimetype.json renamed to docs/source/content/api-reference/mimetype.json

@@ -9,7 +9,7 @@ Let's look at the example that you may have seen
 
 Since it's likely a lot to take in at once, we'll break it down piece by piece:
 
-.. literalinclude:: examples/slideshow.py
+.. literalinclude:: /examples/slideshow.py
     :lineno-start: 4
     :lines: 4-5
     :linenos:
@@ -25,7 +25,7 @@ will return a VDOM representing an image which, when clicked, will change.
 
 __ https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom
 
-.. literalinclude:: examples/slideshow.py
+.. literalinclude:: /examples/slideshow.py
     :lineno-start: 6
     :lines: 6
     :linenos:
@@ -41,7 +41,7 @@ that let's you update that value. In the case of ``Slideshow`` the value of the
 function allow us to change it. The one required argument of ``use_state`` is the
 *initial* state value.
 
-.. literalinclude:: examples/slideshow.py
+.. literalinclude:: /examples/slideshow.py
     :lineno-start: 8
     :lines: 8,9
     :linenos:
@@ -61,7 +61,7 @@ again, and its new result will be displayed.
 
 __ https://reactjs.org/docs/events.html
 
-.. literalinclude:: examples/slideshow.py
+.. literalinclude:: /examples/slideshow.py
     :lineno-start: 11
     :lines: 11-16
     :linenos:
@@ -73,7 +73,7 @@ can respond to it. We've also added a little bit of CSS styling to the image so
 when the cursor hoverse over the image it will become a pointer so it appears clickable.
 The returned model conforms to the `VDOM mimetype specification`_.
 
-.. literalinclude:: examples/slideshow.py
+.. literalinclude:: /examples/slideshow.py
     :lineno-start: 20
     :lines: 20
     :linenos:

docs/source/api.rst renamed to docs/source/content/api-reference/package-api.rst

@@ -0,0 +1,14 @@
+User Guide
+==========
+
+This guide is intended as an introductory overview of IDOM and explains how to install
+and make use of its most important features. For detailed usage and reference
+documentation see the :ref:`Advanced Usage` or :ref:`API Reference` sections respectively.
+
+.. toctree::
+    :maxdepth: 1
+
+    installation
+    getting-started
+    life-cycle-hooks
+    examples

docs/source/specifications.rst renamed to docs/source/content/api-reference/specifications.rst

@@ -105,7 +105,7 @@ def _literal_include_js_lines(name, linenos):
 
 
 _literal_include_template = """
-.. literalinclude:: examples/{name}.{ext}
+.. literalinclude:: /examples/{name}.{ext}
     :language: {language}
     {linenos}
 """

docs/source/branding/idom-logo-black-square.svg renamed to docs/source/content/branding/idom-logo-black-square.svg

@@ -0,0 +1,3 @@
+.container-xl {
+  max-width: 1400px !important;
+}

docs/source/branding/idom-logo-black.png renamed to docs/source/content/branding/idom-logo-black.png

@@ -0,0 +1,3 @@
+td.linenos pre {
+  padding: 10px !important;
+}

docs/source/branding/idom-logo-black.svg renamed to docs/source/content/branding/idom-logo-black.svg

@@ -1,5 +1,5 @@
 sphinx ==2.2.0
 sphinx-autodoc-typehints ==1.7.0
-sphinx-rtd-theme ==0.4.3
+pydata-sphinx-theme ==0.4.1
 sphinx-panels ==0.5.0
 setuptools_scm