Upgrade all deps, and fix all code that breaks from it (#906)

* Upgrade libraries. * Upgrade all libraries and make things work again. * Remove Netlify cache plugin (does nothing) * Pin NextJS plugin version * Upgrade node * Remove node version from package.json * Fix broken MD * Fix another MD file. These get broken by Prettier. Need two **. * Remove old text that somehow got uncommented.
streamlit · Dec 27, 2023 · 7198a4e · 7198a4e
1 parent 488af57
commit 7198a4e
Show file tree

Hide file tree

Showing 37 changed files with 19,588 additions and 27,391 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx pretty-quick --staged
+npx lint-staged
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.14.0
+v20.8.1
diff --git a/content/get-started/fundamentals/index.md b/content/get-started/fundamentals/index.md
@@ -8,15 +8,22 @@ slug: /get-started/fundamentals
 Are you new to Streamlit and want the grand tour? If so, you're in the right place!
 
 <InlineCalloutContainer>
-  <InlineCallout color="orange-70" icon="description" bold="Main concepts." href="/get-started/fundamentals/main-concepts">
-    Learn the fundamental concepts of Streamlit. How is a Streamlit app structured? How does it run? How does it magically get your data on a webpage?
-  </InlineCallout>
-
-  <InlineCallout color="orange-70" icon="description" bold="Advanced concepts." href="/get-started/fundamentals/advanced-concepts">
-    After you understand the rerun logic of Streamlit, learn how to make efficient and dynamic apps with caching and Session State. Get introduced to handling database connections.
-  </InlineCallout>
-
-  <InlineCallout color="orange-70" icon="description" bold="Additional features." href="/get-started/fundamentals/additional-features">
-    Learn about Streamlit's additional features. You don't need to know these concepts for your first app, but check it out to know what's available.
-  </InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="description"
+        bold="Main concepts."
+        href="/get-started/fundamentals/main-concepts"
+    >Learn the fundamental concepts of Streamlit. How is a Streamlit app structured? How does it run? How does it magically get your data on a webpage?</InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="description"
+        bold="Advanced concepts."
+        href="/get-started/fundamentals/advanced-concepts"
+    >After you understand the rerun logic of Streamlit, learn how to make efficient and dynamic apps with caching and Session State. Get introduced to handling database connections.</InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="description"
+        bold="Additional features."
+        href="/get-started/fundamentals/additional-features"
+    >Learn about Streamlit's additional features. You don't need to know these concepts for your first app, but check it out to know what's available.</InlineCallout>
 </InlineCalloutContainer>
diff --git a/content/get-started/fundamentals/tutorials/index.md b/content/get-started/fundamentals/tutorials/index.md
@@ -8,10 +8,16 @@ slug: /get-started/tutorials
 If you've just read through our [Main concepts](/get-started/fundamentals/main-concepts) and want to get your hands on Streamlit. Check out these tutorials. Make sure you have [installed Streamlit](/get-started/installation) so you can execute the code yourself.
 
 <InlineCalloutContainer>
-  <InlineCallout color="orange-70" icon="description" bold="Create an app" href="/get-started/tutorials/create-an-app">
-    uses the concepts learned in Fundamentals along with caching to walk through making your first app.
-  </InlineCallout>
-  <InlineCallout color="orange-70" icon="auto_stories" bold="Create a multipage app" href="/get-started/tutorials/create-a-multipage-app">
-    walks through the easy steps to add pages to your app.
-  </InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="description"
+        bold="Create an app"
+        href="/get-started/tutorials/create-an-app"
+    >uses the concepts learned in Fundamentals along with caching to walk through making your first app.</InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="auto_stories"
+        bold="Create a multipage app"
+        href="/get-started/tutorials/create-a-multipage-app"
+    >walks through the easy steps to add pages to your app.</InlineCallout>
 </InlineCalloutContainer>
diff --git a/content/get-started/index.md b/content/get-started/index.md
@@ -9,28 +9,40 @@ This Get Started guide explains how Streamlit works, how to install Streamlit on
 operating system, and how to create your first Streamlit app!
 
 <InlineCalloutContainer>
-  <InlineCallout color="orange-70" icon="downloading" bold="Installation" href="/get-started/installation">
-    helps you set up your development environment. Walk through installing Streamlit on Windows, macOS, or Linux. Alternatively, code right in your browser with GitHub Codespaces.
-  </InlineCallout>
-  <InlineCallout color="orange-70" icon="description" bold="Fundamentals" href="/get-started/fundamentals">
-    introduces you to Streamlit's data model and development flow. You'll learn what makes Streamlit the most powerful way to build data apps, including the ability to display and style data, draw charts and maps, add interactive widgets, customize app layouts, cache computation, and define themes.
-  </InlineCallout>
-  <InlineCallout color="orange-70" icon="auto_awesome" bold="Tutorials" href="/get-started/tutorials">
-    walks you through creating apps using core features to fetch and cache data, draw charts, plot information on a map, and use interactive widgets to filter results.
-  </InlineCallout>
-  <InlineCallout color="orange-70" icon="rocket_launch" bold="Use GitHub Codespaces" href="/get-started/installation/community-cloud">
-  if you want to skip past local installation and code right in your browser. This guide uses Streamlit Community Cloud to help you automatically configure a codespace.
-  </InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="downloading"
+        bold="Installation"
+        href="/get-started/installation"
+    >helps you set up your development environment. Walk through installing Streamlit on Windows, macOS, or Linux. Alternatively, code right in your browser with GitHub Codespaces.</InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="description"
+        bold="Fundamentals"
+        href="/get-started/fundamentals"
+    >introduces you to Streamlit's data model and development flow. You'll learn what makes Streamlit the most powerful way to build data apps, including the ability to display and style data, draw charts and maps, add interactive widgets, customize app layouts, cache computation, and define themes.</InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="auto_awesome"
+        bold="Tutorials"
+        href="/get-started/tutorials"
+    >walks you through creating apps using core features to fetch and cache data, draw charts, plot information on a map, and use interactive widgets to filter results.</InlineCallout>
+    <InlineCallout
+        color="orange-70"
+        icon="rocket_launch"
+        bold="Use GitHub Codespaces"
+        href="/get-started/installation/community-cloud"
+    >if you want to skip past local installation and code right in your browser. This guide uses Streamlit Community Cloud to help you automatically configure a codespace.</InlineCallout>
 </InlineCalloutContainer>
 
 <NoteSplit
 background="gray-20"
 title="30 Days of Streamlit 🎈"
 copy="30 Days of Streamlit 🎈 is a free, self-paced 30 day challenge that teaches you how to build and deploy data apps with Streamlit. Complete the daily challenges, share your solutions with us on Twitter and LinkedIn, and stop by the forum with any questions!"
 button={{
-    text: "Start the challenge",
-    link: "https://30days.streamlit.app/",
-    target: "_blank",
-  }}
+        text: "Start the challenge",
+        link: "https://30days.streamlit.app/",
+        target: "_blank",
+      }}
 image="/30days.png"
 />
diff --git a/content/kb/deployments/organize-apps-workspaces.md b/content/kb/deployments/organize-apps-workspaces.md
@@ -11,13 +11,13 @@ Streamlit Community Cloud is organized into workspaces, which automatically grou
 
 ## Personal workspace
 
-If an app's GitHub repository is owned by you, the app will appear in your personal workspace, named "<YourGitHubHandle\>".
+If an app's GitHub repository is owned by you, the app will appear in your personal workspace, named "\<YourGitHubHandle>".
 
 ![App workspaces 2](/images/streamlit-community-cloud/app-workspaces-2.png)
 
 ## Organization workspace
 
-If an app's GitHub repository is owned by **an organization** (such as your company), the app will appear in a separate workspace, named "<GitHubOrganizationHandle\>".
+If an app's GitHub repository is owned by **an organization** (such as your company), the app will appear in a separate workspace, named "\<GitHubOrganizationHandle>".
 
 ![App workspaces 3](/images/streamlit-community-cloud/app-workspaces-3.jpg)
 

diff --git a/content/kb/deployments/resource-limits.md b/content/kb/deployments/resource-limits.md
@@ -7,8 +7,6 @@ slug: /knowledge-base/deploy/resource-limits
 
 Sorry! It means you've hit the [resource limits](/streamlit-community-cloud/manage-your-app#app-resources-and-limits) of your [Streamlit Community Cloud](https://streamlit.io/cloud) account.
 
-<!-- One way to avoid this is to [upgrade your plan](https://streamlit.io/cloud) to one with higher resource limits.  -->
-
 There are a few things you can change in your app to make it less resource-hungry:
 
 - Reboot your app (temporary fix)
@@ -17,12 +15,12 @@ There are a few things you can change in your app to make it less resource-hungr
 - Move big datasets to a database
 - Profile your app's memory usage
 
-Check out our [blog post](https://blog.streamlit.io/common-app-problems-resource-limits/) on [“Common app problems: Resource limits"](https://blog.streamlit.io/common-app-problems-resource-limits/) for more in-depth tips prevent your app from hitting the [resource limits](/streamlit-community-cloud/manage-your-app#app-resources-and-limits) of the Streamlit Community Cloud.
+Check out our [blog post](https://blog.streamlit.io/common-app-problems-resource-limits/) on ["Common app problems: Resource limits"](https://blog.streamlit.io/common-app-problems-resource-limits/) for more in-depth tips prevent your app from hitting the [resource limits](/streamlit-community-cloud/manage-your-app#app-resources-and-limits) of the Streamlit Community Cloud.
 
 Related forum posts:
 
-- <https://discuss.streamlit.io/t/common-app-problems-resource-limits/16969>
-- <https://blog.streamlit.io/common-app-problems-resource-limits/>
+- [https://discuss.streamlit.io/t/common-app-problems-resource-limits/16969](https://discuss.streamlit.io/t/common-app-problems-resource-limits/16969)
+- [https://blog.streamlit.io/common-app-problems-resource-limits/](https://blog.streamlit.io/common-app-problems-resource-limits/)
 
 We offer free resource increases only to support nonprofits or educational organizations on a case-by-case basis. If you are a nonprofit or educational organization, please complete [this form](https://docs.google.com/forms/d/e/1FAIpQLSfzPNqrvH0HeaJnl0dtBgVV-ILqavzSmAEk84vDnMFIbvkGVA/viewform) and we will review your submission as soon as possible.
 

diff --git a/content/kb/index.md b/content/kb/index.md
@@ -13,39 +13,29 @@ The knowledge base is a self-serve library of tips, step-by-step tutorials, and
     icon="local_library"
     bold="Tutorials."
     href="/knowledge-base/tutorials"
-  >
-    Our tutorials include step-by-step examples of building different types of apps in Streamlit.
-  </InlineCallout>
+  >Our tutorials include step-by-step examples of building different types of apps in Streamlit.</InlineCallout>
   <InlineCallout
     color="darkBlue-70"
     icon="auto_awesome"
     bold="Using Streamlit."
     href="/knowledge-base/using-streamlit"
-  >
-    Here are some frequently asked questions about using Streamlit.
-  </InlineCallout>
+  >Here are some frequently asked questions about using Streamlit.</InlineCallout>
   <InlineCallout
     color="darkBlue-70"
     icon="build"
     bold="Streamlit Components."
     href="/knowledge-base/components"
-  >
-    Here are some questions we've received about Streamlit Components.
-  </InlineCallout>
+  >Here are some questions we've received about Streamlit Components.</InlineCallout>
   <InlineCallout
     color="darkBlue-70"
     icon="downloading"
     bold="Installing dependencies."
     href="/knowledge-base/dependencies"
-  >
-    If you run into problems installing dependencies for your Streamlit apps, we've got you covered.
-  </InlineCallout>
+  >If you run into problems installing dependencies for your Streamlit apps, we've got you covered.</InlineCallout>
   <InlineCallout
     color="darkBlue-70"
     icon="report"
     bold="Deployment issues."
     href="/knowledge-base/deploy"
-  >
-    Have questions about deploying Streamlit apps to the cloud? This section covers deployment-related issues.
-  </InlineCallout>
+  >Have questions about deploying Streamlit apps to the cloud? This section covers deployment-related issues.</InlineCallout>
 </InlineCalloutContainer>
diff --git a/content/kb/tutorials/chat.md b/content/kb/tutorials/chat.md
@@ -9,8 +9,6 @@ slug: /knowledge-base/tutorials/build-conversational-apps
 
 The advent of large language models like GPT has revolutionized the ease of developing chat-based applications. Streamlit offers several [Chat elements](/library/api-reference/chat), enabling you to build Graphical User Interfaces (GUIs) for conversational agents or chatbots. Leveraging [session state](/library/advanced-features/session-state) along with these elements allows you to construct anything from a basic chatbot to a more advanced, ChatGPT-like experience using purely Python code.
 
-<!-- In this tutorial, we'll first walk through Streamlit's chat elements, `st.chat_message` and `st.chat_input`, and then show you how to [build a simple chatbot GUI](#build-a-simple-chatbot-gui-with-streaming). We'll also discover how to integrate session state with these elements to develop a [sophisticated chatbot](#build-a-chatgpt-like-app), capable of remembering conversational context, in less than 50 lines of code. -->
-
 In this tutorial, we'll start by walking through Streamlit's chat elements, `st.chat_message` and `st.chat_input`. Then we'll proceed to construct three distinct applications, each showcasing an increasing level of complexity and functionality:
 
 1. First, we'll [Build a bot that mirrors your input](#build-a-bot-that-mirrors-your-input) to get a feel for the chat elements and how they work. We'll also introduce [session state](/library/advanced-features/session-state) and how it can be used to store the chat history. This section will serve as a foundation for the rest of the tutorial.

diff --git a/content/kb/using-streamlit/how-download-file-streamlit.md b/content/kb/using-streamlit/how-download-file-streamlit.md
@@ -49,6 +49,6 @@ if st.download_button(...):
 
 Additional resources:
 
-- <https://blog.streamlit.io/0-88-0-release-notes/>
-- <https://streamlit-release-demos-0-88streamlit-app-0-88-v8ram3.streamlit.app/>
-- <https://docs.streamlit.io/library/api-reference/widgets/st.download_button>
+- [https://blog.streamlit.io/0-88-0-release-notes/](https://blog.streamlit.io/0-88-0-release-notes/)
+- [https://streamlit-release-demos-0-88streamlit-app-0-88-v8ram3.streamlit.app/](https://streamlit-release-demos-0-88streamlit-app-0-88-v8ram3.streamlit.app/)
+- [https://docs.streamlit.io/library/api-reference/widgets/st.download_button](https://docs.streamlit.io/library/api-reference/widgets/st.download_button)
diff --git a/content/kb/using-streamlit/how-download-pandas-dataframe-csv.md b/content/kb/using-streamlit/how-download-pandas-dataframe-csv.md
@@ -33,6 +33,6 @@ st.download_button(
 
 Additional resources:
 
-- <https://blog.streamlit.io/0-88-0-release-notes/>
-- <https://streamlit-release-demos-0-88streamlit-app-0-88-v8ram3.streamlit.app/>
-- <https://docs.streamlit.io/library/api-reference/widgets/st.download_button>
+- [https://blog.streamlit.io/0-88-0-release-notes/](https://blog.streamlit.io/0-88-0-release-notes/)
+- [https://streamlit-release-demos-0-88streamlit-app-0-88-v8ram3.streamlit.app/](https://streamlit-release-demos-0-88streamlit-app-0-88-v8ram3.streamlit.app/)
+- [https://docs.streamlit.io/library/api-reference/widgets/st.download_button](https://docs.streamlit.io/library/api-reference/widgets/st.download_button)
diff --git a/content/library/advanced-features/app-testing/index.md b/content/library/advanced-features/app-testing/index.md
@@ -10,16 +10,28 @@ Streamlit app testing enables developers to build and run automated tests. Bring
 The provided class, AppTest, simulates a running app and provides methods to set up, manipulate, and inspect the app contents via API instead of a browser UI. AppTest provides similar functionality to browser automation tools like Selenium or Playwright, but with less overhead to write and execute tests. Use our testing framework with a tool like [pytest](https://docs.pytest.org/) to execute or automate your tests. A typical pattern is to build a suite of tests for an app to ensure consistent functionality as the app evolves. The tests run locally and/or in a CI environment like GitHub Actions.
 
 <InlineCalloutContainer>
-  <InlineCallout color="indigo-70" icon="science" bold="Get started" href="/library/advanced-features/app-testing/get-started">
-    introduces you to the app testing framework and how to execute tests using <code>pytest</code>. Learn how to initialize and run simulated apps, including how to retrieve, manipulate, and inspect app elements.
-  </InlineCallout>
-  <InlineCallout color="indigo-70" icon="password" bold="Beyond the basics" href="/library/advanced-features/app-testing/beyond-the-basics">
-    explains how to work with secrets and Session State within app tests, including how to test multipage apps.
-  </InlineCallout>
-  <InlineCallout color="indigo-70" icon="quiz" bold="Example" href="/library/advanced-features/app-testing/examples">
-    puts together the concepts explained above. Check out an app with multiple tests in place.
-  </InlineCallout>
-  <InlineCallout color="indigo-70" icon="saved_search" bold="Cheat sheet" href="/library/advanced-features/app-testing/cheat-sheet">
-    is a compact reference summarizing the available syntax.
-  </InlineCallout>
+    <InlineCallout
+        color="indigo-70"
+        icon="science"
+        bold="Get started"
+        href="/library/advanced-features/app-testing/get-started"
+    >introduces you to the app testing framework and how to execute tests using <code>pytest</code>. Learn how to initialize and run simulated apps, including how to retrieve, manipulate, and inspect app elements.</InlineCallout>
+    <InlineCallout
+        color="indigo-70"
+        icon="password"
+        bold="Beyond the basics"
+        href="/library/advanced-features/app-testing/beyond-the-basics"
+    >explains how to work with secrets and Session State within app tests, including how to test multipage apps.</InlineCallout>
+    <InlineCallout
+        color="indigo-70"
+        icon="quiz"
+        bold="Example"
+        href="/library/advanced-features/app-testing/examples"
+    >puts together the concepts explained above. Check out an app with multiple tests in place.</InlineCallout>
+    <InlineCallout
+        color="indigo-70"
+        icon="saved_search"
+        bold="Cheat sheet"
+        href="/library/advanced-features/app-testing/cheat-sheet"
+    >is a compact reference summarizing the available syntax.</InlineCallout>
 </InlineCalloutContainer>
diff --git a/content/library/advanced-features/st.cache.md b/content/library/advanced-features/st.cache.md
@@ -275,15 +275,19 @@ st.write("Mutated result:", res)
 
 When you run this app for the first time, you should see three messages on the screen:
 
-- Cache miss (...)
-- Result: {output: 42}
-- Mutated result: {output: "result was manually mutated"}
+```
+Cache miss: expensive_computation(...) ran
+Result: {output: 42}
+Mutated result: {output: "result was manually mutated"}
+```
 
 No surprises here. But now notice what happens when you rerun you app (i.e. press **R**):
 
-- Result: {output: "result was manually mutated"}
-- Mutated result: {output: "result was manually mutated"}
-- Cached object mutated. (...)
+```
+Result: {output: "result was manually mutated"}
+Mutated result: {output: "result was manually mutated"}
+Cached object mutated. (...)
+```
 
 So what's up?
 

diff --git a/content/library/advanced-features/static-file-serving.md b/content/library/advanced-features/static-file-serving.md
@@ -51,7 +51,7 @@ with st.echo():
 
 Additional resources:
 
-- <https://docs.streamlit.io/library/advanced-features/configuration>
-- <https://static-file-serving.streamlit.app/>
+- [https://docs.streamlit.io/library/advanced-features/configuration](https://docs.streamlit.io/library/advanced-features/configuration)
+- [https://static-file-serving.streamlit.app/](https://static-file-serving.streamlit.app/)
 
 <Cloud src="https://static-file-serving.streamlit.app/?embedded=true" height="1000" />
diff --git a/content/library/api/api-reference.md b/content/library/api/api-reference.md
@@ -1700,8 +1700,6 @@ rain(emoji="🎈", font_size=54,
 <TileContainer>
 <RefCard href="/library/api-reference/control-flow/st.form">
 
-<!--<Image pure alt="screenshot" src="/images/api/form.jpg" />-->
-
 #### Forms
 
 Create a form that batches elements together with a “Submit" button.
@@ -1869,8 +1867,6 @@ st.set_page_config(
 </RefCard>
 <RefCard href="/library/api-reference/utilities/st.echo">
 
-<!--<Image pure alt="screenshot" src="/images/api/echo.jpg" />-->
-
 #### Echo
 
 Display some code on the app, then execute it. Useful for tutorials.