index.Rmd

---
title: "OxShef: RMarkdown Template Site"
output:
  html_document:
    toc_float: false
    includes:
      before_body: [includes/include_header.html, includes/include_institutional-support.html]
---

This is a template RMarkdown website for the OxShef project, please consider using this template if you are adding a new website to the project that will be written using RMarkdown files.

Current websites in OxShef that use this template include:

- [OxShef Charts](https://oxshef.github.io/oxshef_charts/): A guide to different visualisation options for visualising research data

There is a more thorough overview of the features of this website template (and how to use it) in the [github readme](https://github.com/OxShef/oxshef_rmd_template). 

<hr>

# Site Features

- Bootstrap 4.0: Bootstrap is an awesome framework for building responsively designed websites, i.e. content that *reflows* as the size of the browser window changes, beautifully supporting a wide range of mobile devices. The main utility of Bootstrap in this template is for laying out grids, an example of which you can see above.

- includes/include_institutional-support.html: The purple alert at the top of this page contains links to institutional support for the service/tool described within the website itself, linking to idn_info.html and orda_info.html respectively. Note that this is optionall included in the YAML header as follows:

```yaml
output:
  html_document:
    toc_float: false
    includes:
      before_body: [includes/include_header.html, includes/include_institutional-support.html]
```


<hr>


# Bootstrap grid example



<div class="row align-items-center">

<div class="col-md-6 align-self-center">

Note that HTML to can be included verbatim within the .Rmd files that generate each webpage, however the markdown engine does interpret content within HTML tags. This allows Markdown like this \*\*bold\*\* to be used to **embolden** text.

To guaranantee that HTML is rendered without any *attempted magic* you can make use of these special comments around the html:

&lt;--html_preserve--&gt;

&lt;--/html_preserve--&gt;

</div>

<div class="col-md-6 align-self-center">

This section of the site should appear either directly to the right or underneath the information about `html_preserve` tags, as it is in another column of the bootstrap grid. The barchart below is generated using the `highcharter` library:

```{r, echo=FALSE, message=FALSE, warning=FALSE, paged.print=FALSE}
library("tidyverse")
library("highcharter")

starwars %>%
  filter(!is.na(species)) %>%
  group_by(species) %>%
  summarise(median.height = median(height, na.rm = TRUE)) %>%
  arrange(desc(median.height)) %>%
  mutate(species = fct_reorder(species, median.height)) %>%
  hchart(
    type = "bar",
    hcaes(
      x = species,
      y = median.height
    )
  ) %>%
  hc_title(text = "Median height of species from dplyr::starwars") %>%
  hc_yAxis(title = list(text = "Median height (cm)"))

```

</div>
<hr>
</div>