solara 1.29.1__py2.py3-none-any.whl → 1.30.1__py2.py3-none-any.whl

solara/website/assets/custom.css

@@ -27,6 +27,11 @@
     --dark-color-text: hsla(0,0%,100%,.7);
     --dark-color-grey: #ababab;
     --dark-color-grey-light: #202020;
+
+    --docs-color-grey: #40362E;
+    --docs-social-discord: #5865F2;
+    --docs-social-github: #333;
+    --docs-social-twitter: #000000;
 }
 
 html,
@@ -178,6 +183,56 @@ blockquote p:last-child {
     background-color: var(--dark-color-primary-lightest);
 }
 
+/* API PAGE REFACTOR STYLE */
+
+.v-sheet.api-search-container{
+    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 */
 
 .v-btn.solara-docs-button {
@@ -354,6 +409,7 @@ blockquote p:last-child {
 }
 
 .solara-autorouter-content {
+    padding-top: 2rem;
     max-width: 100%;
 }
 

solara/website/components/__init__.py

@@ -1,3 +1,4 @@
+from .docs import CategoryLayout, Gallery, NoPage, SubCategoryLayout, WithCode  # noqa
 from .header import Header
 from .hero import Hero
 

solara/website/components/algolia_api.vue

@@ -0,0 +1,157 @@
+<template>
+    <v-menu
+        v-model="show_results"
+        offset-y>
+        <template v-slot:activator="{ on }">
+                <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%; 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>
+                <v-list-item-content>
+                    {{this.query == "" ? "Start Typing to Search" : "No search results found."}}
+                </v-list-item-content>
+            </v-list-item>
+        </v-list>
+        <v-list v-else>
+            <v-list-item-group v-model="item">
+                <v-list-item v-for="(element, index) in this.results.hits" :key="element['url']">
+                    <v-list-item-content>
+                        <v-list-item-title>{{ element.hierarchy[element.type] }}</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list-item-group>
+            <v-list-item>
+                <v-list-item-content>
+                    <v-list-item-title>And {{ this.results.nbHits - 10}} More...</v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+<script>
+const search = ref(null);
+module.exports = {
+    async mounted() {
+        window.search = this;
+        await this.loadRequire();
+        this.algoliasearch = (await this.import([`https://cdn.jsdelivr.net/npm/algoliasearch@4.20.0/dist/algoliasearch-lite.umd.js`]))[0];
+        this.initSearch();
+        window.search = this;
+    },
+    watch: {
+        query ( value ) {
+            this.show_results = true;
+            this.search();
+        },
+        item ( value ) {
+            if ( this.results.hits != null && this.results.hits.length > 0 ) {
+                let url = this.results.hits[value].url;
+                if (url.startsWith("https://solara.dev")) {
+                    url = url.slice(18);
+                }
+                solara.router.push( url );
+            }
+        },
+    },
+    methods: {
+        show( e, on ) {
+            this.show_results = false;
+            this.$nextTick( () => {
+                on.click( e )
+            } );
+        },
+        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 } );
+            if (results) {
+                this.results = results;
+            }else{
+                this.$set(this.results, []);
+            }
+        },
+        import(dependencies) {
+            return this.loadRequire().then(
+                () => {
+                    if (window.jupyterVue) {
+                        // in jupyterlab, we take Vue from ipyvue/jupyterVue
+                        define("vue", [], () => window.jupyterVue.Vue);
+                    } else {
+                        define("vue", ['jupyter-vue'], jupyterVue => jupyterVue.Vue);
+                    }
+                    return new Promise((resolve, reject) => {
+                        requirejs(dependencies, (...modules) => resolve(modules));
+                    })
+                }
+            );
+        },
+        loadRequire() {
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = `${this.getCdn()}/requirejs@2.3.6/require.js`;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            });
+        },
+        getBaseUrl() {
+            if (window.solara && window.solara.rootPath !== undefined) {
+                return solara.rootPath + "/";
+            }
+            // if base url is set, we use ./ for relative paths compared to the base url
+            if (document.getElementsByTagName("base").length) {
+                return document.baseURI;
+            }
+            const labConfigData = document.getElementById('jupyter-config-data');
+            if (labConfigData) {
+                /* lab and Voila */
+                return JSON.parse(labConfigData.textContent).baseUrl;
+            }
+            let base = document.body.dataset.baseUrl || document.baseURI;
+            if (!base.endsWith('/')) {
+                base += '/';
+            }
+            return base
+        },
+        getCdn() {
+            return (typeof solara_cdn !== "undefined" && solara_cdn) || `${this.getBaseUrl()}_solara/cdn`;
+        },
+    },
+    data(){
+        return {
+            query: '',
+            results: [],
+            item: null,
+            show_results: false,
+            mac: false,
+        }
+    },
+}
+</script>

solara/website/components/docs.py

@@ -0,0 +1,118 @@
+import solara
+from solara.alias import rv
+
+
+@solara.component
+def Gallery(route_external=None):
+    if route_external is not None:
+        route_current = route_external
+    else:
+        # show a gallery of all the examples
+        router = solara.use_router()
+        route_current = router.path_routes[-2]
+
+    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"],
+                    )
+
+        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", "max-width": "90rem"}):
+                            for child in route.children:
+                                if child.path == "/":
+                                    continue
+                                path = route.path + "/" + child.path
+                                if child.path in [
+                                    "button",
+                                    "checkbox",
+                                    "confirmation_dialog",
+                                    "echarts",
+                                    "file_browser",
+                                    "file_download",
+                                    "matplotlib",
+                                    "select",
+                                    "switch",
+                                    "tooltip",
+                                ]:
+                                    image_url = "https://dxhl76zpt6fap.cloudfront.net/public/api/" + child.path + ".gif"
+                                elif child.path in ["card", "dataframe", "pivot_table", "slider"]:
+                                    image_url = "https://dxhl76zpt6fap.cloudfront.net/public/api/" + child.path + ".png"
+                                else:
+                                    image_url = "https://dxhl76zpt6fap.cloudfront.net/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.Column(align="center"):
+                                            with solara.Link(path):
+                                                solara.Image(image_url, width="12rem")
+
+
+@solara.component
+def NoPage():
+    raise RuntimeError("This page should not be rendered")
+
+
+@solara.component
+def WithCode(module):
+    component = getattr(module, "Page", None)
+    with rv.Sheet() as main:
+        # It renders code better
+        solara.Markdown(
+            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__)
+                solara.Button(
+                    label="View source",
+                    icon_name="mdi-github-circle",
+                    attributes={"href": github_url, "target": "_blank"},
+                    text=True,
+                    outlined=True,
+                    class_="mt-8",
+                )
+    return main
+
+
+@solara.component
+def SubCategoryLayout(children=[]):
+    route_current, all_routes = solara.use_route()
+    if route_current is None:
+        return solara.Error("Page not found")
+    elif route_current.path == "/":
+        return solara.Error("Not supposed to be rendered")
+    elif route_current.module:
+        WithCode(route_current.module)
+    else:
+        with solara.Column(align="center", children=children, style={"flex-grow": 1, "padding": "0"}) as main:
+            pass
+        return main
+
+
+@solara.component
+def CategoryLayout(children=[]):
+    route_current, all_routes = solara.use_route()
+    if route_current is None:
+        return solara.Error("Page not found")
+
+    if route_current.path == "/":
+        return Gallery()
+    else:
+        with solara.Column(align="stretch", style={"width": "1024px", "flex-grow": 1}, children=children) as main:
+            pass
+        return main

solara/website/components/header.py

@@ -6,8 +6,8 @@ from solara.alias import rv
 from solara.server import settings
 
 
-@solara._component_vue("algolia.vue")
-def Algolia(app_id: str, index_name: str, api_key: str, debug=False):
+@solara.component_vue("algolia_api.vue")
+def Algolia():
     pass
 
 
@@ -18,6 +18,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()
     dark_effective = solara.lab.use_dark_effective()
 
@@ -28,7 +29,7 @@ def Header(
                 "div",
                 unsafe_innerHTML="<a href='https://github.com/widgetti/solara' target='_blank' >Star us on github 🤩</a>",
             )
-        with rv.AppBar(tag="header", flat=True, class_="bg-primary-fade padding-40", height="auto"):
+        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 and len(route_current.children) > 0:
                     with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()):
@@ -37,15 +38,24 @@ def Header(
                     solara.Image(router.root_path + f"/static/assets/images/logo{'_white' if dark_effective else ''}.svg")
             rv.Spacer()
 
-            if settings.search.enabled:
-                from solara_enterprise.search.search import 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:
+                if settings.search.enabled:
+                    from solara_enterprise.search.search import Search
 
-                Search()
-            Algolia(app_id="9KW9L7O5EQ", api_key="ef7495102afff1e16d1b7cf6ec2ab2d0", index_name="solara", debug=True)
-            # menu
+                    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 == "apps":
+                    if route.path in ["apps", "contact", "changelog"]:
                         continue
                     current = route_current == route
                     with rv.Html(tag="li", class_="active" if current else None):
@@ -53,7 +63,7 @@ def Header(
             with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", attributes={"href": solara.github_url, "target": "_blank"}):
                 rv.Icon(children=["mdi-github-circle"])
 
-            with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", attributes={"href": "https://discord.gg/dm4GKNDjXN", "target": "_blank"}):
+            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()

solara/website/components/hero.py

@@ -10,6 +10,6 @@ def Hero(title, sub_title, button_text):
                 with rv.Col(md=8, offset_md=2, sm=10, offset_sm=1):
                     rv.Html(tag="h1", children=[title], class_="mb-4"),
                     solara.HTML(tag="div", unsafe_innerHTML=f"<h2>{sub_title}</h2>", class_="mb-4"),
-                    with solara.Link("/docs/quickstart"):
+                    with solara.Link("/documentation/getting_started"):
                         solara.Button(label=button_text, elevation=0, large=True, class_="btn-size--xlarge solara-docs-button")
     return main

solara/website/components/markdown.py

@@ -0,0 +1,30 @@
+from typing import Dict, List, Union
+
+import yaml
+
+import solara
+
+
+# We want to separate metadata from the markdown files before rendering them, which solara.Markdown doesn't support
+@solara.component
+def MarkdownWithMetadata(content: str, unsafe_solara_execute=True):
+    if "---" in content:
+        pre_content, raw_metadata, post_content = content.split("---")
+        metadata: Dict[str, Union[str, List[str]]] = yaml.safe_load(raw_metadata)
+
+        if len(pre_content) == 0:
+            content = post_content
+        else:
+            content = pre_content + post_content
+
+        if "title" not in metadata.keys():
+            metadata["title"] = content.split("#")[1].split("\n")[0]
+
+        for key, value in metadata.items():
+            if key == "title":
+                solara.Title(value)
+            elif ":" in key:
+                solara.Meta(property=key, content=value)
+            else:
+                solara.Meta(name=key, content=value)
+    solara.Markdown(content, unsafe_solara_execute=unsafe_solara_execute)