Our New Digital Home

July 23, 2021


We are finally live at CleverThis.com and I wanted to make a first post just to show off some of the new sites awesome formatting features.

  • The site is generated using the Hugo static site generator, with the R package blogdown generating R Markdown posts.
  • The Kube framework by Imperavi provides basic layout and user-interaction.
  • Some design elements are inspired by Edward Tufte’s handout designs Especially margin notes , as implemented in the tufte-css framework. Numbered and unnumbered, of course
  • The site uses the fonts Alegreya by Huerta Tipográfica and IM Fell English, extracted from John Fell’s historic types by Igino Marini. Fonts are served by Google Fonts. Icons are provided by Font Awesome and Academicicons.
  • The site is hosted at QOTO’s GitLab using the built-in CI and static page hosting services.
  • Comments are served via a self-hosted schnack installation.

A few additional tweaks:

  • Latex based math rendering is only turned on per-page to improve load time. By setting math: katex or math: mathjax in the front matter the specific math rendering engine can be changed.
  • To make R Markdown documents work with Hugo’s native syntax highlighter, we used a lua filter that wraps code outputs in Hugo’s <highlight> tags, and set the site to use it for all posts.
  • Branches of the site deploy and can be viewed under the /branch/ subdirectory. This is done by setting the site BaseURL to vary by branch and then pushing the branch to that subdirectory.

Please let us know if you find any problems! You can find source code for the site on QOTO’s GitLab.

Below I will highlight some features

Twitter Styled cards

Syntax highlighting

int foo = 5;
if(5 > foo) {
  farBoo(foo, 7, "jeff");

or with backticks

int foo = 5;
if(5 > foo) {
  farBoo(foo, 7, "jeff");


$$ r = \frac{1}{5} + 5.6 $$

Content in margins

We can also add lovely content in the margins, tufte style. Check out this puppy. In this case we added it directly in the middle of the text! Isnt that so cool! Unfortunately all content in the margin must use html markup and cant rely on markdown however.

Rscript executed and rendered

smooth_pulse = function(time, start, stop, cycle = 1,  steep = 1000) {
  xi = 3/4 - (stop - start)/(2* cycle)
  (cycle / (stop - start)) /
    (1 + exp(steep*(sin(2*pi*((time - start)/cycle + xi)) - sin(2*pi*xi))))

x = seq(0,5,by=0.001)
plot(x, smooth_pulse(x, start = 0.2, stop = 0.3, cycle = 0.5), xlim = c(0,2),
     type = "l", xlab = "t", ylab = "f(t)",
     main = "a = 0.2, b = 0.3, c = 0.5, L = 1000")

Lets make it animated via gifski…

for (i in 1:32) {
  pie(c(i %% 32, 6), col = c('red', 'yellow'), labels = NA)

or another animation using ggplot..


ggplot(datasaurus_dozen, aes(x=x, y=y))+
  theme_minimal() +
  transition_states(dataset, 3, 1) +

or using animate library…


f1 = function(x, y) x^2 + 3 * sin(y)
xx = grad.desc(f1, pi * c(-2, -2, 2, 2), c(-2 * pi, 2))
xx$persp(col = "lightblue", theta = 30, phi = 30)

Or with plotly, first ggplot…

anscombe_tidy <- anscombe %>%
    mutate(observation = seq_along(x1)) %>%
    gather(key, value, -observation) %>%
    separate(key, c("variable", "set"), 1, convert = TRUE) %>%
    mutate(set = as.character(as.roman(set))) %>%
    spread(variable, value) %>%
##   observation set  x    y
## 1           1   I 10 8.04
## 2           2   I  8 6.95
## 3           3   I 13 7.58
## 4           4   I  9 8.81
## 5           5   I 11 8.33
## 6           6   I 14 9.96
cols <- c("#0072B2", "#009E73", "#D55E00", "#CC79A7")
ans_plot <- ggplot(anscombe_tidy, aes(x, y, colour = set)) +
  geom_point(size = 3, alpha = .7) +
  geom_smooth(method = "lm", se = FALSE) +
  facet_wrap(~ set) +
  theme_bw() +
  theme(legend.position="none") +
  scale_colour_manual(values = cols)


now plotly (need to use noescape, see code)…


Another example using plot_ly:

p <- gapminder %>%
    x = ~gdpPercap,
    y = ~lifeExp,
    size = ~pop,
    color = ~continent,
    frame = ~year,
    text = ~country,
    hoverinfo = "text",
    type = 'scatter',
    mode = 'markers'
  ) %>%
    xaxis = list(
      type = "log"

Block quotes

Nothing too special about blockquotes, or as Abe Lincoln said…

Blockquotes were the radest invention ever conceived, they have changed the world as we know it. I use them every chance I can get, which isnt very much these days. Abe Lincoln, Getysburg Address, July 20th, 2086

Notice boxes

Sometimes you may need to get someones attention to present some information. That is the perfect use for the info shortcode which produces the following message box.

This is an info message. It usually tells people information that is important to note.

The cool thing is that its’ even possible combine noties along with the tufte shortcodes for writing in the margin. Which you can see in the margin here.

Good Job!
In this case I am using the success type notice which is usually used to congratulate the reader or give praise.

Likewise there are warning notices

Warning, you did something that doesnt matter much but I am still going to complain about!

And of course error notices.

Danger will robinson, danger!

Citations and bibliographies

It is possible to add a citation to something in the bibliography inline like so ( Citation: , (). Example CSL-JSON file. ) ; cool huh? You can also do the same citation as a numbered margin citations like so ( Citation: , (). Example CSL-JSON file. ) . Neat huh?

By adding a CL-JSON bibliography file of the format *bib*.json inside an articles directory it is possible to render the bibliography like so.


Willighagen (2020)
(). Example CSL-JSON file.

Pseudocode blocks

Pseudocode from latex is also supported.


 An Efficient Exponential Moving Average of Finite Length | All articles