Merge pull request #544 from jhudsl/style_doc

Style documentation update for boxes

.gitignore

@@ -8,3 +8,4 @@ spell_check_results.tsv
 .RData
 .httr-oauth
 docker/git_token.txt
+.Rproj.user

01-intro.Rmd

@@ -5,57 +5,6 @@ ottrpal::set_knitr_image_path()
 
 # Introduction
 
-To add a warning box like the following use:
-
-`<div class = "warning">`
-
-Followed by the text you want inside/
-
-`</div>`
-
-The line above marks the end of the box.
-
-This will create the following:
-
-<div class = "warning">
-
-Followed by the text you want inside/
-
-</div>
-
-Here is a `<div class = "notice">` box:
-
-<div class = "notice">
-
-note text
-
-</div>
-
-Here is a `<div class = "github">` box:
-
-<div class = "github">
-
-github text
-
-</div>
-
-
-Here is a `<div class = "dictionary">` box:
-
-<div class = "dictionary">
-
-dictionary text
-
-</div>
-
-
-Here is a `<div class = "reflection">` box:
-
-<div class = "reflection">
-
-reflection text
-
-</div>
 
 ## Motivation
 

02-chapter_of_course.Rmd

@@ -1,17 +1,20 @@
 
 # A new chapter
 
-*If you haven't yet read the getting started Wiki pages; [start there](https://github.com/jhudsl/OTTR_Template/wiki/Getting-started)
+If you haven't yet read the getting started Wiki pages; [start there](https://github.com/jhudsl/OTTR_Template/wiki/Getting-started).
+
+To see the rendered version of this chapter and the rest of the template, see here: https://jhudatascience.org/OTTR_Template/.
 
 Every chapter needs to start out with this chunk of code:
 
+
 ```{r, include = FALSE}
 ottrpal::set_knitr_image_path()
 ```
 
 ## Learning Objectives
 
-*Every chapter also needs Learning objectives that will look like this:  
+Every chapter also needs Learning objectives that will look like this:  
 
 This chapter will cover:  
 
@@ -28,15 +31,17 @@ For this chapter, we'll need the following packages attached:
 library(magrittr)
 ```
 
-# Topic of Section
+## Topic of Section
 
-You can write all your text in sections like this!
+You can write all your text in sections like this, using `##` to indicate a new header. you can use additional pound symbols to create lower levels of headers.
 
-## Subtopic
+See [here](https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf) for additional general information about how you can format text within R Markdown files. In addition, see [here](https://pandoc.org/MANUAL.html#pandocs-markdown) for more in depth and advanced options.
 
-Here's a subheading and some text in this subsection!
+### Subtopic
 
-### Code examples
+Here's a subheading (using three pound symbols) and some text in this subsection!
+
+## Code examples
 
 You can demonstrate code like this:
 
@@ -61,71 +66,80 @@ hist_plot
 dev.off()
 ```
 
-### Image example
+## Image example
 
 How to include a Google slide. It's simplest to use the `ottrpal` package:
 
-```{r, fig.align='center', echo = FALSE, fig.alt= "Major point!! example image"}
+
+```{r, fig.align='center', out.width="100%", echo = FALSE, fig.alt= "Major point!! example image"}
 ottrpal::include_slide("https://docs.google.com/presentation/d/1YmwKdIy9BeQ3EShgZhvtb3MgR8P6iDX4DfFD65W_gdQ/edit#slide=id.gcc4fbee202_0_141")
 ```
 
-But if you have the slide or some other image locally downloaded you can also use html like this:
+But if you have the slide or some other image locally downloaded you can also use HTML like this:
 
 <img src="resources/images/02-chapter_of_course_files/figure-html//1YmwKdIy9BeQ3EShgZhvtb3MgR8P6iDX4DfFD65W_gdQ_gcc4fbee202_0_141.png" title="Major point!! example image" alt="Major point!! example image" style="display: block; margin: auto;" />
 
-### Video examples
+## Video examples
+You may also want to embed videos in your course. If alternatively, you just want to include a link you can do so like this:
 
-To show videos in your course, you can use markdown syntax like this:
+Check out this [link to a video](https://www.youtube.com/embed/VOCYL-FNbr0) using markdown syntax. 
 
-[A video we want to show](https://www.youtube.com/embed/VOCYL-FNbr0)
+### Using `knitr`
+
+To embed videos in your course, you can use `knitr::include_url()` like this:
+Note that you should use `echo=FALSE` in the code chunk because we don't want the code part of this to show up. If you are unfamiliar with [how R Markdown code chunks work, read this](https://rmarkdown.rstudio.com/lesson-3.html).
 
-Alternatively, you can use `knitr::include_url()` like this:
-Note that we are using `echo=FALSE` in the code chunk because we don't want the code part of this to show up.
-If you are unfamiliar with [how R Markdown code chunks work, read this](https://rmarkdown.rstudio.com/lesson-3.html).
 
 ```{r, echo=FALSE}
 knitr::include_url("https://www.youtube.com/embed/VOCYL-FNbr0")
 ```
 
-OR this works:
+### Using HTML
 
 <iframe src="https://www.youtube.com/embed/VOCYL-FNbr0" width="672" height="400px"></iframe>
 
-### Links to files
+## File examples
 
-This works:
+You can again use simple markdown syntax to just include a link to a file like so:
 
-```{r, fig.align="center", echo=FALSE}
-knitr::include_url("https://www.bgsu.edu/content/dam/BGSU/center-for-faculty-excellence/docs/TLGuides/TLGuide-Learning-Objectives.pdf", height = "800px")
+[A file](https://www.bgsu.edu/content/dam/BGSU/center-for-faculty-excellence/docs/TLGuides/TLGuide-Learning-Objectives.pdf).
+
+Alternatively you can embed files like PDFs.
+
+### Using `knitr`
+
+```{r, fig.align="center", echo=FALSE, out.width="100%"}
+knitr::include_url("https://academicaffairs.ucsc.edu/events/documents/Microaggressions_Examples_Arial_2014_11_12.pdf")
 ```
 
-Or this:
 
-[This works](https://www.bgsu.edu/content/dam/BGSU/center-for-faculty-excellence/docs/TLGuides/TLGuide-Learning-Objectives.pdf).
 
-Or this:
+### Using HTML
+
+<iframe src="https://academicaffairs.ucsc.edu/events/documents/Microaggressions_Examples_Arial_2014_11_12.pdf" width="672" height="800px"></iframe>
+
+## Website Examples
 
-<iframe src="https://www.bgsu.edu/content/dam/BGSU/center-for-faculty-excellence/docs/TLGuides/TLGuide-Learning-Objectives.pdf" width="672" height="800px"></iframe>
+Yet again you can use a link to a website like so:
 
-### Links to websites
+[A Website](https://yihui.org)
 
-Examples of including a website link.
+Or, you can embed some websites.
+
+### Using `knitr`
 
 This works:
 
 ```{r, fig.align="center", echo=FALSE}
 knitr::include_url("https://yihui.org")
 ```
 
-OR this:
-
-![Another link](https://yihui.org)
 
-OR this:
+### Using HTML
 
 <iframe src="https://yihui.org" width="672" height="400px"></iframe>
 
-### Citation examples
+## Citation examples
 
 We can put citations at the end of a sentence like this [@rmarkdown2021].
 Or multiple citations [@rmarkdown2021, @Xie2018].
@@ -134,16 +148,94 @@ but they need a ; separator [@rmarkdown2021; @Xie2018].
 
 In text, we can put citations like this @rmarkdown2021.
 
-### FYI boxes
+## Stylized boxes
+
+Occasionally, you might find it useful to emphasize a particular piece of information. To help you do so, we have provided css code and images (no need for you to worry about that!) to create the following stylized boxes. 
 
-::: {.fyi}
+You can use these boxes in your course with either of two options: using HTML code or Pandoc syntax.
+
+### Using `rmarkdown` container syntax
+
+The `rmarkdown` package allows for a different syntax to be converted to the HTML that you just saw and also allows for conversion to LaTeX. See the [Bookdown](https://bookdown.org/yihui/rmarkdown-cookbook/custom-blocks.html) documentation for more information [@Xie2020]. Note that Bookdown uses Pandoc.
+
+
+```
+::: {.notice}
+Note using rmarkdown syntax.
+
+:::
+```
+
+::: {.notice}
+Note using rmarkdown syntax.
+
+:::
+
+As an example you might do something like this:
+
+::: {.notice}
 Please click on the subsection headers in the left hand
 navigation bar (e.g., 2.1, 4.3) a second time to expand the
 table of contents and enable the `scroll_highlight` feature
-([see more](introduction.html#scroll-highlight)).
+([see more](introduction.html#scroll-highlight))
 :::
 
-### Dropdown summaries
+
+### Using HTML
+
+To add a warning box like the following use:
+
+```
+<div class = "notice">
+Followed by the text you want inside
+</div>
+```
+
+This will create the following:
+
+<div class = "notice">
+
+Followed by the text you want inside
+
+</div>
+
+Here is a `<div class = "warning">` box:
+
+<div class = "warning">
+
+Note text
+
+</div>
+
+Here is a `<div class = "github">` box:
+
+<div class = "github">
+
+GitHub text
+
+</div>
+
+
+Here is a `<div class = "dictionary">` box:
+
+<div class = "dictionary">
+
+dictionary text
+
+</div>
+
+
+Here is a `<div class = "reflection">` box:
+
+<div class = "reflection">
+
+reflection text
+
+</div>
+
+
+
+## Dropdown summaries
 
 <details><summary> You can hide additional information in a dropdown menu </summary>
 Here's more words that are hidden.

README.md

@@ -25,7 +25,8 @@ _This template and guide helps you_:
 - [Advanced Reproducibility in Cancer Informatics](https://jhudatascience.org/Adv_Reproducibility_in_Cancer_Informatics/)
 
 ## To Get Started
-- Go to the [Wiki page](https://github.com/jhudsl/OTTR_Template/wiki/Getting-started)
+- Go to the [Wiki page](https://github.com/jhudsl/OTTR_Template/wiki/Getting-started).
+- Check out the [rendered version of the template](https://jhudatascience.org/OTTR_Template/).
 - Please take a look at the [code of conduct](./code_of_conduct.md).
 - If you encounter any problems or have ideas for improvements to this template repository or this getting started guide, please [file an issue here](https://github.com/jhudsl/OTTR_Template/issues/new/choose)! Your feedback is very much appreciated.
 

assets/style.css

@@ -251,7 +251,6 @@ li.appendix span, li.part span { /* for TOC part names */
 /* from r-pkgs.org*/
 
 div.notice, div.warning, div.github, div.dictionary, div.reflection {
-  border-style: solid;
   padding: 1em;
   margin: 1em 0;
   padding-left: 100px;
@@ -261,14 +260,17 @@ div.notice, div.warning, div.github, div.dictionary, div.reflection {
 
 div.notice{
   border: 4px #68ace5;
+  border-style: solid;
   background-size: 70px;
   background-position: 15px center;
   background-color: #e8ebee;
   background-image: url("../assets/box_images/note.png");
 }
 
+
 div.warning{
   border: 4px #e0471c;
+  border-style: solid;
   background-size: 70px;
   background-position: 15px center;
   background-color: #e8ebee;
@@ -277,6 +279,7 @@ div.warning{
 
 div.github{
   border: 4px #000000;
+  border-style: solid;
   background-size: 70px;
   background-position: 15px center;
   background-color: #e8ebee;
@@ -285,6 +288,7 @@ div.github{
 
 div.dictionary{
   border: 4px #68ace5;
+  border-style: solid;
   background-size: 70px;
   background-position: 15px center;
   background-color: #e8ebee;
@@ -293,6 +297,7 @@ div.dictionary{
 
 div.reflection{
   border: 4px #68ace5;
+  border-style: solid;
   background-size: 90px;
   background-position: 15px center;
   background-color: #e8ebee;

resources/dictionary.txt

@@ -3,10 +3,12 @@ BIPOC
 Bloomberg
 Bookdown
 Coursera
+css
 Datatrail
 DataTrail
 dropdown
 GDSCN
+GitHub
 impactful
 ITCR
 itcrtraining
@@ -18,6 +20,7 @@ mentorship
 NCI
 NHGRI
 ottrpal
+Pandoc
 UE
 UE5
 reproducibility