NW-PaGe Format Example

Introduction

This is an example template showcasing the default styles and formats that come with this Quarto template. You can customize and change anything you want, or just use the default

Installation

I recommend installing this as an extension for an existing quarto project (but you can also use it as a base template)

For existing projects execute this in a terminal:

terminal

quarto add edenian-prince/quarto-html-ext/nwpage

For websites, in your _quarto.yml file change the format to be nwpage-html instead of just html.

Change this:

_quarto.yml

project:
  type: website

website:
  title: "codebook"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

To this:

_quarto.yml

project:
  type: website

website:
  title: "codebook"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  nwpage-html:
    toc: true

Similarly, if you just have an html quarto doc that is not part of a website, you can call the formats into your document in your .qmd file’s front matter like this with nwpage-html:

index.qmd

---
title: my qmd doc
author: you
format:
  nwpage-html: default
---

# header

the rest of the document...

To create a project with the template:

terminal

quarto use template edenian-prince/quarto-html-ext/nwpage

Usage

This template should be used for htmls. I’m planning on adding a pdf typst template in the near future

Contact

Frank Aragona - faaragona4@gmail.com or frank.aragona@doh.wa.gov

Code Block Styles

The styling for the code blocks was inspired by the mlr3book. They look so clean, and be sure to check out their awesome book on machine learning in R.

There CSS styles for creating different code block sizes:

1. .smallframe - for small blocks, usually for small code chunks and terminal commands

terminal

sudo make install

In markdown:

:::{.smallframe}
::: {.cell filename='terminal'}

```{.bash .cell-code}
sudo make install
```
:::
:::

2. .medframe - for medium size chunks

R script

library(dplyr)

df <- mtcars |>
  select(mpg,cyl,disp)|>
  filter(mpg > 30)

In markdown:

:::{.medframe}
::: {.cell filename='R script'}

```{.r .cell-code}
library(dplyr)

df <- mtcars |>
  select(mpg,cyl,disp)|>
  filter(mpg > 30)
```
:::
:::

3. .myframe is a code block with a box shadow underneath. It makes it appear as thought the code block pops out of the screen

Python script

import os
import pandas as pd 

for f in os.listdir(received_submission_dir):
    if f.endswith('received_submissions.csv'):
        df = pd.read_csv(f'{received_submission_dir}/{f}')
        received_submission_df_list.append(df)

received_submission_df = pd.concat(received_submission_df_list)
received_submission_df.reset_index(drop=True, inplace=True)

In markdown:

:::{.myframe}
::: {.cell filename='Python script' python.reticulate='false'}

```{.python .cell-code}
import os
import pandas as pd 

for f in os.listdir(received_submission_dir):
    if f.endswith('received_submissions.csv'):
        df = pd.read_csv(f'{received_submission_dir}/{f}')
        received_submission_df_list.append(df)

received_submission_df = pd.concat(received_submission_df_list)
received_submission_df.reset_index(drop=True, inplace=True)

```
:::
:::

Code Output Style

There are custom code outputs to make the outputs more readable. This was inspired by the knitr documentartion on chunk styling

I added a background and bold font to the outputs like this:

R script

library(dplyr)

(
  df <- mtcars |>
    select(mpg,cyl,disp)|>
    filter(mpg > 30)
)

                mpg cyl disp
Fiat 128       32.4   4 78.7
Honda Civic    30.4   4 75.7
Toyota Corolla 33.9   4 71.1
Lotus Europa   30.4   4 95.1

The Quarto default is this (which I think is a bit too plain sometimes):

R script

library(dplyr)

(
  df <- mtcars |>
    select(mpg,cyl,disp)|>
    filter(mpg > 30)
)

                mpg cyl disp
Fiat 128       32.4   4 78.7
Honda Civic    30.4   4 75.7
Toyota Corolla 33.9   4 71.1
Lotus Europa   30.4   4 95.1

To use the output style, make sure to use #| class-output: watch in the yaml header of your code chunk, like this:

R script

```{r filename="R script"}
#| eval: true
#| message: false
#| warning: false
#| class-output: watch
library(dplyr)

(
  df <- mtcars |>
    select(mpg,cyl,disp)|>
    filter(mpg > 30)
)
```

                mpg cyl disp
Fiat 128       32.4   4 78.7
Honda Civic    30.4   4 75.7
Toyota Corolla 33.9   4 71.1
Lotus Europa   30.4   4 95.1

Callout Blocks

There are custom callout blocks inspired by this fantastic website by Hasse Walum and Desiree de Leon.

To make a custom callout block, use the .note div like this:

::: {.note .medframe}
 **Objectives**

-   Prevent sensitive information leaks to Github
-   Set up guardrails, `.gitignore`, hooks
-   Scrub private repos before they go public
:::

to get this

Objectives

• Prevent sensitive information leaks to Github
• Set up guardrails, .gitignore, hooks
• Scrub private repos before they go public

Note

note: I’m using icons in the callout block that need to be installed in your project. if you want to use icons, follow this guide to install and use

Panel Tabsets

The custom panel tabsets were inspired and pull from this awesome blog by Christoph Scheuch

To make a panel tabset, wrap a group of headers in a fenced div called `:::{.panel-tabset} like:

:::{.panel-tabset}

## header1

stuff here

## header2

other stuff here

## header3

even stuff here

:::

and it will output to be this:

header1

stuff here

header2

other stuff here

header3

even stuff here

Buttons

I made some simple CSS buttons that you can use and link to certain pages.

They look like this:

here is a button!

and you can create them in your quarto doc like this:

<a class="button">here is a button!</a>

Link to section

You can link a button to a different section, so whenever the user clicks on the button it will take them to the section. It works like this:

1. Label your section of interest by wrapping it in a fenced div, or if it’s a header you can label it;

:::{#interesting-section}
### my section!

here's a totally awesome section that is linked to the button
:::

# a header that has a section link {#sec-header-link}

2. Reference the section with your button href

<a href="#interesting-section" class="button">click me!</a>

click me!

my section!

here’s a totally awesome section that is linked to the button

Link to external page

You can have your button linked to a separate page in your website by making the href point to a qmd (or whatever) file.

<a href="folder/index.qmd" class="button">click me!</a>

Example Website

More Information

You can learn more about controlling the appearance of HTML output here: https://quarto.org/docs/output-formats/html-basics.html