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!
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
.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!
- First we need to host our
flexdashboardcontent on our site. I followed the steps in this post about rendering abitrary
blogdownfrom the package’s authors:
- Go to your blogdown project’s root directory and create a new folder called
- In that
R/directory, create a new R script called
build.Rthat contains 1 line of code that reads:
- Add and save Rmd file(s) to your blogdown project in the
- In fact, you can add Rmd files within sub-directories such as
- Serve your site
Following these steps, I created a subdirectory called
static/dashboards/to host my
.Rmdfile. Serving my site created a customized
.htmlfile formatted according to the
output: flexdashboard::flexdashboardsettings I configured in the YAML of my
.Rmdfile. This file doesn’t play nice with regular
blogdownposts, so it needed to be stored away from the
content/postdirectory 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
.htmlfile to my
post/folder. To keep things organized, I copied it into a new subdirectory called
post/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
.htmlfile specifying my dashboard. Instead, this post is rendered from a separate
.mdfile in the usual
content/post/directory. This allowed me to add more
markdowncontent and integrate it with the rest of my site using
YAMLoptions 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
.mdfile. 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>
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.
flexdashboarddoesn’t seem to render properly in
blogdown. 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
.htmlfile from my
static/dashboards/folder into its own
content/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.