Repository: jhudsl/cheatsheets
Pull request #24: Set up quarto gallery and setting up footers
Author: login: carriewright11
Created: 2025-03-24T18:01:25Z | Merged: 2025-03-25T17:36:31Z

- changing out index.Rmd for index.Qmd that references gallery.yml and gallery.ejs to make the gallery. Also adding _quarto.yml to set up the site with quarto 
- locally it didn't like the contributing guide being md so I changed to Qmd - which looks fine: https://jhudatascience.org/cheatsheets/CONTRIBUTING - kinda odd though
- I noticed that the pngs haven't updated - so I added the quarto render step (which also needed to be added in general) after the pngs are made- which comes after rendering Rmds so that they have the updates

This involved updating the git action workflows for render and PRs


- also adding footers to chunks so that we have the ottr logo and authors 


Diff:
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 0a89966..51818a0 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -108,7 +108,7 @@ jobs:
       - name: Delete old *.html
         run: Rscript -e "rmarkdown::clean_site(preview = FALSE)"
 
-       # Now we want to render all the html files from the Rmd files
+       # Now we want to render all the html files from the Rmd files and create png webshots! As well as render qmd file for index.
       - name: Run render html
         id: site
         run: |
@@ -122,6 +122,8 @@ jobs:
           purrr::pmap(rmd_df, function(rmd, png) {
                  webshot2::rmdshot(rmd, file = png)
                })
+          quarto::quarto_render("index.Qmd")
+          quarto::quarto_render("CONTRIBUTING.Qmd")
         shell: Rscript {0}
 
       # This checks on the steps before it and makes sure that they completed.
diff --git a/.github/workflows/render-site.yml b/.github/workflows/render-site.yml
index 62459b3..81bc94a 100644
--- a/.github/workflows/render-site.yml
+++ b/.github/workflows/render-site.yml
@@ -12,10 +12,20 @@ on:
     branches: [ main ]
     paths:
       - '**.Rmd'
+      - '**.rmd'
+      - '**.Qmd'
+      - '**.qmd'
       - style.css
+      - css/*.css
+      - pngs/*.png
+      - _quarto.yml
       - _site.yml
       - resources/images/*.png
+      - resources/images/*.ico
       - resources/icons/*.png
+      - css/images/*.png
+      - css/images/*.ico
+      - chunks/*.md
 
 jobs:
   yaml-check:
@@ -74,6 +84,8 @@ jobs:
           purrr::pmap(rmd_df, function(rmd, png) {
                  webshot2::rmdshot(rmd, file = png)
                })
+          quarto::quarto_render("index.Qmd")
+          quarto::quarto_render("CONTRIBUTING.Qmd")
         shell: Rscript {0}
 
 
@@ -93,6 +105,7 @@ jobs:
           git config --global user.name 'github-actions[bot]'
           git config --global user.email 'github-actions[bot]@users.noreply.github.com'
           git add --force docs/*
+          git add --force pngs/*
           git commit -m 'Render site' || echo "No changes to commit"
           git reset --hard HEAD
           git pull --rebase --allow-unrelated-histories --strategy-option=ours
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.Qmd
similarity index 100%
rename from CONTRIBUTING.md
rename to CONTRIBUTING.Qmd
diff --git a/_quarto.yml b/_quarto.yml
new file mode 100644
index 0000000..7b69b84
--- /dev/null
+++ b/_quarto.yml
@@ -0,0 +1,10 @@
+project:
+  type: website
+  output-dir: docs
+
+website:
+  title: "Cheatsheets"
+
+format:
+  html:
+    css: styles.css
diff --git a/chunks/create_itn_footer.md b/chunks/create_itn_footer.md
new file mode 100644
index 0000000..e0fc9b8
--- /dev/null
+++ b/chunks/create_itn_footer.md
@@ -0,0 +1,11 @@
+
+<hr>
+
+<center>
+<a href="https://www.itcrtraining.org/">
+  <img src="css/images/ITN_logo.png" width = 30%>
+</a>
+</center>
+
+<div class = "authors"> **Authors**: {AUTHORS}
+</div>
diff --git a/chunks/create_ottr_footer.md b/chunks/create_ottr_footer.md
new file mode 100644
index 0000000..2de486a
--- /dev/null
+++ b/chunks/create_ottr_footer.md
@@ -0,0 +1,10 @@
+
+<center>
+<a href="https://www.ottrproject.org/">
+  <img src="css/images/basic_otter_water.png" width = 40%>
+</a>
+</center>
+
+<div class = "authors"> **Authors**: {AUTHORS} 
+[OTTR](https://www.ottrproject.org/) was created and or is maintained by the following team: Candace Savonen, Carrie Wright, Kate Isaac, Ava Hoffman, Katherine Cox, Federick Tan, John Muschelli, Howard Baek, and Jeffrey Leek.  
+</div>
diff --git a/chunks/starter_template.md b/chunks/starter_template.md
index 32d5a4d..5827014 100644
--- a/chunks/starter_template.md
+++ b/chunks/starter_template.md
@@ -1,5 +1,5 @@
 
-## Create your own repostiory from the [{TEMPLATE_NAME}]({TEMPLATE_URL}) template
+## Create your own repository from the [{TEMPLATE_NAME}]({TEMPLATE_URL}) template
 
 <input type="checkbox">  In the upper right, _click on_: <div class = "github_button"> <a href="https://github.com/new?template_name={TEMPLATE_NAME}"> Use this template</a></div>
 
diff --git a/css/OTTR_style.css b/css/OTTR_style.css
index 6c74d8e..92297ba 100644
--- a/css/OTTR_style.css
+++ b/css/OTTR_style.css
@@ -37,7 +37,7 @@ input[type="checkbox"] {
 .png_button {
     position: absolute;
     top: 20px;
-    right: 5%;
+    left: 5%;
     border: 4px solid #black;
     border-radius: 8px;
     background: lightgray;
@@ -52,9 +52,20 @@ input[type="checkbox"] {
     cursor: pointer;
 }
 
+/*------------- timestamp style---------------- */
 .time {
   font-size: 20px;
 }
+
+/*------------- authors style ---------------- */
+div.authors {
+  text-indent: 0%;
+  list-style-position: outside;
+  font-size: 11px;
+  font-style: italic;
+  line-height: 1.6;
+}
+
 /*------------- button link color---------------- */
 
 
diff --git a/gallery.ejs b/gallery.ejs
new file mode 100644
index 0000000..d7960df
--- /dev/null
+++ b/gallery.ejs
@@ -0,0 +1,41 @@
+
+```{=html}
+
+<% for (const item of items) { %>
+
+<h2><%- item.category %></h2>
+
+<p><%- item.description %></p>
+
+<div class="list grid" style="column-gap: 10px;">
+
+<% for (const tile of item.tiles) { %>
+  <div class="card border-2 rounded-3 g-col-12 g-col-sm-6 g-col-md-4 mb-2" <%= metadataAttrs(tile) %>>
+    <div class="card-header py-1 px-2 border-bottom border-1 bg-light">
+      <small class="card-text inline-block">
+        <a href="<%- tile.href %>" class="listing-title"><%= tile.title %></a>
+        <% if (tile.code) { %> 
+        <a href="<%- tile.code %>" title="View source code" 
+          class="source-code card-text float-end inline-block">
+          <i class="bi-code-slash"></i>
+        </a>
+        <% } %>
+        <span class="text-muted listing-subtitle"><%= tile.subtitle %></span>
+      </small>
+    </div>
+    <a href="<%- tile.href %>">
+      <img src="<%- tile.thumbnail %>" alt="<%- tile.description %>" class="card-img-top"/>
+    </a>
+    
+    <% if (tile.publicationdate) { %> 
+      <b class="listing-publicationdate"><%= tile.publicationdate %></b>
+    <% } %>
+    
+  </div>
+<% } %>
+
+</div>
+
+<% } %>
+
+```
\ No newline at end of file
diff --git a/gallery.yml b/gallery.yml
new file mode 100644
index 0000000..8c86239
--- /dev/null
+++ b/gallery.yml
@@ -0,0 +1,36 @@
+
+- category: Conferences & Engagement
+  description: |
+    Cheatsheets to help trainees and PIs with scientific communication and networking.
+  tiles:
+    - title: Attending Conferences
+      href: https://jhudatascience.org/cheatsheets/attending_conferences.html
+      code: https://github.com/jhudsl/cheatsheets/blob/main/attending_conferences.Rmd
+      thumbnail: pngs/attending_conferences.png
+    - title: Social Media for Scientists
+      href: https://jhudatascience.org/cheatsheets/social_media.html
+      code: https://github.com/jhudsl/cheatsheets/blob/main/social_media.Rmd
+      thumbnail: pngs/social_media.png
+
+
+- category: OTTR
+  description: |
+    Cheatsheets for using our Open-source Tools for Training Resources (OTTR) software to create websites and courses with automatic rendering and checks.
+  tiles:
+    - title: OTTR Course
+      href: https://jhudatascience.org/cheatsheets/ottr_course.html
+      code: https://github.com/jhudsl/cheatsheets/blob/main/ottr_course.Rmd
+      thumbnail: pngs/ottr_course.png
+    - title: OTTR Website
+      href: https://jhudatascience.org/cheatsheets/ottr_website.html
+      code: https://github.com/jhudsl/cheatsheets/blob/main/ottr_website.Rmd
+      thumbnail: pngs/ottr_website.png
+    - title: OTTR Quarto Course
+      href: https://jhudatascience.org/cheatsheets/ottr_quarto_course.html
+      code: https://github.com/jhudsl/cheatsheets/blob/main/ottr_quarto_course.Rmd
+      thumbnail: pngs/ottr_quarto_course.png
+    - title: OTTR Quarto Website
+      href: https://jhudatascience.org/cheatsheets/ottr_quarto_website.html
+      code: https://github.com/jhudsl/cheatsheets/blob/main/ottr_quarto_website.Rmd
+      thumbnail: pngs/ottr_quarto_website.png
+
diff --git a/index.Qmd b/index.Qmd
new file mode 100644
index 0000000..00e471a
--- /dev/null
+++ b/index.Qmd
@@ -0,0 +1,14 @@
+---
+title: "Cheatsheets"
+format:
+  html:
+    toc: false
+search: false
+execute:
+  echo: false
+listing:
+- id: general
+  template: gallery.ejs
+  contents: gallery.yml
+---
+
diff --git a/index.Rmd b/index.Rmd
deleted file mode 100644
index eedfb3b..0000000
--- a/index.Rmd
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: |
-  <center> <u> Cheatsheet </u></center>
-  <center> <p style = "color:#986753;"> template </p></center>
-date: "Last updated: `r format(Sys.time(), '%B %d, %Y')`"
-output: html_document
-css: css/ITN_style.css
----
-
-```{r setup, include=FALSE}
-knitr::opts_chunk$set(echo = TRUE)
-```
-
-
-## R Markdown
-
-<input type="checkbox"> step
-
-<input type="checkbox"> step
-
-
-[this is a link](https://www.itcrtraining.org/)
-
-::: {.warning}
-warning test
-:::
-
-:::{.github_button}
-<a href="http://stackoverflow.com"> Use this template</a>
-:::
-
-<github_button> Use this template </github_button>
-
-<center>
-<a href="https://ottrproject.org">
-  <img src="css/images/basic_otter_water.png" width = 30%>
-</a>
-</center>
diff --git a/ottr_course.Rmd b/ottr_course.Rmd
index 397843d..b3651b3 100644
--- a/ottr_course.Rmd
+++ b/ottr_course.Rmd
@@ -40,3 +40,11 @@ ottrpal::borrow_chapter(
  ottrpal::borrow_chapter(   
    doc_path = "chunks/secrets.md")
 ```
+
+```{r, echo=FALSE, results='asis'}
+ottrpal::borrow_chapter(
+  doc_path = "chunks/create_ottr_footer.md",
+  tag_replacement = list(
+    "{AUTHORS}" = "Kate Isaac wrote the content and created the original styling, Carrie Wright did the css styling and Carrie Wright and Candace Savonen did the publishing engineering for the cheatsheet."
+    ))
+```
diff --git a/ottr_quarto_course.Rmd b/ottr_quarto_course.Rmd
index d123c02..3040709 100644
--- a/ottr_quarto_course.Rmd
+++ b/ottr_quarto_course.Rmd
@@ -45,3 +45,10 @@ ottrpal::borrow_chapter(
 ```
 
 
+```{r, echo=FALSE, results='asis'}
+ottrpal::borrow_chapter(
+  doc_path = "chunks/create_ottr_footer.md",
+  tag_replacement = list(
+    "{AUTHORS}" = "Kate Isaac wrote the content and created the original styling, Carrie Wright did the css styling and Carrie Wright and Candace Savonen did the publishing engineering for the cheatsheet."
+    ))
+```
diff --git a/ottr_quarto_website.Rmd b/ottr_quarto_website.Rmd
index 677b6c5..91dbf68 100644
--- a/ottr_quarto_website.Rmd
+++ b/ottr_quarto_website.Rmd
@@ -40,3 +40,11 @@ ottrpal::borrow_chapter(
  ottrpal::borrow_chapter(   
    doc_path = "chunks/secrets.md")
 ```
+
+```{r, echo=FALSE, results='asis'}
+ottrpal::borrow_chapter(
+  doc_path = "chunks/create_ottr_footer.md",
+  tag_replacement = list(
+    "{AUTHORS}" = "Kate Isaac wrote the content and created the original styling, Carrie Wright did the css styling and Carrie Wright and Candace Savonen did the publishing engineering for the cheatsheet."
+    ))
+```
diff --git a/ottr_website.Rmd b/ottr_website.Rmd
index 6b87aa9..fbac862 100644
--- a/ottr_website.Rmd
+++ b/ottr_website.Rmd
@@ -41,3 +41,11 @@ ottrpal::borrow_chapter(
  ottrpal::borrow_chapter(   
    doc_path = "chunks/secrets.md")
 ```
+
+```{r, echo=FALSE, results='asis'}
+ottrpal::borrow_chapter(
+  doc_path = "chunks/create_ottr_footer.md",
+  tag_replacement = list(
+    "{AUTHORS}" = "Kate Isaac wrote the content and created the original styling, Carrie Wright did the css styling and Carrie Wright and Candace Savonen did the publishing engineering for the cheatsheet."
+    ))
+```
diff --git a/resources/dictionary.txt b/resources/dictionary.txt
index df62db3..0457b39 100644
--- a/resources/dictionary.txt
+++ b/resources/dictionary.txt
@@ -5,6 +5,7 @@ custimization
 cwrigh
 Dockerfile
 Dockerhub
+ejs
 favicon
 GH
 GIFs
@@ -13,6 +14,7 @@ github
 GitHub
 HTTPS
 ITN
+itcr
 ITCR
 lightblue
 lightgreen
@@ -28,6 +30,7 @@ reposting
 repurpose
 subdir
 Substack
+toc
 th
 tibble
 TiKTok
@@ -38,3 +41,4 @@ Bootstap
 glyphicons
 repo
 RStudio
+yml
diff --git a/resources/exclude_files.txt b/resources/exclude_files.txt
index 05ffc9a..7a579a5 100644
--- a/resources/exclude_files.txt
+++ b/resources/exclude_files.txt
@@ -3,6 +3,7 @@ docs/*
 style-sets/*
 manuscript/*
 CONTRIBUTING.md
+CONTRIBUTING.Qmd
 LICENSE.md
 code_of_conduct.md
 README.md
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..1812c01
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,39 @@
+
+/* To add some space below the navigation bar */
+
+ body {
+  margin-top: 100px;
+}
+
+
+/* add some color - if you want color behind a major point on your website */
+
+.banner_color {
+  background-color: lightblue;
+  font-weight:bold;
+
+}
+
+/* Style buttons - if you want some text centered and bolded */
+
+.center {
+  font-weight:bold;
+  text-align: center;
+}
+
+/* Style buttons - if you want to have a button */
+.btn {
+  background-color: DodgerBlue;
+  border: none;
+  color: white;
+  padding: 8px 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* Darker background on mouse-over */
+.btn:hover {
+  background-color: RoyalBlue;
+}
+
+


Reviews:
user: login: cansavvy
body: This looks beautiful! Super exciting. Just one minor comment and then lets merge!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T13:11:37Z
user: login: carriewright11
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-25T17:32:33Z

Review comments:
diff_hunk: @@ -12,10 +12,18 @@ on:
     branches: [ main ]
     paths:
       - '**.Rmd'
+      - '**.Qmd'
path: .github/workflows/render-site.yml
user: login: cansavvy
body: We might want to look into if this is case sensitive. To be safe could just add both here: 
```suggestion
      - '**.Qmd'
      - '**.qmd'
```
created_at: 2025-03-25T13:09:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,10 +12,18 @@ on:
     branches: [ main ]
     paths:
       - '**.Rmd'
+      - '**.Qmd'
path: .github/workflows/render-site.yml
user: login: cansavvy
body: Same comment about 'Rmd' and 'rmd' of course. 
created_at: 2025-03-25T13:11:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,10 +12,19 @@ on:
     branches: [ main ]
     paths:
       - '**.Rmd'
path: .github/workflows/render-site.yml
user: login: carriewright11
body: ```suggestion
      - '**.Rmd'
      - '**.rmd'
```
created_at: 2025-03-25T17:32:33Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-24T18:01:54Z
body: No broken url errors! :tada:
_Comment updated at 2025-03-25-17:34:20 with changes from ceae01db77bf01f61fed0c86f8e7cb75a8be673b_
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-24T18:01:56Z
body: No spelling errors! :tada:
_Comment updated at 2025-03-25-17:34:28 with changes from ceae01db77bf01f61fed0c86f8e7cb75a8be673b_
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-24T18:03:19Z
body: :eyes: Quick [preview of website here](https://htmlpreview.github.io/?https://raw.githubusercontent.com/jhudsl/cheatsheets/preview-24/docs/index.html) \*
:microscope: Comprehensive [download of the website here](https://github.com/jhudsl/cheatsheets/raw/preview-24/website-preview.zip)

\* note not all html features will be properly displayed in the "quick preview" but it will give you a rough idea.

_Updated at 2025-03-25 with changes from the latest commit ceae01db77bf01f61fed0c86f8e7cb75a8be673b_
author_association: CONTRIBUTOR