Move and update Get started section

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
 ```
 

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;

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;
 }

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;

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;
 }

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}

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;

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;
 }

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}