Lecture 5

Website Basics

Byeong-Hak Choe

bchoe@geneseo.edu

SUNY Geneseo

February 6, 2024

Announcement

DANL Tutoring Schedule, Spring 2024

Liza Mitchell
- Wednesday 9:00 AM – 10:00 AM
- Friday 8:00 AM – 9:00 AM
Nada Trabelsi
- Tuesday 12:30 PM – 1:30 PM
- Thursday 12:30 PM – 1:30 PM

Daniel Noone
- Tuesday 5:00 PM - 6:00 PM
- Thursday 5:00 PM - 6:00 PM
Dominic Rodriguez-Donohue
- Tuesday 11:00 AM – 12:15 PM
- Thursday 11:00 AM – 12:15 PM

Daniel Noone’s tutoring session today (February 6, 2024) is cancelled.

Tasks & Objectives

Setting up the DANL tools
- R/RStudio or Posit Cloud
- tidyverse Package
- Personal Website

Learning
- Website Basics
- R Basics

Getting Started with Quarto

YAML

An YAML (yet another markup language) header surrounded by ``.
- It is commonly used for document configuration (e.g., title, author, date, style, …).
Chunks of R code surrounded by three backticks, \(\text{```}\).

Getting Started with Quarto

Knitting / Rendering

When we knit the document, Quarto sends the .qmd file to knitr, which executes all of the code chunks and creates a new markdown (.md) document which includes the code and its output.
The markdown file (*.md) generated by knitr is then processed by pandoc, which is responsible for creating the output file.

Getting Started with Quarto

Markdown, Quarto, and HTML

The very original version of Markdown was invented mainly to write HTML content more easily.
- For example, - SOME_TEXT in “.md” is equivalent to <ul><li> SOME_TEXT </li> in ”.html”
Pandoc makes it possible to convert a Markdown document to a large variety of output formats, such as HTML.

Getting Started with Quarto and HTML

Markdown, Quarto, and HTML

title: "Habits"
author: YOUR_NAME
date: January 30, 2024
format: 
  html

To create an HTML document from Quarto, we specify the html output format in the YAML metadata of our document.
- By default, format: html is set.
In RStudio, we can create a new Quarto file from the menu,
- File -> New File -> Quarto Document.
Open an empty Quarto file.
- Type the above YAML metadata to the empty Quarto file.
- In YAML, indentation really matters!
  - tab (or four spaces) defines a level in YAML.

Getting Started with Quarto

Quarto Basics

In RStudio, close the project USERNAME.github.io.Rporj if it is on.
1. Click USERNAME.github.io.Rporj at the top-right corner.
2. Click Close Project.
Download the Quarto file, danl-200-quarto.qmd from Brightspace, and open it from RStudio.

Getting Started with Quarto

Quarto Basics

title: 
subtitle: 
author: 
date: last-modified

format: 
  html:
  
execute: 
  echo: true
  eval: true

The above syntax is part of YAML metadata in danl-210-quarto.qmd.

Getting Started with Quarto

Workflow: Shortcuts for Quarto Document

Mac

command + shift + K renders a Quarto document.
option + command + I create a code block.
command + return runs a current line of code.
command + shift + C is the shortcut for # (commenting).

Windows

Ctrl + Shift + K renders a Quarto document.
Alt + Ctrl + I create a code block.
Ctrl + Enter runs a current line of code.
Ctrl + Shift + C is the shortcut for # (commenting).

Managing a Website with Quarto


project:
  type: website

website:
  title: "YOUR NAME"
  navbar:
    left:
      - text: Project
        href: project.qmd
      - text: Blog
        href: blog-listing.qmd

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

The _quarto.yml file configures the website settings.
Indentation matters!

In RStudio, open the project USERNAME.github.io.Rporj.
1. Click Project: (None) at the top-right corner.
2. Click USERNAME.github.io.Rporj.
Your website has a _quarto.yml configuration file.
- This file provides options for HTML documents within the website.

Quarto Websites

Custom CSS

Cascading Style Sheets (CSS) is used to format the layout of a webpage (color, font, text size, background, display, etc.).
- HTML will format the architecture of the house.
- CSS will be the carpet and walls to decorate the house.
- JavaScript (*.js) adds interactive elements in the house, such as opening doors and lighting.
We are not front-end web developers.
- We will not cover discuss the use of CSS and JavaScript.

Quarto Websites

Rendering

quarto render

quarto render from Terminal renders all Quarto files in your local working directory:
We should use quarto render when we have changes in _quarto.yml.
The Render button (command/Ctrl + shift + K) renders (1) a single Quarto file or (2) Quarto files that have changes but have not rendered yet.

Quarto Websites

Updating a Website

Make changes only from your local laptop (or Posit Cloud).
- Do not make any change from the GitHub repo webpage.

Quarto Websites

Appearance and Style

theme specifies the Bootstrap theme to use for the page (themes are drawn from the Bootswatch theme library).
- Valid themes include default, bootstrap, cerulean, cosmo, darkly, flatly, journal, lumen, paper, readable, sandstone, simplex, spacelab, united, and yeti.
highlight-style specifies the code highlighting style.
- Supported styles include default, tango, pygments, kate, monochrome, espresso, zenburn, haddock, breezedark, and textmate.

Quarto Websites

About

Your index.qmd sets a page about you.
- Details in about pages are available here:
Quarto includes 5 built in templates:
- jolla
- trestles
- solana
- marquee
- broadside

Quarto Websites

Icons and Emojis

A ton of Bootstrap icons are available here:
A ton of markdown emojis are available
- here 😄:
- here 😄:

Quarto Websites

Naviation and Adding Pages

left:
- text: Project
  href: project.qmd
- text: Blog
  href: blog-listing.qmd
- text: Homeowrk
  href: hw.qmd

We can add a new page to the website through navbar in _quarto.yml

Quarto Websites

Naviation and Adding Pages

left:
  - text: "Projects"
    menu:
      - project_1.qmd
      - project_2.qmd

We can also create a navigation bar menu by including a menu
More details about navbar are available here

Quarto Websites

Colors

A ton of hex codes for colors are available here

Website Basics

Let’s do Classwork 4.