Grid

👀 Reading hidden code

169 μs

👀 Reading hidden code

export grid

92.7 μs

👀 Reading hidden code

grid([

md"a" md"b"

md"c" md"d"

md"e" md"f"

]; fill_width=false)

517 ms

👀 Reading hidden code

grid([

md"a" md"b"

md"c" md"d"

md"e" md"f"

]; fill_width=false, column_gap=4em)

16.0 ms

0x23

0x70

0x5d

0x3c

0x71

0xe4

0xc7

0xc0

0xfb

0x72

0x3a

0x0d

0x25

0xe0

0x6e

0x26

0x8d

0xae

0xad

0xcb

0xb8

0x35

0x71

0x35

0xc3

0xc5

0x69

0x6d

0x41

0x98

0x5d

0xc5

0x91

0xd7

0x61

0x5b

0xbc

0xfc

0x0e

0x57

0x30

0x0f

0x25

0x22

0xef

0x63

0xcf

0xce

0x98

0x2e

0xfa

0x67

0x5d

0x9e

0x5e

0x20

0xc7

0xc6

0x68

0xfe

0x67

0xa1

0x3b

0x59

0x11

0x51

0xfe

0x0c

0x37

0xaa

0x9e

0xcb

0x7d

0x9a

0xa7

0x76

0x98

0xe8

0x64

0x12

👀 Reading hidden code

grid(rand(UInt8, 10,8))

115 ms

0x84

0x61

0xaa

0x6d

0x8c

0x16

0x7b

0xf7

0xd2

0x35

0x56

0x91

0x6a

0x65

0x32

0x98

0xf0

0x7b

0x5b

0x40

0xf6

0x0d

0xd2

0xad

0xbd

0x80

0xcd

0x37

0x7a

0xc8

0x99

0x7d

0x0f

0x3e

0x26

0xb4

0x60

0x57

0xee

0x28

0x21

0xda

0x9d

0x14

0x92

0xf9

0x9a

0x7f

0x82

0x4b

0x9f

0xf4

0x62

0xd6

0xa9

0xf4

0x80

0x9e

0xc5

0xf5

0xe9

0xf0

0x81

0xf0

0xcb

0x8a

0x03

0x30

0xd8

0xa9

0xa6

0x14

0x9e

0xd6

0x43

0xf4

0xa9

0xb3

0xe4

0x5d

0x6c

0x90

0xed

0xec

0x1a

0x78

0x03

0x55

0x45

0x52

0x4d

0xfa

0x51

0x02

0xda

0x47

0x42

0x3e

0xe8

0x64

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

👀 Reading hidden code

6.6 ms

Div (low-level)

👀 Reading hidden code

168 μs

export Div

👀 Reading hidden code

86.0 μs

"hello"

Div(

"hello";

style=Dict(

"background" => "pink",

"padding" => 20px,

"border-radius" => 1em,

class="coolbeans",

)

👀 Reading hidden code

105 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.6 ms

Flex

👀 Reading hidden code

166 μ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

24.3 ms

0x8c

0x80

0x2d

flex(rand(UInt8, 3))

👀 Reading hidden code

171 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.0 ms

Union{Base.Generator, AbstractVector}

const Iterable = Union{AbstractVector,Base.Generator}

👀 Reading hidden code

170 μs

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

👀 Reading hidden code

10.3 μs

Union{String, Tuple, Dict}

const CSS = Union{Dict,Tuple,String}

👀 Reading hidden code

134 μ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

815 μs

"sdf: 2; as: 12;"

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

👀 Reading hidden code

86.3 ms

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

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

</div>

"""))

👀 Reading hidden code

13.8 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

15.5 ms

maybecollect (generic function with 1 method)

👀 Reading hidden code

362 μs

maybecollect (generic function with 2 methods)

👀 Reading hidden code

380 μ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.1 ms

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

👀 Reading hidden code

10.5 μs

Div (generic function with 2 methods)

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

👀 Reading hidden code

1.2 ms

Triangle

👀 Reading hidden code

202 μ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

663 μs

Int64

pascal_row(3)

👀 Reading hidden code

17.0 μs

pascal (generic function with 1 method)

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

👀 Reading hidden code

419 μs

Vector{Int64}

Int64

pascal(5)

👀 Reading hidden code

14.2 μ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

207 ms

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

repr(

MIME"text/html"(),

@htl("""

asdf

</div>

""")

) |> Text

👀 Reading hidden code

559 ms

<pluto-display></pluto-display><script id=emeosxombsmhfczw>const body = /* See the documentation for AbstractPlutoDingetjes.Display.published_to_js */ getPublishedObject("f49015fe-4aac-11f0-2c9a-676a48207ebb/148bb50e54991225");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.7 s

"a"

"3"

d = "a" => "3"

👀 Reading hidden code

16.3 μs

using Hyperscript

👀 Reading hidden code

15.5 ms

calc(1px + 2px)

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

👀 Reading hidden code

3.8 ms

"123px"

123px |> string

👀 Reading hidden code

34.3 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.7 ms

@htl("""

<style>

svg {

max-width: 100%;

height: auto;

}

</style>

""")

👀 Reading hidden code

250 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

856 ms

@canfail (macro with 1 method)

👀 Reading hidden code

615 μs

Float64

0.379528

0.907301

0.475218

Float64

0.379528

0.907301

0.475218

[

p p embed_display(data)

] |> grid

👀 Reading hidden code

544 ms

Float64

0.379528

0.907301

0.475218

data = rand(3)

👀 Reading hidden code

16.3 μ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.2 ms

aside(embed_display(p))

👀 Reading hidden code

25.8 μ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

503 μ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

6.2 ms

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

👀 Reading hidden code

110 μs

Array literals

👀 Reading hidden code

543 μ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

269 μs

Show

👀 Reading hidden code

2.7 ms

👀 Reading hidden code

159 ms

In the cloud (experimental)

On your computer

Frontmatter

Preview

Grid

Div (low-level)

Flex

Array literals

Triangle

Aside

Array literals