misc changes following review

Author: rmorshea

docs/LICENSE

@@ -0,0 +1,8 @@
+body {
+  --admonition-title-font-size: 0.9rem !important;
+  --admonition-font-size: 0.9rem !important;
+}
+
+.admonition-title {
+  font-weight: bold !important;
+}

docs/source/_static/css/furo-theme-overrides.css

@@ -6,3 +6,9 @@ body {
   --sd-color-warning-text: var(--color-admonition-title--warning);
   --sd-color-danger-text: var(--color-admonition-title--danger);
 }
+
+.sd-card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}

docs/source/_static/css/sphinx-design-overrides.css

@@ -4,35 +4,43 @@ HTML With IDOM
 In a typical Python-base web application the resonsibility of defining the view along
 with its backing data and logic are distributed between a client and server
 respectively. With IDOM, both these tasks are centralized in a single place. This is
-done by allowing HTML interfaces to be constructed in Python. Let's consider the HTML
-sample below:
+done by allowing HTML interfaces to be constructed in Python. Take a look at the two
+code examples below. The one on the left shows how to make a basic title and todo list
+using standard HTML while the one of the right uses IDOM in Python:
 
-.. code-block:: html
+.. grid:: 2
+    :margin: 0
+    :padding: 0
 
-    <h1>My Todo List</h1>
-    <ul>
-        <li>Build a cool new app</li>
-        <li>Share it with the world!</li>
-    </ul>
+    .. grid-item::
 
-We can recreate the same thing with IDOM using functions attached to the
-:mod:`idom.html` module. These function share the same names as their corresponding HTML
-tags. For example, the `<h1/>` element above has a similarly named :func:`idom.html.h1`
-function. Given this we can write the following:
+        .. code-block:: html
 
-.. testcode::
+            <h1>My Todo List</h1>
+            <ul>
+                <li>Build a cool new app</li>
+                <li>Share it with the world!</li>
+            </ul>
 
-    from idom import html
+    .. grid-item::
 
-    html.h1("My Todo List")
-    html.ul(
-        html.li("Build a cool new app"),
-        html.li("Share it with the world!"),
-    )
+        .. testcode::
+
+            from idom import html
 
-That looks similar, but it's not very useful, we haven't captured the results from these
-function calls in a variable. To do this we need to wraps up layout above into a single
-:func:`idom.html.div` and assign it to a variable:
+            html.h1("My Todo List")
+            html.ul(
+                html.li("Build a cool new app"),
+                html.li("Share it with the world!"),
+            )
+
+What this shows is that you can recreate the same HTML layouts with IDOM using functions
+from the :mod:`idom.html` module. These function share the same names as their
+corresponding HTML tags. For example, the ``<h1/>`` element above has a similarly named
+:func:`~idom.html.h1` function. With that said, while the code above looks similar, it's
+not very useful because we haven't captured the results from these function calls in a
+variable. To do this we need to wraps up layout above into a single
+:func:`~idom.html.div` and assign it to a variable:
 
 .. testcode::
 
@@ -45,28 +53,31 @@ function calls in a variable. To do this we need to wraps up layout above into a
     )
 
 Having done this we can inspect what is contained in our new ``layout`` variable. As it
-turns out, it holds a dictionary:
+turns out, it holds a dictionary. Printing it produces the following output:
 
 .. testcode::
 
-    assert isinstance(layout, dict)
-
-And if we print the contents with :mod:`pprint` it should look like:
-
-.. testcode::
-
-    from pprint import pprint
-    pprint(layout, sort_dicts=False)
+    print(layout)
 
 .. testoutput::
-
-    {'tagName': 'div',
-    'children': [{'tagName': 'h1', 'children': ['My Todo List']},
-                {'tagName': 'ul',
-                'children': [{'tagName': 'li',
-                                'children': ['Build a cool new app']},
-                                {'tagName': 'li',
-                                'children': ['Share it with the world!']}]}]}
+    :options: +NORMALIZE_WHITESPACE
+
+    {
+        'tagName': 'div',
+        'children': [
+            {
+                'tagName': 'h1',
+                'children': ['My Todo List']
+            },
+            {
+                'tagName': 'ul',
+                'children': [
+                    {'tagName': 'li', 'children': ['Build a cool new app']},
+                    {'tagName': 'li', 'children': ['Share it with the world!']}
+                ]
+            }
+        ]
+    }
 
 This may look complicated, but let's take a moment to consider what's going on here. We
 have a series of nested dictionaries that, in some way, represents the HTML structure

docs/source/creating-interfaces/html-with-idom.rst

@@ -13,6 +13,7 @@ Creating Interfaces
 .. dropdown:: :octicon:`bookmark-fill;2em` What You'll Learn
     :color: info
     :animate: fade-in
+    :open:
 
     .. grid:: 2
 

docs/source/creating-interfaces/index.rst

@@ -0,0 +1,16 @@
+Credits and Licenses
+====================
+
+Much of this documentation was created with heavy influence from https://reactjs.org
+which uses the `Creative Commons Attribution 4.0 International
+<https://raw.githubusercontent.com/reactjs/reactjs.org/b2d5613b6ae20855ced7c83067b604034bebbb44/LICENSE-DOCS.md>`__
+license. While much of the content has been transformed in one way or another, we
+paraphrase or copy directly in places where React's behavior is mirroried by IDOM's.
+Additionally, the outline of the documentation closely mirror's React's documentation
+
+
+Source Code License
+-------------------
+
+.. literalinclude:: ../../LICENSE
+   :language: text

docs/source/credits-and-licenses.rst

@@ -10,6 +10,7 @@ Getting Started
 .. dropdown:: :octicon:`bookmark-fill;2em` What You'll Learn
     :color: info
     :animate: fade-in
+    :open:
 
     .. grid:: 2
 
@@ -58,9 +59,10 @@ To check that everything is working you can run the sample application:
 
 This should automatically open up a browser window to a page that looks like this:
 
-.. interactive-widget:: sample_app
-    :no-activate-button:
-    :margin: 12
+.. card::
+
+    .. interactive-widget:: sample_app
+        :no-activate-button:
 
 If you get a ``RuntimeError`` similar to the following:
 

docs/source/getting-started/index.rst

@@ -43,15 +43,9 @@ run your application by setting the ``IDOM_DEBUG_MODE`` environment variable.
             $env:IDOM_DEBUG_MODE = "1"
             python my_idom_app.py
 
-.. dropdown:: Leave debug mode off in production!
-    :color: danger
-    :animate: fade-in
+.. danger::
 
-    Turning on ``IDOM_DEBUG_MODE`` will:
-
-    - leak secrets
-    - display error messages to your users
-    - add extra checks that slow down your app
+    Leave debug mode off in production!
 
 Among other things, running in this mode:
 
@@ -290,5 +284,9 @@ existing Python app:
 After running ``python main.py``, you should be able to navigate to
 ``http://127.0.0.1:8000/index.html`` and see:
 
-.. image:: _static/embed-idom-view/screenshot.png
+.. card::
+    :text-align: center
+
+    .. image:: _static/embed-idom-view/screenshot.png
+        :width: 500px
 

docs/source/getting-started/running-idom.rst

@@ -18,7 +18,7 @@ IDOM
     understanding-idom/index
     developing-idom/index
     reference-material/index
-    licenses
+    credits-and-licenses
 
 .. toctree::
     :hidden:

docs/source/index.rst

@@ -5,5 +5,5 @@ setuptools_scm
 sphinx-copybutton ==0.3.0
 sphinx-autobuild ==2020.9.1
 sphinx-reredirects ==0.0.1
-sphinx-design ==0.0.12
+sphinx-design ==0.0.13
 sphinx-resolve-py-references ==0.1.0

docs/source/licenses.rst

@@ -10,7 +10,7 @@
 @component
 def App() -> VdomDict:
     return html.div(
-        {"style": {"padding": "15px", "border": "1px solid grey"}},
+        {"style": {"padding": "15px"}},
         html.h1("Sample Application"),
         html.p(
             "This is a basic application made with IDOM. Click ",