Skip to content

Commit df57eae

Browse files
amyheatheramyheather
committed
feat(why): write page why.qmd + add autopreview + reorder examples
1 parent f956298 commit df57eae

6 files changed

Lines changed: 271 additions & 41 deletions

File tree

‎_quarto.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,6 @@ format:
4848
- cosmo
4949
- styles/theme.scss
5050
css:
51-
- styles/styles.css
51+
- styles/styles.css
52+
include-after-body:
53+
- styles/autopreview.html

‎pages/examples.yml‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -70,36 +70,6 @@
7070
code: https://github.com/danielvartan/mastersthesis
7171
thumbnail: examples/masters.png
7272

73-
- category: Manuscripts
74-
description: |
75-
Papers wrote fully using Quarto.
76-
tiles:
77-
- title: Towards an open-source model for data and metadata standards
78-
subtitle: Online report with background/methods/results and links to extra pages providing more details.
79-
href: https://uwescience.github.io/2024-open-source-standards-report/
80-
code: https://github.com/uwescience/2024-open-source-standards-report
81-
thumbnail: examples/towards.png
82-
- title: Analysis of human visual experience data
83-
subtitle: Manuscript and supplementary materials
84-
href: https://tscnlab.github.io/ZaunerEtAl_JVis_2026/
85-
code: https://github.com/tscnlab/ZaunerEtAl_JVis_2026
86-
thumbnail: examples/visual.png
87-
- title: "Supplementary Materials for: The promise of community-driven preprints in ecology and evolution"
88-
subtitle:
89-
href: https://daniel1noble.github.io/ecoevo_1000/
90-
code: https://github.com/daniel1noble/ecoevo_1000
91-
thumbnail: examples/supplementary.png
92-
- title: Clinical Performance of Tumor-Informed versus Tumor-Agnostic ctDNA Assays for Colorectal Cancer Recurrence
93-
subtitle: Webpage-based report for systematic review and meta-analysis <a href="https://doi.org/10.1016/j.ctrv.2025.103066">paper</a>.
94-
href: https://crct-bioinformatics.github.io/TIvsTA-DAMA/
95-
code: https://github.com/CRCT-bioinformatics/TIvsTA-DAMA
96-
thumbnail: examples/tumor.png
97-
- title: Dissociating mechanisms of heart-voice coupling
98-
subtitle: Extended results and supplementary information for their <a href="https://www.biorxiv.org/content/10.64898/2025.12.01.691544v1.full.pdf">paper</a>.
99-
href: https://wimpouw.github.io/VoiceAndHeart/heartrate_expire
100-
code:
101-
thumbnail: examples/dissociating.png
102-
10373
- category: Homepage for research programme or team
10474
description: |
10575
Overarching homepages that present an entire project, programme, lab, or community, bringing together people, research, resources, news, and key links in one place.
@@ -298,6 +268,36 @@
298268
code: https://github.com/alburycatalina/alburycatalina.github.io
299269
thumbnail: examples/albury_c.png
300270

271+
- category: Manuscripts
272+
description: |
273+
Papers wrote fully using Quarto.
274+
tiles:
275+
- title: Towards an open-source model for data and metadata standards
276+
subtitle: Online report with background/methods/results and links to extra pages providing more details.
277+
href: https://uwescience.github.io/2024-open-source-standards-report/
278+
code: https://github.com/uwescience/2024-open-source-standards-report
279+
thumbnail: examples/towards.png
280+
- title: Analysis of human visual experience data
281+
subtitle: Manuscript and supplementary materials
282+
href: https://tscnlab.github.io/ZaunerEtAl_JVis_2026/
283+
code: https://github.com/tscnlab/ZaunerEtAl_JVis_2026
284+
thumbnail: examples/visual.png
285+
- title: "Supplementary Materials for: The promise of community-driven preprints in ecology and evolution"
286+
subtitle:
287+
href: https://daniel1noble.github.io/ecoevo_1000/
288+
code: https://github.com/daniel1noble/ecoevo_1000
289+
thumbnail: examples/supplementary.png
290+
- title: Clinical Performance of Tumor-Informed versus Tumor-Agnostic ctDNA Assays for Colorectal Cancer Recurrence
291+
subtitle: Webpage-based report for systematic review and meta-analysis <a href="https://doi.org/10.1016/j.ctrv.2025.103066">paper</a>.
292+
href: https://crct-bioinformatics.github.io/TIvsTA-DAMA/
293+
code: https://github.com/CRCT-bioinformatics/TIvsTA-DAMA
294+
thumbnail: examples/tumor.png
295+
- title: Dissociating mechanisms of heart-voice coupling
296+
subtitle: Extended results and supplementary information for their <a href="https://www.biorxiv.org/content/10.64898/2025.12.01.691544v1.full.pdf">paper</a>.
297+
href: https://wimpouw.github.io/VoiceAndHeart/heartrate_expire
298+
code:
299+
thumbnail: examples/dissociating.png
300+
301301
- category: Conferences and events
302302
description: |
303303
Event and seminar websites that share programmes, schedules, speakers, and materials for conferences, workshops, and talk series, often with links to slides, recordings, and related resources.

‎pages/why.qmd‎

Lines changed: 132 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,141 @@
11
---
22
title: Why make a website for your research?
3+
format:
4+
html:
5+
page-layout: full
36
---
47

5-
Research compendium
8+
Quarto lets you create free, professional websites. This page explains why researchers use them and the kinds of things you can make.
69

7-
Paper - report method - actual code - generate
10+
## Your research project
811

9-
share research
10-
all the details included
12+
Research tends to accumulate across many different places - Word documents, PDFs, data files, presentations, emails, code repositories. It can be hard for collaborators to find things, and nearly impossible for anyone outside the project to navigate. Much of it stays hidden.
1113

12-
more than just appendices and paper
13-
searchable
14-
interactive
15-
mixed media
14+
A Quarto website can bring everything together in one place that anyone can visit. It's relevant to any kind of research (qualitative or quantitative) and you can include whatever makes sense for your project:
1615

17-
examples
16+
- An overview of the study and its aims
17+
- Relevant documents, reports, and materials
18+
- Embedded videos, presentations, and visualisations
19+
- Notes, updates, or a log of progress
1820

19-
(this page could even be a quarto slideshow?)
21+
If your research involves code (Python, R, etc.), you can go further: run code directly within the site, display outputs automatically, and embed interactive figures. But none of that is required.
22+
23+
A project website can accompany a journal paper as a richer alternative to a standard appendix - searchable, mixed media, and openly accessible to anyone. Or it can simply serve as a research compendium: everything in one place, properly organised.
24+
25+
Example:
26+
27+
<iframe
28+
class="auto-preview"
29+
width="100%"
30+
height="800"
31+
src="https://the-epic-study.quarto.pub/the-epic-project/"
32+
title="The Early Psychosis: Investigating Cognition (EPIC) Project">
33+
</iframe>
34+
35+
## Homepage for a research programme or team
36+
37+
If you lead a group, collaborate across institutions, or are part of a larger programme of work, a Quarto website can serve as the public-facing home for everything you do.
38+
39+
This might include:
40+
41+
- An overview of the programme's aims and funding
42+
- Profiles of team members (Quarto has built-in "about page" templates)
43+
- A list of outputs: papers, datasets, tools, presentations
44+
- News or blog posts about recent developments
45+
- Links to resources for collaborators or the public
46+
47+
Example:
48+
49+
<iframe
50+
class="auto-preview"
51+
width="100%"
52+
height="800"
53+
src="https://pythonhealthdatascience.github.io/stars/"
54+
title="STARS">
55+
</iframe>
56+
57+
## Training, modules, and courses
58+
59+
Quarto is widely used for teaching materials. Course notes, worked examples, exercises, and slide decks can all live together on one structured, searchable site that learners can work through
60+
61+
The site can be open to anyone, easy to update and verion controlled, so you always know what changed and when.
62+
63+
Example:
64+
65+
<iframe
66+
class="auto-preview"
67+
width="100%"
68+
height="800"
69+
src="https://sta210-s22.github.io/website/"
70+
title="STA 210: Regression Analysis">
71+
</iframe>
72+
73+
## Researcher profiles
74+
75+
You can create a personal academic website that goes far beyond a LinkedIn profile or institutional staff page. A researcher profile site lets you present your work exactly as you want to, with your own design and structure. You can include your biography, research interests, publications, teaching, and links to your other profiles online.
76+
77+
You can also have a blog - a place to share updates, write about your work, or post short pieces between papers.
78+
79+
It can also move with you if you change institutions.
80+
81+
Example:
82+
83+
<iframe
84+
class="auto-preview"
85+
width="100%"
86+
height="800"
87+
src="https://amyheather.github.io/"
88+
title="Amy Heather">
89+
</iframe>
90+
91+
## Manuscripts
92+
93+
Quarto has a dedicated manuscripts format for scholarly articles. You write your paper in Quarto and can output it as a website, a PDF, or a Word document - all from the same source file.
94+
95+
This won't be relevant to everyone - but for research involving data analysis, you can embed code meaning your figures and results are always generated directly from the analysis — nothing can go out of sync.
96+
97+
Example:
98+
99+
<iframe
100+
class="auto-preview"
101+
width="100%"
102+
height="800"
103+
src="https://daniel1noble.github.io/ecoevo_1000/"
104+
title="Supplementary Materials for: The promise of community-driven preprints in ecology and evolution">
105+
</iframe>
106+
107+
## Conferences and events
108+
109+
If you are hosting an event - a workshop, symposium, summer school, or conference - Quarto works well here too. You can publish the programme, abstracts, speaker information, and practical details before the event, then add slides, recordings, and notes afterwards, all on the same site.
110+
111+
Because the site is just files in a repository, multiple organisers can contribute to it, and it can be updated easily as the event approaches and after it ends.
112+
113+
Example:
114+
115+
<iframe
116+
class="auto-preview"
117+
width="100%"
118+
height="800"
119+
src="https://drganghe.github.io/climate-guest-speakers/"
120+
title="Climate Guest Speakers">
121+
</iframe>
122+
123+
## Package documentation
124+
125+
If you develop a software package - in Python, R, or another language - Quarto is a great way to write its documentation. You can include installation instructions, usage guides, tutorials, and examples, all in one navigable site.
126+
127+
Example:
128+
129+
<iframe
130+
class="auto-preview"
131+
width="100%"
132+
height="800"
133+
src="http://hsma-tools.github.io/vidigi/vidigi_docs/"
134+
title="vidigi">
135+
</iframe>
136+
137+
## Next steps
138+
139+
The rest of this tutorial will walk you through how to create a Quarto website from scratch — we'll build one together.
140+
141+
When you reach the end, head to the [Examples](examples.qmd) page to see a much larger collection of real research websites built with Quarto, covering all of the categories above and more.

‎styles/autopreview.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<script src="/styles/autopreview.js"></script>

‎styles/autopreview.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
(function () {
2+
function wrapIframePreview(iframe) {
3+
if (!iframe || iframe.dataset.previewWrapped === "true") return;
4+
5+
const src = iframe.getAttribute("src");
6+
if (!src) return;
7+
8+
const title =
9+
iframe.getAttribute("title") || "Embedded website preview";
10+
11+
// Outer wrapper
12+
const wrapper = document.createElement("div");
13+
wrapper.className = "iframe-preview-wrapper";
14+
15+
// Header
16+
const header = document.createElement("div");
17+
header.className = "iframe-header";
18+
19+
const label = document.createElement("span");
20+
label.textContent = "Website preview:";
21+
22+
const link = document.createElement("a");
23+
link.href = src;
24+
link.target = "_blank";
25+
link.rel = "noopener noreferrer";
26+
link.textContent = "View full website in new tab";
27+
28+
header.append(label, link);
29+
30+
// Insert wrapper before iframe, then move iframe inside
31+
const parent = iframe.parentNode;
32+
if (!parent) return;
33+
34+
parent.insertBefore(wrapper, iframe);
35+
wrapper.appendChild(header);
36+
wrapper.appendChild(iframe);
37+
38+
// Ensure iframe has styling class
39+
iframe.classList.add("iframe-preview");
40+
iframe.dataset.previewWrapped = "true";
41+
}
42+
43+
function scanAllIframes(root) {
44+
const scope = root || document;
45+
scope.querySelectorAll("iframe.auto-preview").forEach(wrapIframePreview);
46+
}
47+
48+
document.addEventListener("DOMContentLoaded", function () {
49+
// Wrap any existing iframes
50+
scanAllIframes(document);
51+
52+
// Also handle iframes added later (e.g. by other scripts)
53+
const observer = new MutationObserver(function (mutations) {
54+
for (const mutation of mutations) {
55+
mutation.addedNodes.forEach(function (node) {
56+
if (!(node instanceof HTMLElement)) return;
57+
58+
if (node.matches && node.matches("iframe.auto-preview")) {
59+
wrapIframePreview(node);
60+
}
61+
62+
if (node.querySelectorAll) {
63+
node
64+
.querySelectorAll("iframe.auto-preview")
65+
.forEach(wrapIframePreview);
66+
}
67+
});
68+
}
69+
});
70+
71+
observer.observe(document.body, {
72+
childList: true,
73+
subtree: true,
74+
});
75+
});
76+
})();

‎styles/styles.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,32 @@ h4 {
2020
position: relative;
2121
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
2222
}
23+
24+
/* Iframe wrapper and header */
25+
26+
.iframe-preview {
27+
display: block;
28+
width: 100%;
29+
border: 8px solid #5a302f;
30+
}
31+
32+
.iframe-header {
33+
background-color: #5a302f;
34+
color: #ffffff;
35+
padding: 8px 12px;
36+
font-weight: 600;
37+
display: flex;
38+
justify-content: space-between;
39+
align-items: center;
40+
font-size: 1rem;
41+
}
42+
43+
.iframe-header a {
44+
color: #ffffff;
45+
text-decoration: underline;
46+
}
47+
48+
.iframe-header a:hover,
49+
.iframe-header a:focus {
50+
text-decoration: none;
51+
}

0 commit comments

Comments
 (0)