Skip to content

Commit b3f5931

Browse files
sfc-gh-dmatthewssfc-gh-tteixeira
sfc-gh-dmatthews
and
sfc-gh-tteixeira
authored
Playground and get started (#1240)
* Add Playground to Get started * Use titles and quoted text * Show quotes inline with platform * Rework the limitation notes for Playground * Further highlight playground * Consitent Hello world example for Playground * Go back to previous wording in a few places. * Improve styles and components. * Add different potential designs for the Installation steps. * Use option 7 * Fix dark mode styling * Remove debug line * Fix liks and edits * Prevent RefCard from going under left nav * Combine design 2 and 6 * Review edits * Office hour comments * Improve colors. --------- Co-authored-by: Thiago Teixeira <[email protected]>
1 parent 82fce1d commit b3f5931

File tree

14 files changed

+287
-146
lines changed

14 files changed

+287
-146
lines changed

‎components/blocks/iconLink.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Link from "next/link";
2+
3+
import classNames from "classnames";
4+
5+
import styles from "./iconLink.module.css";
6+
7+
export default ({
8+
children,
9+
label,
10+
href,
11+
icon,
12+
target,
13+
className,
14+
iconClassName,
15+
contentClassName,
16+
cssModuleClassName,
17+
cssModuleIconClassName,
18+
cssModuleContentClassName,
19+
}) => {
20+
href = href ?? "#";
21+
const content = children || label;
22+
23+
return (
24+
<Link
25+
href={href}
26+
className={classNames(
27+
"not-link",
28+
"group",
29+
styles.Link,
30+
className,
31+
cssModuleClassName ? styles[cssModuleClassName] : null,
32+
)}
33+
target={target == "_blank" ? target : "_self"}
34+
>
35+
<i
36+
className={classNames(
37+
styles.Icon,
38+
iconClassName,
39+
cssModuleIconClassName ? styles[cssModuleIconClassName] : null,
40+
)}
41+
>
42+
{icon}
43+
</i>
44+
45+
<span
46+
className={classNames(
47+
styles.Truncate,
48+
contentClassName,
49+
cssModuleContentClassName ? styles[cssModuleContentClassName] : null,
50+
)}
51+
>
52+
{content}
53+
</span>
54+
</Link>
55+
);
56+
};

‎components/blocks/iconLink.module.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.Link {
2+
@apply overflow-hidden border-none
3+
text-base md:text-lg
4+
tracking-tight
5+
font-sans font-normal leading-7
6+
hover:opacity-70
7+
flex items-center gap-2
8+
transition-all;
9+
}
10+
11+
:global(.dark) .Link {
12+
@apply text-gray-40;
13+
}
14+
15+
.Truncate {
16+
@apply truncate;
17+
}
18+
19+
.Icon {
20+
@apply relative;
21+
}
22+
23+
.IconRight {
24+
@apply order-last;
25+
}
26+
27+
.Orange {
28+
@apply text-orange-80;
29+
}
30+
31+
:global(.dark) .Orange {
32+
@apply text-orange-70;
33+
/* @apply text-gray-80; */
34+
}
35+
36+
.Indigo {
37+
@apply text-indigo-70;
38+
}
39+
40+
:global(.dark) .Indigo {
41+
@apply text-indigo-40;
42+
}

‎components/blocks/refCard.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.Container {
2-
@apply relative rounded-md border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-10;
2+
@apply relative rounded-md border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-20;
33
}
44

55
.Container:hover {

‎components/layouts/tileContainer.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.GridContainer {
2-
@apply grid grid-cols-6 gap-4 mb-12;
2+
@apply grid grid-cols-6 gap-4;
33
}
44

55
.ListContainer {
6-
@apply flex flex-col gap-4 mb-12;
6+
@apply flex flex-col gap-4;
77
}

‎components/navigation/arrowLink.js‎

Lines changed: 24 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,32 @@
11
import Link from "next/link";
22

3+
import IconLink from "../blocks/iconLink";
4+
35
import styles from "./arrowLink.module.css";
46

5-
const ArrowLink = ({ children, link, type, content, target }) => {
6-
function ArrowType() {
7-
const href = link || "#";
8-
if (type == "back") {
9-
return (
10-
<Link
11-
href={href}
12-
className={`
13-
not-link
14-
group
15-
${styles.Link}
16-
${styles.BackLink}
17-
`}
18-
target={target == "_blank" ? target : "_self"}
19-
>
20-
<svg
21-
width="14"
22-
height="14"
23-
viewBox="0 0 14 14"
24-
xmlns="http://www.w3.org/2000/svg"
25-
className={`
26-
${styles.Icon}
27-
${styles.BackIcon}
28-
`}
29-
>
30-
<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" />
31-
</svg>
32-
<span className={styles.Text}>Previous: </span>
33-
<span className={styles.Truncate}>{content}</span>
34-
</Link>
35-
);
36-
} else if (type == "next") {
37-
return (
38-
<Link
39-
href={href}
40-
className={`
41-
not-link
42-
group
43-
${styles.Link}
44-
${styles.NextLink}
45-
`}
46-
target={target == "_blank" ? target : "_self"}
47-
>
48-
<span className={styles.Text}>Next: </span>
49-
<span className={styles.Truncate}>{content}</span>
50-
<svg
51-
width="14"
52-
height="14"
53-
viewBox="0 0 14 14"
54-
fill="text-gray-90 dark:text-gray-40"
55-
xmlns="http://www.w3.org/2000/svg"
56-
className={`
57-
${styles.Icon}
58-
${styles.NextIcon}
59-
`}
60-
>
61-
<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" />
62-
</svg>
63-
</Link>
64-
);
65-
}
7+
const ArrowLink = ({ link, type, content, target }) => {
8+
const href = link || "#";
9+
10+
if (type == "back") {
11+
return (
12+
<IconLink href={href} icon="arrow_back" target={target}>
13+
<span className={styles.Text}>Previous: </span>
14+
{content}
15+
</IconLink>
16+
);
17+
} else if (type == "next") {
18+
return (
19+
<IconLink
20+
href={href}
21+
icon="arrow_forward"
22+
target={target}
23+
iconClassName={styles.NextIcon}
24+
>
25+
<span className={styles.Text}>Next: </span>
26+
{content}
27+
</IconLink>
28+
);
6629
}
67-
return <ArrowType />;
6830
};
6931

7032
export default ArrowLink;

‎components/navigation/arrowLink.module.css‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,5 @@
1-
.Container {
2-
@apply flex flex-wrap flex-col md:flex-row md:flex-nowrap items-center justify-between mt-16 mb-8 gap-4;
3-
}
4-
5-
.Link {
6-
@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;
7-
}
8-
9-
.Truncate {
10-
@apply truncate;
11-
}
12-
13-
:global(.dark) .Link {
14-
@apply text-gray-40 !important;
15-
}
16-
17-
.NextLink {
18-
@apply mt-0 sm:mt-0;
19-
}
20-
21-
.Icon {
22-
@apply relative group-hover:scale-105 fill-gray-90;
23-
}
24-
25-
.BackIcon {
26-
@apply mr-2 group-hover:-left-1;
27-
}
28-
291
.NextIcon {
30-
@apply ml-2 group-hover:-left-1;
31-
}
32-
33-
:global(.dark) .Icon {
34-
@apply fill-white !important;
2+
@apply order-last;
353
}
364

375
.Text {

‎components/navigation/arrowLinkContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styles from "./arrowLink.module.css";
1+
import styles from "./arrowLinkContainer.module.css";
22

33
const ArrowLinkContainer = ({ children }) => {
44
return <section className={styles.Container}>{children}</section>;

‎components/navigation/arrowLinkContainer.module.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.Container {
2+
@apply flex flex-wrap flex-col
3+
md:flex-row md:flex-nowrap
4+
items-center justify-between
5+
mt-16 mb-8 gap-4;
6+
}

‎content/get-started/installation/_index.md‎

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,60 +5,88 @@ slug: /get-started/installation
55

66
# Install Streamlit
77

8-
There are multiple ways to set up your development environment and install Streamlit. Read below to
9-
understand these options. Developing locally with Python installed on your own computer is the most
8+
There are multiple ways to set up your development environment and install Streamlit.
9+
Developing locally with Python installed on your own computer is the most
1010
common scenario.
1111

12-
## Summary for experts
12+
<Tip>
13+
14+
Try a Streamlit Playground that runs in your browser &mdash; no installation required.
15+
(Note that this is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
16+
_playground_!)
17+
18+
<IconLink
19+
href="/get-started/installation/streamlit-playground"
20+
icon="arrow_forward"
21+
label="Instructions for the playground"
22+
cssModuleClassName="Indigo"
23+
cssModuleIconClassName="IconRight"
24+
/>
25+
26+
</Tip>
27+
28+
## Summary for experienced Python developers
29+
30+
1. To set up your Python environment and test your installation, execute the following terminal commands:
1331

14-
1. Set up your Python development environment.
15-
2. Run:
1632
```bash
1733
pip install streamlit
18-
```
19-
3. Validate the installation by running our Hello app:
20-
```bash
2134
streamlit hello
2235
```
23-
4. Jump to our [Basic concepts](/get-started/fundamentals/main-concepts).
24-
25-
## Installation steps for the rest of us
2636

27-
<TileContainer layout="list">
37+
1. Jump to our [Basic concepts](/get-started/fundamentals/main-concepts).
2838

29-
<RefCard href="/get-started/installation/command-line" size="half">
39+
## Install Streamlit on your machine
3040

31-
<h5>Option 1: I'm comfortable with the command line</h5>
41+
### Option 1: I like the command line
3242

3343
Install Streamlit on your own machine using tools like `venv` and `pip`.
3444

35-
</RefCard>
36-
37-
<RefCard href="/get-started/installation/anaconda-distribution" size="half">
45+
<IconLink
46+
link="/get-started/installation/command-line"
47+
icon="arrow_forward"
48+
label="Instructions for the command line"
49+
cssModuleClassName="Orange"
50+
cssModuleIconClassName="IconRight"
51+
/>
3852

39-
<h5>Option 2: I prefer a graphical interface</h5>
53+
### Option 2: I prefer a graphical interface
4054

4155
Install Streamlit using the Anaconda Distribution graphical user interface. This is also the best
4256
approach if you're on Windows or don't have Python set up.
4357

44-
</RefCard>
58+
<IconLink
59+
link="/get-started/installation/anaconda-distribution"
60+
icon="arrow_forward"
61+
label="Instructions for Anaconda Distribution"
62+
cssModuleClassName="Orange"
63+
cssModuleIconClassName="IconRight"
64+
/>
4565

46-
<RefCard href="/get-started/installation/community-cloud" size="half">
66+
## Create an app in the cloud
4767

48-
<h5>Option 3: I'd rather use a cloud-based environment</h5>
68+
### Option 1: I want a free cloud environment
4969

5070
Use Streamlit Community Cloud with GitHub Codespaces so you don't have to go through the trouble
5171
of installing Python and setting up an environment.
5272

53-
</RefCard>
73+
<IconLink
74+
link="/get-started/installation/community-cloud"
75+
icon="arrow_forward"
76+
label="Instructions for GitHub Codespaces"
77+
cssModuleClassName="Orange"
78+
cssModuleIconClassName="IconRight"
79+
/>
5480

55-
<RefCard href="/get-started/installation/streamlit-in-snowflake" size="half">
56-
57-
<h5>Option 4: I need something secure, controlled, and in the cloud</h5>
81+
### Option 2: I need something secure, controlled, and in the cloud
5882

5983
Use Streamlit in Snowflake to code your apps in the cloud, right alongside your
6084
data with role-based access controls.
6185

62-
</RefCard>
63-
64-
</TileContainer>
86+
<IconLink
87+
link="/get-started/installation/streamlit-in-snowflake"
88+
icon="arrow_forward"
89+
label="Instructions for Snowflake"
90+
cssModuleClassName="Orange"
91+
cssModuleIconClassName="IconRight"
92+
/>

0 commit comments

Comments
 (0)