Search code examples
rr-markdownslidify

slidify lectureSite: workflow and customizations


I am getting started with http://slidify.github.io/lectureSite/. I like the idea and the template very much. However, being new to this, I am struggling with customization.

Let me first explain what this 'lectureSite' architecture offers. The main code is based on rmarkdown and slidify and the customizations of the layout are mainly controlled in css files. The 'lectureSite' consists of an html webpage that serves as a contents page and starting point to access different slides ('lectures'), much of it created automagically. It looks as great as it sounds!

Each lecture is stored in a separate directory with its own 'assets' directory. So in a course made of 10 lectures, one has 10 directories, each with its own css and js. However, to achieve a common style for the whole course, one would like most of the customizations to be shared among all the lectures. My main problem is how to deal with this.

Question: How should I deal with the css customizations that I would like to share among all the lectures?

I have been successful in customizing each lecture by inserting the css code into each rmarkdown file between <style> and </style> tags, but now I would like to take the customizations to a place where they may be shared. I expected that by including a slidify.css file inside assets/css the styles would be picked up, but they are not: could I be doing something wrong or was my expectation incorrect to begin with? And besides, there are so many of those assets/css directories that it would be tedious to have to copy the css into each every time it is modified. Is there a mechanism to set a single css file that would override the css inside assets/css?

I also tried to make a 'declaration' at the top of the rmarkdown file (something I saw there: http://rmarkdown.rstudio.com/html_document_format.html) with:

css         : slidify.css

but that gave the following error message:

pandoc: Could not fetch slidify.css
slidify.css: openBinaryFile: does not exist (No such file or directory)
Error: pandoc document conversion failed with error 67
Execution halted

An alternative would be to source() a text file with the customization between <style> and </style> tags. Are there any disadvantages to this approach? And btw what is the code for sourcing an external file from rmarkdown?


Solution

  • Consider the following structure:

    assets      -> put custom img/js/css/layout assets
    lectures    -> folder containing lectures
      Lecture 01
      Lecture 02
      Lecture 03
    libraries   -> frameworks, highlighters and widgets
    index.Rmd   -> Rmd source for home page
    site.yml    -> Site related configuration
    

    and suppose you are inside one of the Lectures index.Rmd files. I found the following seems to 'by-pass' the local assets directory to source the 'root' directory instead:

    url         : {lib: "../../libraries", assets: "../../assets"}
    

    If you place your css files into "../../assets/css/custom.css", that is the 'master' assets directory at the top of the structure (at the root, to say it differently), then it will be sourced by slidify. I deleted all the other assets directories and didn't find it did any harm (all they contained to begin with was one single file ribbons.css). Not extensively tested, but it worked on Firefox and Chrome.

    In this way, I can have a single customization css for all the chapters.

    However, this structure appears to work only for the html5slides framework and not for io2012. For io2012 I explain here what I did (it worked for me, but I have no idea if it's the right way):

    https://github.com/ramnathv/slidify/issues/409

    Somewhat more involved. Hopefully future versions of slidify will make it easier. One problem with dumping style files into the root assets directory is that, with the html5slides framework, all files are sourced. So my idea of having framework-specific css files in the assets directory doesn't work, because the styles are all sourced and some overwrite one another. So keeping the custom css files in framework-specific directories is probably a better approach anyhow.

    I also found the following way of sharing R customizations and knit opts (or whatever they're called)

    ```{r 'preamble', message = FALSE, warning = FALSE, error = FALSE, echo = FALSE, tidy = FALSE, comment = NA, cache = FALSE}  # probably several redundant ones in there
    require(knitr) 
    opts_chunk$set(echo = FALSE, cache = FALSE)  # example of knit options
    source('../../shared/shared.R')  # here I share common R code 
    ```