emitanaka/ninja-theme

A xaringan / remark js ninja theme

xaringan / remark js ninja themes

You can find the R markdown for the source file for these slides in docs/themes/kunoichi/kunoichi-theme-example.Rmd.

Featured Ninja and their Ninja Slides

• Sarah Romanes - Machine Learning 101 (source files)
• William Chase - What I Wish I Knew When I Started R (source files)
• Eric Nantz - The officer package - making PowerPoint slides from R (source_files)

ninja-theme's Issues

Are Pandoc's notations implemented in kunoichi theme?

Hello @emitanaka,

Related to your Twitter post, I would like to ask how Pandoc's notations are implemented in kunoichi theme (sorry if this is not the correct place to post this question).

I am building xaringan slides, and in the slides, I want to show a figure made using ggplot2 on the right column and incremental lists (some explanations of the figure) on the left column. I am trying to achieve such a two-column layout with incremental lists using Pandoc's fenced div notation and incremental list notation.

Therefore, following one of your Rmd files that produces xaringan, I created an Rmd file to output xarigan slides (mwe.Rmd), which calls pandoc.js via remarkjs_extended.html as shown below.

pandoc.js partially works and parses fenced divs, but I cannot get the two-column layout and the incremental list.

Could you tell me what I am missing?

mwe.Rmd

---
output:
  xaringan::moon_reader:
    css: ["kunoichi", "ninjutsu"]
    includes:
      after_body: path/to/remarkjs_extended.html
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(warning = FALSE, message = FALSE)
library(ggplot2)
```

---

::: columns

:::: column

::::: incremental

A whole sentence

- one `Markdown` bullet point
- a second bullet point
- a third bullet point
  - a sub level

:::::

::::

:::: column

```{r echo = FALSE}
data.frame(
  A = LETTERS[1:5],
  B = sqrt(6:10)
) |>
  ggplot(
    aes(x = A, y = B)
  ) +
  geom_col()
```

::::

:::

remarkjs_extended.html

<script src="path/to/pandoc.js"></script>

Controling margins and column widths

Hi,

I am just getting started with your great theming tools. I am trying to understand 2 things:

1. How do you control the margins of the content so that bullet point aren't so far to the left?
2. How do you control column and row widths?

For the first issue, I note that the following two slides don't have the text in the same place:

class: split-two

.column[
- some text
]
.column[]

---

.pull-left[
- some text
]

Is there a simple way to have your columns behave more like .pull-left and .pull-right in terms of margins within columns? I basically would like to use a standard xaringan style, but also have the flexibility of using your grid themes to at times have better placement of multiple images.

For the second issue, I noted that in your presentation slides at some point you use .split-30, which presumably splits the screen 30% in the first column, 70% in the second, but I am wondering if there is a more general solution. For example, if we wanted 3 columns that are 20, 30 and 50% of the screen, how would we go about that?

Thanks and again I really appreciate what you have done.

Cheers,
David

Fix border for fade/gray out cell sequence

Borders are not quite right as seen here:
https://twitter.com/statsgen/status/1038614337202450435

A `ninjutsu.js` version of `ninjutsu.css`

Javascript will allow granular customization, although pure css solution is still desirable for some browser that disable js.

Some characters in the top-left corner of xaringan if anicon used in YAML

emitanaka/anicon#3

Write script that makes css which outputs new css with only required parts of `ninjutsu.css`

I'm worried that ninjutsu.css is getting unnecessarily dense. I don't know if this will affect slide loading significantly.

Print of kunoichi theme needs fix

First two page off.

All off here.

object-fit property in split cell respect cell width (column width) but not cell height (row height)

the image in the demo https://emitanaka.org/ninja-theme/themes/kunoichi/kunoichi-theme-example.html#48 looks nice because it's short enough

here is one not short enough

and i have tried other images

.bottom[] doesn't work inside of .column[ .content[ ] ]

Hi, I was trying to put my 3 figures in 3 columns. However, I still want an overall title at the top of the slide.

So I tried to align the figures to bottom at each column by doing.

class: split-three

# Overall title

.column[
.content[
.bottom[
![:scale 100%](fig/n_cell_t1.png)
]
]
]

However, the .bottom[] doesn't seems to do anything.
My current work-around is to add <br> above the figures. It works fine, but I'm still wondering why .bottom[] is not working here?

class: split-three

# Overall title

.column[
.content[
<br> <br> <br> <br> <br> <br> <br> <br>
![:scale 100%](fig/n_cell_t1.png)
]
]
.column[
.content[
<br> <br> <br> <br> <br> <br> <br> <br>
![:scale 100%](fig/n_cell_t2.png)
]
]
.column[
.content[
<br> <br> <br> <br> <br> <br> <br> <br>
![:scale 100%](fig/n_cell_t3.png)
]
]

Smart or easy customisable code color

The default code color is yellow at the moment which does not display well with white background. This should change automatically to a better color for lighter colored background or allow people to define a class that changes the code to one of the material colors.

yaml error for animated icon

Hi Emi! 👋 Thanks for this awesome theme, I'm having a lot of fun working with it! 🥳

I did try to run kunoichi-theme-example.Rmd as is, and I got the following error with yaml:

output file: rladies-kunoichi.knit.md

Error in yaml::yaml.load(..., eval.expr = TRUE) : 
  Parser error: while parsing a block mapping at line 1, column 1 did not find expected key at line 3, column 74
Calls: <Anonymous> ... parse_yaml_front_matter -> yaml_load -> <Anonymous>
Execution halted

This had the author line as

author: "<br><br>Emi Tanaka &nbsp;`r anicon::faa('twitter', animate='float', rtext='@statsgen')`"

When I remove the floating icon and change the author line to

author: "<br><br>Emi Tanaka"

the slides render without error, and the animated icons work in the rest of the deck.

I've tried to update all of my packages, below is what I am working with. Do you have any ideas on how to troubleshoot to get the animated icons to work in the yaml?

Thank you!

library(xaringan)
library(anicon)
library(icon)
library(rmarkdown)
library(knitr)
library(htmltools)
devtools::session_info()
#> Error in get(genname, envir = envir) : object 'testthat_print' not found
#> - Session info ---------------------------------------------------------------
#>  setting  value                       
#>  version  R version 4.0.5 (2021-03-31)
#>  os       Windows 10 x64              
#>  system   x86_64, mingw32             
#>  ui       RTerm                       
#>  language (EN)                        
#>  collate  English_United States.1252  
#>  ctype    English_United States.1252  
#>  tz       America/New_York            
#>  date     2021-04-11                  
#> 
#> - Packages -------------------------------------------------------------------
#>  package     * version date       lib source                            
#>  anicon      * 0.1.0   2021-04-10 [1] Github (emitanaka/anicon@0b756df) 
#>  assertthat    0.2.1   2019-03-21 [1] CRAN (R 4.0.0)                    
#>  backports     1.1.7   2020-05-13 [1] CRAN (R 4.0.0)                    
#>  callr         3.4.4   2020-09-07 [1] CRAN (R 4.0.2)                    
#>  cli           2.3.1   2021-02-23 [1] CRAN (R 4.0.4)                    
#>  crayon        1.3.4   2017-09-16 [1] CRAN (R 4.0.0)                    
#>  desc          1.2.0   2018-05-01 [1] CRAN (R 4.0.0)                    
#>  devtools      2.3.2   2020-09-18 [1] CRAN (R 4.0.2)                    
#>  digest        0.6.27  2020-10-24 [1] CRAN (R 4.0.5)                    
#>  ellipsis      0.3.1   2020-05-15 [1] CRAN (R 4.0.0)                    
#>  evaluate      0.14    2019-05-28 [1] CRAN (R 4.0.0)                    
#>  fansi         0.4.1   2020-01-08 [1] CRAN (R 4.0.0)                    
#>  fs            1.4.1   2020-04-04 [1] CRAN (R 4.0.0)                    
#>  glue          1.4.2   2020-08-27 [1] CRAN (R 4.0.5)                    
#>  highr         0.8     2019-03-20 [1] CRAN (R 4.0.0)                    
#>  htmltools   * 0.5.1.1 2021-01-22 [1] CRAN (R 4.0.4)                    
#>  icon        * 0.1.0   2020-06-29 [1] Github (ropenscilabs/icon@a5bc1cc)
#>  knitr       * 1.31    2021-01-27 [1] CRAN (R 4.0.3)                    
#>  lifecycle     0.2.0   2020-03-06 [1] CRAN (R 4.0.0)                    
#>  magrittr      2.0.1   2020-11-17 [1] CRAN (R 4.0.4)                    
#>  memoise       1.1.0   2017-04-21 [1] CRAN (R 4.0.0)                    
#>  pillar        1.5.1   2021-03-05 [1] CRAN (R 4.0.4)                    
#>  pkgbuild      1.1.0   2020-07-13 [1] CRAN (R 4.0.2)                    
#>  pkgconfig     2.0.3   2019-09-22 [1] CRAN (R 4.0.0)                    
#>  pkgload       1.1.0   2020-05-29 [1] CRAN (R 4.0.0)                    
#>  prettyunits   1.1.1   2020-01-24 [1] CRAN (R 4.0.0)                    
#>  processx      3.4.2   2020-02-09 [1] CRAN (R 4.0.0)                    
#>  ps            1.3.3   2020-05-08 [1] CRAN (R 4.0.0)                    
#>  purrr         0.3.4   2020-04-17 [1] CRAN (R 4.0.0)                    
#>  R6            2.4.1   2019-11-12 [1] CRAN (R 4.0.0)                    
#>  remotes       2.2.0   2020-07-21 [1] CRAN (R 4.0.2)                    
#>  reprex        1.0.0   2021-01-27 [1] CRAN (R 4.0.3)                    
#>  rlang         0.4.10  2020-12-30 [1] CRAN (R 4.0.3)                    
#>  rmarkdown   * 2.7     2021-02-19 [1] CRAN (R 4.0.5)                    
#>  rprojroot     1.3-2   2018-01-03 [1] CRAN (R 4.0.0)                    
#>  rstudioapi    0.13    2020-11-12 [1] CRAN (R 4.0.4)                    
#>  sessioninfo   1.1.1   2018-11-05 [1] CRAN (R 4.0.0)                    
#>  stringi       1.5.3   2020-09-09 [1] CRAN (R 4.0.3)                    
#>  stringr       1.4.0   2019-02-10 [1] CRAN (R 4.0.0)                    
#>  styler        1.3.2   2020-02-23 [1] CRAN (R 4.0.3)                    
#>  testthat      2.3.2   2020-03-02 [1] CRAN (R 4.0.0)                    
#>  tibble        3.1.0   2021-02-25 [1] CRAN (R 4.0.4)                    
#>  usethis       2.0.1   2021-02-10 [1] CRAN (R 4.0.3)                    
#>  utf8          1.1.4   2018-05-24 [1] CRAN (R 4.0.0)                    
#>  vctrs         0.3.4   2020-08-29 [1] CRAN (R 4.0.2)                    
#>  withr         2.4.1   2021-01-26 [1] CRAN (R 4.0.3)                    
#>  xaringan    * 0.20    2021-03-04 [1] CRAN (R 4.0.5)                    
#>  xfun          0.22    2021-03-11 [1] CRAN (R 4.0.5)                    
#>  yaml          2.2.1   2020-02-01 [1] CRAN (R 4.0.0)                    
#> 
#> [1] C:/Users/Shannon.Pileggi/OneDrive - OneWorkplace/Documents/R/win-library/4.0
#> [2] C:/Program Files/R/R-4.0.5/library

^{Created on 2021-04-11 by the reprex package (v1.0.0)}

Custom color and opacity for gray and fade out

Currently it is set to 100% grayscale and opacity 0.3. Allow a way to easily modify this.