clean up docs

Author: rmorshea

docs/source/_custom_js/package-lock.json

@@ -2,3 +2,7 @@ body {
   --admonition-title-font-size: 1rem !important;
   --admonition-font-size: 1rem !important;
 }
+
+.sidebar-container {
+  width: 16em;
+}

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

@@ -4,21 +4,58 @@ Managing State
 .. toctree::
     :hidden:
 
-    keeping-components-pure
-    logical-flow-of-state
-    structuring-your-state
+    structuring-your-state/index
     shared-component-state/index
-    when-to-reset-state
-    writing-tests
+    when-and-how-to-reset-state/index
 
+.. dropdown:: :octicon:`bookmark-fill;2em` What You'll Learn
+    :color: info
+    :animate: fade-in
+    :open:
+
+    .. grid:: 1 2 2 2
+
+        .. grid-item-card:: :octicon:`code-square` Structuring Your State
+            :link: structuring-your-state/index
+            :link-type: doc
+
+            Make it easy to reason about your application by organizing its state.
+
+        .. grid-item-card:: :octicon:`link` Shared Component State
+            :link: shared-component-state/index
+            :link-type: doc
+
+            Allow components to vary vary together, by lifting state into common
+            parents.
+
+        .. grid-item-card:: :octicon:`light-bulb` When and How to Reset State
+            :link: when-and-how-to-reset-state/index
+            :link-type: doc
+
+            Control if and how state is preserved by understanding it's relationship to
+            the "UI tree".
 
 
 Section 4: Shared Component State
 ---------------------------------
 
-Sometimes you want the state of two components to always change together. To do it, you
-need to be able to share state between those two components, to share state between 
-componets move state to the nearest parent. In React world this is known as "lifting
-state up" and it is a very common thing to do. Let's look at 2 examples, also from 
-`React <https://beta.reactjs.org/learn/sharing-state-between-components>`__, 
-but translated to IDOM.
+Sometimes, you want the state of two components to always change together. To do it,
+remove state from both of them, move it to their closest common parent, and then pass it
+down to them via props. This is known as “lifting state up”, and it’s one of the most
+common things you will do writing code with IDOM.
+
+In the example below the search input and the list of elements below share the same
+state, the state represents the food name. Note how the component ``Table`` gets called
+at each change of state. The component is observing the state and reacting to state
+changes automatically, just like it would do in React.
+
+.. idom:: shared-component-state/_examples/synced_inputs
+
+.. card::
+    :link: shared-component-state/index
+    :link-type: doc
+
+    :octicon:`book` Read More
+    ^^^^^^^^^^^^^^^^^^^^^^^^^
+
+    Allow components to vary vary together, by lifting state into common parents.

docs/source/managing-state/index.rst

@@ -3,16 +3,16 @@ Shared Component State
 
 
 Sometimes you want the state of two components to always change together. To do it, you
-need to be able to share state between those two components, to share state between 
-componets move state to the nearest parent. In React world this is known as "lifting
-state up" and it is a very common thing to do. Let's look at 2 examples, also from 
-`React <https://beta.reactjs.org/learn/sharing-state-between-components>`__, 
+need to be able to share state between those two components, to share state between
+components move state to the nearest parent. In React world this is known as "lifting
+state up" and it is a very common thing to do. Let's look at 2 examples, also from
+`React <https://beta.reactjs.org/learn/sharing-state-between-components>`__,
 but translated to IDOM.
 
 Synced Inputs
 -------------
 
-In the code below the two input boxes are syncronized, this happens because they share
+In the code below the two input boxes are synchronized, this happens because they share
 state. The state is shared via the parent component ``SyncedInputs``. Check the ``value``
 and ``set_value`` variables.
 
@@ -25,7 +25,7 @@ In the example below the search input and the list of elements below share the
 same state, the state represents the food name.
 
 Note how the component ``Table`` gets called at each change of state. The
-component is observing the state and reacting to state changes automatically, 
+component is observing the state and reacting to state changes automatically,
 just like it would do in React.
 
 .. idom:: _examples/filterable_list

docs/source/managing-state/keeping-components-pure.rst

@@ -1,7 +1,7 @@
 .. _When to Reset State:
 
-When to Reset State 🚧
-======================
+When and How to Reset State 🚧
+==============================
 
 .. note::
 

docs/source/managing-state/logical-flow-of-state.rst

@@ -10,3 +10,4 @@ Understanding IDOM
     why-idom-needs-keys
     the-rendering-process
     layout-render-servers
+    writing-tests