fix: clean up borked logo paths

.github/workflows/gh-pages.yml

@@ -11,13 +11,13 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
         with:
           submodules: true # Fetch Hugo themes (true OR recursive)
           fetch-depth: 1 # Fetch all history for .GitInfo and .Lastmod
 
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
+        uses: peaceiris/actions-hugo@v3
         with:
           hugo-version: "latest"
           extended: true
@@ -26,14 +26,14 @@ jobs:
         run: hugo --buildFuture --minify
 
       - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         if: github.ref == 'refs/heads/main'
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./public
 
       - name: Upload page build as artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         if: github.ref != 'refs/heads/main'
         with:
           name: scverse.github.io

.pre-commit-config.yaml

@@ -6,3 +6,14 @@ repos:
         additional_dependencies:
           - prettier
           - prettier-plugin-go-template
+  - repo: https://github.com/ericmjl/webp-pre-commit
+    rev: v0.0.12
+    hooks:
+      # Convert only blog images
+      - id: convert-to-webp
+        files: ^static/img/blog/.*\.(png|jpe?g|gif|bmp|tiff)$
+  - repo: https://github.com/shssoichiro/oxipng
+    rev: v10.2.0
+    hooks:
+      - id: oxipng
+        args: [--strip, safe]

assets/main.scss

@@ -95,45 +95,38 @@ $additionalInfoColor: #666666;
     }
 }
 
-@mixin button-icon {
-    display: inline-block;
-    height: 1rem;
-    width: 1rem;
-    content: "";
-    padding: 0;
-    margin: 0;
+@each $icon in zulip, discourse, bluesky {
+    .i-#{$icon}::before {
+        display: inline-block;
+        height: 1rem;
+        width: 1rem;
+        content: "";
+        padding: 0;
+        margin: 0;
+        background: url("/img/icons/#{$icon}.svg") no-repeat center / contain;
+        transition:
+            background 200ms ease-out,
+            filter 200ms ease-out;
+        opacity: 0.6666; // text color is #555
+        .card:hover & {
+            opacity: 1;
+        }
+    }
 }
 
-.i-zulip::before {
-    background: url("/img/icons/zulip.svg") no-repeat top left;
-    transition: background 200ms ease-out;
-    @include button-icon;
-}
-.i-discourse::before {
-    background: url("/img/icons/discourse.svg") no-repeat top left;
-    transition: background 200ms ease-out;
-    @include button-icon;
-}
 .i-xcom::before {
     content: "𝕏";
     font-weight: 900;
-    transition: background 200ms ease-out;
-}
-.i-bluesky::before {
-    background: center / contain no-repeat url("/img/icons/bluesky.svg");
-    transition: all 200ms ease-out;
-    @include button-icon;
+    transition:
+        background 200ms ease-out,
+        filter 200ms ease-out;
 }
 
 .card:hover {
-    .i-zulip::before {
-        background: url("/img/icons/zulip_inv.svg") no-repeat top left;
-    }
-    .i-discourse::before {
-        background: url("/img/icons/discourse_inv.svg") no-repeat top left;
-    }
+    // Not discord, since it’s light-colored
+    .i-zulip::before,
     .i-bluesky::before {
-        filter: invert(1);
+        filter: invert(100%);
     }
 }
 
@@ -143,27 +136,45 @@ $additionalInfoColor: #666666;
     border: none;
 }
 
-#badges .btn-github:hover {
+#join-content .card {
+    h5 {
+        font-weight: 700;
+    }
+    transition: all 200ms ease-in-out;
+    color: $navtext;
+    &:hover {
+        background: #78cbd9 !important;
+        transform: scale(1.02);
+    }
+}
+
+#badges .btn-github:hover,
+#join-content .card#github:hover {
     background-color: $github-black !important;
     color: white !important;
 }
-#badges .btn-discourse:hover {
+#badges .btn-discourse:hover,
+#join-content .card#discourse:hover {
     background-color: $discourse-yellow !important;
     color: black !important;
 }
-#badges .btn-zulip:hover {
+#badges .btn-zulip:hover,
+#join-content .card#zulip:hover {
     background-color: $zulip-blue !important;
     color: white !important;
 }
-#badges .btn-twitter:hover {
+#badges .btn-twitter:hover,
+#join-content .card#twitter:hover {
     background-color: $twitter-blue !important;
     color: white !important;
 }
-#badges .btn-bluesky:hover {
+#badges .btn-bluesky:hover,
+#join-content .card#bluesky:hover {
     background-color: $bluesky-blue !important;
     color: white !important;
 }
-#badges .btn-youtube:hover {
+#badges .btn-youtube:hover,
+#join-content .card#youtube:hover {
     background-color: $youtube-red !important;
     color: white !important;
 }
@@ -300,7 +311,7 @@ body {
 #scverse-logo {
     width: 3rem;
     height: 3rem;
-    background: url("/img/icons/scverse_bw_logo.svg") no-repeat top left;
+    background: url("/img/icons/scverse-bw-logo.svg") no-repeat top left;
     &:hover {
         transform: scale(1.1);
     }
@@ -730,43 +741,6 @@ body {
     }
 }
 
-#join-content {
-    .card {
-        h5 {
-            font-weight: 700;
-        }
-        transition: all 200ms ease-in-out;
-        color: $navtext;
-        &:hover {
-            background: #78cbd9 !important;
-            transform: scale(1.02);
-        }
-        &#github:hover {
-            color: white;
-            background-color: $github-black !important;
-        }
-        &#twitter:hover {
-            color: white;
-            background-color: $twitter-blue !important;
-        }
-        &#zulip:hover {
-            color: white;
-            background-color: $zulip-blue !important;
-        }
-        &#discourse:hover {
-            background-color: $discourse-yellow !important;
-        }
-        &#youtube:hover {
-            color: white;
-            background-color: $youtube-red !important;
-        }
-        &#bluesky:hover {
-            color: white;
-            background-color: $bluesky-blue !important;
-        }
-    }
-}
-
 #page-content {
     display: flex;
     flex-direction: column;

content/blog/2024-conference-summary.md

@@ -6,7 +6,7 @@ author = "Roshan Sharma"
 draft = false
 +++
 
-<img src="/img/blog/conference2024.png" style="max-width: 100%;" alt="Group photo from the scverse conference" />
+<img src="/img/blog/conference2024.webp" style="max-width: 100%;" alt="Group photo from the scverse conference" />
 
 
 
@@ -25,15 +25,15 @@ The conference had 6 keynotes from leaders of the field and founders of Scanpy/s
 
 You can learn more about what each of our speakers discussed by checking out the amazing [keynote sketches](https://lazappi.id.au/posts/2024-09-15-scverse-conference/) made by conference attendee Luke Zappia.
 
-<img src="/img/blog/conference2024-keynote.png" style="max-width: 100%;" alt="Keynote speakers and slides" />
+<img src="/img/blog/conference2024-keynote.webp" style="max-width: 100%;" alt="Keynote speakers and slides" />
 
 ### Short talks
 
 The conference also featured several 15-minute short talks, each followed by a Q\&A session. These talks were carefully selected from 72 abstract submissions based on their relevance, impact, and contribution to the field. The topics spanned a wide range of computational techniques in single-cell genomics, including methods for scaling analyses to millions of cells, integrating single-cell data with dynamic models to develop *velocyto*\-like metrics, user-friendly exploration of epigenomic data, and innovative approaches for representing and analyzing spatial data.
 
 The presenters were primarily graduate students and postdoctoral researchers from various academic labs. We believe that providing opportunities for junior scientists to showcase their work and receive constructive feedback is crucial to fostering their growth. This format also allowed the audience to delve into the finer details of each method, complementing the broader discussions. Each short talk sparked extensive conversations, a testament to the effectiveness of this approach. Many attendees expressed their appreciation (some vignettes below) for the inclusion of these talks, particularly for highlighting the contributions of early-career researchers and promoting their visibility within the community.
 
-<img src="/img/blog/conference2024-shorttalk.png" style="max-width: 100%;" alt="Short talks and presenters" />
+<img src="/img/blog/conference2024-shorttalk.webp" style="max-width: 100%;" alt="Short talks and presenters" />
 
 ### Workshops
 
@@ -43,19 +43,19 @@ The workshops covered a wide range of topics, from live-coding demonstrations an
 
 The workshops were widely regarded as one of the conference’s major highlights, as reflected in the enthusiastic feedback from participants (see examples below).
 
-<img src="/img/blog/conference2024-workshop.png" style="max-width: 100%;" alt="People participating in workshops" />
+<img src="/img/blog/conference2024-workshop.webp" style="max-width: 100%;" alt="People participating in workshops" />
 
 ### Poster session
 
 The conference also featured a poster session, where participants showcased their research and engaged in discussions with attendees. A total of 51 posters were presented during the two-hour session, providing ample opportunity for in-depth conversations and knowledge exchange.
 
-<img src="/img/blog/conference2024-poster.png" style="max-width: 100%;" alt="Posters and discussions" />
+<img src="/img/blog/conference2024-poster.webp" style="max-width: 100%;" alt="Posters and discussions" />
 
 ### Sponsor talks
 
 The conference would not have been possible without the generous support of our sponsors. We were honored to receive sponsorships from [CZI](https://chanzuckerberg.com/) (Diamond), [Immunai](https://www.immunai.com/) (Platinum), [Altos](https://www.altoslabs.com/) (Gold), [10x Genomics](https://www.10xgenomics.com/) (Gold), [tilDB](https://tiledb.com/) (Gold), [Lamin](https://lamin.ai/) (Silver), [Latch Bio](https://latch.bio/) (Silver), [Data Intuitive](https://www.data-intuitive.com/) (Silver) and [Boehringer-Ingelheim](https://www.boehringer-ingelheim.com/de) (Silver). As part of the sponsor engagement, 10x Genomics delivered a brief presentation on their latest initiatives, CZI hosted a workshop and gave a short talk, and Immunai presented their latest research. The conference also provided an excellent opportunity for participants to network with industry leaders, fostering collaboration and knowledge exchange.
 
-<img src="/img/blog/conference2024-sponsors.png" style="max-width: 100%;" alt="Logos of the conference sponsors" />
+<img src="/img/blog/conference2024-sponsors.webp" style="max-width: 100%;" alt="Logos of the conference sponsors" />
 
 ### Vignettes from participants
 

content/blog/2025-07-biomni.md

@@ -6,7 +6,7 @@ author = "scverse team & Biomni team"
 draft = false
 +++
 
-<img src="/img/blog/scverse_x_biomni_banner.png" style="max-width: 100%;" alt="scverse × Biomni partnership banner" />
+<img src="/img/blog/scverse_x_biomni_banner.webp" style="max-width: 100%;" alt="scverse × Biomni partnership banner" />
 
 Single-cell and spatial omics have unlocked unprecedented insights into cellular diversity, tissue architecture, and drug responses.
 Despite the remarkable progress in computational tools, the diversity and complexity of analyses can still pose challenges.
@@ -64,7 +64,7 @@ Instead of writing and debugging code across several libraries, you can now exec
 - [✓] Driver pathway identification (completed)
 - [✓] Generate comprehensive HTML report (completed)
 
-<img src="/img/blog/scverse_x_biomni_ui.png" style="max-width: 100%;" alt="Biomni interface" />
+<img src="/img/blog/scverse_x_biomni_ui.webp" style="max-width: 100%;" alt="Biomni interface" />
 
 Biomni has successfully completed these steps in around 20 minutes.
 It preprocesses the data, identifies 21 distinct cell types from 17,771 high-quality cells, and maps them across spatial axes with clear anterior-posterior and dorsal-ventral organization.

content/blog/2025-11-biocontextai.md

@@ -13,7 +13,7 @@ BioContextAI provides a community registry for Model Context Protocol (MCP) serv
 These are standardized tools that allow AI systems to access specialized databases and software.
 This project was recently published as a [Nature Biotechnology correspondence][Nature Biotechnology correspondence] and we are actively starting to explore and contribute scverse MCP servers.
 
-<img src="/img/blog/biocontextai_overview.png" style="max-width: 100%;" alt="BioContextAI overview" />
+<img src="/img/blog/biocontextai_overview.webp" style="max-width: 100%;" alt="BioContextAI overview" />
 
 ## What we're building
 

content/blog/2025-conference-summary.md

@@ -7,14 +7,14 @@ draft = false
 +++
 
 <figure style="margin: 1rem 0;">
-  <img src="/img/blog/conference2025/conference2025.jpg" style="max-width: 100%; border-radius: 8px;" alt="Group photo from the scverse conference 2025" />
+  <img src="/img/blog/conference2025/conference2025.webp" style="max-width: 100%; border-radius: 8px;" alt="Group photo from the scverse conference 2025" />
   <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">Attendees gather for a group photo at Stanford University</figcaption>
 </figure>
 
 The 2nd scverse conference at Stanford University, Palo Alto, California, on November 17-19, 2025 brought together developers and scientists from academia and industry to discuss the latest advances in computational tools and experimental techniques for single cell and spatial multi omics.
 
 <figure style="margin: 1rem 0;">
-  <img src="/img/blog/conference2025/conference2025-numbers.png" style="max-width: 100%; border-radius: 8px;" alt="Conference in numbers infographic" />
+  <img src="/img/blog/conference2025/conference2025-numbers.webp" style="max-width: 100%; border-radius: 8px;" alt="Conference in numbers infographic" />
   <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">The conference in numbers</figcaption>
 </figure>
 
@@ -31,7 +31,7 @@ The conference in numbers:
 The conference was sold out one month in advance!
 
 <figure style="margin: 1rem 0;">
-  <img src="/img/blog/conference2025/conference2025-sponsors.png" style="max-width: 100%; border-radius: 8px;" alt="Sponsors and travel awards" />
+  <img src="/img/blog/conference2025/conference2025-sponsors.webp" style="max-width: 100%; border-radius: 8px;" alt="Sponsors and travel awards" />
   <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">Our generous sponsors and travel award recipients</figcaption>
 </figure>
 
@@ -43,7 +43,7 @@ Thanks to our generous sponsors, the scverse conference was also able to provide
 ### Keynote Speakers
 
 <figure style="margin: 1rem 0; text-align: center;">
-  <img src="/img/blog/conference2025/conference2025-keynote.jpg" style="max-width: 80%; border-radius: 8px;" alt="John Marioni keynote" />
+  <img src="/img/blog/conference2025/conference2025-keynote.webp" style="max-width: 80%; border-radius: 8px;" alt="John Marioni keynote" />
   <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">John Marioni, Genentech</figcaption>
 </figure>
 
@@ -79,11 +79,11 @@ The second day broadened the scope to RNA splicing, spatial technologies, and ec
 
 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;">
   <figure style="margin: 0;">
-    <img src="/img/blog/conference2025/conference2025-shorttalk.jpg" style="width: 100%; height: 300px; object-fit: cover; object-position: 25% 80%; border-radius: 8px;" alt="Short talks presenter" />
+    <img src="/img/blog/conference2025/conference2025-shorttalk.webp" style="width: 100%; height: 300px; object-fit: cover; object-position: 25% 80%; border-radius: 8px;" alt="Short talks presenter" />
     <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">Short talk presentations</figcaption>
   </figure>
   <figure style="margin: 0;">
-    <img src="/img/blog/conference2025/conference2025-day2.jpg" style="width: 100%; height: 300px; object-fit: cover; border-radius: 8px;" alt="Panel discussion" />
+    <img src="/img/blog/conference2025/conference2025-day2.webp" style="width: 100%; height: 300px; object-fit: cover; border-radius: 8px;" alt="Panel discussion" />
     <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">Agentic workflows panel discussion</figcaption>
   </figure>
 </div>
@@ -103,11 +103,11 @@ The discussion revolved around diverse topics, from technical discussions on [Mo
 
 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;">
   <figure style="margin: 0;">
-    <img src="/img/blog/conference2025/conference2025-workshop1.jpg" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;" alt="Workshop session" />
+    <img src="/img/blog/conference2025/conference2025-workshop1.webp" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;" alt="Workshop session" />
     <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">Participants of the Biohub Workshop</figcaption>
   </figure>
   <figure style="margin: 0;">
-    <img src="/img/blog/conference2025/conference2025-workshop2.jpg" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;" alt="Workshop session" />
+    <img src="/img/blog/conference2025/conference2025-workshop2.webp" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;" alt="Workshop session" />
     <figcaption style="text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.5rem;">Interactive session at Biohub</figcaption>
   </figure>
 </div>
@@ -127,10 +127,10 @@ The Tahoe workshop emphasized computational scalability and the emerging role of
 ### Poster Session
 
 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;">
-  <img src="/img/blog/conference2025/conference2025-poster1.jpg" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
-  <img src="/img/blog/conference2025/conference2025-poster2.jpg" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
-  <img src="/img/blog/conference2025/conference2025-poster3.jpg" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
-  <img src="/img/blog/conference2025/conference2025-poster4.jpg" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
+  <img src="/img/blog/conference2025/conference2025-poster1.webp" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
+  <img src="/img/blog/conference2025/conference2025-poster2.webp" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
+  <img src="/img/blog/conference2025/conference2025-poster3.webp" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
+  <img src="/img/blog/conference2025/conference2025-poster4.webp" style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px;" alt="Poster session" />
 </div>
 
 During the two days of the conference, a total of 88 posters were presented, where participants had the chance to engage in deeper discussions about their work across the scverse ecosystem.