Dev

_quarto.yml

@@ -21,6 +21,7 @@ website:
     contents:
       - text: Welcome
         href: index.qmd
+      - pages/agenda/index.qmd
       - text: "Slides: Why make a website for your research?"
         href: pages/why/index.qmd
       - section: "Tutorial"
@@ -33,6 +34,7 @@ website:
           - pages/media/index.qmd
           - pages/inline_html/index.qmd
           - pages/customising/index.qmd
+          - pages/hosting/index.qmd
       - pages/task/index.qmd
       - section: "Optional extras"
         contents:

pages/agenda/index.qmd

@@ -0,0 +1,48 @@
+---
+title: Workshop agenda
+---
+
+This is the companion website for the workshop. You will use it during the exercises, and you can refer back to it afterwards. It contains written instructions that match what we cover in the session, plus some extra material.
+
+To open this site go to:
+
+<https://tinyurl.com/quarto2026>
+
+![](quarto2026-qr.png){fig-alt="QR code"}
+
+## Session plan
+
+1. **Introduction:**
+    Short talk and demo showing how Quarto can be used in research.
+
+2. **Practical set-up and first commit:**
+   - Create or log in to a GitHub account  
+   - Open the Quarto template in GitHub Codespaces  
+   - Render the site, make a small change, and commit it to Git
+
+3. **Break**
+
+4. **Guided exercises:**
+    Work through a series of short exercises to practice:
+   - Markdown basics  
+   - Media (images, videos, documents)  
+   - Customising the appearance of your site  
+   - And a few other core features
+
+
+5. **Hosting:**
+    Finally, we will explain how to host your site online via GitHub Pages.
+
+## What to expect
+
+We have a varied cohort: some of you may already have seen GitHub, Markdown, or Quarto, and for others this will all be completely new. The workshop is designed to be accessible if you are new to these tools, so please do not worry if the terminology is unfamiliar at first.
+
+If you find you move quickly through the core exercises, there are extra pages later in this site where you can explore some more advanced concepts including:
+
+- **Task listings** (e.g. blog‑style or gallery‑style listings)  
+- **Sass and CSS**
+- Running and embedding **code** in Quarto.
+
+These are optional and aimed at those who already feel confident with the basics.
+
+You can also browse the **Examples** page, which shows a range of real Quarto sites. Each example has a link to the live site and, via the GitHub icon in the top right, a link to the source code so you can see how it was built.

pages/basic_structure/index.qmd

@@ -80,7 +80,7 @@ book:
   chapters:
     - text: Overview
       href: index.qmd
-    - pages/TODO.qmd
+    - pages/pagename.qmd
   navbar:
     right:
       - icon: github
@@ -98,11 +98,19 @@ A `.qmd` file is a **Quarto Markdown** document. It mixes metadata at the top, t
 
 > If you're familiar with R Markdown (`.Rmd`), these are similar, but `.qmd` is more flexible.
 
-Each `.qmd` file begins with **YAML front matter**, enclosed by three dashes (`---`). This defines metadata such as the page title. Below that is the page. Here we just have one sentence: `This is my homepage.`.
+Each `.qmd` file begins with **YAML front matter**, enclosed by three dashes (`---`). This defines metadata such as the page title, author information and date. Below that is the main content of the page. Here we just have one sentence: `This is my homepage.`.
 
-```{.r}
+```{.yaml}
 ---
 title: My homepage
+author:
+  - name: Amy Heather
+    orcid: 0000-0002-6596-3479
+    affiliations: University of Exeter
+  - name: Thomas Monks
+    orcid: 0000-0003-2631-4481
+    affiliations: University of Exeter
+date: 06-01-2026
 ---
 
 

pages/blog/examples/example1/index.qmd

@@ -0,0 +1,7 @@
+---
+title: Example 1
+---
+
+This page has a picture of a butterfly.
+
+![Butterfly](butterfly.jpg)

pages/blog/examples/example2/index.qmd

@@ -0,0 +1,7 @@
+---
+title: Example 2
+---
+
+This page has a picture of a squirrel.
+
+![Squirrel](squirrel.jpg)

pages/blog/examples/example3/index.qmd

@@ -0,0 +1,7 @@
+---
+title: Example 3
+---
+
+This page has a picture of a cat.
+
+![Cat](cat.jpg)

pages/blog/index.qmd

@@ -1,6 +1,10 @@
 ---
 title: Listings (e.g., blog)
 listing:
+  - id: simple
+    contents: examples
+    type: grid
+    grid-columns: 3
   - id: links
     contents: links_real.yml
     template: links.ejs
@@ -15,6 +19,93 @@ There are two ways to use listings:
 
 ## Listing of pages
 
+### Simple listing of pages
+
+A common use case is a blog or "Projects" page that lists documents from a folder. We create it with `listing:` in the YAML. At a minimum, you specify `contents`, which determines which documents to include.
+
+For example, this will create a listing from files within the `pages/` folder:
+
+```{.markdown}
+---
+title: Projects
+listing:
+  contents: pages
+---
+```
+
+In this example, we have add more criteria:
+
+* `type:` how to display the items (for example, `default` list or `grid`).
+* `grid-columns:` number of columns when using a grid layout.
+* `fields:` which pieces of metadata to show for each item (for example, `title`, `subtitle`, `image`).
+* `image-height:` how tall to show any image field.
+
+```{.markdown}
+---
+title: Projects
+listing:
+  contents: pages
+  type: grid
+  grid-columns: 3
+  fields: [title, subtitle, image]
+  image-height: "100"
+---
+```
+
+Example:
+
+::: {#simple}
+:::
+
+### Grouped listing of pages
+
+You can also define **multiple listings** on the same page and group them.
+
+This approach assumes that the pages in `pages/` have a `year:` field in their YAML. Each listing block uses `include:` to filter by `year`, and an `id` that matches a placeholder div later in the document.
+
+```{.markdown}
+---
+title: Projects
+listing:
+  - id: projects-2026
+    contents: pages
+    include:
+      year: 2026
+    fields: [title, subtitle, image]
+
+  - id: projects-2025
+    contents: pages
+    include:
+      year: 2025
+    fields: [title, subtitle, image]
+
+  - id: projects-2024
+    contents: pages
+    include:
+      year: 2024
+    fields: [title, subtitle, image]
+
+format:
+  html:
+    page-layout: article
+---
+
+## 2026
+
+::: {#projects-2026}
+:::
+
+## 2025
+
+::: {#projects-2025}
+:::
+
+## 2024
+
+::: {#projects-2024}
+:::
+```
+
 ## Listing of external things
 
 **Note:** This is more advanced. The approach is based on `quarto-dev/quarto-web`'s gallery ([link](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/gallery.ejs)).

pages/blog/links.yml

@@ -6,7 +6,7 @@
       subtitle: "Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline."
       href: "https://pythonhealthdatascience.github.io/des_rap_book/"
       thumbnail: /images/listings/des_rap_book.png
-    - title: "Testing in Research Workflow"
+    - title: "Testing in Research Workflows"
       subtitle: "Tutorial on testing in Python and R, accompanies HDR UK Futures training videos."
       href: "https://pythonhealthdatascience.github.io/stars-testing-intro/"
       thumbnail: /images/listings/testing_in_research.png

pages/blog/links_real.yml

@@ -6,7 +6,7 @@
       subtitle: "Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline."
       href: "https://pythonhealthdatascience.github.io/des_rap_book/"
       thumbnail: /pages/examples/des_rap_book.png
-    - title: "Testing in Research Workflow"
+    - title: "Testing in Research Workflows"
       subtitle: "Tutorial on testing in Python and R, accompanies HDR UK Futures training videos."
       href: "https://pythonhealthdatascience.github.io/stars-testing-intro/"
       thumbnail: /pages/examples/testing_in_research.png