diff --git a/_extensions/close-read/custom.scss b/_extensions/close-read/custom.scss index 7a328fd..fa4563c 100644 --- a/_extensions/close-read/custom.scss +++ b/_extensions/close-read/custom.scss @@ -39,8 +39,8 @@ .body_col_stack { display: grid; - [data-cr-id], - .cr-id { + [data-cr], + .cr-sticky { grid-area: 1 / 1; margin: auto; opacity: 0.5; // lowering opacity for debug purposes diff --git a/_extensions/cr-sidebar/cr-sidebar.lua b/_extensions/cr-sidebar/cr-sidebar.lua index ad45d5e..635bda3 100644 --- a/_extensions/cr-sidebar/cr-sidebar.lua +++ b/_extensions/cr-sidebar/cr-sidebar.lua @@ -1,37 +1,40 @@ ---* for every Div - --* if its a cr-sidebar div - --* for all blocks - --* if it has a cr-id - --* save it as body - --* else - --* save into sidebar table of blocks - --* end for - --* create new div with column and column page class - --* - with three divs, one for each column (with middle col) - --* return new div quarto.log.output("===== Sidebar Log =====") function make_sidebar_layout(div) + if div.classes:includes("cr-sidebar") then - body_content = {} - sidebar_content = {} - for k, block in pairs(div.content) do - if has_cr_prefix(block) then - table.insert(body_content, block) - else - table.insert(sidebar_content, block) + sticky_blocks = div.content:walk { + traverse = 'topdown', + Block = function(block) + if is_sticky(block) then + block = shift_class_to_block(block) + return block, false -- if a sticky element is found, don't process child blocks + else + return {} + end end - end + } - sidebar_col = pandoc.Div(sidebar_content, + non_sticky_blocks = div.content:walk { + traverse = 'topdown', + Block = function(block) + if not is_sticky(block) then + return block + else + return {} + end + end + } + + narrative_col = pandoc.Div(non_sticky_blocks, pandoc.Attr("", {"column", "sidebar_col"}, {width = "30%"})) - body_col_stack = pandoc.Div(body_content, + sticky_col_stack = pandoc.Div(sticky_blocks, pandoc.Attr("", {"body_col_stack"})) - body_col = pandoc.Div(body_col_stack, + sticky_col = pandoc.Div(sticky_col_stack, pandoc.Attr("", {"column", "body_col"}, {width = "55%"})) - layout = pandoc.Div({sidebar_col, body_col}, + layout = pandoc.Div({narrative_col, sticky_col}, pandoc.Attr("", {"columns", "column-page", table.unpack(div.classes)}, {})) @@ -39,21 +42,54 @@ function make_sidebar_layout(div) end end --- this function is fragile --- should be extended to find cr prefix nested deeper into the block -function has_cr_prefix(block) - answer = false +function shift_class_to_block(block) + + if pandoc.utils.type(block.content) == "Inlines" then + for _, inline in pairs(block.content) do + if inline.attr ~= nil then + if inline.classes:includes("cr-sticky") then + -- wraps block in Div with class cr-sticky (and converts Para to Plain) + block = pandoc.Div(block.content, pandoc.Attr("", {"cr-sticky"}, {})) + end + end + end + end + + return block +end + + +function is_sticky(block) + + sticky_block_class = false + sticky_block_attribute = false + sticky_inline_class = false + + if block.attr ~= nil then + sticky_block_class = block.classes:includes("cr-sticky") + end + if block.attributes ~= nil then for k,v in pairs(block.attributes) do - if string.sub(k, 1, 3) == "cr-" then - answer = true + if k == "cr" and v == "sticky" then + sticky_block_attribute = true break end end end - return answer + + if pandoc.utils.type(block.content) == "Inlines" then + for _, inline in pairs(block.content) do + if inline.attr ~= nil then + sticky_inline_class = inline.classes:includes("cr-sticky") + end + end + end + + return sticky_block_class or sticky_block_attribute or sticky_inline_class end + -- add scrollama.js, the intersection-observer polyfill and our scroller init quarto.doc.add_html_dependency({ name = "intersection-observer-polyfill", diff --git a/blue-desktop.png b/blue-desktop.png new file mode 100644 index 0000000..fb9851a Binary files /dev/null and b/blue-desktop.png differ diff --git a/pink-desktop.png b/pink-desktop.png new file mode 100644 index 0000000..85087d2 Binary files /dev/null and b/pink-desktop.png differ diff --git a/sidebar-cr-multiple-block-types.qmd b/sidebar-cr-multiple-block-types.qmd new file mode 100644 index 0000000..5ad9bb2 --- /dev/null +++ b/sidebar-cr-multiple-block-types.qmd @@ -0,0 +1,101 @@ +--- +format: + html: + theme: + - _extensions/close-read/custom.scss + page-layout: full +execute: + echo: false +filters: + - _extensions/cr-sidebar/cr-sidebar.lua +--- + +:::{.cr-sidebar} + +# Test other sticky block types + +First paragraph. + +::: {} +This is a para nested in a div. +::: + +This is an image with the sticky tag on the div. + +:::{.cr-sticky} +![](pink-desktop.png) +::: + +This is an image with the sticky tag on Image itself + +![](blue-desktop.png){.cr-sticky} + +This is a scatterplot. + +```{r} +#| echo: false +#| cr: sticky + +plot(mtcars$mpg, mtcars$dist) +``` + +This is a histogram. + +```{r} +#| echo: true +#| cr: sticky + +hist(mtcars$mpg) +``` + +This is a list (a block element). + +:::{.cr-sticky} +1. Apple +2. Banana +::: + +This is display math. + +::: {.cr-sticky} + +$$ +\begin{align} +\hat{y} &= \beta_0 + \beta_1 x + \epsilon \\ +&= 3.4 + 1.2 x +\end{align} +$$ + +::: + +This is a Para featuring a poem. + +::: {.cr-sticky} +One hen, two ducks ... +::: + +This is a mermaid diagram + +```{mermaid} +%%| cr: sticky +flowchart LR + A[Hard edge] --> B(Round edge) + B --> C{Decision} + C --> D[Result one] + C --> E[Result two] +``` + +This is a graphviz diagram + +```{dot} +//| cr: sticky +graph G { + layout=neato + run -- intr; + intr -- runbl; +} +``` + +::: + +# The End \ No newline at end of file