fix: prettier documentation landing page

solara/website/assets/custom.css

@@ -19,6 +19,11 @@
     --jp-content-font-size3: 1.75rem;
     --jp-content-font-size4: 2rem;
     --jp-content-font-size5: 2.25rem;
+
+    --docs-color-grey: #40362E;
+    --docs-social-discord: #5865F2;
+    --docs-social-github: #333;
+    --docs-social-twitter: #000000;
 }
 
 html,
@@ -116,16 +121,52 @@ blockquote p:last-child {
 /* API PAGE REFACTOR STYLE */
 
 .v-sheet.api-search-container{
-    height: 50vh;
+    flex-grow: 1;
 }
     .v-sheet.api-search-container .v-input{
         flex-grow: 0;
     }
+.v-sheet.docs-card-container{
+    width: 100%;
+    padding: 0 10%;
+    justify-content: start;
+    align-content: center;
+    flex-wrap: wrap !important;
+    flex-grow: 1;
+    row-gap: 20px;
+}
+.v-sheet.docs-card-container > a{
+    height: fit-content;
+}
+.v-sheet.docs-card-container > a > .docs-card{
+    display: flex;
+    width: 20rem;
+    height: 12rem;
+    border-radius: 16px !important;
+    color: var(--color-grey-light);
+}
+    .v-sheet.docs-card-container > a .docs-card-icon{
+        padding-right: 1.5rem;
+        transition: ease padding 0.25s;
+    }
+    .v-sheet.docs-card-container > a:hover .docs-card-icon{
+        color: var(--color-primary);
+        padding-right: 0.5rem;
+        transition: ease padding 0.25s;
+    }
 .component-card{
     display: flex;
     flex-direction: column;
     width: 19rem;
 }
+.social-logo-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 8px;
+}
 
 /* vuetify component overrides */
 

solara/website/components/algolia_api.vue

@@ -3,16 +3,19 @@
         v-model="show_results"
         offset-y>
         <template v-slot:activator="{ on }">
-            <v-text-field
-                v-model="query"
-                append-icon="mdi-magnify"
-                hide-details
-                placeholder="Search"
-                outlined
-                rounded
-                style="min-width: 19rem; width: 33%; background-color: #ffeec5;"
-                @click="show($event, on); item = 'Hi';"
-            ></v-text-field>
+                <v-text-field
+                    v-model="query"
+                    prepend-inner-icon="mdi-magnify"
+                    hide-details
+                    :placeholder="mac ? '⌘K to search' : 'Ctrl+K to search'"
+                    outlined
+                    rounded
+                    clearable
+                    ref="search"
+                    style="max-width: 50%; background-color: #fff; flex-grow: 1;"
+                    @click="show($event, on);"
+                    @keyup.enter="item = 0"
+                ></v-text-field>
         </template>
         <v-list v-if="results != null && results.length == 0">
             <v-list-item>
@@ -38,6 +41,7 @@
     </v-menu>
 </template>
 <script>
+const search = ref(null);
 module.exports = {
     async mounted() {
         window.search = this;
@@ -71,6 +75,19 @@ module.exports = {
         initSearch() {
             this.client = this.algoliasearch( '9KW9L7O5EQ', '647ca12ba642437cc40c2adee4a78d08' );
             this.index = this.client.initIndex( 'solara' );
+            this.mac = window.navigator.userAgent.indexOf("Mac") != -1;
+            document.addEventListener( 'keydown', ( e ) => {
+
+                if (this.mac) {
+                    if ( this.$refs.search && e.metaKey && e.key === 'k' ) {
+                        this.$refs.search.focus();
+                    }
+                }else{
+                    if ( this.$refs.search && e.ctrlKey && e.key === 'k' ) {
+                        this.$refs.search.focus();
+                    }
+                }
+            });
         },
         async search() {
             results = await this.index.search( this.query, { hitsPerPage: 10 } );
@@ -133,6 +150,7 @@ module.exports = {
             results: [],
             item: null,
             show_results: false,
+            mac: false,
         }
     },
 }

solara/website/components/docs.py

@@ -13,33 +13,47 @@ def Gallery(route_external=None):
         router = solara.use_router()
         route_current = router.path_routes[-2]
 
-    for route in route_current.children:
-        if route.children:
-            solara.Markdown(f"## {route.label}")
-            with solara.Row(justify="center", gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px"}):
-                for child in route.children:
-                    if child.path == "/":
-                        continue
-                    path = route.path + "/" + child.path
-                    for extension in [".png", ".gif"]:
-                        image = path + extension
-                        image_path = Path(__file__).parent.parent / "public" / route_current.path / image
-                        image_url = "/static/public/" + route_current.path + "/" + image
-                        if image_path.exists():
-                            break
-                        else:
-                            image_url = "/static/public/logo.svg"
+    with solara.Column(gap="75px", align="center"):
+        with solara.Row(justify="center", gap="30px", style={"margin": "30px 0 !important", "flex-wrap": "wrap", "align-items": "start", "row-gap": "30px"}):
+            for child in route_current.children:
+                if child.path == "/":
+                    continue
+                with solara.v.Html(tag="a", attributes={"href": "#" + child.path}):
+                    solara.Button(
+                        child.label,
+                        color="primary",
+                        classes=["v-btn--rounded", "v-size--x-large"],
+                    )
 
-                    if path:
-                        path = path if route_external is None else route_current.path + "/" + path
-                        title = solara.Link(path, children=[child.label])
-                        with solara.Card(title, classes=["component-card"], margin=0):
-                            with solara.Link(path):
-                                if not image_path.exists():
-                                    with solara.Column(align="center"):
-                                        solara.Image(image_url, width="120px")
-                                else:
-                                    solara.Image(image_url, width="100%")
+        with solara.Column(gap="75px", style={"padding-bottom": "75px"}):
+            for route in route_current.children:
+                if route.children:
+                    with solara.Column(classes=["subcategory-row", "ps-md-10"]):
+                        solara.HTML(tag="h2", unsafe_innerHTML=route.label, attributes={"id": route.path}, style="padding-left: 10%;")
+                        with solara.Row(justify="center", gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px"}):
+                            for child in route.children:
+                                if child.path == "/":
+                                    continue
+                                path = route.path + "/" + child.path
+                                for extension in [".png", ".gif"]:
+                                    image = path + extension
+                                    image_path = Path(__file__).parent.parent / "public" / route_current.path / image
+                                    image_url = "/static/public/" + route_current.path + "/" + image
+                                    if image_path.exists():
+                                        break
+                                    else:
+                                        image_url = "/static/public/logo.svg"
+
+                                if path:
+                                    path = path if route_external is None else route_current.path + "/" + path
+                                    title = solara.Link(path, children=[child.label])
+                                    with solara.Card(title, classes=["component-card"], margin=0):
+                                        with solara.Link(path):
+                                            if not image_path.exists():
+                                                with solara.Column(align="center"):
+                                                    solara.Image(image_url, width="120px")
+                                            else:
+                                                solara.Image(image_url, width="100%")
 
 
 @solara.component
@@ -81,7 +95,7 @@ def SubCategoryLayout(children=[]):
     elif route_current.module:
         WithCode(route_current.module)
     else:
-        with solara.Column(align="center", children=children, style={"flex-grow": 1}) as main:
+        with solara.Column(align="center", children=children, style={"flex-grow": 1, "padding": "0"}) as main:
             pass
         return main
 

solara/website/components/header.py

@@ -5,8 +5,8 @@
 from solara.server import settings
 
 
-@solara.component_vue("algolia.vue")
-def Algolia(app_id: str, api_key: str, index_name: str, debug=False):
+@solara.component_vue("algolia_api.vue")
+def Algolia():
     pass
 
 
@@ -17,6 +17,7 @@ def Header(
 ):
     # use routes of parent (assuming we are a child of a layout)
     route_current, all_routes = solara.use_route(level=-1)
+    route_current_with_children, all_routes_with_children = solara.use_route()
     router = solara.use_router()
 
     # set states for menu
@@ -47,15 +48,22 @@ def Header(
                         rv.Icon(children=["mdi-menu"])
                 with solara.Link(path_or_route="/"):
                     solara.Image(router.root_path + "/static/assets/images/logo.svg")
-            rv.Spacer()
 
-            if settings.search.enabled:
-                from solara_enterprise.search.search import Search
-
-                Search()
+            if (
+                route_current_with_children is not None
+                and route_current is not None
+                and route_current.path == "documentation"
+                and route_current_with_children.path == "/"
+            ):
+                solara.v.Spacer()
             else:
-                Algolia(app_id="9KW9L7O5EQ", api_key="ef7495102afff1e16d1b7cf6ec2ab2d0", index_name="solara")
-            # menu
+                if settings.search.enabled:
+                    from solara_enterprise.search.search import Search
+
+                    Search()
+                else:
+                    with solara.Row(justify="end", style={"align-items": "center", "flex-grow": "1", "background-color": "transparent"}):
+                        Algolia()
             with rv.Html(tag="ul", class_="main-menu menu d-none d-md-flex"):
                 for route in all_routes:
                     if route.path in ["apps", "contact", "changelog"]:

solara/website/pages/__init__.py

@@ -267,7 +267,7 @@ def Layout(children=[]):
                             MailChimp(location=router.path)
             else:
                 with rv.Row(
-                    style_="gap:40px; flex-wrap: nowrap; margin: 0; min-height: calc(100vh - 215.5px);",
+                    style_="flex-wrap: nowrap; margin: 0; min-height: calc(100vh - 215.5px);",
                     justify="center" if route_current is not None and route_current.path in ["documentation", "showcase"] else "start",
                 ):
                     if route_current is not None and hasattr(route_current.module, "Sidebar"):
@@ -278,13 +278,19 @@ def Layout(children=[]):
                     with rv.Col(
                         tag="main",
                         md=True,
-                        class_="pt-12 pl-12 pr-10",
-                        style_=f"max-width: {'1024px' if route_current.path not in ['documentation', 'contact', 'changelog'] else 'unset'}; overflow: auto;",
+                        class_="pa-0",
+                        style_=f"""max-width: {'1024px' if route_current.path not in ['documentation', 'contact', 'changelog']
+                                               else 'unset'}; overflow: hidden auto;""",
                     ):
                         if route_current is not None and route_current.path == "/":
                             with rv.Row(align="center"):
                                 pass
-                        with rv.Row(children=children, justify="center", class_="solara-page-content-search"):
+                        with solara.Row(
+                            children=children,
+                            justify="center",
+                            classes=["solara-page-content-search"],
+                            style=f"height: {'100%' if route_current.path == 'documentation' else 'unset'};",
+                        ):
                             pass
 
             # absolute = True prevents the drawer from being below the overlay it generates

solara/website/pages/apps/jupyter-dashboard-1.py

@@ -14,7 +14,7 @@
 limit = solara.reactive(100)
 
 
-ROOT = Path(solara.__file__).parent / "website" / "pages" / "documentation" / "getting_started" / "content" / "04-tutorial"
+ROOT = Path(solara.__file__).parent / "website" / "pages" / "documentation" / "getting_started" / "content" / "04-tutorials"
 path = ROOT / Path("SF_crime_sample.csv.gz")
 url = "https://raw.githubusercontent.com/widgetti/solara/master/solara/website/pages/docs/content/04-tutorial/SF_crime_sample.csv"