Generalize columns

example.jl

@@ -286,13 +286,18 @@ md"""
 """
 
 # ╔═╡ fc5789dd-4b86-4007-9771-a6246235fd73
-TwoColumn(md"Left col", md"Right col")
+Columns(md"Left col", md"Right col")
 
 # ╔═╡ 2881e5de-f6b7-47c0-a794-3e0fa57b712b
-ThreeColumn(md"Left col", md"Middle col", md"Right col")
+Columns(md"Left col", md"Middle col", md"Right col")
+
+# ╔═╡ c22f7f6a-171d-4379-86c9-1781875cf0a4
+md"""
+You can customize the widths of the columns.
+"""
 
 # ╔═╡ 0e1e62a6-3b78-4415-89fe-fa17279fddbf
-TwoColumnWideLeft(md"Left col", md"Right col")
+Columns(md"Left col", md"Right col"; widths=[33, 66])
 
 # ╔═╡ f43beea9-7a7e-4ee6-8ae6-350640c426aa
 TwoColumnWideRight(md"Left col", md"Right col")
@@ -869,6 +874,7 @@ version = "17.4.0+2"
 # ╟─d7593309-3462-4dba-8275-c2eb76b4c3fe
 # ╠═fc5789dd-4b86-4007-9771-a6246235fd73
 # ╠═2881e5de-f6b7-47c0-a794-3e0fa57b712b
+# ╟─c22f7f6a-171d-4379-86c9-1781875cf0a4
 # ╠═0e1e62a6-3b78-4415-89fe-fa17279fddbf
 # ╠═f43beea9-7a7e-4ee6-8ae6-350640c426aa
 # ╠═44d651d3-ce42-4061-b193-da7c31efed8e

src/PlutoTeachingTools.jl

@@ -1,5 +1,6 @@
 module PlutoTeachingTools
 
+using PlutoUI.ExperimentalLayout: Div
 using Markdown: @md_str, MD, Admonition, LaTeX
 using HypertextLiteral: @htl, @htl_str
 using Downloads: download # used in robustlocalresouce.jl
@@ -30,7 +31,7 @@ export display_msg_if_fail
 include("present.jl")
 export present_button
 export Foldable
-export TwoColumn, ThreeColumn
+export Columns, TwoColumn, ThreeColumn
 export TwoColumnWideLeft, TwoColumnWideRight
 export ChooseDisplayMode # combines present_button and WidthOverDocs
 

src/present.jl

@@ -18,70 +18,63 @@ function Base.show(io, mime::MIME"text/html", fld::Foldable)
     return nothing
 end
 
-struct TwoColumn{L,R}
-    left::L
-    right::R
-end
+"""
 
-function Base.show(io, mime::MIME"text/html", tc::TwoColumn)
-    write(io, """<div style="display: flex;"><div style="flex: 49%;">""")
-    show(io, mime, tc.left)
-    write(io, """</div><div style="flex: 2%;">""")
-    write(io, """</div><div style="flex: 49%;">""")
-    show(io, mime, tc.right)
-    write(io, """</div></div>""")
-    return nothing
-end
+    Columns(cols...; widths, gap)
 
-struct TwoColumnWideLeft{L,R}
-    left::L
-    right::R
-end
+Displays (any number of) columns nicely in Pluto. 
 
-function Base.show(io, mime::MIME"text/html", tc::TwoColumnWideLeft)
-    write(io, """<div style="display: flex;"><div style="flex: 65%;">""")
-    show(io, mime, tc.left)
-    write(io, """</div><div style="flex: 2%;">""")
-    write(io, """</div><div style="flex: 33%;">""")
-    show(io, mime, tc.right)
-    write(io, """</div></div>""")
-    return nothing
-end
+* `widths` should sum to 100
+* `gap` in percent
 
-struct TwoColumnWideRight{L,R}
-    left::L
-    right::R
-end
+### Examples
+```julia
+# three columns
+Columns(
+    almost(md"here"),
+    almost(md"there"),
+    md"bla bla bla"
+)
 
-function Base.show(io, mime::MIME"text/html", tc::TwoColumnWideRight)
-    write(io, """<div style="display: flex;"><div style="flex: 33%;">""")
-    show(io, mime, tc.left)
-    write(io, """</div><div style="flex: 2%;">""")
-    write(io, """</div><div style="flex: 65%;">""")
-    show(io, mime, tc.right)
-    write(io, """</div></div>""")
-    return nothing
-end
+# two columns with customization
+Columns(
+    almost(md"here"), almost(md"there"), 
+    widths = [40, 60], gap = 2
+)
+```
+"""
+function Columns(cols...; widths=nothing, gap=2)
+    ncols = length(cols)
+    ngaps = ncols - 1
+    if isnothing(widths)
+        widths = fill(100 / ncols, ncols)
+    end
+    if gap > 0 # adjust widths if gaps are desired
+        widths = widths / sum(widths) * (sum(widths) - gap * ngaps)
+    end
 
-struct ThreeColumn{L,C,R}
-    left::L
-    center::C
-    right::R
-end
+    columns = [
+        Div([cols[i]], style=Dict("flex" => "0 1 $(widths[i])%")) for
+        i in 1:ncols
+    ]
+   the_gap = Div([], style=Dict("flex" => "0 0 $gap%"))
 
-function Base.show(io, mime::MIME"text/html", tc::ThreeColumn)
-    write(io, """<div style="display: flex;"><div style="flex: 32%;">""")
-    show(io, mime, tc.left)
-    write(io, """</div><div style="flex: 2%;">""")
-    write(io, """</div><div style="flex: 32%;">""")
-    show(io, mime, tc.center)
-    write(io, """</div><div style="flex: 2%;">""")
-    write(io, """</div><div style="flex: 32%;">""")
-    show(io, mime, tc.right)
-    write(io, """</div></div>""")
-    return nothing
+    # insert gaps between columns
+    # i.e. [a, b, c] ==> [a, gap, b, gap, c]
+    children = vec([reshape(columns, 1, :); fill(the_gap, 1, ncols)])[1:(end - 1)]
+
+    return Div(children, style=Dict("display" => "flex", "flex-direction" => "row"))
 end
 
+# for backwards compatibility
+TwoColumn(a, b; kwargs...) = Columns(a, b; kwargs...)
+
+ThreeColumn(a, b, c; kwargs...) = Columns(a, b, c; kwargs...)
+
+TwoColumnWideLeft(a, b; kwargs...) = Columns(a, b; widths=[66, 34], kwargs...)
+
+TwoColumnWideRight(a, b; kwargs...) = Columns(a, b; widths=[34, 66], kwargs...)
+
 """ Provides checkbox to toggle full width and present mode. """
 function ChooseDisplayMode(;
     wide::Bool=false, present::Bool=false, lang::AbstractLanguage=default_language[]