docs: new look for documentation pages (#768)

solara/server/assets/style.css

@@ -75,7 +75,8 @@ div.solara-markdown-output {
 
 
 div.highlight {
-    background-color: #eee;
+    border: 1px solid var(--color-border-appbar);
+    background-color: #fafafa;
     padding: 30px;
     border-radius: 20px;
     margin-top: 15px;

solara/server/static/highlight-dark.css

@@ -2,7 +2,7 @@
    and then remove the overlapping first lines with highlight.css
 */
 .theme--dark.v-application .highlight .hll { background-color: #ffffcc }
-.theme--dark.v-application .highlight { background: #282C34; color: #ABB2BF }
+.theme--dark.v-application .highlight { background: #1d1f22; color: #ABB2BF }
 .theme--dark.v-application .highlight .c { color: #7F848E } /* Comment */
 .theme--dark.v-application .highlight .err { color: #ABB2BF } /* Error */
 .theme--dark.v-application .highlight .esc { color: #ABB2BF } /* Escape */

solara/website/assets/custom.css

@@ -34,6 +34,17 @@
     --docs-social-twitter: #000000;
 }
 
+.theme--dark {
+    --color-border-appbar: hsla(0,0%,100%,.12);
+    --color-material-background: #1e1e1e;
+    --color-text-fade: hsla(0,0%,100%,.7);
+}
+.theme--light {
+    --color-border-appbar: rgba(0,0,0,.12);
+    --color-material-background: #fff;
+    --color-text-fade: rgba(0,0,0,.6);
+}
+
 html,
 body,
 p,
@@ -199,9 +210,8 @@ blockquote p:last-child {
     }
 .v-sheet.docs-card-container{
     width: 100%;
-    padding: 0 10%;
     justify-content: start;
-    align-content: center;
+    align-content: stretch;
     flex-wrap: wrap !important;
     flex-grow: 1;
     row-gap: 20px;
@@ -211,11 +221,14 @@ blockquote p:last-child {
 }
 .v-sheet.docs-card-container > a > .docs-card{
     display: flex;
-    width: 20rem;
-    height: 12rem;
+    flex-grow: 1;
+    height: 4rem;
     border-radius: 16px !important;
     color: var(--color-grey-light);
 }
+    .v-sheet.docs-card-container > a > .docs-card > h2 {
+        padding: 0 24px;
+    }
     .v-sheet.docs-card-container > a .docs-card-icon{
         padding-right: 1.5rem;
         transition: ease padding 0.25s;
@@ -274,6 +287,8 @@ blockquote p:last-child {
 /* header */
 .header-logo {
     display: block;
+    height: 100%;
+    margin: 0;
 }
 .news {
     background-color: var(--color-primary);
@@ -322,7 +337,7 @@ blockquote p:last-child {
 
 .menu li a:link {
     display: block;
-    padding: 1rem 2rem;
+    padding: 0.75rem;
 }
 
 .menu .active {
@@ -387,11 +402,6 @@ blockquote p:last-child {
     font-weight: bolder;
 }
 
-.solara-autorouter-content {
-    padding-top: 2rem;
-    max-width: 100%;
-}
-
 .jp-RenderedHTMLCommon {
     padding-right: 0;
 }

solara/website/components/__init__.py

@@ -1,4 +1,5 @@
 from .docs import CategoryLayout, Gallery, NoPage, SubCategoryLayout, WithCode  # noqa
 from .header import Header
+from .markdown import MarkdownWithMetadata
 
-__all__ = ["Header"]
+__all__ = ["Header", "MarkdownWithMetadata", "CategoryLayout", "Gallery", "NoPage", "SubCategoryLayout", "WithCode"]

solara/website/components/algolia_api.vue

@@ -7,9 +7,10 @@
                     v-model="query"
                     prepend-inner-icon="mdi-magnify"
                     hide-details
+                    dense
                     :placeholder="mac ? '⌘K to search' : 'Ctrl+K to search'"
+                    filled
                     outlined
-                    rounded
                     clearable
                     ref="search"
                     style="flex-grow: 1; max-width: 650px;"

solara/website/components/breadcrumbs.py

@@ -0,0 +1,28 @@
+from typing import List
+import solara
+
+
+@solara.component
+def BreadCrumbs():
+    router = solara.use_router()
+    routes = router.path_routes
+
+    with solara.Row(style={"align-items": "center", "flex-wrap": "wrap"}) as main:
+        for i, route in enumerate(routes):
+            if i == len(routes) - 1:
+                solara.Text(route.label or route.path, style={"color": "var(--color-text-fade)"})
+            else:
+                with solara.Link(solara.resolve_path(route), style={"color": "var(--color-text-fade)"}):
+                    solara.Text(route.label or route.path)
+            if i != len(routes) - 1:
+                solara.Text("/", style={"font-size": "1.5rem", "color": "var(--color-text-fade)"})
+    return main
+
+
+def _resolve_path_to_route(path_to_find: List[str], all_routes: List[solara.Route], routes: List[solara.Route] = []):
+    if len(path_to_find) == 0:
+        return routes
+    for route in all_routes:
+        if path_to_find[0] == route.path:
+            routes += [route]
+            return _resolve_path_to_route(path_to_find[1:], route.children, routes)

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,9 @@ 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%; display: flex; flex-direction: column; background-color: var(--color-material-background);"
+    ) 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 +95,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

@@ -272,15 +272,15 @@ def Layout(children=[]):
                 return solara.Error("Page not found")
             else:
                 with rv.Row(
-                    style_="flex-wrap: nowrap; margin: 0; min-height: calc(100vh - 215.5px);",
+                    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.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);",
+                            style_="min-height: calc(100vh - 64px);",
                             width="20rem",
                             v_model=True,  # Forces menu to display even if it had somehow been closed
                         ):
@@ -289,17 +289,13 @@ def Layout(children=[]):
                         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;""",
+                        style_="max-width: 1024px" if route_current.path == "showcase" else "",
                     ):
-                        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'};",
+                            style="height: unset",
                         ):
                             pass
 

solara/website/pages/careers/__init__.py

@@ -22,5 +22,6 @@ def Page():
 
             ## 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