From a954c9ecf463150dea76e2c0c0b459b4e4db9643 Mon Sep 17 00:00:00 2001 From: Iisakki Rotko Date: Fri, 15 Dec 2023 16:15:58 +0100 Subject: [PATCH] fix: prettier documentation landing page --- solara/website/assets/custom.css | 43 +++- solara/website/components/algolia_api.vue | 38 ++- solara/website/components/docs.py | 68 +++-- solara/website/components/header.py | 26 +- solara/website/pages/__init__.py | 14 +- .../website/pages/apps/jupyter-dashboard-1.py | 2 +- .../website/pages/documentation/__init__.py | 236 +++++++++--------- .../{03-quickstart.md => 00-quickstart.md} | 0 ...{00-introduction.md => 01-introduction.md} | 0 .../00-overview.md | 0 .../10_data_science.py | 0 .../20-web-app.md | 0 .../30-ipywidgets.md | 0 .../40-streamlit.md | 0 .../{04-tutorial => 04-tutorials}/50-dash.md | 0 .../60-jupyter-dashboard-part1.py | 0 .../SF_crime_sample.csv.gz | Bin .../_data_science.ipynb | 0 .../_jupyter_dashboard_1.ipynb | 0 solara/website/public/social/discord.svg | 1 + solara/website/public/social/github.svg | 1 + solara/website/public/social/twitter.svg | 3 + ...chromium-darwin-ipywidgets-8-reference.png | Bin 0 -> 1322 bytes ...flask-solara-chromium-darwin-reference.png | Bin 0 -> 1369 bytes ...-flask-voila-chromium-darwin-reference.png | Bin 0 -> 1369 bytes ...lette-solara-chromium-darwin-reference.png | Bin 0 -> 1369 bytes ...solara-flask-chromium-darwin-reference.png | Bin 0 -> 1524 bytes ...ra-starlette-chromium-darwin-reference.png | Bin 0 -> 1524 bytes tests/integration/server_test.py | 2 +- tests/unit/autorouting_test.py | 2 +- 30 files changed, 261 insertions(+), 175 deletions(-) rename solara/website/pages/documentation/getting_started/content/{03-quickstart.md => 00-quickstart.md} (100%) rename solara/website/pages/documentation/getting_started/content/{00-introduction.md => 01-introduction.md} (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/00-overview.md (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/10_data_science.py (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/20-web-app.md (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/30-ipywidgets.md (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/40-streamlit.md (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/50-dash.md (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/60-jupyter-dashboard-part1.py (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/SF_crime_sample.csv.gz (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/_data_science.ipynb (100%) rename solara/website/pages/documentation/getting_started/content/{04-tutorial => 04-tutorials}/_jupyter_dashboard_1.ipynb (100%) create mode 100644 solara/website/public/social/discord.svg create mode 100644 solara/website/public/social/github.svg create mode 100644 solara/website/public/social/twitter.svg create mode 100644 test-results/tests/integration/latex_test.py/test_widget_latex_solara-flask-chromium-darwin-ipywidgets-8-reference.png create mode 100644 test-results/tests/integration/widget_test.py/test_solara_button_all-flask-solara-chromium-darwin-reference.png create mode 100644 test-results/tests/integration/widget_test.py/test_solara_button_all-flask-voila-chromium-darwin-reference.png create mode 100644 test-results/tests/integration/widget_test.py/test_solara_button_all-starlette-solara-chromium-darwin-reference.png create mode 100644 test-results/tests/integration/widget_test.py/test_widget_button_solara-flask-chromium-darwin-reference.png create mode 100644 test-results/tests/integration/widget_test.py/test_widget_button_solara-starlette-chromium-darwin-reference.png diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css index fd7893910..17ff6840f 100644 --- a/solara/website/assets/custom.css +++ b/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 */ diff --git a/solara/website/components/algolia_api.vue b/solara/website/components/algolia_api.vue index daeed9668..36fbd3e59 100644 --- a/solara/website/components/algolia_api.vue +++ b/solara/website/components/algolia_api.vue @@ -3,16 +3,19 @@ v-model="show_results" offset-y> @@ -38,6 +41,7 @@