Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions components/blocks/iconLink.js
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>
);
};
42 changes: 42 additions & 0 deletions components/blocks/iconLink.module.css
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;
}
2 changes: 1 addition & 1 deletion components/blocks/refCard.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.Container {
@apply relative rounded-md border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-10;
@apply relative rounded-md border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-20;
}

.Container:hover {
Expand Down
4 changes: 2 additions & 2 deletions components/layouts/tileContainer.module.css
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;
}
86 changes: 24 additions & 62 deletions components/navigation/arrowLink.js
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;
34 changes: 1 addition & 33 deletions components/navigation/arrowLink.module.css
Original file line number Diff line number Diff line change
@@ -1,37 +1,5 @@
.Container {
@apply flex flex-wrap flex-col md:flex-row md:flex-nowrap items-center justify-between mt-16 mb-8 gap-4;
}

.Link {
@apply overflow-hidden border-none text-base md:text-lg tracking-tight font-sans font-normal text-gray-90 leading-7 hover:opacity-70 flex items-center transition-all;
}

.Truncate {
@apply truncate;
}

:global(.dark) .Link {
@apply text-gray-40 !important;
}

.NextLink {
@apply mt-0 sm:mt-0;
}

.Icon {
@apply relative group-hover:scale-105 fill-gray-90;
}

.BackIcon {
@apply mr-2 group-hover:-left-1;
}

.NextIcon {
@apply ml-2 group-hover:-left-1;
}

:global(.dark) .Icon {
@apply fill-white !important;
@apply order-last;
}

.Text {
Expand Down
2 changes: 1 addition & 1 deletion components/navigation/arrowLinkContainer.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styles from "./arrowLink.module.css";
import styles from "./arrowLinkContainer.module.css";

const ArrowLinkContainer = ({ children }) => {
return <section className={styles.Container}>{children}</section>;
Expand Down
6 changes: 6 additions & 0 deletions components/navigation/arrowLinkContainer.module.css
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;
}
84 changes: 56 additions & 28 deletions content/get-started/installation/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 &mdash; 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_!)
Copy link
Contributor

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!)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Copy link
Contributor

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!)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.


<IconLink
href="/get-started/installation/streamlit-playground"
Copy link
Contributor

Choose a reason for hiding this comment

The 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
Copy link
Contributor

Choose a reason for hiding this comment

The 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"
/>
Loading