Date Posted

It frustrated me a lot that after opening a post, no information about the post date would be provided. It seems natural to include a “Date Posted:” section to the header, so I dived into the page HTML code.

In layouts -> partials, we have a file called page.html. Originally, it was about ten lines of code, just listing the title and inserting the Content parameter.

Since each post has a date parameter, we can insert the following code right below the header:

{{ if eq .Section "post" }}
  <p style="font-size:20px;"><b>Date Posted: </b>
    <time datetime='{{ .Date.Format "2006-01-02" }}'>
      {{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
    </time>
  </p> 
{{ end }}

First, we specify {{ if eq .Section "post" }} so that the non-posts do not get the date attached to the header.

We also note that specifying just {{ .Date}} does not work here since it defaults to posting the timestamp as well. Since we just want the month, day, and year, we need to reformat it.

Voilà, it is done!

Code Chunk Coloring

One June 10th, we attempted to color code chunks by manually entering the CSS code at the top of every R Markdown post. However, the style and coloring could use improvements, and naturally we don’t want to have to manually input it every time. So, let’s add it to the source code.

To determine the CSS code for the “normal” R Markdown code chunk files, we simply open an old file in chrome, find the chunk, then right click + Inspect. We can now copy that code and input it into our theme.

In the scss folder, we can access _base.scss. There, we can insert the following code:

pre.r {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

While this only affects R code chunks, it is solid progress. As we learn more about CSS, we can keep developing this website.

print('Hello World')

We will update the other code chunks and include syntax highlighting in the near future.