Skip to content

Commit 90f50f2

Browse files
amyheatheramyheather
committed
feat(blog): wrote "external things" section
1 parent 9c33ac2 commit 90f50f2

4 files changed

Lines changed: 158 additions & 2 deletions

File tree

‎pages/blog/index.qmd‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,68 @@
11
---
2-
title: Blog
3-
---
2+
title: Listings (e.g., blog)
3+
listing:
4+
- id: links
5+
contents: links_real.yml
6+
template: links.ejs
7+
---
8+
9+
A [listing](https://quarto.org/docs/reference/projects/websites.html#listings) is a Quarto feature that automatically builds a list or grid of items for you.
10+
11+
There are two ways to use listings:
12+
13+
1. To show a list of **pages from your site** (e.g., a blog index listing all your posts).
14+
2. To show a list of **external things** (e.g., interesting projects or resources you link out to).
15+
16+
## Listing of pages
17+
18+
## Listing of external things
19+
20+
**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)).
21+
22+
### Create a YAML file of links
23+
24+
First, create a YAML file (e.g., `links.yml`). This contains the data for your listing page - the content your want to show, such as descriptions, links, and titles - while the page layout is handled separately by Quarto and the template below.
25+
26+
In this example, each top-level `- category:` blcok is one section of the listing. Inside each section, the `tiles:` field contains the individual cards you want to display, and each card can have fields such as `title`, `subtitle`, `href`, and `thumbnail`.
27+
28+
For example:
29+
30+
```{.yaml}
31+
{{< include links.yml >}}
32+
```
33+
34+
### Create an EJS file
35+
36+
Next, create an EJS template file (e.g., `links.ejs`). This file tells Quarto **how to display** the data from `links.yml`, so you can think of it as the layout or "recipe" for turning your YAML data into HTML on the page.
37+
38+
For example:
39+
40+
````{.txt}
41+
{{< include links.ejs >}}
42+
````
43+
44+
### Create the `.qmd` page
45+
46+
Now create the Quarto page that will display the listing. This page connects the data file (`links.yml`) to the template file (`links.ejs`) and tells Quarto where the finished listing should be inserted.
47+
48+
The `::: {#links}` div is where Quarto injects the rendered listing ofr the listing configuration with the same `id`.
49+
50+
```{.md}
51+
---
52+
title: Listing
53+
listing:
54+
- id: links
55+
contents: links.yml
56+
template: links.ejs
57+
---
58+
59+
::: {#links}
60+
:::
61+
```
62+
63+
To include the page in your site, add the `.qmd` file to `_quarto.yml`
64+
65+
### Example
66+
67+
::: {#links}
68+
:::

‎pages/blog/links.ejs‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!-- This EJS file is adapted quarto-dev/quarto-web.
2+
With thanks to the quarto-web contributors for sharing it under an open license.
3+
URL: https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/gallery.ejs
4+
-->
5+
6+
```{=html}
7+
8+
<% for (const item of items) { %>
9+
10+
<h2><%- item.category %></h2>
11+
12+
<p><%- item.description %></p>
13+
14+
<div class="list grid" style="column-gap: 10px;">
15+
16+
<% for (const tile of item.tiles) { %>
17+
<div class="card border-2 rounded-3 g-col-12 g-col-sm-6 g-col-md-4 mb-2" style="background-color: #ffffff;" <%= metadataAttrs(tile) %>>
18+
19+
<!-- Title and code -->
20+
<div class="card-header py-1 px-2 border-bottom border-1 bg-light">
21+
<small class="card-text inline-block">
22+
<a href="<%- tile.href %>" class="listing-title"><%= tile.title %></a>
23+
</small>
24+
</div>
25+
26+
<!-- Thumbnail -->
27+
<a href="<%- tile.href %>">
28+
<img src="<%- tile.thumbnail %>" alt="<%- tile.description %>" class="card-img-top"/>
29+
</a>
30+
31+
<!-- Subtitle -->
32+
<small>
33+
<div class="card-body py-2">
34+
<span class="text-muted listing-subtitle d-block"><%= tile.subtitle %></span>
35+
</div>
36+
</small>
37+
38+
</div>
39+
<% } %>
40+
41+
</div>
42+
43+
<% } %>
44+
45+
```

‎pages/blog/links.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
- category: Training courses
2+
description: |
3+
Examples of training courses developed using Quarto.
4+
tiles:
5+
- title: "DES RAP Book"
6+
subtitle: "Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline."
7+
href: "https://pythonhealthdatascience.github.io/des_rap_book/"
8+
thumbnail: /images/listings/des_rap_book.png
9+
- title: "Testing in Research Workflow"
10+
subtitle: "Tutorial on testing in Python and R, accompanies HDR UK Futures training videos."
11+
href: "https://pythonhealthdatascience.github.io/stars-testing-intro/"
12+
thumbnail: /images/listings/testing_in_research.png
13+
14+
- category: Researcher profiles
15+
description: |
16+
Examples of researcher profiles developed using Quarto.
17+
tiles:
18+
- title: "Amy Heather"
19+
href: "https://amyheather.github.io/"
20+
thumbnail: /images/listings/amy_heather.png
21+
- title: "Sammi Rosser"
22+
href: "https://sammirosser.com/"
23+
thumbnail: /images/listings/sammi_rosser.png

‎pages/blog/links_real.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
- category: Training courses
2+
description: |
3+
Examples of training courses developed using Quarto.
4+
tiles:
5+
- title: "DES RAP Book"
6+
subtitle: "Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline."
7+
href: "https://pythonhealthdatascience.github.io/des_rap_book/"
8+
thumbnail: /pages/examples/des_rap_book.png
9+
- title: "Testing in Research Workflow"
10+
subtitle: "Tutorial on testing in Python and R, accompanies HDR UK Futures training videos."
11+
href: "https://pythonhealthdatascience.github.io/stars-testing-intro/"
12+
thumbnail: /pages/examples/testing_in_research.png
13+
14+
- category: Researcher profiles
15+
description: |
16+
Examples of researcher profiles developed using Quarto.
17+
tiles:
18+
- title: "Amy Heather"
19+
href: "https://amyheather.github.io/"
20+
thumbnail: /pages/examples/amy_heather.png
21+
- title: "Sammi Rosser"
22+
href: "https://sammirosser.com/"
23+
thumbnail: /pages/examples/sammi_rosser.png

0 commit comments

Comments
 (0)