solara-ui 1.39.0__py2.py3-none-any.whl → 1.41.0__py2.py3-none-any.whl

solara/website/components/docs.py

@@ -1,5 +1,6 @@
 import solara
-from solara.alias import rv
+from .markdown import MarkdownWithMetadata
+from .breadcrumbs import BreadCrumbs
 
 
 @solara.component
@@ -66,18 +67,19 @@ def NoPage():
 
 
 @solara.component
-def WithCode(module):
-    component = getattr(module, "Page", None)
-    with rv.Sheet() as main:
+def WithCode(route_current):
+    component = getattr(route_current.module, "Page", None)
+    with solara.Column(style={"flex-grow": 1, "padding-top": "56px"}) as main:
+        BreadCrumbs()
         # It renders code better
-        solara.Markdown(
-            module.__doc__ or "# no docs yet",
+        MarkdownWithMetadata(
+            route_current.module.__doc__ or "# no docs yet",
             unsafe_solara_execute=True,
         )
         if component and component != NoPage:
             with solara.Card("Example", margin=0, classes=["mt-8"]):
                 component()
-                github_url = solara.util.github_url(module.__file__)
+                github_url = solara.util.github_url(route_current.module.__file__)
                 solara.Button(
                     label="View source",
                     icon_name="mdi-github-circle",
@@ -97,7 +99,7 @@ def SubCategoryLayout(children=[]):
     elif route_current.path == "/":
         return solara.Error("Not supposed to be rendered")
     elif route_current.module:
-        WithCode(route_current.module)
+        WithCode(route_current)
     else:
         with solara.Column(align="center", children=children, style={"flex-grow": 1, "padding": "0"}) as main:
             pass
@@ -113,6 +115,6 @@ def CategoryLayout(children=[]):
     if route_current.path == "/":
         return Gallery()
     else:
-        with solara.Column(align="stretch", style={"width": "1024px", "flex-grow": 1}, children=children) as main:
+        with solara.Column(align="stretch", children=children, style={"max-width": "100%"}) as main:
             pass
         return main

solara/website/components/header.py

@@ -20,34 +20,44 @@ def Header(
 
     # set states for menu
     with solara.Column(gap="0px"):
-        with solara.Div(classes=["news"]):
-            solara.HTML(
-                "div",
-                unsafe_innerHTML="<a href='https://github.com/widgetti/solara' target='_blank' >Star us on github 🤩</a>",
-            )
-        with solara.v.AppBar(tag="header", flat=True, class_="bg-primary-fade padding-40", height="auto", clipped_left=True):
-            with rv.ToolbarTitle(class_="d-flex", style_="align-items:center"):
-                if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
-                    with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()):
-                        rv.Icon(children=["mdi-menu"])
+        # with solara.Div(classes=["news"]):
+        #     solara.HTML(
+        #         "div",
+        #         unsafe_innerHTML="<a href='https://github.com/widgetti/solara' target='_blank' >Star us on github 🤩</a>",
+        #     )
+        with solara.v.AppBar(
+            tag="header", flat=True, clipped_left=True, style_="background-color: transparent; border-bottom: 1px solid var(--color-border-appbar);"
+        ):
+            if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
+                with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()):
+                    rv.Icon(children=["mdi-menu"])
 
-            with solara.Row(
-                justify="start", classes=["header-logo-container"], style={"flex-grow": "1", "background-color": "transparent", "align-items": "center"}
+            display = " d-none d-sm-flex" if route_current is not None and route_current.path not in ["about", "pricing", "careers"] else " d-flex"
+            with solara.v.Html(
+                tag="div",
+                class_="header-logo-container" + display,
+                style_="""
+                    background-color: transparent;
+                    flex-grow: 1;
+                    align-items: stretch;
+                    max-height: 65%;
+                """,
             ):
-                with solara.Link(path_or_route="/"):
+                with solara.Link(path_or_route="/", style={"display": "flex", "align-items": "center", "flex-direction": "row", "gap": "10px"}):
                     solara.Image(router.root_path + f"/static/assets/images/logo{'_white' if dark_effective else ''}.svg", classes=["header-logo"])
+                    solara.Text("API", style={"font-size": "20px", "font-weight": "600"})
 
-            with rv.Html(tag="ul", class_="main-menu menu d-none d-md-flex", style_="flex-grow: 1;"):
+            if route_current is not None and route_current.path not in ["about", "pricing", "careers"]:
                 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()
+                    Algolia()
 
+            with rv.Html(tag="ul", class_="main-menu menu d-none d-md-flex", style_="justify-content: flex-end;"):
                 for route in all_routes:
-                    if route.path in ["apps", "contact", "changelog"]:
+                    if route.path in ["apps", "contact", "changelog", "our_team", "about", "pricing", "roadmap", "careers"]:
                         continue
                     current = route_current == route
                     with rv.Html(tag="li", class_="active" if current else None):
@@ -58,7 +68,8 @@ def Header(
             with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", attributes={"href": "https://discord.solara.dev", "target": "_blank"}):
                 rv.Icon(children=["mdi-discord"])
 
-            solara.lab.ThemeToggle()
+            with solara.v.Html(tag="div", class_="d-none d-md-flex"):
+                solara.lab.ThemeToggle()
 
-            with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_right_menu and on_toggle_right_menu()):
-                rv.Icon(children=["mdi-menu"])
+            # with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_right_menu and on_toggle_right_menu()):
+            #     rv.Icon(children=["mdi-menu"])

solara/website/components/markdown.py

@@ -27,4 +27,15 @@ def MarkdownWithMetadata(content: str, unsafe_solara_execute=True):
                 solara.Meta(property=key, content=value)
             else:
                 solara.Meta(name=key, content=value)
-    solara.Markdown(content, unsafe_solara_execute=unsafe_solara_execute)
+    with solara.v.Html(
+        tag="div",
+        style_="display: flex; flex-direction: row; justify-content: center; gap: 15px; max-width: 90%; margin: 0 auto;",
+        attributes={"id": "markdown-to-navigate"},
+    ):
+        solara.Markdown(content, unsafe_solara_execute=unsafe_solara_execute, style="flex-grow: 1; max-width: min(100%, 1024px);")
+        MarkdownNavigation(id="markdown-to-navigate").key("markdown-nav" + str(hash(content)))
+
+
+@solara.component_vue("markdown_nav.vue")
+def MarkdownNavigation(id: str):
+    pass

solara/website/components/markdown_nav.vue

@@ -0,0 +1,34 @@
+<template>
+    <v-list dense :style="`margin: 40px 24px 0 24px; position: sticky; top: 88px; align-self: flex-start;`" class="d-none d-lg-inline-block">
+        <v-list-item
+            v-for="(element, index) in this.sections"
+            :key="index"
+            :href="'#' + element.id"
+            :style="'padding-left: ' + (16 + (element.nodeName[1] - 1) * 20) + 'px;'"
+        >
+            <v-list-item-content>
+                <v-list-item-title>
+                    {{ element.innerText }}
+                </v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+    </v-list>
+</template>
+<script>
+module.exports = {
+    mounted() {
+        this.getSections();
+    },
+    methods: {
+        getSections() {
+            const parentToSearch = document.getElementById(this.id);
+            this.sections = parentToSearch.querySelectorAll('h1, h2, h3, h4');
+        },
+    },
+    data() {
+        return {
+            sections: []
+        }
+    }
+}
+</script>

solara/website/components/sidebar.py

@@ -14,7 +14,11 @@ def Sidebar():
             all_routes = route.children
             break
 
-    with solara.v.List(expand=True, nav=True, style_="height: 100%; display: flex; flex-direction: column;") as main:
+    with solara.v.List(
+        expand=True,
+        nav=True,
+        style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto;",
+    ) as main:
         with solara.v.ListItemGroup(v_model=router.path):
             # e.g. getting_started, examples, components, api, advanced, faq
             for route in all_routes:
@@ -93,5 +97,9 @@ def Sidebar():
                 with solara.v.ListItem(value="/changelog"):
                     solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-history"])])
                     solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Changelog"])
+            with solara.Link("/roadmap"):
+                with solara.v.ListItem(value="/roadmap"):
+                    solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-road"])])
+                    solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Roadmap"])
 
     return main

solara/website/pages/__init__.py

@@ -5,12 +5,11 @@ from solara.components.title import Title
 from solara.server import server
 from solara.website.components.algolia import Algolia
 
-from ..components import Header, Hero
-from ..components.mailchimp import MailChimp
+from ..components import Header
 
 title = "Home"
 
-route_order = ["/", "showcase", "documentation", "apps", "contact", "changelog"]
+route_order = ["/", "showcase", "documentation", "apps", "contact", "changelog", "roadmap", "pricing", "our_team", "careers", "about", "scale_ipywidgets"]
 
 
 _redirects = {
@@ -236,6 +235,11 @@ def List(children=[], class_: str = None):
     return rv.Html(tag="ul", children=children, attributes={"class": class_})
 
 
+@solara.component_vue("home.vue")
+def Home(children=[]):
+    pass
+
+
 @solara.component
 def Layout(children=[]):
     router = solara.use_router()
@@ -247,265 +251,100 @@ def Layout(children=[]):
 
     target, set_target = solara.use_state(0)
 
-    if route_current and route_current.path == "apps":
+    if route_current is not None:
+        with solara.Div(style={"display": "none"}):
+            solara.Meta(name="twitter:card", content="summary_large_image")
+            solara.Meta(name="twitter:site", content="@solara_dev")
+            solara.Meta(name="twitter:image", content="https://solara.dev/static/assets/images/logo-small.png")
+            solara.Meta(property="og:url", content="https://solara.dev" + router.path)
+            solara.Meta(property="og:image", content="https://solara.dev/static/assets/images/logo-small.png")
+            solara.Meta(property="og:type", content="website")
+    if route_current is not None and route_current.path == "apps":
         return children[0]
-    with solara.VBox(grow=False) as main:
-        Title(title="Solara documentation")
-        solara.Meta(name="twitter:card", content="summary_large_image")
-        solara.Meta(name="twitter:site", content="@solara_dev")
-        solara.Meta(name="twitter:image", content="https://solara.dev/static/assets/images/logo-small.png")
-        solara.Meta(property="og:url", content="https://solara.dev" + router.path)
-        solara.Meta(property="og:image", content="https://solara.dev/static/assets/images/logo-small.png")
-        solara.Meta(property="og:type", content="website")
-        Header(
-            on_toggle_left_menu=lambda: set_show_left_menu(not show_left_menu),
-            on_toggle_right_menu=lambda: set_show_right_menu(not show_right_menu),
-        )
-        if route_current is not None and route_current.path == "/":
-            Hero(
-                title="A pure Python, React-style web framework",
-                sub_title="Solara helps you build powerful & scalable Jupyter and web apps <b>faster</b> and <b>easier</b>.",
-                button_text="Quickstart",
+    elif route_current is not None and route_current.path == "/":
+        Title(title="Solara: Build high-quality web applications in pure Python")
+        Home()
+    else:
+        with solara.VBox(grow=False) as main:
+            Title(title="Solara documentation")
+            Header(
+                on_toggle_left_menu=lambda: set_show_left_menu(not show_left_menu),
+                on_toggle_right_menu=lambda: set_show_right_menu(not show_right_menu),
             )
-
-        with rv.Container(tag="section", fluid=True, ma_0=True, pa_0=True, class_="fill-height solara-content-main"):
-            if route_current is None:
-                return solara.Error("Page not found")
-            elif route_current.path == "/":
-                description = "Use ipywidgets with Solara to build powerful and scalable web apps for Jupyter and production in Python."
-                # both tags in one
-                solara.Meta(name="description", property="og:description", content=description)
-                solara.Meta(name="twitter:description", content=description)
-                solara.Meta(property="og:title", content="Solara documentation")
-                solara.Meta(name="twitter:title", content="Solara documentation")
-
-                with rv.Row(class_="ma-2"):
-                    with rv.Col(md=6, offset_md=3, sm=8, offset_sm=2):
-                        solara.Markdown(
-                            """
-                        # What is Solara?
-
-                        Solara lets you build web apps from pure Python using ipywidgets or a React-like API on
-                        top of ipywidgets.
-                        These apps work both inside the Jupyter Notebook and as standalone web apps with frameworks like FastAPI.
-
-                        With Solara, you benefit from a paradigm that promotes component-based code and simplifies state management,
-                        making your development process more efficient and your applications more maintainable.
-
-                        Solara provides you with access to the full strength of the Python ecosystem.
-                        This means you can continue using your favorite libraries while expanding your web development capabilities.
-                        """
-                        )
-                        with solara.HBox():
-                            with solara.Link("/documentation"):
-                                solara.Button(label="Read more", class_="ma-1 homepage-button", href="/documentation", color="primary", dark=True)
-                            with solara.Link("/documentation/getting_started"):
-                                solara.Button(label="Quickstart", class_="ma-1 homepage-button", color="primary", dark=True)
-                    # with rv.Col(md=4, sm=5):
-                    #     rv.Img(src="https://dxhl76zpt6fap.cloudfront.net/public/landing/what.webp", style_="width:900px")
-
-                with solara.Column(style={"width": "100%"}, gap="2.5em", classes=["pt-10", "mt-8"], align="center"):
-                    with solara.Row(justify="center", gap="2.5em", classes=["ma-2", "row-container"]):
-                        rv.Img(src="https://dxhl76zpt6fap.cloudfront.net/public/landing/complexity.webp", contain=True)
-                        solara.Markdown(
-                            """
-                        # Build **large** apps with **low** code complexity
-
-                        With Solara, you can build large scale apps without hitting a complexity wall.
-
-                        With other tools you may hit a dead end due to missing features or implementing features
-                        adds too much complexity to your code base.
-
-                        Solara offers the **flexibility** to build complex apps, but keeps the **simplicity** of a small code base.
-                        """
-                        )
-                    with solara.Row(justify="center", gap="2.5em", classes=["ma-2", "row-container"]):
-                        solara.Markdown(
-                            """
-                        # The trustworthiness of React
-
-                        Using the same API as React, but ported to Python, Solara lets you build apps with the same
-                        trustworthiness as React.
-
-                        With a decade of experience, React is battle-tested and proven to be
-                        a reliable and robust framework to build large scale apps.
-                        """
-                        )
-                        with solara.Row(justify="center", style={"width": "500px"}):
-                            rv.Img(src="https://dxhl76zpt6fap.cloudfront.net/public/landing/python-love-react.webp", style_="max-width:300px", contain=True)
-                    with solara.Row(justify="center", gap="2.5em", classes=["ma-2", "row-container"]):
-                        with solara.Column():
-                            if target == 0:
-                                solara.Markdown("#### Running in: Jupyter notebook")
-                                solara.Image(
-                                    "https://global.discourse-cdn.com/standard11/uploads/jupyter/original/2X/8/8bc875c0c3845ae077168575a4f8a49cf1b35bc6.gif"
-                                )
-                            else:
-                                solara.Markdown("#### Running in: FastAPI")
-                                solara.Image(
-                                    "https://global.discourse-cdn.com/standard11/uploads/jupyter/original/2X/9/9442fc70e2a1fcd201f4f900fa073698a1f8c937.gif"
-                                )
-                            import solara.website.pages.apps.scatter as scatter
-
-                            github_url = solara.util.github_url(scatter.__file__)
-                            solara.Button(
-                                label="View source",
-                                icon_name="mdi-github-circle",
-                                attributes={"href": github_url, "target": "_blank"},
-                                text=True,
-                                outlined=False,
-                            )
-                            with solara.Link("/documentation/examples"):
-                                with solara.Column(style="width: 100%;"):
-                                    solara.Button(
-                                        label="More examples",
-                                        icon_name="mdi-brain",
-                                        text=True,
-                                        outlined=False,
-                                    )
-                        with solara.Column():
-                            solara.Markdown(
-                                """
-                                    ## Create apps
-
-                                    In Jupyter or standalone, and run them in production
-                                    using FastAPI or starlette.
-
-                                    Get more inspiration from our [examples](/documentation/examples).
-                                """
-                            )
-                            with rv.ExpansionPanels(v_model=target, on_v_model=set_target, mandatory=True, flat=True):
-                                with rv.ExpansionPanel():
-                                    rv.ExpansionPanelHeader(children=["Jupyter notebook"])
-                                    with rv.ExpansionPanelContent():
-                                        solara.Markdown("Build on top of ipywidgets, solara components work in all Jupyter notebook environments.")
-                                with rv.ExpansionPanel():
-                                    rv.ExpansionPanelHeader(children=["FastAPI"])
-                                    with rv.ExpansionPanelContent():
-                                        solara.Markdown(
-                                            """Using [solara-server](documentation/advanced/understanding/solara-server),
-                                            we can run our app in production using FastAPI."""
-                                        )
-
-                with solara.Column(style={"width": "100%"}):
-                    solara.v.Divider()
-
-                with solara.Column(align="center", gap="2.5em", style={"width": "100%", "padding-bottom": "50px"}):
-                    solara.Markdown("# Testimonials", style="text-align:center")
-                    with solara.Row(justify="center", gap="2.5em", style={"align-items": "stretch", "flex-wrap": "wrap", "row-gap": "2.5em"}):
-                        Testimonial(
-                            "Solara is like streamlit, but for Jupyter. I am really excited to see where this goes!",
-                            "Jack Parmer",
-                            "Former CEO and Co-Founder of Plotly",
-                            "https://dxhl76zpt6fap.cloudfront.net/public/avatar/jack-parmer.jpg",
-                        )
-                        Testimonial(
-                            "Solara has been transformative, allowing us to rapidly create a Jupyter app and iterate with impressive speed.",
-                            "Nick Elprin",
-                            "CEO and Co-Founder of Domino Data Lab",
-                            "https://dxhl76zpt6fap.cloudfront.net/public/avatar/nick-elprin.jpg",
-                        )
-                        Testimonial(
-                            "Solara allows us to go from prototype to production with the same stack.",
-                            "Jonathan Chambers",
-                            "Co-founder of Planeto",
-                            "https://dxhl76zpt6fap.cloudfront.net/public/avatar/jonathan-chambers.jpg",
-                        )
-
-                with solara.Column(style={"width": "100%"}):
-                    solara.v.Divider()
-
-                with solara.Column(align="center", gap="2.5em", style={"width": "100%", "padding-bottom": "50px"}):
-                    solara.Markdown("# Sponsors", style="text-align:center")
-                    with solara.Row(justify="center", gap="2.5em", style={"align-items": "stretch"}):
-                        with solara.v.Html(tag="a", attributes={"href": "https://www.dominodatalab.com/", "target": "_blank"}):
-                            solara.Image("https://dxhl76zpt6fap.cloudfront.net/public/sponsors/domino.png", width="300px")
-
-                with solara.Column(style={"width": "100%"}):
-                    solara.v.Divider()
-
-                with solara.Row(justify="center", gap="2.5em", classes=["footer-wrapper"]):
-                    with solara.Column(align="center", style={"min-width": "300px"}):
-                        solara.Markdown(
-                            """
-                            #### For any consulting, training or support needs
-                            [contact@solara.dev](mailto:contact@solara.dev)
-                            """
-                        )
-                    solara.v.Divider(vertical=True)
-                    with solara.Column(align="center", style={"min-width": "300px"}):
-                        solara.Markdown("#### Join our Mailing list to get the latest news")
-                        with solara.Div(style={"width": "80%"}):
-                            MailChimp(location=router.path)
-            else:
-                with rv.Row(
-                    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 route_current.module is not None and hasattr(route_current.module, "Sidebar"):
-                        with solara.v.NavigationDrawer(
-                            clipped=True,
-                            class_="d-none d-md-block",
-                            height="unset",
-                            style_="min-height: calc(100vh - 215.5px);",
-                            width="20rem",
-                            v_model=True,  # Forces menu to display even if it had somehow been closed
-                        ):
-                            route_current.module.Sidebar()
-                    with rv.Col(
-                        tag="main",
-                        md=True,
-                        class_="pa-0",
-                        style_=f"""max-width: {'1024px' if route_current.path not in ['documentation', 'contact', 'changelog']
-                                               else 'unset'}; overflow-x: hidden;""",
+            with rv.Container(tag="section", fluid=True, ma_0=True, pa_0=True, class_="fill-height solara-content-main"):
+                if route_current is None:
+                    return solara.Error("Page not found")
+                else:
+                    with rv.Row(
+                        style_="flex-wrap: nowrap; margin: 0; min-height: calc(100vh - 64px);",
+                        justify="center" if route_current is not None and route_current.path in ["documentation", "showcase"] else "start",
                     ):
-                        if route_current is not None and route_current.path == "/":
-                            with rv.Row(align="center"):
-                                pass
-                        with solara.Row(
-                            children=children,
-                            justify="center",
-                            classes=["solara-page-content-search"],
-                            style=f"height: {'100%' if route_current.path == 'documentation' else 'unset'};",
+                        if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
+                            with solara.v.Sheet(
+                                style_="""
+                                    height: 100vh;
+                                    width: 20rem;
+                                    overflow: auto;
+                                    border-right: 1px solid var(--color-border-appbar);
+                                    position: sticky;
+                                    top: 0;
+                                    flex-direction: column;
+                                    gap: 0;
+                                """,
+                                class_="d-md-flex d-none",
+                                elevation=0,
+                            ):
+                                route_current.module.Sidebar()
+                        with rv.Col(
+                            tag="main",
+                            md=True,
+                            class_="pa-0",
+                            style_="max-width: 1024px" if route_current.path == "showcase" else "",
                         ):
-                            pass
-
-            # absolute = True prevents the drawer from being below the overlay it generates
-            # Drawer navigation for top menu
-            with rv.NavigationDrawer(
-                v_model=show_right_menu,
-                on_v_model=set_show_right_menu,
-                fixed=True,
-                absolute=True,
-                right=True,
-                hide_overlay=False,
-                overlay_color="#000000",
-                overlay_opacity=0.5,
-                style_="height: 100vh",
-            ):
-                Algolia()
-                with rv.List(nav=True):
-                    with rv.ListItemGroup(active_class="text--primary"):
-                        for route in all_routes:
-                            if route.path == "apps":
-                                continue
-                            with solara.Link(route):
-                                solara.ListItem(route.label)
+                            with solara.Row(
+                                children=children,
+                                justify="center",
+                                classes=["solara-page-content-search"],
+                                style="height: unset",
+                            ):
+                                pass
 
-            if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
-                with solara.v.NavigationDrawer(
+                # absolute = True prevents the drawer from being below the overlay it generates
+                # Drawer navigation for top menu
+                with rv.NavigationDrawer(
+                    v_model=show_right_menu,
+                    on_v_model=set_show_right_menu,
+                    fixed=True,
                     absolute=True,
-                    clipped=True,
-                    class_="d-md-none d-block",
-                    height="unset",
-                    style_="min-height: 100vh;",
-                    v_model=show_left_menu,
-                    on_v_model=set_show_left_menu,
-                    width="20rem",
+                    right=True,
+                    hide_overlay=False,
+                    overlay_color="#000000",
+                    overlay_opacity=0.5,
+                    style_="height: 100vh",
                 ):
-                    route_current.module.Sidebar()
+                    Algolia()
+                    with rv.List(nav=True):
+                        with rv.ListItemGroup(active_class="text--primary"):
+                            for route in all_routes:
+                                if route.path == "apps":
+                                    continue
+                                with solara.Link(route):
+                                    solara.ListItem(route.label)
+
+                if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
+                    with solara.v.NavigationDrawer(
+                        absolute=True,
+                        clipped=True,
+                        class_="d-md-none d-block",
+                        height="unset",
+                        style_="min-height: 100vh;",
+                        v_model=show_left_menu,
+                        on_v_model=set_show_left_menu,
+                        width="20rem",
+                    ):
+                        route_current.module.Sidebar()
 
-    return main
+        return main
 
 
 @solara.component

solara/website/pages/about/__init__.py

@@ -0,0 +1,9 @@
+from pathlib import Path
+
+from solara.website.components.markdown import MarkdownWithMetadata
+
+
+title = "About Us"
+HERE = Path(__file__)
+
+Page = MarkdownWithMetadata(Path(HERE.parent / "about.md").read_text())

solara/website/pages/about/about.md

@@ -0,0 +1,3 @@
+# About Us
+
+Solara is a framework created by Maarten Breddels, and developed by [Widgetti](https://widgetti.io). Widgetti is a small company based in the Netherlands, focusing on developing tools for the Jupyter ecosystem. We combine ipywidgets and python experience with expertise in front-end development to help data scientists and python app developers make the most of their time. If you could use our years of diverse industry experience, reach out [here](/contact). You can find out more about Solara [here](/documentation/getting_started/introduction), or get to know our team [here](/our_team).

solara/website/pages/careers/__init__.py

@@ -0,0 +1,27 @@
+import solara
+
+
+@solara.component
+def Page():
+    with solara.Column():
+        solara.Markdown(
+            """
+            # Careers
+            We are always looking for talented individuals to join our team. If you're still be interested after reading the rest of this page, reach out at [contact@widgetti.io](mailto:contact@widgetti.io).
+
+            ## Who Are We?
+            We are a small team of developers working in the gap between Jupyter notebooks and web applications. We are passionate about making data science more accessible and app development painless.
+            We are based in Groningen, The Netherlands, but work remote first.
+
+            ## What Do We Offer?
+            We offer a flexible work environment, competitive salary, and the opportunity to do meaningful, crossdisciplinary work with scientists and companies worldwide.
+            We are a small team, so you will have a lot of freedom in your work, and the chance to get your hands dirty with many projects.
+
+            ### Open Source
+            We are strong believers in open source software. When working with us, you can expect the majority of the software you write to be open source, with contributions to Solara as well as other open source projects.
+
+            ## Who Are We Looking For?
+            We are looking for developers, technical writers, designers, and everything in between.
+            """,
+            style={"max-width": "90%", "margin": "0 auto"},
+        )

solara/website/pages/changelog/__init__.py

@@ -1,10 +1,10 @@
 from pathlib import Path
 
-import solara
 from solara.website.components.sidebar import Sidebar
+from solara.website.components import MarkdownWithMetadata
 
 title = "Changelog"
 HERE = Path(__file__)
 
-Page = solara.Markdown(Path(HERE.parent / "changelog.md").read_text())
+Page = MarkdownWithMetadata(Path(HERE.parent / "changelog.md").read_text())
 Sidebar = Sidebar