Update component landing page (#677)

* Update component landing page

* Fix issues in R snippet

Author: tcbegley

docs/components_page/__init__.py

@@ -88,6 +88,8 @@ def _get_label(slug):
         return "InputGroup"
     if slug == "list_group":
         return "ListGroup"
+    if slug == "index":
+        return "Components"
     return slug.capitalize()
 
 
@@ -110,7 +112,7 @@ def register_apps():
         "jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"},
         "layout": {"markdown_path": COMPONENTS / "layout.md"},
         "list_group": {"markdown_path": COMPONENTS / "list_group.md"},
-        "main": {"markdown_path": COMPONENTS / "main.md"},
+        "index": {"markdown_path": COMPONENTS / "index.md"},
         "modal": {
             "markdown_path": COMPONENTS / "modal.md",
             "extra_env_vars": {"LOREM": LOREM},
@@ -163,7 +165,7 @@ def register_apps():
                     "label": _get_label(slug),
                 }
                 for slug in component_bodies
-                if _get_label(slug) != "Main"
+                if slug != "index"
             ],
         },
     ]
@@ -173,9 +175,14 @@ def register_apps():
     template = env.from_string(INDEX_STRING_TEMPLATE)
 
     for slug, kwargs in component_bodies.items():
+        requests_pathname_prefix = (
+            f"/docs/components/{slug}/"
+            if slug != "index"
+            else "/docs/components/"
+        )
         app = dash.Dash(
             external_stylesheets=["/static/loading.css"],
-            requests_pathname_prefix=f"/docs/components/{slug}/",
+            requests_pathname_prefix=requests_pathname_prefix,
             suppress_callback_exceptions=True,
             serve_locally=SERVE_LOCALLY,
             index_string=template.render(
@@ -197,6 +204,9 @@ def register_apps():
             )
         else:
             app.layout = parse(app, **kwargs)
-        routes[f"/docs/components/{slug}"] = app
+        if slug == "index":
+            routes["/docs/components"] = app
+        else:
+            routes[f"/docs/components/{slug}"] = app
 
     return routes

docs/components_page/components/index.md

@@ -0,0 +1,21 @@
+---
+title: Components
+lead: Usage examples for all components in dash-bootstrap-components
+---
+
+The component documentation for _dash-bootstrap-components_ contains many snippets showing example usage, as well as api documentation for each component explaining the different props that you can set.
+
+Example snippets for the different components will look something like this, with tabs to switch between R or Julia versions of the examples.
+
+{{example:components/index/simple.py:layout}}
+
+## Adding the snippets to your app
+
+Note that the contents of each snippet **do not by themselves constitute a working app**. We generally omit boilerplate code such as standard imports and instantiation of the app. In the above example you would additionally need to:
+
+1. import Dash
+2. create a Dash app instance (making sure to link a Bootstrap stylesheet, see the [themes documentation](/docs/themes/) for details)
+3. assign `layout` to the app layout
+4. start the Dash server.
+
+If any of the above steps are unclear, please take a look at the [Quickstart](/docs/quickstart/) instructions for creating a basic app, the [examples](https://github.com/facultyai/dash-bootstrap-components/tree/main/examples) in our GitHub repository, or refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dashr.plotly.com/), or [Julia](https://dash-julia.plotly.com/).

docs/components_page/components/index/simple.R

@@ -0,0 +1,10 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+layout <- dbcAlert(
+  paste(
+    "This is an example of a component being used in the wild.",
+    "Below me, you can find the code used to create me."
+  ),
+  color = "info"
+)

docs/components_page/components/index/simple.jl

@@ -0,0 +1,7 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+layout = dbc_alert(
+    "This is an example of a component being used in the wild. " *
+    "Below me, you can find the code used to create me.",
+    color = "info",
+)

docs/components_page/components/index/simple.py

@@ -0,0 +1,7 @@
+import dash_bootstrap_components as dbc
+
+layout = dbc.Alert(
+    "This is an example of a component being used in the wild. "
+    "Below me, you can find the code used to create me.",
+    color="info",
+)

docs/components_page/components/main.md

@@ -92,10 +92,6 @@ def faq():
         except TemplateNotFound:
             abort(404)
 
-    @server.route("/docs/components/")
-    def components_index():
-        return redirect("/docs/components/main", 302)
-
     @server.route("/l/components/", defaults={"slug": "main"})
     @server.route("/l/components/<slug>/")
     def components_redirect(slug):