Update built-in notebooks to use the setup cell (#1076)

* Teach about the setup cell in the elixir_and_livebook notebook

* Update built-in notebooks to use the setup cell

lib/livebook/notebook/explore/elixir_and_livebook.livemd

@@ -47,11 +47,12 @@ Sometimes you need a dependency or two and notebooks are no exception to this.
 In Livebook, you can use [`Mix.install/2`](https://hexdocs.pm/mix/Mix.html#install/2)
 to bring dependencies into your notebook! This approach is especially useful when
 sharing notebooks because everyone will be able to get the same dependencies.
-Let's try this out:
 
-**Note:** compiling dependencies may use a reasonable amount of memory. If you are
-hosting Livebook, make sure you have enough memory allocated to the Livebook
-instance, otherwise the command below will fail.
+Installing dependencies is a one-off setup operation and for those we use a special
+setup cell. Copy the code below, then scroll to the very top of the notebook,
+double-click on "Notebook dependencies and setup", add and run the code.
+
+<!-- livebook:{"force_markdown":true} -->
 
 ```elixir
 Mix.install([
@@ -59,9 +60,17 @@ Mix.install([
 ])
 ```
 
-[Kino](https://github.com/elixir-nx/kino) is a library that
-allows you to control parts of Livebook directly from the Elixir
-code. Let's use it to print a data table:
+**Note:** compiling dependencies may use a reasonable amount of memory. If you are
+hosting Livebook, make sure you have enough memory allocated to the Livebook
+instance, otherwise the command below will fail.
+
+<!-- livebook:{"break_markdown":true} -->
+
+### Kino
+
+The package we installed is [Kino](https://github.com/elixir-nx/kino) - a library
+that allows you to control parts of Livebook directly from the Elixir code. Let's
+use it to print a data table:
 
 ```elixir
 data = [
@@ -82,11 +91,6 @@ them, consolidates protocols, and more. Check
 [its documentation](https://hexdocs.pm/mix/Mix.html#install/2)
 to learn more.
 
-Finally, keep in mind that `Mix.install/2` can be called only once
-per runtime, so if you need to modify the dependencies, you should
-go to the notebook runtime configuration and **reconnect** the current
-runtime. Let's learn how to do that.
-
 ## Runtimes
 
 Livebook has a concept of **runtime**, which in practice is an Elixir node responsible

lib/livebook/notebook/explore/intro_to_nx.livemd

@@ -1,5 +1,11 @@
 # Introduction to Nx
 
+```elixir
+Mix.install([
+  {:nx, "~> 0.1.0-dev", github: "elixir-nx/nx", sparse: "nx", override: true}
+])
+```
+
 ## Numerical Elixir
 
 Elixir's primary numerical datatypes and structures are not optimized
@@ -71,20 +77,8 @@ type. To interact with them, Nx relies on tensor-aware operators rather
 than `Enum.map/2` and `Enum.reduce/3`.
 
 In this section, we'll look at some of the various tools for
-creating and interacting with tensors.
-
-To get started, we'll first need to include the Nx dependency.
-In Livebook, we can simply use Mix install. At the time of this writing,
-there's no Hex package for Nx, so we'll use a git
-dependency, like this:
-
-```elixir
-Mix.install([
-  {:nx, "~> 0.1.0-dev", github: "elixir-nx/nx", sparse: "nx", override: true}
-])
-```
-
-The IEx helpers will assist our exploration of the core tensor concepts.
+creating and interacting with tensors. The IEx helpers will assist our
+exploration of the core tensor concepts.
 
 ```elixir
 import IEx.Helpers

lib/livebook/notebook/explore/intro_to_vega_lite.livemd

@@ -1,6 +1,13 @@
 # Plotting with VegaLite
 
-## Setup
+```elixir
+Mix.install([
+  {:vega_lite, "~> 0.1.2"},
+  {:kino, "~> 0.5.0"}
+])
+```
+
+## Introduction
 
 We need two libraries for plotting in Livebook:
 
@@ -10,14 +17,7 @@ We need two libraries for plotting in Livebook:
 * The [`kino`](https://github.com/elixir-nx/kino) package
   renders our specifications
 
-Let's install them:
-
-```elixir
-Mix.install([
-  {:vega_lite, "~> 0.1.2"},
-  {:kino, "~> 0.5.0"}
-])
-```
+Let's install them by running the setup cell above.
 
 When building graphics we make extensive use of the functions from `VegaLite`,
 so it's useful to alias the module as something shorter.

lib/livebook/notebook/explore/kino/chat_app.livemd

@@ -1,17 +1,17 @@
 # Building a chat app with Kino.Control
 
-## Setup
-
-In this notebook, we will build a chat application using
-[`kino`](https://github.com/livebook-dev/kino). Let's
-install it and get started:
-
 ```elixir
 Mix.install([
   {:kino, "~> 0.5.0"}
 ])
 ```
 
+## Introduction
+
+In this notebook, we will build a chat application using
+[`kino`](https://github.com/livebook-dev/kino). First, let's
+have a look at the building blocks that we will need!
+
 ## Kino.Control
 
 In our [introduction to Kino](/explore/notebooks/intro-to-kino),

lib/livebook/notebook/explore/kino/custom_kinos.livemd

@@ -1,6 +1,12 @@
 # Custom Kinos with Elixir and JavaScript
 
-## Setup
+```elixir
+Mix.install([
+  {:kino, "~> 0.5.0"}
+])
+```
+
+## Introduction
 
 Starting from version v0.5, Livebook allows developers to implement
 their own kinos. This allows developers to bring their own ideas to
@@ -9,14 +15,6 @@ life and extend Livebook in unexpected ways.
 There are two types of custom kinos: static, via `Kino.JS`, and dynamic,
 via `Kino.JS.Live`. We will learn to implement both in this notebook.
 
-First, let's install `kino`:
-
-```elixir
-Mix.install([
-  {:kino, "~> 0.5.0"}
-])
-```
-
 ## HTML rendering with Kino.JS
 
 The "hello world" of custom kinos is one that embeds and

lib/livebook/notebook/explore/kino/intro_to_kino.livemd

@@ -1,19 +1,20 @@
 # Introduction to Kino
 
-## Setup
-
-In this notebook we will explore the possibilities that
-[`kino`](https://github.com/elixir-nx/kino) brings
-into your notebooks. Kino can be thought of as Livebook's
-friend that instructs it how to render certain widgets
-and interact with them. Let's install it:
-
 ```elixir
 Mix.install([
   {:kino, "~> 0.5.0"}
 ])
 ```
 
+## Introduction
+
+In this notebook we will explore the possibilities that
+[`kino`](https://github.com/elixir-nx/kino) brings
+into your notebooks. Kino can be thought of as Livebook's
+friend that instructs it how to render certain widgets
+and interact with them. You can see `kino` listed as a
+dependency above, let's run the setup cell and get started!
+
 <!-- livebook:{"branch_parent_index":0} -->
 
 ## Kino.Input

lib/livebook/notebook/explore/kino/pong.livemd

@@ -1,6 +1,12 @@
 # Multiplayer pong game from scratch
 
-## Setup
+```elixir
+Mix.install([
+  {:kino, "~> 0.5.0"}
+])
+```
+
+## Introduction
 
 In this notebook, we are going to learn more about
 [`Kino.Control`](https://hexdocs.pm/kino/Kino.Control.html)
@@ -9,14 +15,6 @@ Specifically, we will be building the the [Pong](https://en.wikipedia.org/wiki/P
 game directly in Livebook. Not only that, we will actually
 make it multiplayer!
 
-Let's get started and install `kino`:
-
-```elixir
-Mix.install([
-  {:kino, "~> 0.5.0"}
-])
-```
-
 ## Painting the scene
 
 The first step in our game is to define our scene. The

lib/livebook/notebook/explore/kino/vm_introspection.livemd

@@ -1,5 +1,14 @@
 # Runtime introspection with VegaLite
 
+```elixir
+Mix.install([
+  {:vega_lite, "~> 0.1.2"},
+  {:kino, "~> 0.5.0"}
+])
+
+alias VegaLite, as: Vl
+```
+
 ## Introduction
 
 In this notebook, we will use `Kino` and `VegaLite`
@@ -7,23 +16,9 @@ to introspect and plot how our system behaves over
 time. If you are not familiar with VegaLite, [read
 its introductory notebook](/explore/notebooks/intro-to-vega-lite).
 
-## Setup
-
-Let's add `:vega_lite` and `:kino` as dependencies:
-
-```elixir
-Mix.install([
-  {:vega_lite, "~> 0.1.2"},
-  {:kino, "~> 0.5.0"}
-])
-```
-
-Let's also define a convenience shortcut for the
-VegaLite module:
-
-```elixir
-alias VegaLite, as: Vl
-```
+You can see both dependencies listed in the setup cell above.
+We also define a convenience shortcut for the `VegaLite` module,
+let's run the setup and we are ready to go!
 
 ## Connecting to a remote node