Move and update Get started section (#871)

* Move and rename Community Cloud quickstart * Add installation quickstarts * Move installation to use-python-environments * Update venv+pip installation * Update installation summary page. * Clarification * Small edits from proofreading * Typos * Move get-started files * Add red category and tiles * Make Get started it's own category * Update _redirects * Move create-an-app * Test /library redirect * Revert "Test /library redirect" This reverts commit f0746cf. * Update tiles on docs homepage * Update installation TLDR * Update installation page titles * Rename installation md files * Move and rename files * Regroup and expand main concepts * _redirects merge conflict * Update Main concepts category page * Move and rename files * Design tweaks to reduce severity of red * TEMP: Declare prev/next pages to skip dividers Previous and next pages are manually declared to avoid menu divider elements getting picked up as pages. TODO: Update automation to skip dividers. * Link and redirect updates with review edits * Update installation section * Restore original cloud quickstart * Rename and reorder Get started * GitHub Codespaces intro rework * Remove menu dividers in /get-started/fundamentals * Move and rename files * Move get started tutorials into separate category * Simplify Installation category page * Fix Div import/export error * Improve colors, as well as the infra used for setting colors. (#902) * Improve colors, as well as the infra used for setting colors. * Fix circle and kb colors. * Fix bug I introduced in my last commits. (#903) * Improve colors, as well as the infra used for setting colors. * Fix circle and kb colors. * Fix some color bugs I introduced, and clean up all colors names. * Changed some text & layout in "getting started", "cli", and "anaconda". (#905) * Improve colors, as well as the infra used for setting colors. * Fix circle and kb colors. * Fix some color bugs I introduced, and clean up all colors names. * Change get started, cli, and anaconda instructions. Some layout, some text changes. * Capitalization, proper names, and small edit --------- Co-authored-by: Thiago Teixeira <[email protected]>
streamlit · Dec 23, 2023 · 488af57 · 488af57
1 parent c368561
commit 488af57
Show file tree

Hide file tree

Showing 67 changed files with 1,551 additions and 802 deletions.
diff --git a/README.md b/README.md
@@ -209,7 +209,7 @@ We support syntax highlighting for Python, Bash, TOML, SQL, and JSX.
 Use standard Markdown to link to other pages in the docs. E.g. Add an inline link to the "Create an app" page by including the slug defined in the front matter of the "Create an app" `.md` file:
 
 ```markdown
-Learn how to [Create an app](/library/get-started/create-an-app).
+Learn how to [Create an app](/get-started/tutorials/create-an-app).
 ```
 
 **Add images:**
@@ -242,13 +242,13 @@ However, a user has to know the URL to visit the page. The page is therefore _re
 
 How do you make the page you created appear in the Menu? Edit the special markdown file `content/menu.md`. All it has is front matter in YAML.
 
-Suppose you have created an "Installation" page that is available at `docs.streamlit.io/library/get-started/installation`. You want to it to appear in the Menu within the "Streamlit Library" section, nested under the "Get Started" page.
+Suppose you have created an "Quickstart" page that is available at `docs.streamlit.io/get-started/installation/quickstart`. You want to it to appear in the Menu within the "Get started" section, nested under the "Installation" page.
 
 To do so, find the lines that define the `category`, `url` and `visible` properties for "Get Started" in `menu.md` and add three new lines below it, containing:
 
 ```YAML
-- category: Streamlit Library / Get Started / Installation
-  url: /library/get-started/installation
+- category: Get Started / Installation / Quickstart
+  url: /get-started/installation/quickstart
   visible: true
 ```
 

diff --git a/components/blocks/iconHeader.js b/components/blocks/iconHeader.js
@@ -6,34 +6,44 @@ const IconHeader = ({ icon, rotate, title, background, color }) => {
   return (
     <section className={classNames(styles.Container)}>
       <i
-        className={classNames(
-          styles.Icon,
-          background === "violet-70"
-            ? styles.VioletBackground
-            : background === "l-blue-70"
-            ? styles.LightBlueBackground
-            : styles.OrangeBackground
-        )}
+        className={classNames(styles.Icon, BG_CLASS[background])}
         style={{
           transform: `rotate(${rotate}deg)`,
         }}
       >
         {icon}
       </i>
-      <h4
-        className={classNames(
-          styles.Title,
-          background === "violet-70"
-            ? styles.VioletText
-            : background === "l-blue-70"
-            ? styles.LightBlueText
-            : styles.OrangeText
-        )}
-      >
+      <h4 className={classNames(styles.Title, FG_CLASS[background])}>
         {title}
       </h4>
     </section>
   );
 };
 
+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
@@ -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/inlineCallout.js b/components/blocks/inlineCallout.js
@@ -4,18 +4,8 @@ import classNames from "classnames";
 import styles from "./inlineCallout.module.css";
 
 const InlineCallout = ({ children, icon, color, bold, href }) => {
-  const backgroundColor =
-    color === "violet-70"
-      ? styles.LibraryBackground
-      : color === "l-blue-70"
-      ? styles.CloudBackground
-      : styles.KBBackground;
-  const textColor =
-    color === "violet-70"
-      ? styles.LibraryText
-      : color === "l-blue-70"
-      ? styles.CloudText
-      : styles.KBText;
+  const backgroundColor = BG_CLASS[color];
+  const textColor = FG_CLASS[color];
   return (
     <section className={styles.Container}>
       <Link
@@ -43,4 +33,30 @@ const InlineCallout = ({ children, icon, color, bold, href }) => {
   );
 };
 
+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
@@ -29,26 +29,70 @@
 }
 
 /* Colors for each category */
-.LibraryBackground {
-  @apply bg-indigo-70;
+.RedBackground {
+  @apply bg-red-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;
+}
+
+.GreenForeground {
+  @apply text-green-70;
+}
+
+.AcquaForeground {
+  @apply text-acqua-70;
+}
+
+.LightBlueForeground {
+  @apply text-lightBlue-70;
 }
 
-.LibraryText {
-  @apply text-indigo-70 !important;
+.DarkBlueForeground {
+  @apply text-darkBlue-70;
 }
 
-.CloudText {
-  @apply text-lightBlue-70 !important;
+.IndigoForeground {
+  @apply text-indigo-70;
 }
 
-.KBText {
-  @apply text-orange-70 !important;
+:global(.dark) .GrayText {
+  @apply text-gray-20 !important;
 }
diff --git 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/tile.js b/components/blocks/tile.js
@@ -53,14 +53,7 @@ const Tile = ({
     );
   }
 
-  const backgroundColor =
-    background === "orange-70"
-      ? styles.OrangeBackground
-      : background === "violet-70"
-      ? styles.VioletBackground
-      : background === "unset"
-      ? styles.TransparentBackground
-      : styles.BlueBackground;
+  const backgroundColor = BG_CLASS[background];
 
   return (
     <div
@@ -84,4 +77,17 @@ const Tile = ({
   );
 };
 
+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,
+};
+
 export default Tile;
diff --git a/components/blocks/tile.module.css b/components/blocks/tile.module.css
@@ -42,18 +42,39 @@
 }
 
 /* Color modifiers */
+
+.RedBackground {
+  @apply bg-red-70;
+}
+
 .OrangeBackground {
   @apply bg-orange-70;
 }
 
-.VioletBackground {
-  @apply bg-indigo-70;
+.YellowBackground {
+  @apply bg-yellow-70;
 }
 
-.BlueBackground {
+.GreenBackground {
+  @apply bg-green-70;
+}
+
+.AcquaBackground {
+  @apply bg-acqua-70;
+}
+
+.LightBlueBackground {
   @apply bg-lightBlue-70;
 }
 
+.DarkBlueBackground {
+  @apply bg-darkBlue-70;
+}
+
+.IndigoBackground {
+  @apply bg-indigo-70;
+}
+
 .TransparentBackground a {
   @apply px-0;
 }

diff --git 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}