From 65164d642d73649fa975b686305d868bdc46fc3b Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Fri, 15 Dec 2023 16:15:58 +0100
Subject: [PATCH] fix: prettier documentation landing page

---
 solara/website/assets/custom.css              |  43 +++-
 solara/website/components/algolia_api.vue     |  38 ++-
 solara/website/components/docs.py             |  68 +++--
 solara/website/components/header.py           |  26 +-
 solara/website/pages/__init__.py              |  14 +-
 .../website/pages/apps/jupyter-dashboard-1.py |   2 +-
 .../website/pages/documentation/__init__.py   | 236 +++++++++---------
 .../{03-quickstart.md => 00-quickstart.md}    |   0
 ...{00-introduction.md => 01-introduction.md} |   0
 .../00-overview.md                            |   0
 .../10_data_science.py                        |   0
 .../20-web-app.md                             |   0
 .../30-ipywidgets.md                          |   0
 .../40-streamlit.md                           |   0
 .../{04-tutorial => 04-tutorials}/50-dash.md  |   0
 .../60-jupyter-dashboard-part1.py             |   0
 .../SF_crime_sample.csv.gz                    | Bin
 .../_data_science.ipynb                       |   0
 .../_jupyter_dashboard_1.ipynb                |   0
 solara/website/public/social/discord.svg      |   1 +
 solara/website/public/social/github.svg       |   1 +
 solara/website/public/social/twitter.svg      |   3 +
 tests/integration/server_test.py              |   2 +-
 tests/unit/autorouting_test.py                |   2 +-
 24 files changed, 261 insertions(+), 175 deletions(-)
 rename solara/website/pages/documentation/getting_started/content/{03-quickstart.md => 00-quickstart.md} (100%)
 rename solara/website/pages/documentation/getting_started/content/{00-introduction.md => 01-introduction.md} (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/00-overview.md (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/10_data_science.py (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/20-web-app.md (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/30-ipywidgets.md (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/40-streamlit.md (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/50-dash.md (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/60-jupyter-dashboard-part1.py (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/SF_crime_sample.csv.gz (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/_data_science.ipynb (100%)
 rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/_jupyter_dashboard_1.ipynb (100%)
 create mode 100644 solara/website/public/social/discord.svg
 create mode 100644 solara/website/public/social/github.svg
 create mode 100644 solara/website/public/social/twitter.svg

diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css
index fd7893910..17ff6840f 100644
--- a/solara/website/assets/custom.css
+++ b/solara/website/assets/custom.css
@@ -19,6 +19,11 @@
     --jp-content-font-size3: 1.75rem;
     --jp-content-font-size4: 2rem;
     --jp-content-font-size5: 2.25rem;
+
+    --docs-color-grey: #40362E;
+    --docs-social-discord: #5865F2;
+    --docs-social-github: #333;
+    --docs-social-twitter: #000000;
 }
 
 html,
@@ -116,16 +121,52 @@ blockquote p:last-child {
 /* API PAGE REFACTOR STYLE */
 
 .v-sheet.api-search-container{
-    height: 50vh;
+    flex-grow: 1;
 }
     .v-sheet.api-search-container .v-input{
         flex-grow: 0;
     }
+.v-sheet.docs-card-container{
+    width: 100%;
+    padding: 0 10%;
+    justify-content: start;
+    align-content: center;
+    flex-wrap: wrap !important;
+    flex-grow: 1;
+    row-gap: 20px;
+}
+.v-sheet.docs-card-container > a{
+    height: fit-content;
+}
+.v-sheet.docs-card-container > a > .docs-card{
+    display: flex;
+    width: 20rem;
+    height: 12rem;
+    border-radius: 16px !important;
+    color: var(--color-grey-light);
+}
+    .v-sheet.docs-card-container > a .docs-card-icon{
+        padding-right: 1.5rem;
+        transition: ease padding 0.25s;
+    }
+    .v-sheet.docs-card-container > a:hover .docs-card-icon{
+        color: var(--color-primary);
+        padding-right: 0.5rem;
+        transition: ease padding 0.25s;
+    }
 .component-card{
     display: flex;
     flex-direction: column;
     width: 19rem;
 }
+.social-logo-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 8px;
+}
 
 /* vuetify component overrides */
 
diff --git a/solara/website/components/algolia_api.vue b/solara/website/components/algolia_api.vue
index daeed9668..36fbd3e59 100644
--- a/solara/website/components/algolia_api.vue
+++ b/solara/website/components/algolia_api.vue
@@ -3,16 +3,19 @@
         v-model="show_results"
         offset-y>
         <template v-slot:activator="{ on }">
-            <v-text-field
-                v-model="query"
-                append-icon="mdi-magnify"
-                hide-details
-                placeholder="Search"
-                outlined
-                rounded
-                style="min-width: 19rem; width: 33%; background-color: #ffeec5;"
-                @click="show($event, on); item = 'Hi';"
-            ></v-text-field>
+                <v-text-field
+                    v-model="query"
+                    prepend-inner-icon="mdi-magnify"
+                    hide-details
+                    :placeholder="mac ? '⌘K to search' : 'Ctrl+K to search'"
+                    outlined
+                    rounded
+                    clearable
+                    ref="search"
+                    style="max-width: 50%; background-color: #fff; flex-grow: 1;"
+                    @click="show($event, on);"
+                    @keyup.enter="item = 0"
+                ></v-text-field>
         </template>
         <v-list v-if="results != null && results.length == 0">
             <v-list-item>
@@ -38,6 +41,7 @@
     </v-menu>
 </template>
 <script>
+const search = ref(null);
 module.exports = {
     async mounted() {
         window.search = this;
@@ -71,6 +75,19 @@ module.exports = {
         initSearch() {
             this.client = this.algoliasearch( '9KW9L7O5EQ', '647ca12ba642437cc40c2adee4a78d08' );
             this.index = this.client.initIndex( 'solara' );
+            this.mac = window.navigator.userAgent.indexOf("Mac") != -1;
+            document.addEventListener( 'keydown', ( e ) => {
+
+                if (this.mac) {
+                    if ( this.$refs.search && e.metaKey && e.key === 'k' ) {
+                        this.$refs.search.focus();
+                    }
+                }else{
+                    if ( this.$refs.search && e.ctrlKey && e.key === 'k' ) {
+                        this.$refs.search.focus();
+                    }
+                }
+            });
         },
         async search() {
             results = await this.index.search( this.query, { hitsPerPage: 10 } );
@@ -133,6 +150,7 @@ module.exports = {
             results: [],
             item: null,
             show_results: false,
+            mac: false,
         }
     },
 }
diff --git a/solara/website/components/docs.py b/solara/website/components/docs.py
index 433924433..edffe187f 100644
--- a/solara/website/components/docs.py
+++ b/solara/website/components/docs.py
@@ -13,33 +13,47 @@ def Gallery(route_external=None):
         router = solara.use_router()
         route_current = router.path_routes[-2]
 
-    for route in route_current.children:
-        if route.children:
-            solara.Markdown(f"## {route.label}")
-            with solara.Row(justify="center", gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px"}):
-                for child in route.children:
-                    if child.path == "/":
-                        continue
-                    path = route.path + "/" + child.path
-                    for extension in [".png", ".gif"]:
-                        image = path + extension
-                        image_path = Path(__file__).parent.parent / "public" / route_current.path / image
-                        image_url = "/static/public/" + route_current.path + "/" + image
-                        if image_path.exists():
-                            break
-                        else:
-                            image_url = "/static/public/logo.svg"
+    with solara.Column(gap="75px", align="center"):
+        with solara.Row(justify="center", gap="30px", style={"margin": "30px 0 !important", "flex-wrap": "wrap", "align-items": "start", "row-gap": "30px"}):
+            for child in route_current.children:
+                if child.path == "/":
+                    continue
+                with solara.v.Html(tag="a", attributes={"href": "#" + child.path}):
+                    solara.Button(
+                        child.label,
+                        color="primary",
+                        classes=["v-btn--rounded", "v-size--x-large"],
+                    )
 
-                    if path:
-                        path = path if route_external is None else route_current.path + "/" + path
-                        title = solara.Link(path, children=[child.label])
-                        with solara.Card(title, classes=["component-card"], margin=0):
-                            with solara.Link(path):
-                                if not image_path.exists():
-                                    with solara.Column(align="center"):
-                                        solara.Image(image_url, width="120px")
-                                else:
-                                    solara.Image(image_url, width="100%")
+        with solara.Column(gap="75px", style={"padding-bottom": "75px"}):
+            for route in route_current.children:
+                if route.children:
+                    with solara.Column(classes=["subcategory-row", "ps-md-10"]):
+                        solara.HTML(tag="h2", unsafe_innerHTML=route.label, attributes={"id": route.path}, style="padding-left: 10%;")
+                        with solara.Row(justify="center", gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px"}):
+                            for child in route.children:
+                                if child.path == "/":
+                                    continue
+                                path = route.path + "/" + child.path
+                                for extension in [".png", ".gif"]:
+                                    image = path + extension
+                                    image_path = Path(__file__).parent.parent / "public" / route_current.path / image
+                                    image_url = "/static/public/" + route_current.path + "/" + image
+                                    if image_path.exists():
+                                        break
+                                    else:
+                                        image_url = "/static/public/logo.svg"
+
+                                if path:
+                                    path = path if route_external is None else route_current.path + "/" + path
+                                    title = solara.Link(path, children=[child.label])
+                                    with solara.Card(title, classes=["component-card"], margin=0):
+                                        with solara.Link(path):
+                                            if not image_path.exists():
+                                                with solara.Column(align="center"):
+                                                    solara.Image(image_url, width="120px")
+                                            else:
+                                                solara.Image(image_url, width="100%")
 
 
 @solara.component
@@ -81,7 +95,7 @@ def SubCategoryLayout(children=[]):
     elif route_current.module:
         WithCode(route_current.module)
     else:
-        with solara.Column(align="center", children=children, style={"flex-grow": 1}) as main:
+        with solara.Column(align="center", children=children, style={"flex-grow": 1, "padding": "0"}) as main:
             pass
         return main
 
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
index 3d389eaf9..c7f0a0e12 100644
--- a/solara/website/components/header.py
+++ b/solara/website/components/header.py
@@ -5,8 +5,8 @@
 from solara.server import settings
 
 
-@solara.component_vue("algolia.vue")
-def Algolia(app_id: str, api_key: str, index_name: str, debug=False):
+@solara.component_vue("algolia_api.vue")
+def Algolia():
     pass
 
 
@@ -17,6 +17,7 @@ def Header(
 ):
     # use routes of parent (assuming we are a child of a layout)
     route_current, all_routes = solara.use_route(level=-1)
+    route_current_with_children, all_routes_with_children = solara.use_route()
     router = solara.use_router()
 
     # set states for menu
@@ -47,15 +48,22 @@ def Header(
                         rv.Icon(children=["mdi-menu"])
                 with solara.Link(path_or_route="/"):
                     solara.Image(router.root_path + "/static/assets/images/logo.svg")
-            rv.Spacer()
 
-            if settings.search.enabled:
-                from solara_enterprise.search.search import Search
-
-                Search()
+            if (
+                route_current_with_children is not None
+                and route_current is not None
+                and route_current.path == "documentation"
+                and route_current_with_children.path == "/"
+            ):
+                solara.v.Spacer()
             else:
-                Algolia(app_id="9KW9L7O5EQ", api_key="ef7495102afff1e16d1b7cf6ec2ab2d0", index_name="solara")
-            # menu
+                if settings.search.enabled:
+                    from solara_enterprise.search.search import Search
+
+                    Search()
+                else:
+                    with solara.Row(justify="end", style={"align-items": "center", "flex-grow": "1", "background-color": "transparent"}):
+                        Algolia()
             with rv.Html(tag="ul", class_="main-menu menu d-none d-md-flex"):
                 for route in all_routes:
                     if route.path in ["apps", "contact", "changelog"]:
diff --git a/solara/website/pages/__init__.py b/solara/website/pages/__init__.py
index 8c22072e4..aa9d418fe 100644
--- a/solara/website/pages/__init__.py
+++ b/solara/website/pages/__init__.py
@@ -267,7 +267,7 @@ def Layout(children=[]):
                             MailChimp(location=router.path)
             else:
                 with rv.Row(
-                    style_="gap:40px; flex-wrap: nowrap; margin: 0; min-height: calc(100vh - 215.5px);",
+                    style_="flex-wrap: nowrap; margin: 0; min-height: calc(100vh - 215.5px);",
                     justify="center" if route_current is not None and route_current.path in ["documentation", "showcase"] else "start",
                 ):
                     if route_current is not None and hasattr(route_current.module, "Sidebar"):
@@ -278,13 +278,19 @@ def Layout(children=[]):
                     with rv.Col(
                         tag="main",
                         md=True,
-                        class_="pt-12 pl-12 pr-10",
-                        style_=f"max-width: {'1024px' if route_current.path not in ['documentation', 'contact', 'changelog'] else 'unset'}; overflow: auto;",
+                        class_="pa-0",
+                        style_=f"""max-width: {'1024px' if route_current.path not in ['documentation', 'contact', 'changelog']
+                                               else 'unset'}; overflow: hidden auto;""",
                     ):
                         if route_current is not None and route_current.path == "/":
                             with rv.Row(align="center"):
                                 pass
-                        with rv.Row(children=children, justify="center", class_="solara-page-content-search"):
+                        with solara.Row(
+                            children=children,
+                            justify="center",
+                            classes=["solara-page-content-search"],
+                            style=f"height: {'100%' if route_current.path == 'documentation' else 'unset'};",
+                        ):
                             pass
 
             # absolute = True prevents the drawer from being below the overlay it generates
diff --git a/solara/website/pages/apps/jupyter-dashboard-1.py b/solara/website/pages/apps/jupyter-dashboard-1.py
index 41b92aaac..ccd980937 100644
--- a/solara/website/pages/apps/jupyter-dashboard-1.py
+++ b/solara/website/pages/apps/jupyter-dashboard-1.py
@@ -14,7 +14,7 @@
 limit = solara.reactive(100)
 
 
-ROOT = Path(solara.__file__).parent / "website" / "pages" / "documentation" / "getting_started" / "content" / "04-tutorial"
+ROOT = Path(solara.__file__).parent / "website" / "pages" / "documentation" / "getting_started" / "content" / "04-tutorials"
 path = ROOT / Path("SF_crime_sample.csv.gz")
 url = "https://raw.githubusercontent.com/widgetti/solara/master/solara/website/pages/docs/content/04-tutorial/SF_crime_sample.csv"
 
diff --git a/solara/website/pages/documentation/__init__.py b/solara/website/pages/documentation/__init__.py
index c38c94501..92222da81 100644
--- a/solara/website/pages/documentation/__init__.py
+++ b/solara/website/pages/documentation/__init__.py
@@ -1,14 +1,15 @@
 from pathlib import Path
 
 import solara
-from solara.server import settings
 
 _title = "Documentation"
 
 HERE = Path(__file__).parent
 
+route_order = ["/", "getting_started", "examples", "components", "api", "advanced", "faq"]
 
-@solara.component_vue(str(HERE.parent.parent) + "/components/algolia_api.vue")
+
+@solara.component_vue(str(HERE.parent.parent / "components" / "algolia_api.vue"))
 def Algolia():
     pass
 
@@ -19,139 +20,132 @@ def Page(children=[]):
     router = solara.use_router()
     route_current = router.path_routes[-2]
 
-    with solara.Column(style={"width": "100%"}, classes=["pr-md-10"]):
-        with solara.Column(
-            classes=["api-search-container"] if route_current.path == "documentation" else [], gap="75px", style={"justify-content": "center"}, align="center"
-        ):
-            solara.Markdown("# Search the Solara Documentation", style={"text-align": "center"})
-
-            if settings.search.enabled:
-                from solara_enterprise.search.search import Search
-
-                query = solara.use_reactive("")
-                input = solara.v.TextField(
-                    v_model=query.value,
-                    on_v_model=query.set,
-                    background_color="#ffeec5",
-                    outlined=True,
-                    label="Search",
-                    class_="api-search",
-                    rounded=True,
-                    prepend_inner_icon="mdi-magnify",
-                    style_="min-width: 19rem; width: 33%;",
-                    hide_details=True,
-                )
-
-                Search(input_widget=input, query=query.value)
-            else:
-                Algolia()
-
+    with solara.Column(style={"width": "100%"}, gap="75px"):
         if route_current.path == "documentation":
-            QuickBrowse(route_current)
+            with solara.Column(classes=["api-search-container"], gap="50px", style={"justify-content": "center"}, align="center"):
+                solara.Markdown("# Search the Solara Documentation", style={"text-align": "center"})
+                with solara.Row(style={"width": "100%", "min-width": "20rem", "justify-content": "center", "background-color": "transparent"}):
+                    Algolia()
+            with solara.Row(gap="20px", classes=["docs-card-container"]):
+                for route in route_current.children:
+                    if route.path in ["/", "advanced", "faq"]:
+                        continue
+                    with solara.Link("/documentation/" + route.path):
+                        with solara.Row(
+                            classes=["docs-card"],
+                            style={
+                                "background-color": f"var({'--docs-color-grey' if route.path != 'getting_started' else '--color-primary'})",
+                            },
+                        ):
+                            with solara.Column(style={"height": "100%", "flex-grow": "1", "background-color": "transparent"}):
+                                solara.HTML(tag="h2", unsafe_innerHTML=route.label, style={"color": "white", "padding": "1.5rem"})
+                            with solara.Column(style={"justify-content": "center", "height": "100%", "background-color": "transparent"}):
+                                solara.v.Icon(children=["mdi-arrow-right"], color="var(--color-grey-light)", x_large=True, class_="docs-card-icon")
+            with solara.Row(gap="75px", style={"flex-wrap": "wrap", "row-gap": "75px", "padding-bottom": "75px"}):
+                with solara.Column(style={"padding-left": "10%"}):
+                    solara.HTML(tag="h2", unsafe_innerHTML="How to use our documentation:", style={"padding": "1.5rem"})
+                    solara.Markdown(
+                        """
+* [Getting Started](/documentation/getting_started) - Learn how to install Solara and get started with building your app.
+    Also includes tutorials for you to get a hang of Solara workflow.
+* [Examples](/documentation/examples) - More complex and real world applicable examples of Solara apps.
+    For even more complexity you can see the [Showcase](/showcase) page.
+* [Components](/documentation/components) - All the components that are available in Solara.
+* [API](/documentation/api) - All the API functions that are available in Solara. Importantly, this includes routing and hooks.
+* [Advanced](/documentation/advanced) - Advanced topics like associated and underlying libraries.
+    If a component you would like to use is not available in Solara, you can use the underlying library directly.
+                    """
+                    )
+                with solara.Column(style={"justify-content": "center", "height": "100%"}):
+                    solara.HTML(tag="h2", unsafe_innerHTML="Also Check Out", style={"padding": "1.5rem"})
+                    with solara.Row(gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px", "align-items": "center"}):
+                        with solara.v.Html(tag="a", attributes={"href": "https://discord.solara.dev", "target": "_blank"}):
+                            with solara.Div(classes=["social-logo-container"], style={"background-color": "var(--docs-social-discord)"}):
+                                solara.v.Html(tag="img", attributes={"src": "/static/public/social/discord.svg"}, style_="height: 1.5rem; width: auto;")
+                        solara.Text("We use discord to provide support and answer questions there actively.")
+                    with solara.Row(gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px", "align-items": "center"}):
+                        with solara.v.Html(tag="a", attributes={"href": "https://github.com/widgetti/solara", "target": "_blank"}):
+                            with solara.Div(classes=["social-logo-container"], style={"background-color": "var(--docs-social-github)"}):
+                                solara.v.Html(tag="img", attributes={"src": "/static/public/social/github.svg"}, style_="height: 1.5rem; width: auto;")
+                        solara.Text("Search for solutions on Github issues, or report bugs.")
+                    with solara.Row(gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px", "align-items": "center"}):
+                        with solara.v.Html(tag="a", attributes={"href": "https://twitter.com/solara_dev", "target": "_blank"}):
+                            with solara.Div(classes=["social-logo-container"], style={"background-color": "var(--docs-social-twitter)"}):
+                                solara.v.Html(tag="img", attributes={"src": "/static/public/social/twitter.svg"}, style_="height: 1.5rem; width: auto;")
+                        solara.Text("Get announcements about Solara features, showcases, and events!.")
+
         else:
-            with solara.Column(align="center", children=children):
+            with solara.Column(align="center", children=children, style={"padding": "0"}):
                 pass
 
 
-@solara.component
-def QuickBrowse(route_current):
-    selected = solara.use_reactive("")
-
-    with solara.Column(gap="75px", align="center"):
-        with solara.Row(justify="center", gap="30px", style={"flex-wrap": "wrap", "align-items": "start", "row-gap": "30px"}):
-            for child in reversed(route_current.children):
-                if child.path == "/":
-                    continue
-                solara.Button(
-                    child.label,
-                    on_click=lambda path=child.path: selected.set(path),
-                    color="primary",
-                    classes=["v-btn--rounded", "v-size--x-large", "darken-3" if selected.value == child.path else ""],
-                )
-        if selected.value:
-            with solara.v.TabsItems(
-                v_model=selected.value, style_=f"width: {'1024px' if selected.value in ['getting_started', 'faq'] else '90%'}; padding-bottom: 75px;"
-            ):
-                for child in reversed(route_current.children):
-                    if child.path == "/":
-                        continue
-                    with solara.v.TabItem(v_model=child.path, style={"width": "100%"}):
-                        with solara.Column(style={"flex-grow": "1"}):
-                            with solara.Link("/" + route_current.path + "/" + child.path if child.path != "/" else "/" + route_current.path):
-                                solara.HTML(tag="h2", unsafe_innerHTML=child.label, style={"text-align": "center"})
-                            child.module.Page(route_external=child)
-
-
 @solara.component
 def Sidebar():
     route_current, all_routes = solara.use_route()
     if route_current is None:
         return solara.Error("Page not found")
 
-    with solara.v.NavigationDrawer(clipped=True, height="unset", style_="min-height: calc(100vh - 215.5px);", class_="d-none d-md-block") as main:
+    with solara.v.NavigationDrawer(
+        clipped=True, width="20rem", height="unset", style_="min-height: calc(100vh - 215.5px);", class_="d-none d-md-block"
+    ) as main:
         with solara.v.List(expand=True, nav=True, style_="height: calc(100vh - 215.5px); display: flex; flex-direction: column;"):
             with solara.v.ListItemGroup():
-                with solara.Link("/documentation/"):
-                    with solara.v.ListItem():
-                        solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-home"])])
-                        solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Home"])
-            for route in reversed(all_routes):
-                if route.path == "/":
-                    continue
-                if len(route.children) == 1:
-                    with solara.v.ListItemGroup():
-                        with solara.Link("/documentation/" + route.path):
+                for route in all_routes:
+                    if len(route.children) == 1 or route.path == "/":
+                        with solara.Link("/documentation/" + route.path if route.path != "/" else "/documentation"):
                             with solara.v.ListItem():
+                                if route.path == "/":
+                                    solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-home"])])
                                 solara.v.ListItemTitle(style_="padding: 0 20px;", children=[route.label])
-                else:
-                    with solara.v.ListGroup(
-                        v_slots=[
-                            {
-                                "name": "activator",
-                                "children": solara.v.ListItemTitle(
-                                    children=[route.label],
-                                    style_="padding: 0 20px;",
-                                ),
-                            }
-                        ]
-                    ):
-                        for item in route.children:
-                            if item.path == "/":
-                                continue
-                            if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
-                                with solara.v.ListGroup(
-                                    v_slots=[
-                                        {
-                                            "name": "activator",
-                                            "children": solara.v.ListItemTitle(
-                                                children=[item.label],
-                                            ),
-                                        }
-                                    ],
-                                    sub_group=True,
-                                    no_action=True,
-                                ):
-                                    for subitem in item.children:
-                                        # skip pages that are only used to demonstrate Link or Router usage
-                                        if subitem.path == "/" or subitem.label is None:
-                                            continue
-                                        with solara.v.ListItemGroup():
-                                            with solara.Link(
-                                                "/documentation/" + route.path + "/" + item.path + "/" + subitem.path,
-                                            ):
-                                                with solara.v.ListItem(dense=True, style_="padding: 0 20px;"):
-                                                    solara.v.ListItemContent(
-                                                        children=[subitem.label],
-                                                    )
-                            else:
-                                with solara.v.ListItemGroup():
-                                    with solara.Link(
-                                        "/documentation/" + route.path + "/" + item.path,
+                    else:
+                        with solara.v.ListGroup(
+                            v_slots=[
+                                {
+                                    "name": "activator",
+                                    "children": solara.v.ListItemTitle(
+                                        children=[route.label],
+                                        style_="padding: 0 20px;",
+                                    ),
+                                }
+                            ]
+                        ):
+                            for item in route.children:
+                                if item.path == "/":
+                                    continue
+                                if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
+                                    with solara.v.ListGroup(
+                                        v_slots=[
+                                            {
+                                                "name": "activator",
+                                                "children": solara.v.ListItemTitle(
+                                                    children=[item.label],
+                                                ),
+                                            }
+                                        ],
+                                        sub_group=True,
+                                        no_action=True,
                                     ):
-                                        with solara.v.ListItem(dense=True, style_="padding: 0 20px;"):
-                                            solara.v.ListItemContent(
-                                                children=[item.label],
-                                            )
+                                        for subitem in item.children:
+                                            # skip pages that are only used to demonstrate Link or Router usage
+                                            if subitem.path == "/" or subitem.label is None:
+                                                continue
+                                            with solara.v.ListItemGroup():
+                                                with solara.Link(
+                                                    "/documentation/" + route.path + "/" + item.path + "/" + subitem.path,
+                                                ):
+                                                    with solara.v.ListItem(dense=True, style_="padding: 0 20px;"):
+                                                        solara.v.ListItemContent(
+                                                            children=[subitem.label],
+                                                        )
+                                else:
+                                    with solara.v.ListItemGroup():
+                                        with solara.Link(
+                                            "/documentation/" + route.path + "/" + item.path,
+                                        ):
+                                            with solara.v.ListItem(dense=True, style_="padding: 0 20px;"):
+                                                solara.v.ListItemContent(
+                                                    children=[item.label],
+                                                )
             solara.v.Spacer(style_="flex-grow: 1;")
             with solara.v.ListItemGroup():
                 with solara.Link("/contact"):
@@ -179,5 +173,5 @@ def Layout(children=[]):
 
 
 @solara.component
-def NoPage():
-    raise RuntimeError("This page should not be rendered")
+def Overview():
+    pass
diff --git a/solara/website/pages/documentation/getting_started/content/03-quickstart.md b/solara/website/pages/documentation/getting_started/content/00-quickstart.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/03-quickstart.md
rename to solara/website/pages/documentation/getting_started/content/00-quickstart.md
diff --git a/solara/website/pages/documentation/getting_started/content/00-introduction.md b/solara/website/pages/documentation/getting_started/content/01-introduction.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/00-introduction.md
rename to solara/website/pages/documentation/getting_started/content/01-introduction.md
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/00-overview.md b/solara/website/pages/documentation/getting_started/content/04-tutorials/00-overview.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/00-overview.md
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/00-overview.md
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/10_data_science.py b/solara/website/pages/documentation/getting_started/content/04-tutorials/10_data_science.py
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/10_data_science.py
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/10_data_science.py
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/20-web-app.md b/solara/website/pages/documentation/getting_started/content/04-tutorials/20-web-app.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/20-web-app.md
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/20-web-app.md
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/30-ipywidgets.md b/solara/website/pages/documentation/getting_started/content/04-tutorials/30-ipywidgets.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/30-ipywidgets.md
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/30-ipywidgets.md
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/40-streamlit.md b/solara/website/pages/documentation/getting_started/content/04-tutorials/40-streamlit.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/40-streamlit.md
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/40-streamlit.md
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/50-dash.md b/solara/website/pages/documentation/getting_started/content/04-tutorials/50-dash.md
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/50-dash.md
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/50-dash.md
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/60-jupyter-dashboard-part1.py b/solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/60-jupyter-dashboard-part1.py
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/SF_crime_sample.csv.gz b/solara/website/pages/documentation/getting_started/content/04-tutorials/SF_crime_sample.csv.gz
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/SF_crime_sample.csv.gz
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/SF_crime_sample.csv.gz
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/_data_science.ipynb b/solara/website/pages/documentation/getting_started/content/04-tutorials/_data_science.ipynb
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/_data_science.ipynb
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/_data_science.ipynb
diff --git a/solara/website/pages/documentation/getting_started/content/04-tutorial/_jupyter_dashboard_1.ipynb b/solara/website/pages/documentation/getting_started/content/04-tutorials/_jupyter_dashboard_1.ipynb
similarity index 100%
rename from solara/website/pages/documentation/getting_started/content/04-tutorial/_jupyter_dashboard_1.ipynb
rename to solara/website/pages/documentation/getting_started/content/04-tutorials/_jupyter_dashboard_1.ipynb
diff --git a/solara/website/public/social/discord.svg b/solara/website/public/social/discord.svg
new file mode 100644
index 000000000..5ea93965b
--- /dev/null
+++ b/solara/website/public/social/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
diff --git a/solara/website/public/social/github.svg b/solara/website/public/social/github.svg
new file mode 100644
index 000000000..c679c236f
--- /dev/null
+++ b/solara/website/public/social/github.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
diff --git a/solara/website/public/social/twitter.svg b/solara/website/public/social/twitter.svg
new file mode 100644
index 000000000..437e2bfdd
--- /dev/null
+++ b/solara/website/public/social/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>
diff --git a/tests/integration/server_test.py b/tests/integration/server_test.py
index 02b934914..8816287f1 100644
--- a/tests/integration/server_test.py
+++ b/tests/integration/server_test.py
@@ -26,7 +26,7 @@ def test_docs_basics(page_session: playwright.sync_api.Page, solara_server, sola
         page_session.get_by_role("link", name="Documentation").click()
 
         page_session.locator("text=Search the Solara Documentation").wait_for()
-        page_session.locator(".v-btn__content", has_text="Examples").first.click()
+        page_session.locator(".docs-card", has_text="Examples").first.click()
         page_session.locator("text=Calculator").first.click()
         page_session.locator("text=+/-").wait_for()
         page_session.screenshot(path="tmp/screenshot_calculator.png")
diff --git a/tests/unit/autorouting_test.py b/tests/unit/autorouting_test.py
index 49b0b9754..be7f11a20 100644
--- a/tests/unit/autorouting_test.py
+++ b/tests/unit/autorouting_test.py
@@ -106,7 +106,7 @@ def test_routes_examples_getting_started():
 
     assert len(routes) == 9
     assert routes[0].path == "/"
-    assert routes[0].label == "Introduction"
+    assert routes[0].label == "Quickstart"
 
     main_object = solara.autorouting.RenderPage()
     solara_context = solara.RoutingProvider(children=[main_object], routes=routes, pathname="/")