solara-ui 1.38.0__py2.py3-none-any.whl → 1.40.0__py2.py3-none-any.whl

solara/server/templates/solara.html.j2

@@ -31,7 +31,7 @@
 
     <script id="jupyter-config-data" type="application/json">
     {
-        "baseUrl": "{{root_path}}/",
+        "baseUrl": "{{jupyter_root_path}}/",
         "kernelId": "1234"
     }
     </script>
@@ -243,12 +243,13 @@
     {% endif %}
     <script>
         solara.rootPath = {{ root_path | tojson | safe}};
+        solara.jupyterRootPath = {{ jupyter_root_path | tojson | safe}};
         solara.cdn = {{ cdn | tojson | safe }};
         // the vue templates expect it to not have a trailing slash
         solara.cdn = solara.cdn.replace(/\/$/, '');
         // keep this for backwards compatibility
         window.solara_cdn = solara.cdn;
-        console.log("rootPath", solara.rootPath);
+        console.log("solara config", {rootPath: solara.rootPath, jupyterRootPath: solara.jupyterRootPath, cdn: solara.cdn});
 
         async function changeThemeCSS(theme) {
             let css = await fetch(`${solara.rootPath}/static/assets/theme-${theme}.css`).then(r => r.text());
@@ -269,6 +270,12 @@
         solara.production = {{ production | tojson | safe }};
         const themeVariants = ['light', 'dark', 'auto']
         solara.preRendered = {{ pre_rendered_html | safe | length | tojson }} > 0
+        if(solara.preRendered) {
+            document.body.classList.add('solara-ssg', 'solara-pre-rendered');
+        } else {
+            document.body.classList.add('solara-no-ssg');
+        }
+
     </script>
 
     <script>
@@ -329,8 +336,25 @@
                     // if preRendered, the app is not mounted yet
                     // so we mount it when loading becomes false
                     if (solara.preRendered && !this.mounted) {
-                        this.isMounted = true;
-                        this.$mount("#app")
+                        function waitForAnimation(element) {
+                            return new Promise((resolve) => {
+                                element.addEventListener('animationend', resolve, { once: true });
+                            });
+                        }
+
+                        function waitForAllAnimations(elements) {
+                            const animationPromises = Array.from(elements).map(element => waitForAnimation(element));
+                            return Promise.all(animationPromises);
+                        }
+
+                        (async () => {
+                            await waitForAllAnimations(document.querySelectorAll('.solara-ssg-wait-for-animation'));
+                            console.log("animation finished");
+                            document.body.classList.remove('solara-pre-rendered');
+                            document.body.classList.add('solara-pre-rendered-finished');
+                            this.isMounted = true;
+                            this.$mount("#app")
+                        })();
                     } else {
                         this.isMounted = true;
                     }
@@ -418,7 +442,7 @@
         {% endif -%}
         nbextensionHashes = {{ resources.nbextensions_hashes | tojson | safe }};
         requirejs.config({
-            baseUrl: '{{root_path}}/static/',
+            baseUrl: '{{jupyter_root_path}}',
             waitSeconds: 3000,
             map: {
                 '*': {
@@ -443,7 +467,7 @@
             });
         requirejs([
             {% for ext in resources.nbextensions if ext != 'jupyter-vuetify/extension' and ext != 'jupyter-vue/extension' -%}
-        "{{root_path}}/static/nbextensions/{{ ext }}.js",
+        "{{jupyter_root_path}}/nbextensions/{{ ext }}.js",
             {% endfor %}
         ]);
         (async function () {

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);
@@ -289,46 +304,6 @@ blockquote p:last-child {
     color: white !important;
 }
 
-/* hero */
-.hero {
-    background: var(--color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
-    background-size: cover;
-    min-height: 660px;
-    padding: 7rem 0;
-}
-
-.theme--dark .hero {
-    background: var(--dark-color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
-    background-size: cover;
-}
-
-.hero h1 {
-    font-size: 4.5rem;
-}
-
-.hero h2 {
-    padding-left: 150px;
-    padding-right: 150px;
-}
-
-.hero b {
-    color: var(--color-primary);
-}
-
-.theme--dark .hero b {
-    color: var(--dark-color-primary);
-}
-
-@media screen and (max-width: 960px) {
-    .hero {
-        padding: 4rem 0;
-        min-height: auto;
-    }
-
-    .hero h1 {
-        font-size: 3rem;
-    }
-}
 
 /* fixes padding issue on drawer menu */
 .v-list-group__items {
@@ -362,7 +337,7 @@ blockquote p:last-child {
 
 .menu li a:link {
     display: block;
-    padding: 1rem 2rem;
+    padding: 0.75rem;
 }
 
 .menu .active {
@@ -427,11 +402,6 @@ blockquote p:last-child {
     font-weight: bolder;
 }
 
-.solara-autorouter-content {
-    padding-top: 2rem;
-    max-width: 100%;
-}
-
 .jp-RenderedHTMLCommon {
     padding-right: 0;
 }
@@ -457,13 +427,6 @@ blockquote p:last-child {
 /* MOBILE */
 
 @media screen and (aspect-ratio < 1) {
-    .hero{
-        background-position-x: 29%;
-    }
-        .hero h2{
-            padding-left: 0;
-            padding-right: 0;
-        }
     .container.fill-height > .ma-8.row{
         max-width: 80%;
     }

solara/website/components/__init__.py

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

solara/website/components/algolia_api.vue

@@ -7,14 +7,19 @@
                     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;"
                     @click="show($event, on);"
-                    @keyup.enter="item = 0"
+                    @keyup.enter="hoverItem === null ? item = 0 : item = hoverItem"
+                    @keyup.esc="close();"
+                    @keyup.down="hoverItem = hoverItem == null ? 0 : Math.min(hoverItem + 1, results.hits.length - 1, 9)"
+                    @keyup.up="hoverItem = hoverItem == null ? 9 : Math.max(hoverItem - 1, 0)"
+                    @focus="selectText();"
                     class="algolia"
                 ></v-text-field>
         </template>
@@ -27,7 +32,7 @@
         </v-list>
         <v-list v-else :style="{width: menuWidth + 'px'}">
             <v-list-item-group v-model="item">
-                <v-list-item v-for="(element, index) in this.results.hits" :key="element['url']">
+                <v-list-item v-for="(element, index) in this.results.hits" :key="element['url']" :input-value="index === hoverItem">
                     <v-list-item-content>
                         <v-list-item-title>
                             {{ element.hierarchy.lvl1 }}
@@ -39,7 +44,7 @@
                     </v-list-item-content>
                 </v-list-item>
             </v-list-item-group>
-            <v-list-item>
+            <v-list-item v-if="this.results.nbHits > 10">
                 <v-list-item-content>
                     <v-list-item-title>And {{ this.results.nbHits - 10}} More...</v-list-item-title>
                 </v-list-item-content>
@@ -58,7 +63,6 @@ module.exports = {
         window.search = this;
         this.updateMenuWidth();
         window.addEventListener('resize', this.updateMenuWidth);
-
     },
     watch: {
         query ( value ) {
@@ -66,12 +70,17 @@ module.exports = {
             this.search();
         },
         item ( value ) {
-            if ( this.results.hits != null && this.results.hits.length > 0 ) {
+            if ( value === null ) return;
+            if ( this.results.hits != null && this.results.hits.length >= value ) {
                 let url = this.results.hits[value].url;
                 if (url.startsWith("https://solara.dev")) {
                     url = url.slice(18);
                 }
                 solara.router.push( url );
+                this.close();
+                // reset the search
+                this.item = null;
+                this.hoverItem = null;
             }
         },
     },
@@ -82,6 +91,10 @@ module.exports = {
                 on.click( e )
             } );
         },
+        close() {
+            this.show_results = false;
+            this.$refs.search.blur();
+        },
         initSearch() {
             this.client = this.algoliasearch( '9KW9L7O5EQ', '647ca12ba642437cc40c2adee4a78d08' );
             this.index = this.client.initIndex( 'solara' );
@@ -107,6 +120,9 @@ module.exports = {
                 this.$set(this.results, []);
             }
         },
+        selectText() {
+            this.$refs.search.$refs.input.select();
+        },
         getSnippet( element ) {
             if (element.type == "content") {
                 return element._highlightResult.content.value;
@@ -176,6 +192,7 @@ module.exports = {
             query: '',
             results: [],
             item: null,
+            hoverItem: null,
             show_results: false,
             mac: false,
             menuWidth: 0,

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/contact.py

@@ -0,0 +1,144 @@
+import json
+import os
+import requests
+
+from typing import Any, Dict, Optional
+import solara
+
+
+postmark_api_key = None
+contact_email_address = None
+
+try:
+    postmark_api_key = os.environ["POSTMARK_API_KEY"]
+    contact_email_address = os.environ["SOLARA_CONTACT_EMAIL_ADDRESS"]
+except Exception:
+    pass
+
+
+@solara.component
+def Contact(
+    style: Dict[str, Any] = {},
+    title="Contact Us",
+    subtitle="We'd love to hear from you!",
+    submit_label="Submit",
+    email_subject="Contact Form Submission",
+):
+    first_name = solara.use_reactive("")
+    last_name = solara.use_reactive("")
+    email = solara.use_reactive("")
+    company = solara.use_reactive("")
+    message = solara.use_reactive("")
+    error: solara.Reactive[Optional[str]] = solara.use_reactive(None)
+    success = solara.use_reactive(False)
+
+    def send(*_ignore):
+        if postmark_api_key is None or contact_email_address is None:
+            error.set("Email service not properly configured. Please contact the site administrator at solara@widgetti.io.")
+        elif not first_name.value or not last_name.value or not email.value or not message.value:
+            error.set("Please fill out all required fields.")
+        else:
+            # Create the email content
+            msg = {}
+            msg["From"] = contact_email_address
+            msg["To"] = contact_email_address
+            msg["Subject"] = email_subject
+            msg["ReplyTo"] = email.value
+
+            # Email body
+            msg["HtmlBody"] = f"""
+            <b>First Name</b>: {first_name.value}<br />
+            <b>Last Name</b>: {last_name.value}<br />
+            <b>Email</b>: {email.value}<br />
+            <b>Company</b>: {company.value}<br />
+            <b>Message</b>: {message.value}<br />
+            """
+
+            # Send emails
+            try:
+                requests.post(
+                    "https://api.postmarkapp.com/email",
+                    headers={
+                        "Accept": "application/json",
+                        "Content-Type": "application/json",
+                        "X-Postmark-Server-Token": postmark_api_key,
+                    },
+                    data=json.dumps(msg),
+                )
+                requests.post(
+                    "https://api.postmarkapp.com/email",
+                    headers={
+                        "Accept": "application/json",
+                        "Content-Type": "application/json",
+                        "X-Postmark-Server-Token": postmark_api_key,
+                    },
+                    data=json.dumps(
+                        {
+                            "From": contact_email_address,
+                            "To": email.value,
+                            "Subject": "Thank you for contacting Solara",
+                            "HtmlBody": f"""
+                            <p>Hi {first_name.value},</p>
+                            <p>Thank you for contacting us! We will get back to you as soon as possible.</p>
+                            <p>Best regards,<br />The Solara Team</p>
+                            """,
+                        }
+                    ),
+                )
+            except Exception as e:
+                error.set(f"Error sending email: {e}")
+            else:
+                success.set(True)
+                error.set(None)
+                first_name.set("")
+                last_name.set("")
+                email.set("")
+                company.set("")
+                message.set("")
+
+    with solara.Card(title=title, style={"width": "100%", "max-width": "1024px", **style}):
+        solara.Markdown(subtitle)
+        solara.Text("* Required fields")
+        with solara.Row():
+            solara.InputText(label="First Name *", value=first_name)
+            solara.InputText(label="Last Name *", value=last_name)
+        with solara.Row():
+            solara.InputText(label="Email *", value=email)
+            solara.InputText(label="Company", value=company)
+        solara.v.Textarea(placeholder="Message *", v_model=message.value, on_v_model=message.set)
+        with solara.CardActions():
+            solara.Button(label=submit_label, color="primary", on_click=send)
+            solara.Button(
+                label="Clear",
+                color="secondary",
+                text=True,
+                on_click=lambda: [first_name.set(""), last_name.set(""), email.set(""), company.set(""), message.set("")],
+            )
+
+    solara.Style(
+        """
+        .v-snack__wrapper {
+            box-shadow: none;
+        }
+        """
+    )
+
+    with solara.v.Snackbar(
+        v_model=error.value is not None,
+        timeout=5000,
+        on_v_model=lambda *_: error.set(None),
+        left=True,
+        color="error",
+    ):
+        solara.Markdown(error.value or "", style={"--dark-color-text": "white", "--color-text": "white"})
+        solara.Button(icon=True, icon_name="mdi-close", color="white", on_click=lambda: error.set(None))
+
+    with solara.v.Snackbar(
+        v_model=success.value,
+        timeout=5000,
+        on_v_model=lambda *_: success.set(False),
+        left=True,
+        color="success",
+    ):
+        solara.Markdown("Your message has been sent!", style={"--dark-color-text": "white", "--color-text": "white"})
+        solara.Button(icon=True, icon_name="mdi-close", color="white", on_click=lambda: success.set(False))

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>