Merge pull request #6 from quarto-lab/cr-sidebar-add-more-block-types

Cr sidebar add more block types

_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

_extensions/cr-sidebar/cr-sidebar.lua

@@ -1,59 +1,95 @@
---* 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)},
       {}))
 
     return layout
   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",

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