-
Notifications
You must be signed in to change notification settings - Fork 616
Playground and get started #1240
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
27d66b5
5d653dc
6e5902a
1964d5f
aae3137
374fcce
4e02907
e3d8c12
f3201b5
1f63cef
ff210af
dd9f37d
610cb21
7d1950e
574eb11
2bf4096
ada85d5
609d805
518280f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import Link from "next/link"; | ||
|
|
||
| import classNames from "classnames"; | ||
|
|
||
| import styles from "./iconLink.module.css"; | ||
|
|
||
| export default ({ | ||
| children, | ||
| label, | ||
| href, | ||
| icon, | ||
| target, | ||
| className, | ||
| iconClassName, | ||
| contentClassName, | ||
| cssModuleClassName, | ||
| cssModuleIconClassName, | ||
| cssModuleContentClassName, | ||
| }) => { | ||
| href = href ?? "#"; | ||
| const content = children || label; | ||
|
|
||
| return ( | ||
| <Link | ||
| href={href} | ||
| className={classNames( | ||
| "not-link", | ||
| "group", | ||
| styles.Link, | ||
| className, | ||
| cssModuleClassName ? styles[cssModuleClassName] : null, | ||
| )} | ||
| target={target == "_blank" ? target : "_self"} | ||
| > | ||
| <i | ||
| className={classNames( | ||
| styles.Icon, | ||
| iconClassName, | ||
| cssModuleIconClassName ? styles[cssModuleIconClassName] : null, | ||
| )} | ||
| > | ||
| {icon} | ||
| </i> | ||
|
|
||
| <span | ||
| className={classNames( | ||
| styles.Truncate, | ||
| contentClassName, | ||
| cssModuleContentClassName ? styles[cssModuleContentClassName] : null, | ||
| )} | ||
| > | ||
| {content} | ||
| </span> | ||
| </Link> | ||
| ); | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| .Link { | ||
| @apply overflow-hidden border-none | ||
| text-base md:text-lg | ||
| tracking-tight | ||
| font-sans font-normal leading-7 | ||
| hover:opacity-70 | ||
| flex items-center gap-2 | ||
| transition-all; | ||
| } | ||
|
|
||
| :global(.dark) .Link { | ||
| @apply text-gray-40; | ||
| } | ||
|
|
||
| .Truncate { | ||
| @apply truncate; | ||
| } | ||
|
|
||
| .Icon { | ||
| @apply relative; | ||
| } | ||
|
|
||
| .IconRight { | ||
| @apply order-last; | ||
| } | ||
|
|
||
| .Orange { | ||
| @apply text-orange-80; | ||
| } | ||
|
|
||
| :global(.dark) .Orange { | ||
| @apply text-orange-70; | ||
| /* @apply text-gray-80; */ | ||
| } | ||
|
|
||
| .Indigo { | ||
| @apply text-indigo-70; | ||
| } | ||
|
|
||
| :global(.dark) .Indigo { | ||
| @apply text-indigo-40; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| .GridContainer { | ||
| @apply grid grid-cols-6 gap-4 mb-12; | ||
| @apply grid grid-cols-6 gap-4; | ||
| } | ||
|
|
||
| .ListContainer { | ||
| @apply flex flex-col gap-4 mb-12; | ||
| @apply flex flex-col gap-4; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,32 @@ | ||
| import Link from "next/link"; | ||
|
|
||
| import IconLink from "../blocks/iconLink"; | ||
|
|
||
| import styles from "./arrowLink.module.css"; | ||
|
|
||
| const ArrowLink = ({ children, link, type, content, target }) => { | ||
| function ArrowType() { | ||
| const href = link || "#"; | ||
| if (type == "back") { | ||
| return ( | ||
| <Link | ||
| href={href} | ||
| className={` | ||
| not-link | ||
| group | ||
| ${styles.Link} | ||
| ${styles.BackLink} | ||
| `} | ||
| target={target == "_blank" ? target : "_self"} | ||
| > | ||
| <svg | ||
| width="14" | ||
| height="14" | ||
| viewBox="0 0 14 14" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className={` | ||
| ${styles.Icon} | ||
| ${styles.BackIcon} | ||
| `} | ||
| > | ||
| <path d="M7.22017 13.7159L8.70312 12.2393L4.81037 8.35298H13.9318V6.19247H4.81037L8.70312 2.29972L7.22017 0.829545L0.776989 7.27273L7.22017 13.7159Z" /> | ||
| </svg> | ||
| <span className={styles.Text}>Previous: </span> | ||
| <span className={styles.Truncate}>{content}</span> | ||
| </Link> | ||
| ); | ||
| } else if (type == "next") { | ||
| return ( | ||
| <Link | ||
| href={href} | ||
| className={` | ||
| not-link | ||
| group | ||
| ${styles.Link} | ||
| ${styles.NextLink} | ||
| `} | ||
| target={target == "_blank" ? target : "_self"} | ||
| > | ||
| <span className={styles.Text}>Next: </span> | ||
| <span className={styles.Truncate}>{content}</span> | ||
| <svg | ||
| width="14" | ||
| height="14" | ||
| viewBox="0 0 14 14" | ||
| fill="text-gray-90 dark:text-gray-40" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className={` | ||
| ${styles.Icon} | ||
| ${styles.NextIcon} | ||
| `} | ||
| > | ||
| <path d="M6.96165 13.7159L13.4048 7.27273L6.96165 0.829545L5.47869 2.30611L9.37145 6.19247H0.25V8.35298H9.37145L5.47869 12.2457L6.96165 13.7159Z" /> | ||
| </svg> | ||
| </Link> | ||
| ); | ||
| } | ||
| const ArrowLink = ({ link, type, content, target }) => { | ||
| const href = link || "#"; | ||
|
|
||
| if (type == "back") { | ||
| return ( | ||
| <IconLink href={href} icon="arrow_back" target={target}> | ||
| <span className={styles.Text}>Previous: </span> | ||
| {content} | ||
| </IconLink> | ||
| ); | ||
| } else if (type == "next") { | ||
| return ( | ||
| <IconLink | ||
| href={href} | ||
| icon="arrow_forward" | ||
| target={target} | ||
| iconClassName={styles.NextIcon} | ||
| > | ||
| <span className={styles.Text}>Next: </span> | ||
| {content} | ||
| </IconLink> | ||
| ); | ||
| } | ||
| return <ArrowType />; | ||
| }; | ||
|
|
||
| export default ArrowLink; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .Container { | ||
| @apply flex flex-wrap flex-col | ||
| md:flex-row md:flex-nowrap | ||
| items-center justify-between | ||
| mt-16 mb-8 gap-4; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,60 +5,88 @@ slug: /get-started/installation | |
|
|
||
| # Install Streamlit | ||
|
|
||
| There are multiple ways to set up your development environment and install Streamlit. Read below to | ||
| understand these options. Developing locally with Python installed on your own computer is the most | ||
| There are multiple ways to set up your development environment and install Streamlit. | ||
| Developing locally with Python installed on your own computer is the most | ||
| common scenario. | ||
|
|
||
| ## Summary for experts | ||
| <Tip> | ||
|
|
||
| Try a Streamlit Playground that runs in your browser — no installation required. | ||
| (Note that this is not how Streamlit is meant to be used, because it has many downsides. That's why it's a | ||
| _playground_!) | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I know this is heavily borrowed from my own text, but how about this change: Try a Streamlit Playground that runs in your browser—no installation required. (Note that this is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
|
|
||
| <IconLink | ||
| href="/get-started/installation/streamlit-playground" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Non-blocking: Why not just link straight to the playground? Isn't it self-explanatory enough? |
||
| icon="arrow_forward" | ||
| label="Instructions for the playground" | ||
| cssModuleClassName="Indigo" | ||
| cssModuleIconClassName="IconRight" | ||
| /> | ||
|
|
||
| </Tip> | ||
|
|
||
| ## Summary for experienced Python developers | ||
|
|
||
| 1. To set up your Python environment and test your installation, execute the following terminal commands: | ||
|
|
||
| 1. Set up your Python development environment. | ||
| 2. Run: | ||
| ```bash | ||
| pip install streamlit | ||
| ``` | ||
| 3. Validate the installation by running our Hello app: | ||
| ```bash | ||
| streamlit hello | ||
| ``` | ||
| 4. Jump to our [Basic concepts](/get-started/fundamentals/main-concepts). | ||
|
|
||
| ## Installation steps for the rest of us | ||
|
|
||
| <TileContainer layout="list"> | ||
| 1. Jump to our [Basic concepts](/get-started/fundamentals/main-concepts). | ||
|
|
||
| <RefCard href="/get-started/installation/command-line" size="half"> | ||
| ## Install Streamlit on your machine | ||
|
|
||
| <h5>Option 1: I'm comfortable with the command line</h5> | ||
| ### Option 1: I like the command line | ||
|
|
||
| Install Streamlit on your own machine using tools like `venv` and `pip`. | ||
|
|
||
| </RefCard> | ||
|
|
||
| <RefCard href="/get-started/installation/anaconda-distribution" size="half"> | ||
| <IconLink | ||
| link="/get-started/installation/command-line" | ||
| icon="arrow_forward" | ||
| label="Instructions for the command line" | ||
| cssModuleClassName="Orange" | ||
| cssModuleIconClassName="IconRight" | ||
| /> | ||
|
|
||
| <h5>Option 2: I prefer a graphical interface</h5> | ||
| ### Option 2: I prefer a graphical interface | ||
|
|
||
| Install Streamlit using the Anaconda Distribution graphical user interface. This is also the best | ||
| approach if you're on Windows or don't have Python set up. | ||
|
|
||
| </RefCard> | ||
| <IconLink | ||
| link="/get-started/installation/anaconda-distribution" | ||
| icon="arrow_forward" | ||
| label="Instructions for Anaconda Distribution" | ||
| cssModuleClassName="Orange" | ||
| cssModuleIconClassName="IconRight" | ||
| /> | ||
|
|
||
| <RefCard href="/get-started/installation/community-cloud" size="half"> | ||
| ## Create an app in the cloud | ||
|
|
||
| <h5>Option 3: I'd rather use a cloud-based environment</h5> | ||
| ### Option 1: I want a free cloud environment | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Non-blocking: I'd love to make option 1 feel more like the community option, and option 2 like the pro option. |
||
|
|
||
| Use Streamlit Community Cloud with GitHub Codespaces so you don't have to go through the trouble | ||
| of installing Python and setting up an environment. | ||
|
|
||
| </RefCard> | ||
| <IconLink | ||
| link="/get-started/installation/community-cloud" | ||
| icon="arrow_forward" | ||
| label="Instructions for GitHub Codespaces" | ||
| cssModuleClassName="Orange" | ||
| cssModuleIconClassName="IconRight" | ||
| /> | ||
|
|
||
| <RefCard href="/get-started/installation/streamlit-in-snowflake" size="half"> | ||
|
|
||
| <h5>Option 4: I need something secure, controlled, and in the cloud</h5> | ||
| ### Option 2: I need something secure, controlled, and in the cloud | ||
|
|
||
| Use Streamlit in Snowflake to code your apps in the cloud, right alongside your | ||
| data with role-based access controls. | ||
|
|
||
| </RefCard> | ||
|
|
||
| </TileContainer> | ||
| <IconLink | ||
| link="/get-started/installation/streamlit-in-snowflake" | ||
| icon="arrow_forward" | ||
| label="Instructions for Snowflake" | ||
| cssModuleClassName="Orange" | ||
| cssModuleIconClassName="IconRight" | ||
| /> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this is heavily borrowed from my own text, but how about this change:
Try a Streamlit Playground that runs in your browser—no installation required. (Note that this is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
playground!)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.