minor improvements to landing page

Author: rmorshea

docs/Dockerfile

@@ -18,7 +18,6 @@ RUN pip install --upgrade pip
 # Install IDOM
 # ------------
 ADD requirements ./requirements
-ADD .git ./.git
 ADD src ./src
 ADD scripts ./scripts
 ADD setup.py ./

docs/source/_custom_js/src/index.js

@@ -28,7 +28,7 @@ export function mountWidgetExample(
   }
 
   const enableWidgetButton = document.createElement("button");
-  enableWidgetButton.appendChild(document.createTextNode("Enable Widget"));
+  enableWidgetButton.appendChild(document.createTextNode("Activate"));
   enableWidgetButton.setAttribute("class", "enable-widget-button");
 
   enableWidgetButton.addEventListener("click", () =>

docs/source/_examples/hello_world.py

@@ -0,0 +1,9 @@
+from idom import component, html, run
+
+
+@component
+def App():
+    return html.h1("Hello world!")
+
+
+run(App)

docs/source/_exts/widget_example.py

@@ -19,12 +19,15 @@ class WidgetExample(SphinxDirective):
 
     option_spec = {
         "linenos": directives.flag,
-        "live-example-is-default-tab": directives.flag,
+        "result-is-default-tab": directives.flag,
+        "activate-result": directives.flag,
     }
 
     def run(self):
         example_name = self.arguments[0]
         show_linenos = "linenos" in self.options
+        live_example_is_default_tab = "result-is-default-tab" in self.options
+        activate_result = "activate-result" in self.options
 
         py_ex_path = examples / f"{example_name}.py"
         if not py_ex_path.exists():
@@ -34,26 +37,32 @@ def run(self):
             )
 
         labeled_tab_items = {
-            "Python Code": _literal_include_py(
+            "python": _literal_include_py(
                 name=example_name,
                 linenos=show_linenos,
             ),
-            "Live Example": _interactive_widget(
+            "result": _interactive_widget(
                 name=example_name,
-                with_activate_button="live-example-is-default-tab" not in self.options,
+                with_activate_button=not activate_result,
             ),
         }
 
+        labeled_tab_titles = {
+            "python": "Python",
+            "javascript": "Javascript",
+            "result": "▶️ Result",
+        }
+
         if (examples / f"{example_name}.js").exists():
-            labeled_tab_items["Javascript Code"] = _literal_include_js(
+            labeled_tab_items["javascript"] = _literal_include_js(
                 name=example_name,
                 linenos=show_linenos,
             )
 
         tab_label_order = (
-            ["Live Example", "Python Code", "Javascript Code"]
-            if "live-example-is-default-tab" in self.options
-            else ["Python Code", "Javascript Code", "Live Example"]
+            ["result", "python", "javascript"]
+            if live_example_is_default_tab
+            else ["python", "javascript", "result"]
         )
 
         return TabSetDirective(
@@ -62,7 +71,7 @@ def run(self):
             {},
             _make_tab_items(
                 [
-                    (label, labeled_tab_items[label])
+                    (labeled_tab_titles[label], labeled_tab_items[label])
                     for label in tab_label_order
                     if label in labeled_tab_items
                 ]

docs/source/_static/css/larger-headings.css

@@ -4,14 +4,6 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 2em !important;
+  margin-top: 1.5em !important;
   font-weight: 900 !important;
 }
-
-h2 {
-  font-size: 1.8em !important;
-}
-
-h3 {
-  font-size: 1.4em !important;
-}

docs/source/_static/css/widget-output-css-overrides.css

@@ -0,0 +1,8 @@
+.widget-container h1,
+.widget-container h2,
+.widget-container h3,
+.widget-container h4,
+.widget-container h5,
+.widget-container h6 {
+  margin: 0 !important;
+}

docs/source/_static/custom.js

@@ -2005,7 +2005,7 @@ function mountWidgetExample(
   }
 
   const enableWidgetButton = document.createElement("button");
-  enableWidgetButton.appendChild(document.createTextNode("Enable Widget"));
+  enableWidgetButton.appendChild(document.createTextNode("Activate"));
   enableWidgetButton.setAttribute("class", "enable-widget-button");
 
   enableWidgetButton.addEventListener("click", () =>

docs/source/index.md

@@ -0,0 +1,58 @@
+IDOM
+====
+
+.. toctree::
+    :hidden:
+    :caption: User Guide
+
+    getting-started/index
+    creating-interfaces/index
+    adding-interactivity/index
+    managing-state/index
+    escape-hatches/index
+
+.. toctree::
+    :hidden:
+    :caption: Other Resources
+
+    understanding-idom/index
+    contributing/index
+    reference-material/index
+
+.. toctree::
+    :hidden:
+    :caption: External Links
+
+    Source Code <https://github.com/idom-team/idom>
+    Community <https://github.com/idom-team/idom/discussions>
+    Issues <https://github.com/idom-team/idom/issues>
+
+
+IDOM is a powerful Python web framework for building **interactive websites without
+needing a single line of Javascript**. It does this by breaking down complex
+applications into nestable and reusable chunks of code called
+:ref:`"components" <Your First Component>` that allow you to focus on what your
+application does rather then how it does it.
+
+IDOM is also ecosystem independent. It can be added to existing applications built on a
+variety of sync and async web servers, as well as integrate with other frameworks like
+Django, Jupyter, and Plotly Dash. Not only does this mean you're free to choose what
+technology stack to run on, but on top of that, you can run the exact same components
+wherever you need them. For example, you can take a component originally developed in a
+Jupyter Notebook and embed it in your production application without changing anything
+about the component itself.
+
+
+At a Glance
+-----------
+
+To get you acquainted with IDOM, take a look at the tiny "hello world" application
+below:
+
+.. example:: hello_world
+    :activate-result:
+
+.. note::
+
+    Try clicking the **▶️ Result** tab to see what this displays!
+

docs/source/index.rst

@@ -7,14 +7,16 @@ Slideshow
 Try clicking the image 🖱️
 
 .. example:: slideshow
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Click Counter
 -------------
 
 .. example:: click_count
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 To Do List
@@ -23,7 +25,8 @@ To Do List
 Try typing in the text box and pressing 'Enter' 📋
 
 .. example:: todo
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 The Game Snake
@@ -34,7 +37,8 @@ Click to start playing and use the arrow keys to move 🎮
 Slow internet may cause inconsistent frame pacing 😅
 
 .. example:: snake_game
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Matplotlib Plot
@@ -43,7 +47,8 @@ Matplotlib Plot
 Pick the polynomial coefficients (separate each coefficient by a space) 🔢:
 
 .. example:: matplotlib_plot
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Simple Dashboard
@@ -52,7 +57,8 @@ Simple Dashboard
 Try interacting with the sliders 📈
 
 .. example:: simple_dashboard
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Dynamically Loaded React Components
@@ -62,7 +68,8 @@ This method is not recommended for use in production applications, but it's grea
 you're experimenting:
 
 .. example:: victory_chart
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Define Javascript Modules
@@ -71,7 +78,8 @@ Define Javascript Modules
 Shows a very simple chart implemented in vanilla Javascript:
 
 .. example:: super_simple_chart
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Material UI Button
@@ -80,7 +88,8 @@ Material UI Button
 Click the button to change the indicator 👇
 
 .. example:: material_ui_switch
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Pigeon Maps
@@ -89,7 +98,8 @@ Pigeon Maps
 Click the map to create pinned location 📍:
 
 .. example:: pigeon_maps
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 Cytoscape Network Graph
@@ -98,7 +108,8 @@ Cytoscape Network Graph
 You can move the nodes in the graph 🕸️:
 
 .. example:: network_graph
-    :live-example-is-default-tab:
+    :result-is-default-tab:
+    :activate-result:
 
 
 .. Links