From 4bb147d4054e457848241be0d8cea77b4f363c93 Mon Sep 17 00:00:00 2001 From: Thiago Teixeira Date: Thu, 21 Dec 2023 19:08:28 -0800 Subject: [PATCH 1/3] Improve colors, as well as the infra used for setting colors. --- components/blocks/inlineCallout.js | 44 +++++++++----- components/blocks/inlineCallout.module.css | 60 ++++++++++++++----- components/blocks/tile.js | 24 ++++---- components/blocks/tile.module.css | 27 +++++++-- components/navigation/navItem.js | 49 +++++++++------ components/navigation/navItem.module.css | 60 ++++++++++++++----- components/navigation/sideBar.module.css | 8 ++- components/summaryTiles.js | 4 +- content/get-started/fundamentals/index.md | 35 ++++------- .../fundamentals/tutorials/index.md | 4 +- content/get-started/index.md | 8 +-- content/get-started/installation/index.md | 6 +- .../advanced-features/app-testing/index.md | 8 +-- content/menu.md | 8 +-- pages/index.js | 8 +-- 15 files changed, 229 insertions(+), 124 deletions(-) diff --git a/components/blocks/inlineCallout.js b/components/blocks/inlineCallout.js index fcd6a1804..a8b635d22 100644 --- a/components/blocks/inlineCallout.js +++ b/components/blocks/inlineCallout.js @@ -4,22 +4,8 @@ import classNames from "classnames"; import styles from "./inlineCallout.module.css"; const InlineCallout = ({ children, icon, color, bold, href }) => { - const backgroundColor = - color === "red-70" - ? styles.GetStartedBackground - : color === "violet-70" - ? styles.LibraryBackground - : color === "l-blue-70" - ? styles.CloudBackground - : styles.KBBackground; - const textColor = (color = styles.GrayText); //Temporary color until red/Get started can be improved - // color === "red-70" - // ? styles.GetStartedText - // : color === "violet-70" - // ? styles.LibraryText - // : color === "l-blue-70" - // ? styles.CloudText - // : styles.KBText; + const backgroundColor = BG_CLASS[color]; + const textColor = FG_CLASS[color]; return (
{ ); }; +const BG_CLASS = { + "red-70": styles.RedBackground, + "orange-70": styles.OrangeBackground, + "yellow-70": styles.YellowBackground, + "green-70": styles.GreenBackground, + "acqua-70": styles.AcquaBackground, + "lightBlue-70": styles.LightBlueBackground, + "darkBlue-70": styles.DarkBlueBackground, + "indigo-70": styles.IndigoBackground, + "gray-70": styles.GrayBackground, + unset: styles.TransparentBackground, +}; + +const FG_CLASS = { + "red-70": styles.RedForeground, + "orange-70": styles.OrangeForeground, + "yellow-70": styles.YellowForeground, + "green-70": styles.GreenForeground, + "acqua-70": styles.AcquaForeground, + "lightBlue-70": styles.LightBlueForeground, + "darkBlue-70": styles.DarkBlueForeground, + "indigo-70": styles.IndigoForeground, + "gray-70": styles.GrayForeground, + unset: styles.TransparentForeground, +}; + export default InlineCallout; diff --git a/components/blocks/inlineCallout.module.css b/components/blocks/inlineCallout.module.css index 63403dfca..b6ad8f5b7 100644 --- a/components/blocks/inlineCallout.module.css +++ b/components/blocks/inlineCallout.module.css @@ -29,40 +29,68 @@ } /* Colors for each category */ -.GetStartedBackground { +.RedBackground { @apply bg-red-70; } -.LibraryBackground { - @apply bg-indigo-70; +.OrangeBackground { + @apply bg-orange-70; } -.CloudBackground { +.YellowBackground { + @apply bg-yellow-70; +} + +.GreenBackground { + @apply bg-green-70; +} + +.AcquaBackground { + @apply bg-acqua-70; +} + +.LightBlueBackground { @apply bg-lightBlue-70; } -.KBBackground { - @apply bg-orange-70; +.DarkBlueBackground { + @apply bg-darkBlue-70; +} + +.IndigoBackground { + @apply bg-indigo-70; +} + +.RedForeground { + @apply text-red-70; +} + +.OrangeForeground { + @apply text-orange-70; +} + +.YellowForeground { + @apply text-yellow-70; } -.GetStartedText { - @apply text-red-70 !important; +.GreenForeground { + @apply text-green-70; } -.LibraryText { - @apply text-indigo-70 !important; +.AcquaForeground { + @apply text-acqua-70; } -.CloudText { - @apply text-lightBlue-70 !important; +.LightBlueForeground { + @apply text-lightBlue-70; } -.KBText { - @apply text-orange-70 !important; +.DarkBlueForeground { + @apply text-darkBlue-70; } -.GrayText { - @apply text-gray-80 underline !important; +.IndigoForeground { + @apply text-indigo-70; } :global(.dark) .GrayText { diff --git a/components/blocks/tile.js b/components/blocks/tile.js index b50498db1..c0d85af0e 100644 --- a/components/blocks/tile.js +++ b/components/blocks/tile.js @@ -53,16 +53,7 @@ const Tile = ({ ); } - const backgroundColor = - background === "orange-70" - ? styles.OrangeBackground - : background === "red-70" - ? styles.RedBackground - : background === "violet-70" - ? styles.VioletBackground - : background === "unset" - ? styles.TransparentBackground - : styles.BlueBackground; + const backgroundColor = BG_CLASS[background]; return (
{ let isCondensed = condensed ? condensed : false; // We only want the color to show when we're either active, or the menu is condensed. - let color = - page.color === "red-70" - ? styles.GetStartedCategory - : page.color === "violet-70" - ? styles.LibraryCategory - : page.color === "l-blue-70" - ? styles.CloudCategory - : styles.KBCategory; - color = isCondensed || active ? color : ""; + let fgColor = FG_CLASS[page.color]; + fgColor = isCondensed || active ? fgColor : ""; + + const bgColor = BG_CLASS[page.color]; navBox = (
{ className={classNames( styles.HeadingIconContainer, isCondensed ? styles.CondensedHeadingIconContainer : "", - page.color === "red-70" - ? styles.GetStartedIcon - : page.color === "violet-70" - ? styles.LibraryIcon - : page.color === "l-blue-70" - ? styles.CloudIcon - : styles.KBIcon + bgColor )} > {page.icon} @@ -51,7 +40,7 @@ const NavItem = ({ page, slug, condensed, className }) => { className={classNames( styles.CategoryName, isCondensed ? styles.CondensedCategoryName : "", - color + fgColor )} > {page.name} @@ -110,4 +99,30 @@ const NavItem = ({ page, slug, condensed, className }) => { return navItem; }; +const BG_CLASS = { + "red-70": styles.RedBackground, + "orange-70": styles.OrangeBackground, + "yellow-70": styles.YellowBackground, + "green-70": styles.GreenBackground, + "acqua-70": styles.AcquaBackground, + "lightBlue-70": styles.LightBlueBackground, + "darkBlue-70": styles.DarkBlueBackground, + "indigo-70": styles.IndigoBackground, + "gray-70": styles.GrayBackground, + unset: styles.TransparentBackground, +}; + +const FG_CLASS = { + "red-70": styles.RedForeground, + "orange-70": styles.OrangeForeground, + "yellow-70": styles.YellowForeground, + "green-70": styles.GreenForeground, + "acqua-70": styles.AcquaForeground, + "lightBlue-70": styles.LightBlueForeground, + "darkBlue-70": styles.DarkBlueForeground, + "indigo-70": styles.IndigoForeground, + "gray-70": styles.GrayForeground, + unset: styles.TransparentForeground, +}; + export default NavItem; diff --git a/components/navigation/navItem.module.css b/components/navigation/navItem.module.css index 3188aab89..1ba8c03a4 100644 --- a/components/navigation/navItem.module.css +++ b/components/navigation/navItem.module.css @@ -19,20 +19,36 @@ } /* Colors for heading icons */ -.GetStartedIcon { +.RedBackground { @apply bg-red-70; } -.LibraryIcon { - @apply bg-indigo-70; +.OrangeBackground { + @apply bg-orange-70; +} + +.YellowBackground { + @apply bg-yellow-70; +} + +.GreenBackground { + @apply bg-green-70; +} + +.AcquaBackground { + @apply bg-acqua-70; } -.CloudIcon { +.LightBlueBackground { @apply bg-lightBlue-70; } -.KBIcon { - @apply bg-orange-70; +.DarkBlueBackground { + @apply bg-darkBlue-70; +} + +.IndigoBackground { + @apply bg-indigo-70; } .CategoryName { @@ -49,20 +65,36 @@ } /* Colors for active categories */ -.GetStartedCategory { - @apply text-red-70 !important; +.RedForeground { + @apply text-red-70; +} + +.OrangeForeground { + @apply text-orange-70; +} + +.YellowForeground { + @apply text-yellow-70; +} + +.GreenForeground { + @apply text-green-70; +} + +.AcquaForeground { + @apply text-acqua-70; } -.LibraryCategory { - @apply text-indigo-70 !important; +.LightBlueForeground { + @apply text-lightBlue-70; } -.CloudCategory { - @apply text-lightBlue-70 !important; +.DarkBlueForeground { + @apply text-darkBlue-70; } -.KBCategory { - @apply text-orange-70 !important; +.IndigoForeground { + @apply text-indigo-70; } /* Subnav styles */ diff --git a/components/navigation/sideBar.module.css b/components/navigation/sideBar.module.css index 2068ece5e..4210f013b 100644 --- a/components/navigation/sideBar.module.css +++ b/components/navigation/sideBar.module.css @@ -1,5 +1,11 @@ .Container { - @apply fixed lg:sticky top-auto lg:top-12 left-0 xl:left-auto px-0 h-screen z-20 w-10/12 md:w-9/12 xl:w-screen max-w-xs md:max-w-none overflow-y-auto shadow-lg lg:shadow-none transition-all; + @apply fixed lg:sticky; + @apply top-auto lg:top-12 left-0 xl:left-auto; + @apply px-0 pb-64 h-screen z-20; + @apply w-10/12 md:w-9/12 xl:w-screen max-w-xs md:max-w-none; + @apply overflow-y-auto; + @apply shadow-lg lg:shadow-none; + @apply transition-all; @apply bg-white !important; } diff --git a/components/summaryTiles.js b/components/summaryTiles.js index 01b001f8d..c09598c41 100644 --- a/components/summaryTiles.js +++ b/components/summaryTiles.js @@ -16,7 +16,7 @@ const SummaryTiles = () => { icon="dvr" title="API reference" text="Learn about our APIs, with actionable explanations of specific functions and features." - background="violet-70" + background="indigo-70" link="/library/api-reference" /> @@ -24,7 +24,7 @@ const SummaryTiles = () => { icon="grid_view" title="App gallery" text="Try out awesome apps created by our users, and curated from our forums or Twitter." - background="blue-70" + background="lightBlue-70" link="https://streamlit.io/gallery" /> diff --git a/content/get-started/fundamentals/index.md b/content/get-started/fundamentals/index.md index 6a5dac913..99acd7502 100644 --- a/content/get-started/fundamentals/index.md +++ b/content/get-started/fundamentals/index.md @@ -7,25 +7,16 @@ slug: /get-started/fundamentals Are you new to Streamlit and want the grand tour? If so, you're in the right place! - - - - - + + + Learn the fundamental concepts of Streamlit. How is a Streamlit app structured? How does it run? How does it magically get your data on a webpage? + + + + After you understand the rerun logic of Streamlit, learn how to make efficient and dynamic apps with caching and Session State. Get introduced to handling database connections. + + + + Learn about Streamlit's additional features. You don't need to know these concepts for your first app, but check it out to know what's available. + + diff --git a/content/get-started/fundamentals/tutorials/index.md b/content/get-started/fundamentals/tutorials/index.md index 15835b78d..263cff96f 100644 --- a/content/get-started/fundamentals/tutorials/index.md +++ b/content/get-started/fundamentals/tutorials/index.md @@ -8,10 +8,10 @@ slug: /get-started/tutorials If you've just read through our [Main concepts](/get-started/fundamentals/main-concepts) and want to get your hands on Streamlit. Check out these tutorials. Make sure you have [installed Streamlit](/get-started/installation) so you can execute the code yourself. - + uses the concepts learned in Fundamentals along with caching to walk through making your first app. - + walks through the easy steps to add pages to your app. diff --git a/content/get-started/index.md b/content/get-started/index.md index e25ee5e7d..2ae9eee9d 100644 --- a/content/get-started/index.md +++ b/content/get-started/index.md @@ -9,16 +9,16 @@ This Get Started guide explains how Streamlit works, how to install Streamlit on operating system, and how to create your first Streamlit app! - + helps you set up your development environment. Walk through installing Streamlit on Windows, macOS, or Linux. Alternatively, code right in your browser with GitHub Codespaces. - + introduces you to Streamlit's data model and development flow. You'll learn what makes Streamlit the most powerful way to build data apps, including the ability to display and style data, draw charts and maps, add interactive widgets, customize app layouts, cache computation, and define themes. - + walks you through creating apps using core features to fetch and cache data, draw charts, plot information on a map, and use interactive widgets to filter results. - + if you want to skip past local installation and code right in your browser. This guide uses Streamlit Community Cloud to help you automatically configure a codespace. diff --git a/content/get-started/installation/index.md b/content/get-started/installation/index.md index 9c6490317..bc52a08b8 100644 --- a/content/get-started/installation/index.md +++ b/content/get-started/installation/index.md @@ -37,20 +37,20 @@ Environment managers create virtual environments to isolate Python package insta ### Option 1: I'm comfortable with the command line. - + ### Option 2: I prefer a graphical interface. - + ### Option 3: I don't want to install anything on my computer. - + diff --git a/content/library/advanced-features/app-testing/index.md b/content/library/advanced-features/app-testing/index.md index 9b3aed010..4f64bb0bd 100644 --- a/content/library/advanced-features/app-testing/index.md +++ b/content/library/advanced-features/app-testing/index.md @@ -10,16 +10,16 @@ Streamlit app testing enables developers to build and run automated tests. Bring The provided class, AppTest, simulates a running app and provides methods to set up, manipulate, and inspect the app contents via API instead of a browser UI. AppTest provides similar functionality to browser automation tools like Selenium or Playwright, but with less overhead to write and execute tests. Use our testing framework with a tool like [pytest](https://docs.pytest.org/) to execute or automate your tests. A typical pattern is to build a suite of tests for an app to ensure consistent functionality as the app evolves. The tests run locally and/or in a CI environment like GitHub Actions. - + introduces you to the app testing framework and how to execute tests using pytest. Learn how to initialize and run simulated apps, including how to retrieve, manipulate, and inspect app elements. - + explains how to work with secrets and Session State within app tests, including how to test multipage apps. - + puts together the concepts explained above. Check out an app with multiple tests in place. - + is a compact reference summarizing the available syntax. diff --git a/content/menu.md b/content/menu.md index c1603b986..6d08d69f8 100644 --- a/content/menu.md +++ b/content/menu.md @@ -2,7 +2,7 @@ site_menu: - category: Get started url: /get-started - color: red-70 + color: orange-70 icon: rocket_launch - category: Get started / Installation url: /get-started/installation @@ -31,7 +31,7 @@ site_menu: - category: Streamlit library url: /library - color: violet-70 + color: indigo-70 icon: description - category: Streamlit library / API reference url: /library/api-reference @@ -477,7 +477,7 @@ site_menu: - category: Streamlit Community Cloud url: /streamlit-community-cloud - color: l-blue-70 + color: lightBlue-70 icon: cloud - category: Streamlit Community Cloud / Get started @@ -539,7 +539,7 @@ site_menu: - category: Knowledge base url: /knowledge-base - color: orange-70 + color: darkBlue-70 icon: school - category: Knowledge base / Tutorials url: /knowledge-base/tutorials diff --git a/pages/index.js b/pages/index.js index a2f03ab1a..7e3c5d645 100644 --- a/pages/index.js +++ b/pages/index.js @@ -142,7 +142,7 @@ export default function Home({ window, menu, gdpr_data, cookie_data }) {

How to use our docs

Date: Thu, 21 Dec 2023 19:16:34 -0800 Subject: [PATCH 2/3] Fix circle and kb colors. --- components/navigation/navChild.js | 21 +++++++++++------ components/navigation/navChild.module.css | 28 ++++++++++++++++++----- content/kb/index.md | 10 ++++---- 3 files changed, 41 insertions(+), 18 deletions(-) diff --git a/components/navigation/navChild.js b/components/navigation/navChild.js index bb5e3183d..8582a7e3b 100644 --- a/components/navigation/navChild.js +++ b/components/navigation/navChild.js @@ -122,13 +122,7 @@ const NavChild = ({ slug, page, color, className }) => { className={classNames( styles.Circle, active ? styles.ActiveCircle : "", - color === "red-70" - ? styles.GetStartedCircle - : color === "violet-70" - ? styles.LibraryCircle - : color === "l-blue-70" - ? styles.CloudCircle - : styles.KBCircle + CIRCLE_CLASS[color] )} /> { ); }; +const CIRCLE_CLASS = { + "red-70": styles.RedCircle, + "orange-70": styles.OrangeCircle, + "yellow-70": styles.YellowCircle, + "green-70": styles.GreenCircle, + "acqua-70": styles.AcquaCircle, + "lightBlue-70": styles.LightBlueCircle, + "darkBlue-70": styles.DarkBlueCircle, + "indigo-70": styles.IndigoCircle, + "gray-70": styles.GrayCircle, + unset: styles.TransparentCircle, +}; + export default NavChild; diff --git a/components/navigation/navChild.module.css b/components/navigation/navChild.module.css index eabe16813..e452a62a9 100644 --- a/components/navigation/navChild.module.css +++ b/components/navigation/navChild.module.css @@ -84,18 +84,34 @@ } /* Colors for circles */ -.GetStartedCircle { +.RedCircle { @apply bg-red-70; } -.LibraryCircle { - @apply bg-indigo-70; +.OrangeCircle { + @apply bg-orange-70; +} + +.YellowCircle { + @apply bg-yellow-70; +} + +.GreenCircle { + @apply bg-green-70; } -.CloudCircle { +.AcquaCircle { + @apply bg-acqua-70; +} + +.LightBlueCircle { @apply bg-lightBlue-70; } -.KBCircle { - @apply bg-orange-70; +.DarkBlueCircle { + @apply bg-darkBlue-70; +} + +.IndigoCircle { + @apply bg-indigo-70; } diff --git a/content/kb/index.md b/content/kb/index.md index d1c109eaf..df19be920 100644 --- a/content/kb/index.md +++ b/content/kb/index.md @@ -9,7 +9,7 @@ The knowledge base is a self-serve library of tips, step-by-step tutorials, and Date: Thu, 21 Dec 2023 22:24:40 -0800 Subject: [PATCH 3/3] Fix some color bugs I introduced, and clean up all colors names. --- components/blocks/iconHeader.js | 46 ++++++++++------- components/blocks/iconHeader.module.css | 54 +++++++++++++++++--- components/blocks/note.js | 2 +- components/blocks/tip.js | 2 +- content/index.md | 4 +- content/streamlit-cloud/get-started/index.md | 3 ++ content/streamlit-cloud/index.md | 12 ++--- pages/style-guide.js | 16 +++--- public/admin/config.yml | 16 +++--- 9 files changed, 102 insertions(+), 53 deletions(-) diff --git a/components/blocks/iconHeader.js b/components/blocks/iconHeader.js index 16f8a7530..0a8d41759 100644 --- a/components/blocks/iconHeader.js +++ b/components/blocks/iconHeader.js @@ -6,34 +6,44 @@ const IconHeader = ({ icon, rotate, title, background, color }) => { return (
{icon} -

+

{title}

); }; +const BG_CLASS = { + "red-70": styles.RedBackground, + "orange-70": styles.OrangeBackground, + "yellow-70": styles.YellowBackground, + "green-70": styles.GreenBackground, + "acqua-70": styles.AcquaBackground, + "lightBlue-70": styles.LightBlueBackground, + "darkBlue-70": styles.DarkBlueBackground, + "indigo-70": styles.IndigoBackground, + "gray-70": styles.GrayBackground, + unset: styles.TransparentBackground, +}; + +const FG_CLASS = { + "red-70": styles.RedForeground, + "orange-70": styles.OrangeForeground, + "yellow-70": styles.YellowForeground, + "green-70": styles.GreenForeground, + "acqua-70": styles.AcquaForeground, + "lightBlue-70": styles.LightBlueForeground, + "darkBlue-70": styles.DarkBlueForeground, + "indigo-70": styles.IndigoForeground, + "gray-70": styles.GrayForeground, + unset: styles.TransparentForeground, +}; + export default IconHeader; diff --git a/components/blocks/iconHeader.module.css b/components/blocks/iconHeader.module.css index e2f53ff5c..38ace3bbf 100644 --- a/components/blocks/iconHeader.module.css +++ b/components/blocks/iconHeader.module.css @@ -12,30 +12,70 @@ } /* Color modifiers */ -.VioletBackground { - @apply bg-indigo-70; +.RedBackground { + @apply bg-red-70; } .OrangeBackground { @apply bg-orange-70; } +.YellowBackground { + @apply bg-yellow-70; +} + +.GreenBackground { + @apply bg-green-70; +} + +.AcquaBackground { + @apply bg-acqua-70; +} + .LightBlueBackground { @apply bg-lightBlue-70; } -.VioletText { - @apply text-indigo-70 !important; +.DarkBlueBackground { + @apply bg-darkBlue-70; +} + +.IndigoBackground { + @apply bg-indigo-70; +} + +.RedForeground { + @apply text-red-70 !important; } -.OrangeText { +.OrangeForeground { @apply text-orange-70 !important; } -.LightBlueText { +.YellowForeground { + @apply text-yellow-70 !important; +} + +.GreenForeground { + @apply text-green-70 !important; +} + +.AcquaForeground { + @apply text-acqua-70 !important; +} + +.LightBlueForeground { @apply text-lightBlue-70 !important; } -:global(.dark) .VioletText { +.DarkBlueForeground { + @apply text-darkBlue-70 !important; +} + +.IndigoForeground { + @apply text-indigo-70 !important; +} + +:global(.dark) .IndigoText { @apply text-white !important; } diff --git a/components/blocks/note.js b/components/blocks/note.js index d68c363e7..5421ecb77 100644 --- a/components/blocks/note.js +++ b/components/blocks/note.js @@ -13,7 +13,7 @@ const Note = ({ children }) => { icon="push_pin" rotate="45" title="Note" - background="l-blue-70" + background="lightBlue-70" color="white" /> {children} diff --git a/components/blocks/tip.js b/components/blocks/tip.js index d1bcaebff..3a3e43d3e 100644 --- a/components/blocks/tip.js +++ b/components/blocks/tip.js @@ -13,7 +13,7 @@ const Tip = ({ children }) => { icon="star" rotate="0" title="Tip" - background="violet-70" + background="indigo-70" color="white" /> {children} diff --git a/content/index.md b/content/index.md index 59a2007be..259e991dc 100644 --- a/content/index.md +++ b/content/index.md @@ -3,7 +3,7 @@ title: Welcome to Streamlit features: - title: Get started body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - color: violet-70 + color: indigo-70 icon: arrow_forward url: /get-started image: "" @@ -17,7 +17,7 @@ features: - title: Topic guides body: Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia. - color: l-blue-70 + color: lightBlue-70 icon: description url: Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, diff --git a/content/streamlit-cloud/get-started/index.md b/content/streamlit-cloud/get-started/index.md index 9ef19f1f9..5654c5453 100644 --- a/content/streamlit-cloud/get-started/index.md +++ b/content/streamlit-cloud/get-started/index.md @@ -15,18 +15,21 @@ First things first, you need to create your Streamlit Community Cloud account to title="Quickstart" text="Create your account and deploy an example app as fast as possible. Jump right into coding with GitHub Codespaces." link="/streamlit-community-cloud/get-started" + background="lightBlue-70" /> diff --git a/content/streamlit-cloud/index.md b/content/streamlit-cloud/index.md index 462d56f1c..f6df7d405 100644 --- a/content/streamlit-cloud/index.md +++ b/content/streamlit-cloud/index.md @@ -13,42 +13,42 @@ If you haven't built your first Streamlit app yet, you can check out [Get starte Create your account and deploy an example app as fast as possible. Jump right into coding with GitHub Codespaces. Learn about Streamlit Community Cloud accounts and how to create one. A step-by-step guide on how to get your app deployed. Share or embed your app. Access logs, reboot apps, set favorites, and more. Jump into a GitHub Codespace to edit your app in the cloud. - +

For this guide we’re using small amounts of data so that we can move quickly. You can check out our Tutorial{" "} @@ -166,9 +162,9 @@ ls -l myscript.sh`}

Did you know you can also pass a URL to streamlit run? This is @@ -217,7 +213,7 @@ https://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/streaml