Websites

Workshop: Quarto for R & RStudio
posit::conf 2023

Anatomy of a Project

Websites, like any project, are defined by _quarto.yml.

project:
  type: website

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

Our Turn

Let’s create our first website!

  1. Click into empty-project
  2. Run quarto create-project --type website
  3. Run quarto render
  4. Run quarto publish

Your Turn

Open websites and click through the file directories to see what’s inside. Try rendering all five of the new .qmd files.

  • syllabus.qmd
  • intro-to-data/notes.qmd
  • intro-to-data/ps.qmd
  • learning-r/notes.qmd
  • learning-r/ps.qmd

Post to Discord one piece of Quarto syntax or YAML option that you have never seen before.

04:00

Our Turn

Let’s add some life to our website.

  1. Modify the homepage content a bit
  2. Add links to the two intro-data notes.
  3. Turn on freeze to save computational artifacts.

Your Turn

Add more features to the website by:

  1. Add two notes from learning-r to the sidebar navigation.
  2. Modify the about page to describe a course you would like to teach.
  3. Add a link to syllabus.qmd in the top navbar.
  4. Add an image to the homepage that illustrates “statistics” to you. (note: it’s easiest to use a url to an image online)
  5. Add a footer with and icon.
  6. Create a toggle between light and dark mode.
25:00

Listings

If you have a class of documents that you will author many of (over time), you can create adaptive navigation using a Document Listing.

---
title: "Listing Example"
listing:
  contents:
    - "reports/*.qmd"
    - "lab-notes/*reports.qmd"
---

Our Turn

Let’s add a dedicated page for the problem sets.

  1. Make a new ps-home.qmd.
  2. Link to PS in the navbar.
  3. Add a listing to ps-home.qmd.

Your Turn

Add a dedicated page for slides.

  1. Make a new slides-home.qmd.
  2. Link to Slides in navbar.
  3. Add a listing to ps-home.qmd.
    1. Change the listing type to a grid.
10:00

Our Turn

  1. Let’s combine the two listings pages
    1. Rename ps-home.qmd to materials.qmd
    2. Rename PS to Materials in navbar.
    3. Combine the listings.
  2. Let’s made a dedicated staff website.
    1. Change home page.
    2. Add instructors page and link to it.
    3. Add learning objectives to the notes.

Let’s take a break

Quarto for R & RStudio