Merge pull request #51 from Bioconductor/align-with-bioconductor.org

Align styling with Bioconductor.org

Author: mblue9

_quarto.yml

@@ -3,27 +3,33 @@ project:
   output-dir: docs
   render:
     - "*.qmd"
-website:
-  navbar:
-    logo: "images/bioconductor-logo.svg"
-    logo-href: "https://bioconductor.org"
-    tools:
-      - icon: github
-        href: https://github.com/Bioconductor/bioconductor-training
-    left:
-      - text: "Home"
-        href: index.qmd
-      - text: "Resources"
-        href: resources/resources.qmd
-      - text: "Carpentry"
-        menu:
-          - text: "Overview"
-            href: carpentry/index.qmd
-          - text: "Instructors"
-            href: carpentry/instructors.qmd
-          - text: "Workshops"
-            href: carpentry/workshops.qmd
+    
 format:
   html:
     embed-resources: false
-    css: styles.css
+    theme: none
+    page-layout: custom
+    include-before-body:
+      - layouts/components/announcement.html
+      - layouts/components/header.html
+      - layouts/components/container-start.html
+    include-after-body:
+      - layouts/components/container-end.html
+      - layouts/components/footer.html
+    css: 
+      - "style/base/colors.css"
+      - "style/base/fonts.css"
+      - "style/base/layout.css"
+      - "style/base/typography.css"
+      - "style/components/blockquote.css"
+      - "style/components/breadcrumbs.css"
+      - "style/components/buttons.css"
+      - "style/components/code.css"
+      - "style/components/dropdown.css"
+      - "style/components/gallery.css"
+      - "style/components/lists.css"
+      - "style/components/tables.css"
+      - "style/sections/announcement.css"
+      - "style/sections/header.css"
+      - "style/sections/footer.css"
+      - "style/sections/sidebar.css"

carpentry/index.qmd

@@ -1,16 +1,18 @@
 ---
-title: "Bioconductor Carpentry"
+title: ""
 format: html
 editor: visual
 ---
 
+# Bioconductor Carpentry
+
 Bioconductor is a member of [The Carpentries](https://carpentries.org/), a global community focused on teaching foundational coding and data science skills. Our membership supports community members in earning Carpentries instructor certification, developing Bioconductor-specific training materials, and enabling our certified instructors to teach Carpentry workshops at Bioconductor events and beyond. While not an official Carpentries program like Software, Data, or Library Carpentry, Bioconductor Carpentry is aligned in spirit with The Carpentries and benefits from a close association.
 
 Coordinated through the University of Limerick (UL) by Dr. Maria Doyle, Bioconductor Community Manager and [ELIXIR Ireland](https://elixir-ireland.ie/) Training Coordinator, this program organises workshops — including upcoming initiatives planned for Africa and Latin America — supports instructors, and manages logistics to foster essential data science skills and collaborative learning opportunities across the life sciences community.
 
 For more information, you can:
 
-- [Express interest](https://forms.gle/MBULoxQGn9fMTK4v8) in becoming a certified Carpentries instructor through our Train-the-Trainer program (when places are available).  
-- [Request a Bioconductor workshop](https://forms.gle/PGGRqFbmLrzTQmTY7) at your institute; please note that instructor expenses will typically be required unless local instructors are available and willing to volunteer.  
+-   [Express interest](https://forms.gle/MBULoxQGn9fMTK4v8) in becoming a certified Carpentries instructor through our Train-the-Trainer program (when places are available).\
+-   [Request a Bioconductor workshop](https://forms.gle/PGGRqFbmLrzTQmTY7) at your institute; please note that instructor expenses will typically be required unless local instructors are available and willing to volunteer.\
 -   Visit our [Instructors](instructors.qmd) and [Workshops](workshops.qmd) pages for current details.
 -   Explore the [blog post](https://blog.bioconductor.org/posts/2022-07-12-carpentries-membership/) that outlines Bioconductor’s Carpentries membership or browse other [Carpentries-related posts](https://blog.bioconductor.org/index.html#category=Carpentries).

carpentry/instructors.qmd

@@ -1,14 +1,17 @@
 ---
-title: "Instructors"
+title: ""
 format: html
 page-layout: full
 editor: visual
 execute:
   message: false
   warning: false
   echo: false
+  cache: true
 ---
 
+# Instructors
+
 ```{r}
 # Load necessary libraries
 library(readr)
@@ -258,7 +261,7 @@ reactable(
 ```
 
 :::: footer-timestamp
-::: {style="text-align: center; font-size: 0.9em; color: var(--neutral-n200); margin-top: 20px; padding-top: 10px;"}
+::: {style="text-align: center; font-size: 0.9em; color: var(--neutral-n50); margin-top: 20px; padding-top: 10px;"}
 ```         
 Last rendered on: `r format(Sys.Date(), "%Y-%m-%d")`
 ```

carpentry/workshops.qmd

@@ -1,14 +1,17 @@
 ---
-title: "Workshops"
+title: ""
 format: html
 page-layout: full
 editor: visual
 execute:
   message: false
   warning: false
   echo: false
+  cache: true
 ---
 
+# Workshops
+
 ```{r}
 # Load necessary libraries
 library(readr)
@@ -240,7 +243,7 @@ workshops %>%
 ```
 
 :::: footer-timestamp
-::: {style="text-align: center; font-size: 0.9em; color: var(--neutral-n200); margin-top: 20px; padding-top: 10px;"}
+::: {style="text-align: center; font-size: 0.9em; color: var(--neutral-n50); margin-top: 20px; padding-top: 10px;"}
 ```         
 Last rendered on: `r format(Sys.Date(), "%Y-%m-%d")`
 ```

images/icons/slack.png

@@ -1,7 +1,6 @@
 ---
 title: ""
 format: html
-page-layout: full
 ---
 
-{{< include README.md >}}
+{{< include README.md >}}

images/icons/svgs/arrow-circle-right-white.svg

@@ -0,0 +1,2 @@
+<div class="announcement announcement-brand">
+</div>

images/icons/svgs/bluesky.svg

@@ -0,0 +1 @@
+</div>

images/icons/svgs/linkedin.svg

@@ -0,0 +1 @@
+<div class="container">

images/icons/svgs/mastodon.svg

@@ -0,0 +1,15 @@
+<footer>
+  <div class="footer-container">
+    <div class="footer-content">
+      <p>© 2003 - 2024 Bioconductor | Join the Bioconductor Community</p>
+      <div class="footer-socials">
+        <a href="https://slack.bioconductor.org/" target="_blank"><img alt="Slack Logo" src="/images/icons/slack.png" /></a>
+        <a href="https://www.youtube.com/user/bioconductor" target="_blank"><img alt="YouTube Logo" src="/images/icons/svgs/youtube.svg" /></a>
+        <a href="https://www.linkedin.com/company/bioconductor/" target="_blank"><img alt="LinkedIn Logo" src="/images/icons/svgs/linkedin.svg" /></a>
+        <a href="https://bsky.app/profile/bioconductor.bsky.social" target="_blank"><img alt="Bluesky Logo" src="/images/icons/svgs/bluesky.svg" /></a>
+        <a href="https://genomic.social/@bioconductor" target="_blank"><img alt="Mastodon Logo" src="/images/icons/svgs/mastodon.svg" /></a>
+        <a href="https://blog.bioconductor.org/" target="_blank"><img alt="Blog Logo" src="/images/icons/svgs/arrow-circle-right-white.svg" /></a>
+      </div>
+    </div>
+  </div>
+</footer>

images/icons/svgs/youtube.svg

@@ -0,0 +1,40 @@
+<header id="site-masthead" class="site-masthead">
+  <div class="header-size">
+    <!-- Logo Section -->
+    <div class="header-logo">
+      <a href="https://bioconductor.org">
+        <img
+          src="/images/bioconductor-logo.svg"
+          class="masthead-logo"
+          alt="Bioconductor Training Home"
+        />
+      </a>
+    </div>
+
+    <!-- Navigation Section -->
+    <nav class="header-nav">
+      <div class="nav-links">
+        <a class="format-bold mobile-link" href="/">Home</a>
+        <a class="format-bold mobile-link" href="/resources/resources.html">Resources</a>
+        <a class="format-bold mobile-link" href="/workshops/2025-03-Nairobi/index.html">Workshops</a>
+        <div class="dropdown">
+          <a class="format-bold mobile-link" href="/carpentry/index.html">Carpentry</a>
+          <div class="dropdown-content">
+            <a href="/carpentry/instructors.html">Instructors</a>
+            <a href="/carpentry/workshops.html">Workshops</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Mobile Navigation -->
+    <div class="nav-mobile">
+      <h6>Menu</h6>
+      <div class="hamburger">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+      </div>
+    </div>
+  </div>
+</header>

index.qmd

@@ -0,0 +1,27 @@
+<div class="sidebar-box">
+  <!-- Optional: Sidebar header -->
+  <div class="sidebar-box-header">
+    <h2>Navigation</h2>
+  </div>
+
+  <!-- Navigation links -->
+  <nav>
+    <div>
+      <a href="/resources/resources.html" class="sidebar-nav-button">Resources</a>
+    </div>
+    <div>
+      <a href="/workshops/" class="sidebar-nav-button">Workshops</a>
+    </div>
+    <div>
+      <a href="/carpentry/index.html" class="sidebar-nav-button">Carpentry</a>
+    </div>
+    <div>
+      <a href="/about/index.html" class="sidebar-nav-button">About Us</a>
+    </div>
+  </nav>
+
+  <!-- Optional: Bottom note -->
+  <div class="bottom-note">
+    <p>Learn more about Bioconductor and how you can contribute!</p>
+  </div>
+</div>

layouts/components/announcement.html

@@ -1,5 +1,5 @@
 ---
-title: "Resources"
+title: ""
 format: html
 editor: visual
 execute:
@@ -8,6 +8,8 @@ execute:
   echo: false
 ---
 
+# Resources
+
 The table below lists various resources for learning and teaching Bioconductor. If you're looking for more information or have updates, feel free to suggest changes via issues or contact us as described [here](../index.qmd).
 
 ```{r}
@@ -30,16 +32,13 @@ read_resources <- function(file_path) {
 
 # Function to convert all markdown links in a string to HTML links
 convert_markdown_links <- function(text) {
-  # Replace all [text](url) with <a href='url' target='_blank'>text</a>
-  # Ensure that the URL doesn't capture trailing characters like parentheses
   gsub("\\[(.*?)\\]\\((https?://[a-zA-Z0-9./?=_-]+)\\)", "<a href='\\2' target='_blank'>\\1</a>", text)
 }
 
 # Function to clean text by removing surrounding quotes
 clean_text <- function(text) {
   text <- replace_na_with_empty(text)
-  # Remove starting and ending double quotes if present
-  text <- gsub('^"(.*)"$', '\\1', text)
+  text <- gsub('^"(.*)"$', '\\1', text) # Remove starting and ending double quotes if present
   return(text)
 }
 
@@ -51,13 +50,10 @@ replace_na_with_empty <- function(x) {
 # Load the data from the TSV file
 resources_data <- read_resources("resources-table.tsv")
 
-# Define styles for category and resource rows with reduced padding and smaller font
-category_style <- "background-color: #f0f0f0; font-weight: bold; border-bottom: 2px solid #ddd; font-size: 12px;"  # Lighter grey and smaller font
-resource_style <- "background-color: #ffffff !important; border-bottom: 1px solid #ddd; font-size: 12px;"  # Smaller font size for rows
+# Simplified styles for category rows
+category_style <- "background-color: #f0f0f0; font-weight: bold;"
 
 # Define column widths using <colgroup>
-# First column (Resource): 25%
-# Remaining 6 columns: (75% / 6) = 12.5% each
 colgroup_html <- paste0(
   "<colgroup>",
   "<col style='width: 25%;'>",      # Resource column
@@ -72,20 +68,20 @@ colgroup_html <- paste0(
 
 # Initialize HTML table with <colgroup> and headers
 html_table <- paste0(
-  "<table data-quarto-disable-processing='true' style='border-collapse: collapse; width: 100%; border: 1px solid #ddd;'>", # Add data-quarto-disable-processing attribute
+  "<table data-quarto-disable-processing='true' class='full-width'>", # Use class 'full-width' from tables.css
   colgroup_html,  # Insert the colgroup here
   "<thead>",
-  "<tr style='background-color: #f6f8fa; font-weight: bold; border-bottom: 2px solid #ddd; font-size: 12px;'>",  # Reduced font size for headers
-  "<th rowspan='2' style='border-right: 1px solid #ddd; padding: 4px;'>Resource</th>",
-  "<th colspan='6' style='padding: 4px; text-align: center;'>Goals</th>",
+  "<tr>",
+  "<th rowspan='2'>Resource</th>",
+  "<th colspan='6'>Goals</th>",
   "</tr>",
-  "<tr style='background-color: #f6f8fa; font-weight: bold; border-bottom: 2px solid #ddd; font-size: 12px;'>",
-  "<th style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>Acquire the Fundamentals (novice R)</th>",
-  "<th style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>Acquire the Fundamentals (experienced R)</th>",
-  "<th style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>Analyze Your Data</th>",
-  "<th style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>Connect with the Community</th>",
-  "<th style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>Train Others</th>",
-  "<th style='padding: 4px; text-align: center;'>Develop a Package</th>",
+  "<tr>",
+  "<th>Acquire the Fundamentals (novice R)</th>",
+  "<th>Acquire the Fundamentals (experienced R)</th>",
+  "<th>Analyze Your Data</th>",
+  "<th>Connect with the Community</th>",
+  "<th>Train Others</th>",
+  "<th>Develop a Package</th>",
   "</tr>",
   "</thead><tbody>"
 )
@@ -107,7 +103,7 @@ for (i in 1:nrow(resources_data)) {
     html_table <- paste0(
       html_table,
       "<tr style='", category_style, "'>",
-      "<td colspan='7' style='padding: 4px;'>", 
+      "<td colspan='7'>", 
       category_display, 
       "</td></tr>"
     )
@@ -122,14 +118,14 @@ for (i in 1:nrow(resources_data)) {
   
   # Construct the resource row with styles and aligned cells
   resource_row <- paste0(
-    "<tr style='", resource_style, "'>",
-    "<td style='border-right: 1px solid #ddd; padding: 4px;'>", resource_display, "</td>",
-    "<td style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>", replace_na_with_empty(row[[3]]), "</td>",
-    "<td style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>", replace_na_with_empty(row[[4]]), "</td>",
-    "<td style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>", replace_na_with_empty(row[[5]]), "</td>",
-    "<td style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>", replace_na_with_empty(row[[6]]), "</td>",
-    "<td style='border-right: 1px solid #ddd; padding: 4px; text-align: center;'>", replace_na_with_empty(row[[7]]), "</td>",
-    "<td style='padding: 4px; text-align: center;'>", replace_na_with_empty(row[[8]]), "</td>",
+    "<tr>",
+    "<td>", resource_display, "</td>",
+    "<td>", replace_na_with_empty(row[[3]]), "</td>",
+    "<td>", replace_na_with_empty(row[[4]]), "</td>",
+    "<td>", replace_na_with_empty(row[[5]]), "</td>",
+    "<td>", replace_na_with_empty(row[[6]]), "</td>",
+    "<td>", replace_na_with_empty(row[[7]]), "</td>",
+    "<td>", replace_na_with_empty(row[[8]]), "</td>",
     "</tr>"
   )
   
@@ -142,4 +138,4 @@ html_table <- paste0(html_table, "</tbody></table>")
 
 # Output the HTML table using htmltools::HTML()
 HTML(html_table)
-```
+```