Adding flexdashboard widgets to blogdown sites
Disclaimer: This is a work in progress, since I haven’t figured out how to fully customize the layout to my liking. But hopefully this offers a starting point for other Hugo Academic users who are more familiar with HTML and CSS!
Motivation
I started writing this post as an excuse to try out a few more packages from the htmlwidgets
family. When I came across the slickR
package, I decided I would visualize some my personal reading data, which I’ve been tracking with Libib.com for the last few years. I sketched out a final product that would use a flexdashboard
layout to display some of my favorite titles in a slickR
carousel, list the books I’ve read using reactable
, and then visualize whatever trends I could find in my reading habits. In the end I opted for a simpler dashboard because I ran into a few unexpected roadblocks — namely that it was much harder to embed a flexdashboard
on my blogdown
site than I had anticipated.
I’m not the first blogdown
user to run into this issue, and in my search for answers I came across several unresolved posts in the RStudio and flexdashboard
community forums (like this, this, this, and this). It seemed like a fairly common workaround was to host the flexdashboard
.html
file in the static/
folder of your site’s directory, and then link to it within the content of the post. While this approach technically allowed me to host a dashboard on my site like so, it required the viewer to navigate away from the rest of my site and didn’t feel integrated with the flow of my post. What I really wanted was to embed the dashboard within my post, so that all of my content would be in one place and immediately accessible to the reader.
After some more searching and a lot of tinkering, I figured out how to embed my dashboard, and you can see the results below. Scroll down to learn how it works!
How-to
- First we need to host our
flexdashboard
content on our site. I followed the steps in this post about rendering abitrary.Rmd
files onblogdown
from the package’s authors:
- Go to your blogdown project’s root directory and create a new folder called
R
- In that
R/
directory, create a new R script calledbuild.R
that contains 1 line of code that reads:blogdown::build_dir('static')
- Add and save Rmd file(s) to your blogdown project in the
static/
directory.
- In fact, you can add Rmd files within sub-directories such as
static/slides/
,static/pdf/
, and/orstatic/html/
- Serve your site
Following these steps, I created a subdirectory called
static/dashboards/
to host my.Rmd
file. Serving my site created a customized.html
file formatted according to theoutput: flexdashboard::flexdashboard
settings I configured in the YAML of my.Rmd
file. This file doesn’t play nice with regularblogdown
posts, so it needed to be stored away from thecontent/post
directory where my content usually lives.To be able to easily navigate to my new dashboard on the local version of my site, I followed Mara Alexeev’s advice here and copied the new
.html
file to mypost/
folder. To keep things organized, I copied it into a new subdirectory calledpost/libib-dashboard-body/
, and was able to see how it looked by navigating to[my_local_network]/post/libib-dashboard-body/
on my local preview site.Note that this post (the one you’re reading) isn’t hosted in the same
static/
directory as the.html
file specifying my dashboard. Instead, this post is rendered from a separate.md
file in the usualcontent/post/
directory. This allowed me to add moremarkdown
content and integrate it with the rest of my site usingYAML
options like a title, custom HTML, and a header image.To render the dashboard within this post, I simply embedded the new URL in an
<iframe>
tag and added it to the body of the.md
file. And voilà ! This line is all it took to render the dashboard you see above:
<iframe class="flexdashboard" src="https://www.benjaminsorensen.me/post/libib-dashboard-body/" style = "height: 1070px; width: 720px"> </iframe>
Limitations
While I was very excited to finally see my dashboard embedded in my post, I quickly noticed a few limitations that I still haven’t fully resolved. Keep in mind that, at the time of this writing, I’ve only been fiddling with custom HTML and CSS for a few days, so it’s very likely that I’m overlooking easy fixes to the problems described below. So if you have any suggestions or are able to take this concept farther than I was, I’d love to hear from you!
I haven’t figured out how to expand the
<iframe>
tag beyond the default width of the body of my post, which is why my dashboard is so narrow. Ideally, I’d like the dashboard to stretch closer to the far right and left margins of the site, but after toying with some custom stylization I wasn’t able to get anywhere. Since I couldn’t figure this out I ended up re-designing my dashboard to fit the page.The
{.tabset}
option inflexdashboard
doesn’t seem to render properly inblogdown
. I ended up dropping a visualization because I couldn’t display it compactly without this feature.Step 3 of the approach I’m taking involves copying the
flexdashboard
-rendered.html
file from mystatic/dashboards/
folder into its owncontent/post/
folder, and I’ve had to repeat this step each time I re-rendered the dashboard. This doesn’t take long, but it’s not ideal and I’m sure it could be streamlined somehow.
Bonus visualization!
