diff --git a/src/basic/Basic mathematics.jl b/src/basic/Basic mathematics.jl
index 43c9f27..c11053a 100644
--- a/src/basic/Basic mathematics.jl
+++ b/src/basic/Basic mathematics.jl
@@ -1,5 +1,5 @@
### A Pluto.jl notebook ###
-# v0.19.18
+# v0.19.27
#> [frontmatter]
#> author_url = "https://github.com/JuliaPluto"
diff --git a/src/basic/Basic.jl b/src/basic/Basic.jl
index e75030c..ef28529 100644
--- a/src/basic/Basic.jl
+++ b/src/basic/Basic.jl
@@ -1,5 +1,5 @@
### A Pluto.jl notebook ###
-# v0.19.18
+# v0.19.27
#> [frontmatter]
#> author_url = "https://github.com/JuliaPluto"
diff --git a/src/basic/Getting started.jl b/src/basic/Getting started.jl
index 7a127e4..c04d98e 100644
--- a/src/basic/Getting started.jl
+++ b/src/basic/Getting started.jl
@@ -1,5 +1,5 @@
### A Pluto.jl notebook ###
-# v0.19.18
+# v0.19.27
#> [frontmatter]
#> author_url = "https://github.com/JuliaPluto"
@@ -70,17 +70,11 @@ neighbors = [cat, friend, "Smerfetka", "Latte"]
# ╔═╡ 19ff8d36-9547-11ea-0e08-e5cdd8338673
md"Now, if you're like my grandma, you're feeding the entire neighborhood by yourself. Let's see how many cans of cat food you need to prepare."
-# ╔═╡ a4a60262-9547-11ea-3a81-5bf7f9ee5d16
-consumption = confusing_function("🥫", neighbors)
-
# ╔═╡ 270ac49e-9549-11ea-3ffd-71ddaee9f134
md"But what does `confusing_function` do? If you ever need help, click on 📚 **Live docs** in the lower right, and then place your cursor on the code you need help with.
If you don't see it, then your screen is too small! Maybe you need to zoom out?"
-# ╔═╡ e11e1660-9549-11ea-22f6-8bb53dc045fe
-md"Now we know to prepare $(length(consumption)) cans. Let's stock up!"
-
# ╔═╡ 745a4584-954a-11ea-028e-59011f268ec6
cans_in_stock = "🥫🥫🥫🥫"
@@ -94,9 +88,6 @@ end
# ╔═╡ eac62fea-954e-11ea-2768-39ce6f4059ab
# cans_in_stock = "🥫🥫🥫🥫🥫"
-# ╔═╡ f27f90c2-954f-11ea-3f93-17acb2ce4280
-md"We have $(length(cans_in_stock)) cans of cat food, and our cats need $(length(consumption)). Try adding another cat to the neighborhood to see what changes!"
-
# ╔═╡ 6c8e2108-9550-11ea-014d-235770ed4771
md"## Saving cats and notebooks
Alright, we have a neighborhood full of well-fed cats. But oh no, here comes..."
@@ -163,6 +154,15 @@ Repeats the `text` as many times as there are elements in `array`.
"""
confusing_function(text::String, array::Array) = repeat(text, length(array))
+# ╔═╡ a4a60262-9547-11ea-3a81-5bf7f9ee5d16
+consumption = confusing_function("🥫", neighbors)
+
+# ╔═╡ e11e1660-9549-11ea-22f6-8bb53dc045fe
+md"Now we know to prepare $(length(consumption)) cans. Let's stock up!"
+
+# ╔═╡ f27f90c2-954f-11ea-3f93-17acb2ce4280
+md"We have $(length(cans_in_stock)) cans of cat food, and our cats need $(length(consumption)). Try adding another cat to the neighborhood to see what changes!"
+
# ╔═╡ 1deaaf36-9554-11ea-3dae-85851f73dbc6
md"**Have fun using Pluto!**
diff --git a/src/basic/Interactivity.jl b/src/basic/Interactivity.jl
index 599221c..5ffe19b 100644
--- a/src/basic/Interactivity.jl
+++ b/src/basic/Interactivity.jl
@@ -1,5 +1,5 @@
### A Pluto.jl notebook ###
-# v0.19.18
+# v0.19.27
#> [frontmatter]
#> author_url = "https://github.com/JuliaPluto"
diff --git a/src/basic/PlutoUI.jl.jl b/src/basic/PlutoUI.jl.jl
index 65ffbc9..167acef 100644
--- a/src/basic/PlutoUI.jl.jl
+++ b/src/basic/PlutoUI.jl.jl
@@ -1,5 +1,5 @@
### A Pluto.jl notebook ###
-# v0.19.18
+# v0.19.27
#> [frontmatter]
#> author_url = "https://github.com/JuliaPluto"
@@ -23,6 +23,9 @@ macro bind(def, element)
end
end
+# ╔═╡ 071d9ca5-9b42-4583-ad96-a48f93453a0e
+using PlutoUI
+
# ╔═╡ bc532cd2-c75b-11ea-313f-8b5e771c9227
md"""# PlutoUI.jl
@@ -38,15 +41,9 @@ md"""
Simply import the `PlutoUI` package, and Pluto's built-in package manager takes care of the rest!
"""
-# ╔═╡ 071d9ca5-9b42-4583-ad96-a48f93453a0e
-using PlutoUI
-
# ╔═╡ deadce6b-4abc-42b0-9997-07be8637ee94
TableOfContents()
-# ╔═╡ fb6142f6-c765-11ea-29fd-7ff4e823c02b
-space
-
# ╔═╡ fddb794c-c75c-11ea-1f55-eb9c178424cd
md"""
# Basics
@@ -112,9 +109,6 @@ A `NumberField` can be used just like a `Slider`, it just looks different:"
# ╔═╡ 314cb85a-c761-11ea-1cba-b73f84a52be8
@bind x_different NumberField(0:100, default=20)
-# ╔═╡ 3c68b25c-c761-11ea-226a-4f46579a6732
-Resource(dog_url, :width => x * x_different)
-
# ╔═╡ 104b55ce-cc4f-11ea-1273-092a1717e399
@@ -305,9 +299,6 @@ md"The file picker is useful if you want to show off your notebook on a dataset
The caveat is that large files might take a long time to get processed: everything needs to pass through the browser. If you are using large datasets, a better option is to use `Select` to let the reader pick a filename. You can then read the file using `Base.read(filename, type)`"
-# ╔═╡ ebfc61b0-c765-11ea-1d66-cbf1dcdb8bdb
-space
-
# ╔═╡ 3e5dd7d2-c760-11ea-1dca-6d8720b3558d
md"# Extras"
@@ -355,9 +346,6 @@ DownloadButton(poem, "poem.txt")
# ╔═╡ 067cbcde-cc4c-11ea-3eed-972dc6d7bb3b
DownloadButton([0x01, 0x02, 0x03], "secret_data.bin")
-# ╔═╡ f69a5d5e-c765-11ea-3fa0-230c6c619730
-space
-
# ╔═╡ 7da30d97-b28a-4eb9-a2ef-fad599b549d1
md"""
# High-level inputs
@@ -401,15 +389,6 @@ import PlutoUI: combine
# ╔═╡ a4837897-caae-447a-8db9-7775e7a4d0c8
-# ╔═╡ f5c421cc-dbdb-459a-9bb4-d648507a87d2
-@bind speeds wind_speed_input(["North", "East", "South", "West"])
-
-# ╔═╡ a4eac824-ba87-473a-b39a-783c4de3f933
-speeds
-
-# ╔═╡ f9052ed8-84cc-4cca-abb2-9363aafc6040
-speeds.North
-
# ╔═╡ d278189e-6a5b-428a-8c81-ce3d206b042c
function wind_speed_input(directions::Vector)
@@ -430,6 +409,15 @@ function wind_speed_input(directions::Vector)
end
end
+# ╔═╡ f5c421cc-dbdb-459a-9bb4-d648507a87d2
+@bind speeds wind_speed_input(["North", "East", "South", "West"])
+
+# ╔═╡ a4eac824-ba87-473a-b39a-783c4de3f933
+speeds
+
+# ╔═╡ f9052ed8-84cc-4cca-abb2-9363aafc6040
+speeds.North
+
# ╔═╡ 4ca9c749-08ee-467f-af2c-9b2f13199d72
md"""
Use the Live Docs to learn more about `combine` and to see additional examples.
@@ -437,9 +425,6 @@ Use the Live Docs to learn more about `combine` and to see additional examples.
> 🙋 `combine` is very useful in combination with [HypertextLiteral.jl](https://github.com/MechanicalRabbit/HypertextLiteral.jl), which you can learn using our JavaScript sample notebook.
"""
-# ╔═╡ 0b66c781-ecf2-445e-b2aa-82cb13371e46
-space
-
# ╔═╡ ad8e9b30-c75d-11ea-1fd0-0b53592135bf
md"""# Loading resources
@@ -474,6 +459,9 @@ md"Here is a _dog_: "
# ╔═╡ 6a7e7e54-c75e-11ea-2ea7-ed3da37e9e96
dog_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Welsh_Springer_Spaniel.jpg/640px-Welsh_Springer_Spaniel.jpg"
+# ╔═╡ 3c68b25c-c761-11ea-226a-4f46579a6732
+Resource(dog_url, :width => x * x_different)
+
# ╔═╡ 9ac7921c-c75e-11ea-30f5-c35e6ee370cb
t_rex_url = "https://upload.wikimedia.org/wikipedia/commons/transcoded/6/62/Meow.ogg/Meow.ogg.mp3"
@@ -578,9 +566,6 @@ Addressing _local files_ is fragile: if someone else opens the notebook, or if y
Putting images online might be a hassle, but once it works, it will work everywhere! The stateless nature of URLs means that the images will work regardless of how the notebook file is accessed, while keeping a minimal file format."
-# ╔═╡ 35523932-cc4f-11ea-0908-2d51c57176b7
-space
-
# ╔═╡ a245dddc-cc59-11ea-3e1d-1763673ff706
md"# PlutoUI without Pluto
@@ -607,22 +592,37 @@ and you run it without Pluto, then this statement simply assigns `x = 10`.
# ╔═╡ 0da7bc30-cc64-11ea-1dde-2b7f2dd76036
md"`Pluto` and `PlutoUI` work independently of each other! In fact, _you_ could write a package with fun input elements, or add `@bind`able values to existing packages."
-# ╔═╡ d163f434-cc5a-11ea-19e9-9319ba994efa
-space
-
# ╔═╡ 512fe760-cc4c-11ea-1c5b-2b32da035aad
md"# Appendix"
# ╔═╡ 55bcdbf8-cc4c-11ea-1549-87c076a59ff4
space = html"
- It is easy to learn HTML and CSS because they are not 'programming languages' like Julia and JavaScript, they are markup languages: there are no loops, functions or arrays, you only declare how your document is structured (HTML) and what that structure looks like on a 2D color display (CSS).
-
-
- As an example, this is what this cell looks like, written in HTML and CSS:
-
-
-
-
-
- ```
- """, "Show with syntax highlighting")
-
# ╔═╡ ea39c63f-7466-4015-a66c-08bd9c716343
md"""
> My personal favourite resource for learning HTML and CSS is the [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS).
@@ -235,6 +197,13 @@ md"""
Hello $(who)!
""")
+# ╔═╡ e7d3db79-8253-4cbd-9832-5afb7dff0abf
+cool_features = [
+ md"Interpolate any **HTML-showable object**, such as plots and images, or another `@htl` literal."
+ md"Interpolated lists are expanded _(like in this cell!)_."
+ "Easy syntax for CSS"
+ ]
+
# ╔═╡ bf592202-a9a4-4e9b-8433-fed55e3aa3bc
@htl("""
-```
-""", "Show with syntax highlighting")
-
# ╔═╡ 9346d8e2-9ba0-4475-a21f-11bdd018bc60
@bind num_clicks ClickCounter()
@@ -664,6 +548,16 @@ md"""
(Though using `HypertextLiteral.jl` would make more sense for this purpose.)
"""
+# ╔═╡ fc8984c8-4668-418a-b258-a1718809470c
+
+
+# ╔═╡ 846354c8-ba3b-4be7-926c-d3c9cc9add5f
+films = [
+ (title="Frances Ha", director="Noah Baumbach", year=2012),
+ (title="Portrait de la jeune fille en feu", director="Céline Sciamma", year=2019),
+ (title="De noorderlingen", director="Alex van Warmerdam", year=1992),
+];
+
# ╔═╡ c857bb4b-4cf4-426e-b340-592cf7700434
@htl("""
""")
-# ╔═╡ d121e085-c69b-490f-b315-c11a9abd57a6
-details(md"""
- ```htmlmixed
-
- ```
- """, "Show with syntax highlighting")
-
-# ╔═╡ fc8984c8-4668-418a-b258-a1718809470c
-
-
-# ╔═╡ 846354c8-ba3b-4be7-926c-d3c9cc9add5f
-films = [
- (title="Frances Ha", director="Noah Baumbach", year=2012),
- (title="Portrait de la jeune fille en feu", director="Céline Sciamma", year=2019),
- (title="De noorderlingen", director="Alex van Warmerdam", year=1992),
-];
-
# ╔═╡ a33c7d7a-8071-448e-abd6-4e38b5444a3a
md"""
## Stateful output with `this`
@@ -765,24 +623,6 @@ let
"""
end
-# ╔═╡ d4bdc4fe-2af8-402f-950f-2afaf77c62de
-details(md"""
- ```htmlmixed
-
- ```
- """, "Show with syntax highlighting")
-
# ╔═╡ e77cfefc-429d-49db-8135-f4604f6a9f0b
md"""
### Example: d3.js transitions
@@ -837,36 +677,6 @@ return output
""")
-# ╔═╡ e910982c-8508-4729-a75d-8b5b847918b6
-details(md"""
-```htmlmixed
-
-
-
-```
-""", "Show with syntax highlighting")
-
# ╔═╡ 781adedc-2da7-4394-b323-e508d614afae
md"""
### Example: Preact with persistent state
@@ -880,6 +690,11 @@ Modify `x`, add and remove elements, and notice that preact maintains its state.
# ╔═╡ 85483b28-341e-4ed6-bb1e-66c33613725e
x = ["hello pluton!", 232000,2,2,12 ,12,2,21,1,2, 120000]
+# ╔═╡ 3266f9e6-42ad-4103-8db3-b87d2c315290
+state = Dict(
+ :x => x
+ )
+
# ╔═╡ 9e37c18c-3ebb-443a-9663-bb4064391d6e
@htl("""
+ \"\"\")
+end
+```
+
+In this example, the `const d` is populated from a hook into Pluto's data transfer. For large amounts of typed vector data (e.g. `Vector{UInt8}` or `Vector{Float64}`), this is *much* more efficient than interpolating the data directly with HypertextLiteral using `$(d)`, which would use a JSON-like string serialization.
+
+**Note:** this API is still *experimental*, and might change in the future.
+"""
+
+# ╔═╡ da7091f5-8ba2-498b-aa8d-bbf3b4505b81
+md"""
+# Appendix
+"""
+
+# ╔═╡ 64cbf19c-a4e3-4cdb-b4ec-1fbe24be55ad
+details(x, summary="Show more") = @htl("""
+
+ $(summary)
+ $(x)
+
+ """)
+
+# ╔═╡ 93abe0dc-f041-475f-9ef7-d8ee4408414b
+details(md"""
+ ```htmlmixed
+
+
+
+ Learning HTML and CSS
+
+
+ It is easy to learn HTML and CSS because they are not 'programming languages' like Julia and JavaScript, they are markup languages: there are no loops, functions or arrays, you only declare how your document is structured (HTML) and what that structure looks like on a 2D color display (CSS).
+
+
+ As an example, this is what this cell looks like, written in HTML and CSS:
+