Grid

👀 Reading hidden code

169 μs

👀 Reading hidden code

export grid

106 μs

👀 Reading hidden code

grid([

md"a" md"b"

md"c" md"d"

md"e" md"f"

]; fill_width=false)

533 ms

👀 Reading hidden code

grid([

md"a" md"b"

md"c" md"d"

md"e" md"f"

]; fill_width=false, column_gap=4em)

14.8 ms

0xf0

0x17

0x84

0xf0

0xae

0x3f

0x8a

0xdd

0x82

0x83

0x27

0x04

0xdc

0x2a

0x73

0x48

0x4f

0xb7

0x44

0xca

0xe6

0xce

0x2c

0x09

0xdd

0xbb

0x0b

0xe4

0xca

0x56

0x38

0x54

0x8c

0x3b

0xad

0xb4

0x88

0x5e

0x66

0x29

0xf1

0x51

0xe4

0xf6

0x06

0x1e

0x5d

0xf7

0xd4

0x44

0x88

0x98

0xee

0xd1

0x86

0xf3

0xbf

0x66

0xad

0xf6

0x99

0x2b

0x7b

0x70

0xbf

0x0f

0x9e

0xb0

0xc0

0xac

0xb6

0x7e

0x28

0xa2

0x0f

0x33

0x6d

0xfd

0xd2

0x63

grid(rand(UInt8, 10,8))

👀 Reading hidden code

110 ms

0x72

0xaf

0xfe

0x07

0xb9

0x19

0xfd

0x55

0x82

0x0f

0x0a

0x37

0x95

0x9d

0x9f

0xcc

0x4b

0xf0

0x03

0xcb

0xd7

0x5c

0x6e

0xcc

0xae

0x36

0x78

0xcb

0x08

0x9b

0xe1

0x9c

0xda

0x38

0xf3

0x43

0x7e

0xff

0xaa

0x0d

0xcf

0x17

0x52

0x04

0x6b

0x8f

0x77

0xa6

0xcf

0xa9

0xfc

0x82

0x3e

0x1f

0x9f

0x11

0x10

0xc8

0x4d

0x64

0xa1

0x29

0x2e

0x5c

0x24

0x4b

0x9b

0x28

0x68

0xea

0x89

0x3b

0x8d

0x8f

0x75

0xb8

0xac

0x09

0x99

0x6b

0xa8

0x42

0x4d

0x9a

0xca

0x1e

0x6d

0x76

0x99

0x44

0x81

0x21

0x97

0x94

0x28

0xbd

0x3d

0x53

0xa9

0x15

grid(rand(UInt8, 10,10); fill_width=false)

👀 Reading hidden code

6.3 ms

Div (low-level)

👀 Reading hidden code

176 μs

export Div

👀 Reading hidden code

85.4 μs

"hello"

Div(

"hello";

style=Dict(

"background" => "pink",

"padding" => 20px,

"border-radius" => 1em,

class="coolbeans",

)

👀 Reading hidden code

110 ms

"hello"

"world"

Div(

["hello", "world"];

style=Dict(

"display" => "flex",

"flex-direction" => "column",

"background" => "pink",

"padding" => 20px,

"border-radius" => 1em,

class="coolbeans",

)

👀 Reading hidden code

4.9 ms

Flex

👀 Reading hidden code

174 μs

Array literals

Arrays can also be directly constructed with square braces; the syntax [A, B, C, ...] creates a one dimensional array (i.e., a vector) containing the comma-separated arguments as its elements. The element type (eltype) of the resulting array is automatically determined by the types of the arguments inside the braces. If all the arguments are the same type, then that is its eltype. If they all have a common promotion type then they get converted to that type using convert and that type is the array's eltype. Otherwise, a heterogeneous array that can hold anything — a Vector{Any} — is constructed; this includes the literal [] where no arguments are given.

Arrays can also be directly constructed with square braces; the syntax [A, B, C, ...] creates a one dimensional array (i.e., a vector) containing the comma-separated arguments as its elements.

flex([smid, ssmall, ssmall]; direction="row")

👀 Reading hidden code

23.9 ms

0x84

0xaa

0x4d

flex(rand(UInt8, 3))

👀 Reading hidden code

184 ms

flex (generic function with 1 method)

function flex(args::Iterable; kwargs...)

Div(args;

style=Dict("display" => "flex", ("flex-" * String(k) => string(v) for (k,v) in kwargs)...)

)

end

👀 Reading hidden code

2.2 ms

Union{Base.Generator, AbstractVector}

const Iterable = Union{AbstractVector,Base.Generator}

👀 Reading hidden code

168 μs

# flex(x::Iterable; kwargs...) = flex(x...; kwargs...)

👀 Reading hidden code

10.9 μs

Union{String, Tuple, Dict}

const CSS = Union{Dict,Tuple,String}

👀 Reading hidden code

147 μs

to_css_string (generic function with 1 method)

function to_css_string(d::CSS)

h = @htl("<style>$(d)</style>")

r = repr(MIME"text/html"(), h)

r[8:end-8]

end

👀 Reading hidden code

820 μs

"sdf: 2; as: 12;"

to_css_string(Dict(:as => 12, :sdf=> 2))

👀 Reading hidden code

98.9 ms

"<div>\n\n</div>\n"

repr(MIME"text/html"(), @htl("""

</div>

"""))

👀 Reading hidden code

511 ms

begin

Base.@kwdef struct HTLDiv

children::Any

style::CSS=Dict()

class::Union{String,Nothing}=nothing

end

HTLDiv(x) = HTLDiv(children=x)

HTLDiv(x; style) = HTLDiv(children=x, style=style)

function Base.show(io::IO, m::MIME"text/html", d::HTLDiv)

h = @htl("""

$(d.children)

</div>

""")

show(io, m, h)

end

👀 Reading hidden code

23.7 ms

maybecollect (generic function with 1 method)

👀 Reading hidden code

405 μs

maybecollect (generic function with 2 methods)

👀 Reading hidden code

383 μs

Div (generic function with 1 method)

Div(x::Iterable; style::CSS="", class::Union{Nothing,String}=nothing) =

@static if isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :DivElement)

PlutoRunner.DivElement(;

children=maybecollect(x),

style=to_css_string(style),

class=class,

)

else

HTLDiv(;

children=x,

style=style,

class=class,

)

end

👀 Reading hidden code

2.3 ms

# Div(x::Iterable, style::CSS; kwargs...) = Div(x; style=style, kwargs...)

👀 Reading hidden code

11.8 μs

Div (generic function with 2 methods)

Div(x; kwargs...) = Div([x]; kwargs...)

👀 Reading hidden code

1.3 ms

Triangle

👀 Reading hidden code

194 μs

pascal_row (generic function with 1 method)

function pascal_row(n)

if n == 1

[1]

else

prev = pascal_row(n-1)

[prev; 0] .+ [0; prev]

end

👀 Reading hidden code

693 μs

Int64

pascal_row(3)

👀 Reading hidden code

15.5 μs

pascal (generic function with 1 method)

pascal(n) = pascal_row.(1:n)

👀 Reading hidden code

422 μs

Vector{Int64}

Int64

pascal(5)

👀 Reading hidden code

18.1 μs

let

p = pascal(5)

padder = Div([], style=Dict("flex" => "1 1 auto"))

rows = map(p) do row

items = map(row) do item

Div([item], style=Dict("margin" => "0px 5px"))

end

flex(

[padder, items..., padder]

)

end

flex(rows;

direction="column"

)

end

👀 Reading hidden code

209 ms

<div style='a: 3;'>
asdf
</div>

repr(

MIME"text/html"(),

@htl("""

asdf

</div>

""")

) |> Text

👀 Reading hidden code

41.9 ms

<pluto-display></pluto-display><script id=fpnqjjayozzoambg>const body = /* See the documentation for AbstractPlutoDingetjes.Display.published_to_js */ getPublishedObject("bf319cb2-001e-11f0-1577-998fa00b8d43/5c59692b83d9756c");const mime = "application/vnd.pluto.stacktrace+object";const create_new = this == null || this._mime !== mime;const display = create_new ? currentScript.previousElementSibling : this;display.persist_js_state = true;display.sanitize_html = false;display.body = body;if(create_new) {        display.mime = mime;        display._mime = mime;}return display;</script>

@canfail repr(

MIME"text/html"(),

Div([], style=Dict("a" => 2))

) |> Text

👀 Reading hidden code

1.8 s

"a"

"3"

d = "a" => "3"

👀 Reading hidden code

13.8 μs

using Hyperscript

👀 Reading hidden code

18.3 ms

calc(1px + 2px)

Hyperscript.Calc(:(1px + 2px))

👀 Reading hidden code

3.8 ms

"123px"

123px |> string

👀 Reading hidden code

34.1 ms

grid (generic function with 1 method)

function grid(items::AbstractMatrix;

fill_width::Bool=true,

column_gap::Union{String,Hyperscript.Unit}=1em,

row_gap::Union{String,Hyperscript.Unit}=0em,

)

Div(

Div.(vec(permutedims(items, [2,1])));

style=Dict(

"display" => fill_width ? "grid" : "inline-grid",

"grid-template-columns" => "repeat($(size(items,2)), auto)",

"column-gap" => string(column_gap),

"row-gap" => string(row_gap),

)

end

👀 Reading hidden code

2.8 ms

@htl("""

<style>

svg {

max-width: 100%;

height: auto;

}

</style>

""")

👀 Reading hidden code

254 ms

DimensionMismatch("mismatch in dimension 1 (expected 1 got 3)")
Stacktrace:
  [1] _cs
    @ ./abstractarray.jl:1688 [inlined]
  [2] _cshp
    @ ./abstractarray.jl:1684 [inlined]
  [3] _cat_size_shape (repeats 2 times)
    @ ./abstractarray.jl:1664 [inlined]
  [4] cat_size_shape(::Tuple{Bool, Bool}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Vararg{Any})
    @ Base ./abstractarray.jl:1662
  [5] _cat_t(::Val{2}, ::Type{Any}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Vararg{Any})
    @ Base ./abstractarray.jl:1708
  [6] cat_t(::Type{Any}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Vararg{Any}; dims::Val{2})
    @ Base ./abstractarray.jl:1705
  [7] typed_hcat(::Type{Any}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Vector{Float64})
    @ Base ./abstractarray.jl:1826
  [8] typed_hvcat(::Type{Any}, ::Tuple{Int64, Int64}, ::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, ::Vararg{Any})
    @ Base ./abstractarray.jl:2038
  [9] hvcat
    @ ./abstractarray.jl:2020 [inlined]
 [10] macro expansion
    @ ~/work/disorganised-mess/disorganised-mess/Layout.jl#==#70652040-5bf9-4408-a33c-9716f3af39e8#@#==#081396af-0f8f-4d2a-b087-dfba01bfd7a7:4 [inlined]
 [11] ##function_wrapped_cell#440
    @ ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/evaluation/macro.jl#@#==#081396af-0f8f-4d2a-b087-dfba01bfd7a7:1 [inlined]
 [12] var"##function_wrapped_cell#440"(grid::typeof(Main.workspace#4.grid), sprint::Function, p::Main.workspace#5.Show{MIME{Symbol("image/jpg")}}, catch_backtrace::Function, @canfail::Function, showerror::Function, Text::Type, data::Vector{Float64})
    @ Main ./none:0
 [13] invokelatest(::Any, ::Any, ::Vararg{Any}; kwargs::Base.Pairs{Symbol, Union{}, Tuple{}, NamedTuple{(), Tuple{}}})
    @ Base ./essentials.jl:716
 [14] invokelatest(::Any, ::Any, ::Vararg{Any})
    @ Base ./essentials.jl:714
 [15] compute(m::Module, computer::PlutoRunner.Computer)
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/evaluation/run_expression.jl:85
 [16] (::PlutoRunner.var"#34#37"{Module})()
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/evaluation/run_expression.jl:261
 [17] run_inside_trycatch(m::Module, f::PlutoRunner.var"#34#37"{Module})
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/evaluation/run_expression.jl:125
 [18] (::PlutoRunner.var"#32#35"{Bool, Module, Expr, Base.UUID, Base.UUID, Tuple{Set{Symbol}, Set{Symbol}}, UInt64, UInt64, Expr})()
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/evaluation/run_expression.jl:261
 [19] with_io_to_logs(f::PlutoRunner.var"#32#35"{Bool, Module, Expr, Base.UUID, Base.UUID, Tuple{Set{Symbol}, Set{Symbol}}, UInt64, UInt64, Expr}; enabled::Bool, loglevel::Base.CoreLogging.LogLevel)
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/stdout.jl:64
 [20] (::PlutoRunner.var"#126#127"{Bool, Base.CoreLogging.LogLevel, PlutoRunner.var"#32#35"{Bool, Module, Expr, Base.UUID, Base.UUID, Tuple{Set{Symbol}, Set{Symbol}}, UInt64, UInt64, Expr}})()
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/logging.jl:129
 [21] with_logstate(f::Function, logstate::Any)
    @ Base.CoreLogging ./logging.jl:511
 [22] with_logger
    @ ./logging.jl:623 [inlined]
 [23] #with_logger_and_io_to_logs#125
    @ ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/logging.jl:128 [inlined]
 [24] run_expression(m::Module, expr::Expr, notebook_id::Base.UUID, cell_id::Base.UUID, function_wrapped_info::Union{Nothing, Tuple{Set{Symbol}, Set{Symbol}}}, forced_expr_id::Union{Nothing, UInt64}; user_requested_run::Bool, capture_stdout::Bool)
    @ PlutoRunner ~/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/evaluation/run_expression.jl:236
 [25] top-level scope
    @ ~/.julia/packages/Pluto/6smog/src/evaluation/WorkspaceManager.jl:439
 [26] eval
    @ ./boot.jl:373 [inlined]
 [27] macro expansion
    @ ~/.julia/packages/Malt/YJ2Ml/src/worker.jl:120 [inlined]
 [28] (::var"#1#2"{Sockets.TCPSocket, UInt64, Bool, Base.Pairs{Symbol, Union{}, Tuple{}, NamedTuple{(), Tuple{}}}, Tuple{Module, Expr}, typeof(Core.eval)})()
    @ Main ./task.jl:429

@canfail grid([

p p data

])

👀 Reading hidden code

917 ms

@canfail (macro with 1 method)

👀 Reading hidden code

628 μs

Float64

0.481467

0.526985

0.750783

Float64

0.481467

0.526985

0.750783

[

p p embed_display(data)

] |> grid

👀 Reading hidden code

573 ms

Float64

0.481467

0.526985

0.750783

data = rand(3)

👀 Reading hidden code

16.1 μs

Aside

asdfsadf a sdf asdf

a sdf asd f

asdfasdf

md"""

# Aside

asdfsadf

sdf

asdf

$(aside(ssmall))

sdf

asd

asdfasdf

"""

👀 Reading hidden code

66.1 ms

aside(embed_display(p))

👀 Reading hidden code

28.1 μs

using HypertextLiteral

👀 Reading hidden code

27.6 ms

aside (generic function with 1 method)

function aside(x)

@htl("""

<style>

@media (min-width: calc(700px + 30px + 300px)) {

aside.plutoui-aside-wrapper {

position: absolute;

right: -11px;

width: 0px;

}

aside.plutoui-aside-wrapper > div {

width: 300px;

}

</style>

<div>

$(x)

</div>

</aside>

""")

end

👀 Reading hidden code

514 μs

sbig = md"""

To see the various ways we can pass dimensions to these functions, consider the following examples:

```jldoctest

julia> zeros(Int8, 2, 3)

2×3 Matrix{Int8}:

0 0 0

julia> zeros(Int8, (2, 3))

2×3 Matrix{Int8}:

0 0 0

julia> zeros((2, 3))

2×3 Matrix{Float64}:

0.0 0.0 0.0

```

Here, `(2, 3)` is a [`Tuple`](@ref) and the first argument — the element type — is optional, defaulting to `Float64`.

## [Array literals](@id man-array-literals)

Arrays can also be directly constructed with square braces; the syntax `[A, B, C, ...]`

creates a one dimensional array (i.e., a vector) containing the comma-separated arguments as

its elements. The element type ([`eltype`](@ref)) of the resulting array is automatically

determined by the types of the arguments inside the braces. If all the arguments are the

same type, then that is its `eltype`. If they all have a common

[promotion type](@ref conversion-and-promotion) then they get converted to that type using

[`convert`](@ref) and that type is the array's `eltype`. Otherwise, a heterogeneous array

that can hold anything — a `Vector{Any}` — is constructed; this includes the literal `[]`

where no arguments are given.

""";

👀 Reading hidden code

5.9 ms

export em, px, pt, vh, vw, vmin, vmax, pc, fr

👀 Reading hidden code

116 μs

Array literals

👀 Reading hidden code

557 μs

Arrays can also be directly constructed with square braces; the syntax [A, B, C, ...] creates a one dimensional array (i.e., a vector) containing the comma-separated arguments as its elements.

👀 Reading hidden code

289 μs

Show

👀 Reading hidden code

2.9 ms

👀 Reading hidden code

135 ms

In the cloud (experimental)

On your computer

Frontmatter

Preview

Grid

Div (low-level)

Flex

Array literals

Triangle

Aside

Array literals