Add table of contents in right sidebar

R/bulma_document.R

@@ -39,6 +39,8 @@ bulma_document <- function(
   fig_retina = 2,
   keep_md = FALSE,
   dev = "png",
+  toc = FALSE,
+  toc_depth = 3,
   pandoc_args = NULL,
   extra_dependencies = NULL
 ) {
@@ -72,6 +74,8 @@ bulma_document <- function(
     # browser()
   }
 
+  pandoc_args <- c(pandoc_args, rmarkdown::pandoc_toc_args(toc, toc_depth))
+
   rmarkdown::output_format(
     knitr = rmarkdown::knitr_options_html(
       fig_width, fig_height, fig_retina, keep_md, dev

inst/bulma/bulma.html

@@ -46,6 +46,11 @@ pre, code {
 .tabs-content li.is-active {
   display: block;
 }
+#toc-aside {
+  position: sticky;
+  top: 2em;
+  position: -webkit-sticky;
+}
 </style>
 $for(css)$
   <link rel="stylesheet" href="$css$" />
@@ -90,35 +95,46 @@ $endif$ <!-- bulma.hero_links -->
 
 <section class="section">
 <div class="container">
-<div class="content" id="content-body">
-$if(author)$
-  <div class="level">
-  $for(author)$
-    <div class="level-item has-text-centered">
-      <div>
-      $if(author.name)$
-        <p class="title is-5">
-          $if(author.url)$
-            <a href="$author.url$">$author.name$</a>
-          $else$
-            $author.name$
-          $endif$
-        </p>
-      $endif$
-      $if(author.extra)$
-        <p class="subtitle is-6">
-          $for(author.extra)$$author.extra$$sep$<br>$endfor$
-        </p>
-      $endif$
+  <div class="columns">
+    <div class="column $if(toc)$is-three-quarters-desktop is-full-tablet is-full-mobile$else$is-full$endif$">
+      <div class="content" id="content-body">
+        $if(author)$
+        <section class="section" id="authors">
+          <div class="content">
+            <div class="level">
+            $for(author)$
+              <div class="level-item has-text-centered">
+                <div>
+                $if(author.name)$
+                  <p class="title is-5">
+                    $if(author.url)$
+                      <a href="$author.url$">$author.name$</a>
+                    $else$
+                      $author.name$
+                    $endif$
+                  </p>
+                $endif$
+                $if(author.extra)$
+                  <p class="subtitle is-6">
+                    $for(author.extra)$$author.extra$$sep$<br>$endfor$
+                  </p>
+                $endif$
+                </div>
+              </div>
+            $endfor$
+            </div>
+          </div>
+        </section>
+        $endif$
+        $body$
       </div>
     </div>
-  $endfor$
+    <div class="column">
+      <aside class="menu" id="toc-aside">
+        $if(toc)$$table-of-contents$$endif$
+      </aside>
+    </div>
   </div>
-$endif$
-
-$body$
-
-</div>
 </div>
 </section>
 
@@ -134,6 +150,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
     tables[i].classList.add(...tableClasses);
   }
 })
+
+// Add appropriate TOC classes
+document.addEventListener("DOMContentLoaded", function(event) {
+  var toc = document.getElementById('toc-aside').getElementsByTagName("ul");
+  for (var i = 0; i < toc.length; i++) {
+    toc[i].classList.add("menu-list");
+  }
+})
 </script>
 $if(mathjax-url)$
 <!-- dynamically load mathjax for compatibility with self-contained -->

man/bulma_document.Rd

@@ -5,8 +5,8 @@
 \title{Bulma Document Renderer}
 \usage{
 bulma_document(..., css = NULL, fig_width = 10, fig_height = 7,
-  fig_retina = 2, keep_md = FALSE, dev = "png", pandoc_args = NULL,
-  extra_dependencies = NULL)
+  fig_retina = 2, keep_md = FALSE, dev = "png", toc = FALSE,
+  toc_depth = 3, pandoc_args = NULL, extra_dependencies = NULL)
 }
 \arguments{
 \item{...}{Arguments passed on to \code{rmarkdown::html_document_base}

tests/manual/example/bulma-test.Rmd

@@ -26,6 +26,8 @@ bulma:
 output: 
   bulma::bulma_document: 
     keep_md: TRUE
+    toc: yes
+    toc_depth: 2
     # css: custom.css
   html_document_base:
     pandoc_args: ["--template", "/Users/4468739/work/bulmaRmd/inst/bulma/bulma-min.html" ]
@@ -54,6 +56,19 @@ knitr::opts_chunk$set(echo = TRUE)
 </div>
 -->
 
+
+# Introduction
+
+A bit of an _introduction_ here. We no longer need to start an article by writing this:
+
+```latex
+\documentclass{article}
+\begin{document}
+\end{document}
+```
+
+# Bulma Tests
+
 ::::::{.columns}
 :::::{.column .is-half .is-offset-one-quarter}
 ::::{.message}
@@ -71,14 +86,6 @@ Things could change dramatically.
 
 `r bulma::bulma_level("Tweets" = 3456, Following = 123, Followers = "456K", Likes = 789, style = "header")`
 
-A bit of an _introduction_ here. We no longer need to start an article by writing this:
-
-```latex
-\documentclass{article}
-\begin{document}
-\end{document}
-```
-
 # Start with a cool section
 
 You can use traditional **Markdown** syntax, such as [links](http://yihui.name/knitr) and `code`. Here is a quote:
@@ -123,7 +130,14 @@ plot(fit)
 
 Our regression equation is $Y=`r b[1]`+`r b[2]`x$, and the model is:
 
-$$ Y = \beta_0 + \beta_1 x + \epsilon$$
+$$Y = \beta_0 + \beta_1 x + \epsilon$$
+
+## Some math still has issues
+
+This is the equation for the PDF of the normal distribution. 
+It currently isn't rendering correctly.
+
+$$\frac{1}{\sigma\sqrt{2\pi}}\,e^{ -\frac{(x-\mu)^2}{2\sigma^2} }$$
 
 # Pandoc extensions {.tabs}
 

tests/manual/layout/level/bulma_layout_level.Rmd

@@ -24,7 +24,9 @@ bulma:
     - name: Home
       url: https://gerkelab.com
       icon: '`r bulma::fa_icon("home")`'
-output: bulma::bulma_document
+output: 
+  bulma::bulma_document:
+    toc: yes
 editor_options: 
   chunk_output_type: console
 ---
@@ -34,13 +36,6 @@ knitr::opts_chunk$set(echo = TRUE)
 library(bulma)
 ```
 
-<a class="button is-primary">
-<span class="icon is-small">
-`r bulma::fa_icon("r-project", as_html = TRUE)`
-</span>
-<span>Souce Code</span>
-</a>
-
 ## Level
 
 ### Basic